From 6772831200d14c2436aea2d0c837f40dbf12156f Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Sun, 26 Sep 2021 13:11:47 +0200 Subject: Prepare Web API section for Markdown conversion (#2464) * Remove summary classes and ids * Remove unecessary hidden * Remove useless span filled with useless attributes / ids * Remove useless font * Remove notranslate * Remove id in other elements than headings * Remove name attributes * Remove
 for JS w/ language-js class

* Remove 
 for HTML w/ language-html class

* Remove 
 for other lang w/ language-* class

* Rm highlighted line in code samples

* fix links, internal, external, absolute URLs

* missing file from last commit

* Fix styles errors apart from table + some classes

* Fix notes and warnings (+ some other :x)

* fix typo during merge which broke a doc

* aand forgot a conflict

* fix remaining classes of errors except dls and images

* Fix dls

* Fix images (deki/mozillademos) and remaining style issues

* Remove script tag from svg file

* Remove script tag from svg fileS

* Compress SVG files for CI
---
 files/fr/web/api/abortsignal/index.html            |   10 +-
 .../web/api/analysernode/analysernode/index.html   |    8 +-
 files/fr/web/api/analysernode/fftsize/index.html   |    4 +-
 .../api/analysernode/frequencybincount/index.html  |    6 +-
 .../analysernode/getbytefrequencydata/index.html   |    6 +-
 .../analysernode/getbytetimedomaindata/index.html  |   12 +-
 .../analysernode/getfloatfrequencydata/index.html  |    2 +-
 files/fr/web/api/analysernode/index.html           |   13 +-
 .../fr/web/api/analysernode/maxdecibels/index.html |    2 +-
 .../fr/web/api/analysernode/mindecibels/index.html |    2 +-
 .../analysernode/smoothingtimeconstant/index.html  |    4 +-
 files/fr/web/api/animation/index.html              |    2 +-
 .../api/animationevent/animationevent/index.html   |    4 +-
 files/fr/web/api/animationevent/index.html         |    2 +-
 .../api/animationevent/pseudoelement/index.html    |    2 +-
 files/fr/web/api/atob/index.html                   |   10 +-
 files/fr/web/api/attr/index.html                   |   20 +-
 files/fr/web/api/attr/localname/index.html         |    2 +-
 files/fr/web/api/attr/namespaceuri/index.html      |    6 +-
 files/fr/web/api/attr/prefix/index.html            |    2 +-
 .../fr/web/api/audiobuffer/audiobuffer/index.html  |    8 +-
 .../web/api/audiobuffer/copyfromchannel/index.html |    4 +-
 .../web/api/audiobuffer/copytochannel/index.html   |    4 +-
 files/fr/web/api/audiobuffer/duration/index.html   |    4 +-
 .../web/api/audiobuffer/getchanneldata/index.html  |   10 +-
 files/fr/web/api/audiobuffer/index.html            |   64 +-
 files/fr/web/api/audiobuffer/length/index.html     |    4 +-
 .../api/audiobuffer/numberofchannels/index.html    |    4 +-
 files/fr/web/api/audiobuffer/samplerate/index.html |    4 +-
 .../api/audiobuffersourcenode/buffer/index.html    |    6 +-
 .../api/audiobuffersourcenode/detune/index.html    |    4 +-
 files/fr/web/api/audiobuffersourcenode/index.html  |   96 +-
 .../web/api/audiobuffersourcenode/loop/index.html  |    6 +-
 .../api/audiobuffersourcenode/loopend/index.html   |    4 +-
 .../api/audiobuffersourcenode/loopstart/index.html |    4 +-
 .../audiobuffersourcenode/playbackrate/index.html  |   10 +-
 .../web/api/audiobuffersourcenode/start/index.html |    2 +-
 .../createmediaelementsource/index.html            |    4 +-
 files/fr/web/api/audiocontext/index.html           |    2 +-
 files/fr/web/api/audiolistener/index.html          |    8 +-
 files/fr/web/api/audionode/index.html              |   11 +-
 files/fr/web/api/audioparam/index.html             |    4 +-
 files/fr/web/api/audioprocessingevent/index.html   |    4 +-
 files/fr/web/api/audioworklet/index.html           |    2 +-
 files/fr/web/api/authenticatorresponse/index.html  |    2 -
 .../baseaudiocontext/createbiquadfilter/index.html |    4 +-
 .../api/baseaudiocontext/createbuffer/index.html   |    4 +-
 .../baseaudiocontext/createbuffersource/index.html |   10 +-
 .../web/api/baseaudiocontext/creategain/index.html |    6 +-
 .../api/baseaudiocontext/createpanner/index.html   |    2 +-
 .../baseaudiocontext/createperiodicwave/index.html |    6 +-
 files/fr/web/api/baseaudiocontext/index.html       |   10 +-
 files/fr/web/api/battery_status_api/index.html     |    4 +-
 .../fr/web/api/batterymanager/charging/index.html  |    4 +-
 .../web/api/batterymanager/chargingtime/index.html |    6 +-
 .../api/batterymanager/dischargingtime/index.html  |    8 +-
 files/fr/web/api/batterymanager/index.html         |    2 +-
 files/fr/web/api/batterymanager/level/index.html   |    8 +-
 files/fr/web/api/beforeunloadevent/index.html      |    4 +-
 .../web/api/biquadfilternode/frequency/index.html  |    2 +-
 files/fr/web/api/biquadfilternode/index.html       |   12 +-
 files/fr/web/api/blob/blob/index.html              |    2 +-
 files/fr/web/api/blob/index.html                   |    4 +-
 files/fr/web/api/blob/size/index.html              |    4 +-
 files/fr/web/api/blobbuilder/index.html            |   14 +-
 files/fr/web/api/btoa/index.html                   |   14 +-
 files/fr/web/api/cache/add/index.html              |    4 +-
 files/fr/web/api/cache/addall/index.html           |    2 +-
 files/fr/web/api/cache/delete/index.html           |    2 +-
 files/fr/web/api/cache/index.html                  |   16 +-
 files/fr/web/api/cache/keys/index.html             |    7 +-
 files/fr/web/api/cache/match/index.html            |    6 +-
 files/fr/web/api/cache/matchall/index.html         |    6 +-
 files/fr/web/api/cache/put/index.html              |   10 +-
 files/fr/web/api/cachestorage/delete/index.html    |    2 +-
 files/fr/web/api/cachestorage/has/index.html       |    2 +-
 files/fr/web/api/cachestorage/index.html           |   13 +-
 files/fr/web/api/cachestorage/keys/index.html      |    2 +-
 files/fr/web/api/cachestorage/match/index.html     |    8 +-
 files/fr/web/api/cachestorage/open/index.html      |    4 +-
 .../api/canvas_api/a_basic_ray-caster/index.html   |   24 +-
 files/fr/web/api/canvas_api/index.html             |   28 +-
 .../manipulating_video_using_canvas/index.html     |  186 +-
 .../tutorial/advanced_animations/index.html        |   54 +-
 .../tutorial/applying_styles_and_colors/index.html |  809 ++++-----
 .../tutorial/basic_animations/index.html           |   44 +-
 .../api/canvas_api/tutorial/basic_usage/index.html |   21 +-
 .../tutorial/compositing/example/index.html        |   12 +-
 .../api/canvas_api/tutorial/compositing/index.html |   26 +-
 .../canvas_api/tutorial/drawing_shapes/index.html  |  114 +-
 .../canvas_api/tutorial/drawing_text/index.html    |  144 +-
 .../hit_regions_and_accessibility/index.html       |   10 +-
 files/fr/web/api/canvas_api/tutorial/index.html    |   48 +-
 .../tutorial/optimizing_canvas/index.html          |   14 +-
 .../pixel_manipulation_with_canvas/index.html      |   70 +-
 .../canvas_api/tutorial/transformations/index.html |   70 +-
 .../canvas_api/tutorial/using_images/index.html    |   16 +-
 .../web/api/canvasgradient/addcolorstop/index.html |   12 +-
 .../api/canvasrenderingcontext2d/arc/index.html    |   34 +-
 .../canvasrenderingcontext2d/beginpath/index.html  |   12 +-
 .../beziercurveto/index.html                       |    2 +-
 .../canvasrenderingcontext2d/clearrect/index.html  |   14 +-
 .../canvasrenderingcontext2d/closepath/index.html  |   12 +-
 .../createlineargradient/index.html                |   14 +-
 .../canvasrenderingcontext2d/direction/index.html  |   12 +-
 .../canvasrenderingcontext2d/drawimage/index.html  |   24 +-
 .../canvasrenderingcontext2d/ellipse/index.html    |   12 +-
 .../api/canvasrenderingcontext2d/fill/index.html   |   22 +-
 .../canvasrenderingcontext2d/fillrect/index.html   |   14 +-
 .../canvasrenderingcontext2d/fillstyle/index.html  |   19 +-
 .../canvasrenderingcontext2d/filltext/index.html   |   12 +-
 .../api/canvasrenderingcontext2d/font/index.html   |   12 +-
 .../getimagedata/index.html                        |   10 +-
 .../globalalpha/index.html                         |   22 +-
 .../globalcompositeoperation/index.html            |    2 +-
 .../imagesmoothingenabled/index.html               |   83 +-
 .../fr/web/api/canvasrenderingcontext2d/index.html |    8 +-
 .../canvasrenderingcontext2d/linecap/index.html    |   22 +-
 .../canvasrenderingcontext2d/linejoin/index.html   |   10 +-
 .../api/canvasrenderingcontext2d/lineto/index.html |   12 +-
 .../measuretext/index.html                         |    2 +-
 .../api/canvasrenderingcontext2d/moveto/index.html |   12 +-
 .../quadraticcurveto/index.html                    |    6 +-
 .../api/canvasrenderingcontext2d/rect/index.html   |   12 +-
 .../api/canvasrenderingcontext2d/rotate/index.html |   14 +-
 .../api/canvasrenderingcontext2d/save/index.html   |    2 +-
 .../api/canvasrenderingcontext2d/scale/index.html  |   22 +-
 .../setlinedash/index.html                         |   14 +-
 .../settransform/index.html                        |   12 +-
 .../api/canvasrenderingcontext2d/stroke/index.html |   12 +-
 .../canvasrenderingcontext2d/strokerect/index.html |   14 +-
 .../strokestyle/index.html                         |   20 +-
 .../canvasrenderingcontext2d/stroketext/index.html |   12 +-
 .../canvasrenderingcontext2d/textalign/index.html  |   12 +-
 .../textbaseline/index.html                        |   12 +-
 .../canvasrenderingcontext2d/transform/index.html  |   12 +-
 .../canvasrenderingcontext2d/translate/index.html  |   14 +-
 files/fr/web/api/characterdata/index.html          |    6 +-
 files/fr/web/api/clearinterval/index.html          |    8 +-
 files/fr/web/api/client/index.html                 |    6 +-
 files/fr/web/api/clients/claim/index.html          |    2 +-
 files/fr/web/api/clients/get/index.html            |    6 +-
 files/fr/web/api/clients/index.html                |    2 +-
 files/fr/web/api/clients/matchall/index.html       |    8 +-
 files/fr/web/api/clients/openwindow/index.html     |    4 +-
 files/fr/web/api/clipboard/index.html              |   11 +-
 files/fr/web/api/clipboard/write/index.html        |    2 +-
 files/fr/web/api/clipboard/writetext/index.html    |    2 +-
 files/fr/web/api/clipboard_api/index.html          |    4 +-
 files/fr/web/api/closeevent/index.html             |    4 +-
 files/fr/web/api/comment/comment/index.html        |    6 +-
 files/fr/web/api/comment/index.html                |    4 +-
 files/fr/web/api/compositionevent/index.html       |   10 +-
 files/fr/web/api/console/assert/index.html         |   12 +-
 files/fr/web/api/console/count/index.html          |   10 +-
 files/fr/web/api/console/countreset/index.html     |   10 +-
 files/fr/web/api/console/debug/index.html          |    2 +-
 files/fr/web/api/console/dir/index.html            |    6 +-
 files/fr/web/api/console/dirxml/index.html         |    2 +-
 files/fr/web/api/console/error/index.html          |   12 +-
 files/fr/web/api/console/group/index.html          |   30 +-
 files/fr/web/api/console/groupcollapsed/index.html |    8 +-
 files/fr/web/api/console/groupend/index.html       |    4 +-
 files/fr/web/api/console/index.html                |   82 +-
 files/fr/web/api/console/info/index.html           |    8 +-
 files/fr/web/api/console/profile/index.html        |    2 +-
 files/fr/web/api/console/profileend/index.html     |    2 +-
 files/fr/web/api/console/table/index.html          |   26 +-
 files/fr/web/api/console/time/index.html           |   10 +-
 files/fr/web/api/console/timeend/index.html        |    8 +-
 files/fr/web/api/console/timelog/index.html        |    2 +-
 files/fr/web/api/console/timestamp/index.html      |    4 +-
 files/fr/web/api/console/trace/index.html          |   28 +-
 files/fr/web/api/console/warn/index.html           |   14 +-
 files/fr/web/api/console_api/index.html            |    6 +-
 files/fr/web/api/credential/index.html             |    2 +-
 .../web/api/credential_management_api/index.html   |    3 +-
 .../web/api/credentialscontainer/create/index.html |    4 +-
 files/fr/web/api/crypto/getrandomvalues/index.html |    6 +-
 files/fr/web/api/crypto/index.html                 |   54 +-
 files/fr/web/api/css/index.html                    |    6 +-
 files/fr/web/api/css_font_loading_api/index.html   |    6 +-
 .../index.html                                     |   22 +-
 files/fr/web/api/css_object_model/index.html       |    2 -
 .../managing_screen_orientation/index.html         |   10 +-
 files/fr/web/api/cssrulelist/index.html            |   22 +-
 .../web/api/cssstyledeclaration/csstext/index.html |   10 +-
 files/fr/web/api/cssstyledeclaration/index.html    |   16 +-
 files/fr/web/api/cssstylerule/index.html           |   10 +-
 files/fr/web/api/customevent/detail/index.html     |    2 +-
 files/fr/web/api/customevent/index.html            |   36 +-
 .../web/api/customevent/initcustomevent/index.html |    6 +-
 files/fr/web/api/datatransfer/cleardata/index.html |    8 +-
 files/fr/web/api/datatransfer/files/index.html     |    4 +-
 files/fr/web/api/datatransfer/index.html           |  226 +--
 .../dedicatedworkerglobalscope/close/index.html    |    2 +-
 .../accelerationincludinggravity/index.html        |   16 +-
 .../devicemotionevent/devicemotionevent/index.html |    9 +-
 files/fr/web/api/devicemotionevent/index.html      |   12 +-
 .../api/devicemotionevent/rotationrate/index.html  |    8 +-
 .../devicemotioneventrotationrate/alpha/index.html |    4 +-
 .../devicemotioneventrotationrate/beta/index.html  |    2 +-
 .../devicemotioneventrotationrate/gamma/index.html |    4 +-
 .../api/deviceorientationevent/absolute/index.html |   10 +-
 files/fr/web/api/deviceorientationevent/index.html |    4 +-
 files/fr/web/api/document/activeelement/index.html |   17 +-
 files/fr/web/api/document/adoptnode/index.html     |   24 +-
 files/fr/web/api/document/alinkcolor/index.html    |    4 +-
 files/fr/web/api/document/anchors/index.html       |    8 +-
 files/fr/web/api/document/applets/index.html       |   10 +-
 files/fr/web/api/document/body/index.html          |   11 +-
 .../api/document/caretrangefrompoint/index.html    |    4 +-
 files/fr/web/api/document/characterset/index.html  |    2 +-
 files/fr/web/api/document/clear/index.html         |    2 +-
 files/fr/web/api/document/compatmode/index.html    |   16 +-
 files/fr/web/api/document/contenttype/index.html   |    6 +-
 .../fr/web/api/document/createattribute/index.html |    8 +-
 .../web/api/document/createcdatasection/index.html |   10 +-
 files/fr/web/api/document/createcomment/index.html |    8 +-
 .../api/document/createdocumentfragment/index.html |   28 +-
 files/fr/web/api/document/createelement/index.html |    4 +-
 .../fr/web/api/document/createelementns/index.html |   55 +-
 .../api/document/createentityreference/index.html  |    6 +-
 files/fr/web/api/document/createevent/index.html   |   24 +-
 .../web/api/document/createexpression/index.html   |   10 +-
 .../web/api/document/createnodeiterator/index.html |   24 +-
 .../web/api/document/creatensresolver/index.html   |   18 +-
 .../createprocessinginstruction/index.html         |   14 +-
 files/fr/web/api/document/createrange/index.html   |   10 +-
 .../fr/web/api/document/createtextnode/index.html  |   46 +-
 files/fr/web/api/document/defaultview/index.html   |   17 +-
 files/fr/web/api/document/designmode/index.html    |    8 +-
 files/fr/web/api/document/dir/index.html           |    4 +-
 files/fr/web/api/document/document/index.html      |    2 +-
 .../fr/web/api/document/documentelement/index.html |   14 +-
 .../web/api/document/documenturiobject/index.html  |   12 +-
 files/fr/web/api/document/domain/index.html        |   26 +-
 .../api/document/domcontentloaded_event/index.html |    6 +-
 files/fr/web/api/document/drag_event/index.html    |   14 +-
 files/fr/web/api/document/dragend_event/index.html |   58 +-
 .../fr/web/api/document/dragenter_event/index.html |   58 +-
 .../fr/web/api/document/dragleave_event/index.html |   38 +-
 .../fr/web/api/document/dragover_event/index.html  |  144 +-
 .../fr/web/api/document/dragstart_event/index.html |   14 +-
 files/fr/web/api/document/drop_event/index.html    |  148 +-
 .../web/api/document/elementfrompoint/index.html   |   18 +-
 .../web/api/document/elementsfrompoint/index.html  |    6 +-
 .../document/enablestylesheetsforset/index.html    |   10 +-
 files/fr/web/api/document/evaluate/index.html      |   16 +-
 files/fr/web/api/document/execcommand/index.html   |  175 +-
 .../fr/web/api/document/exitfullscreen/index.html  |    6 +-
 files/fr/web/api/document/forms/index.html         |   52 +-
 .../api/document/fullscreenchange_event/index.html |    2 +-
 .../api/document/fullscreenerror_event/index.html  |    2 +-
 .../fr/web/api/document/getboxobjectfor/index.html |   12 +-
 .../fr/web/api/document/getelementbyid/index.html  |   99 +-
 .../api/document/getelementsbyclassname/index.html |   74 +-
 .../web/api/document/getelementsbyname/index.html  |   44 +-
 .../api/document/getelementsbytagname/index.html   |  142 +-
 .../api/document/getelementsbytagnamens/index.html |   30 +-
 files/fr/web/api/document/getselection/index.html  |    2 +-
 files/fr/web/api/document/hasfocus/index.html      |   84 +-
 files/fr/web/api/document/head/index.html          |    7 +-
 files/fr/web/api/document/height/index.html        |    2 +-
 files/fr/web/api/document/images/index.html        |   29 +-
 .../fr/web/api/document/implementation/index.html  |   20 +-
 files/fr/web/api/document/importnode/index.html    |   30 +-
 files/fr/web/api/document/index.html               |   62 +-
 .../fr/web/api/document/keypress_event/index.html  |    6 +-
 files/fr/web/api/document/lastmodified/index.html  |   19 +-
 .../web/api/document/laststylesheetset/index.html  |   14 +-
 files/fr/web/api/document/location/index.html      |   16 +-
 .../web/api/document/mozsetimageelement/index.html |   10 +-
 .../api/document/mozsyntheticdocument/index.html   |    6 +-
 .../api/document/onafterscriptexecute/index.html   |    2 +-
 .../api/document/onbeforescriptexecute/index.html  |    2 +-
 files/fr/web/api/document/onoffline/index.html     |    2 +-
 files/fr/web/api/document/ononline/index.html      |   12 +-
 files/fr/web/api/document/open/index.html          |   14 +-
 files/fr/web/api/document/popupnode/index.html     |    8 +-
 .../api/document/preferredstylesheetset/index.html |   10 +-
 .../web/api/document/querycommandstate/index.html  |    2 +-
 .../api/document/querycommandsupported/index.html  |    5 +-
 files/fr/web/api/document/queryselector/index.html |   28 +-
 .../web/api/document/queryselectorall/index.html   |   12 +-
 files/fr/web/api/document/readystate/index.html    |   20 +-
 .../api/document/readystatechange_event/index.html |    4 +-
 files/fr/web/api/document/referrer/index.html      |    8 +-
 .../fr/web/api/document/registerelement/index.html |   12 +-
 .../fr/web/api/document/releasecapture/index.html  |    8 +-
 files/fr/web/api/document/scripts/index.html       |    2 +-
 files/fr/web/api/document/scroll_event/index.html  |   11 +-
 .../api/document/selectedstylesheetset/index.html  |   20 +-
 files/fr/web/api/document/stylesheets/index.html   |    8 +-
 .../fr/web/api/document/stylesheetsets/index.html  |   10 +-
 files/fr/web/api/document/title/index.html         |   12 +-
 files/fr/web/api/document/tooltipnode/index.html   |    4 +-
 .../fr/web/api/document/touchend_event/index.html  |    6 +-
 .../api/document/transitionend_event/index.html    |   12 +-
 files/fr/web/api/document/url/index.html           |    6 +-
 .../fr/web/api/document/visibilitystate/index.html |    8 +-
 files/fr/web/api/document/width/index.html         |   12 +-
 files/fr/web/api/document/write/index.html         |   30 +-
 files/fr/web/api/document/writeln/index.html       |   14 +-
 files/fr/web/api/document/xmlencoding/index.html   |   10 +-
 files/fr/web/api/document/xmlversion/index.html    |    4 +-
 .../api/document_object_model/examples/index.html  |  518 +++---
 .../how_to_create_a_dom_tree/index.html            |  104 +-
 files/fr/web/api/document_object_model/index.html  |   26 +-
 .../document_object_model/introduction/index.html  |    6 +-
 .../index.html                                     |   26 +-
 .../index.html                                     |  192 +-
 .../using_the_w3c_dom_level_1_core/index.html      |   83 +-
 .../document_object_model/whitespace/index.html    |  226 ++-
 .../documentfragment/documentfragment/index.html   |    6 +-
 files/fr/web/api/documentfragment/index.html       |   10 +-
 .../api/documentfragment/queryselector/index.html  |   10 +-
 files/fr/web/api/domerror/index.html               |    2 +-
 files/fr/web/api/domexception/index.html           |   66 +-
 files/fr/web/api/domhighrestimestamp/index.html    |    4 +-
 .../domimplementation/createdocument/index.html    |    2 +-
 files/fr/web/api/domimplementation/index.html      |    4 +-
 files/fr/web/api/domobject/index.html              |    2 +-
 files/fr/web/api/domparser/index.html              |    2 +-
 files/fr/web/api/dompoint/dompoint/index.html      |    2 +-
 files/fr/web/api/dompoint/index.html               |    8 +-
 files/fr/web/api/dompointreadonly/index.html       |    2 +-
 files/fr/web/api/dompointreadonly/w/index.html     |    4 +-
 files/fr/web/api/dompointreadonly/x/index.html     |    4 +-
 files/fr/web/api/dompointreadonly/y/index.html     |    4 +-
 files/fr/web/api/dompointreadonly/z/index.html     |    4 +-
 files/fr/web/api/domrect/domrect/index.html        |    2 +-
 files/fr/web/api/domrect/index.html                |    4 +-
 files/fr/web/api/domrectreadonly/bottom/index.html |    4 +-
 files/fr/web/api/domrectreadonly/height/index.html |    4 +-
 files/fr/web/api/domrectreadonly/index.html        |    2 +-
 files/fr/web/api/domrectreadonly/left/index.html   |    4 +-
 files/fr/web/api/domrectreadonly/right/index.html  |    4 +-
 files/fr/web/api/domrectreadonly/top/index.html    |    4 +-
 files/fr/web/api/domrectreadonly/width/index.html  |    4 +-
 files/fr/web/api/domrectreadonly/x/index.html      |    4 +-
 files/fr/web/api/domrectreadonly/y/index.html      |    4 +-
 files/fr/web/api/domstring/binary/index.html       |   20 +-
 files/fr/web/api/domstring/index.html              |   10 +-
 files/fr/web/api/domstringlist/index.html          |    4 +-
 files/fr/web/api/domtimestamp/index.html           |   53 +-
 files/fr/web/api/domtokenlist/add/index.html       |    8 +-
 files/fr/web/api/domtokenlist/contains/index.html  |    6 +-
 files/fr/web/api/domtokenlist/entries/index.html   |    2 +-
 files/fr/web/api/domtokenlist/foreach/index.html   |    2 -
 files/fr/web/api/domtokenlist/index.html           |   29 +-
 files/fr/web/api/domtokenlist/item/index.html      |    6 +-
 files/fr/web/api/domtokenlist/keys/index.html      |    6 +-
 files/fr/web/api/domtokenlist/length/index.html    |    6 +-
 files/fr/web/api/domtokenlist/remove/index.html    |   10 +-
 files/fr/web/api/domtokenlist/replace/index.html   |    6 +-
 files/fr/web/api/domtokenlist/supports/index.html  |    6 +-
 files/fr/web/api/domtokenlist/toggle/index.html    |    6 +-
 files/fr/web/api/domtokenlist/value/index.html     |    6 +-
 files/fr/web/api/domtokenlist/values/index.html    |    6 +-
 files/fr/web/api/element/animate/index.html        |   21 +-
 files/fr/web/api/element/attachshadow/index.html   |    6 +-
 files/fr/web/api/element/attributes/index.html     |   88 +-
 .../web/api/element/childelementcount/index.html   |   44 +-
 files/fr/web/api/element/classlist/index.html      |   54 +-
 files/fr/web/api/element/classname/index.html      |   22 +-
 files/fr/web/api/element/click_event/index.html    |    2 +-
 files/fr/web/api/element/clientleft/index.html     |   43 +-
 files/fr/web/api/element/clientwidth/index.html    |    4 +-
 files/fr/web/api/element/closest/index.html        |   10 +-
 .../api/element/compositionend_event/index.html    |   10 +-
 .../api/element/compositionstart_event/index.html  |    6 +-
 .../web/api/element/contextmenu_event/index.html   |    4 +-
 files/fr/web/api/element/copy_event/index.html     |   26 +-
 files/fr/web/api/element/dblclick_event/index.html |    2 +-
 files/fr/web/api/element/error_event/index.html    |   41 +-
 files/fr/web/api/element/focusin_event/index.html  |    4 +-
 files/fr/web/api/element/focusout_event/index.html |    2 +-
 files/fr/web/api/element/getattribute/index.html   |   18 +-
 .../web/api/element/getattributenames/index.html   |    8 +-
 .../fr/web/api/element/getattributenode/index.html |   20 +-
 .../web/api/element/getattributenodens/index.html  |   20 +-
 files/fr/web/api/element/getattributens/index.html |    8 +-
 .../api/element/getboundingclientrect/index.html   |    2 +-
 .../api/element/getelementsbytagname/index.html    |   28 +-
 .../api/element/getelementsbytagnamens/index.html  |   10 +-
 files/fr/web/api/element/hasattribute/index.html   |   30 +-
 files/fr/web/api/element/hasattributens/index.html |   18 +-
 files/fr/web/api/element/id/index.html             |   10 +-
 files/fr/web/api/element/index.html                |   10 +-
 files/fr/web/api/element/innerhtml/index.html      |  118 +-
 .../api/element/insertadjacentelement/index.html   |   32 +-
 .../web/api/element/insertadjacenthtml/index.html  |   45 +-
 .../web/api/element/insertadjacenttext/index.html  |   30 +-
 files/fr/web/api/element/localname/index.html      |    2 +-
 files/fr/web/api/element/matches/index.html        |   38 +-
 .../fr/web/api/element/mousedown_event/index.html  |    6 +-
 .../fr/web/api/element/mouseenter_event/index.html |   12 +-
 .../fr/web/api/element/mouseleave_event/index.html |   11 +-
 .../fr/web/api/element/mousemove_event/index.html  |    2 +-
 files/fr/web/api/element/mouseout_event/index.html |    4 +-
 .../fr/web/api/element/mouseover_event/index.html  |    4 +-
 files/fr/web/api/element/mouseup_event/index.html  |    4 +-
 files/fr/web/api/element/namespaceuri/index.html   |    8 +-
 files/fr/web/api/element/outerhtml/index.html      |   20 +-
 files/fr/web/api/element/prefix/index.html         |    2 +-
 .../fr/web/api/element/queryselectorall/index.html |   70 +-
 .../fr/web/api/element/removeattribute/index.html  |   14 +-
 .../web/api/element/removeattributenode/index.html |   14 +-
 .../web/api/element/removeattributens/index.html   |    8 +-
 .../web/api/element/requestfullscreen/index.html   |    2 +-
 files/fr/web/api/element/scrollheight/index.html   |  106 +-
 files/fr/web/api/element/scrollintoview/index.html |   15 +-
 .../api/element/scrollintoviewifneeded/index.html  |    2 +-
 files/fr/web/api/element/scrollleft/index.html     |   12 +-
 files/fr/web/api/element/scrollto/index.html       |    8 +-
 files/fr/web/api/element/scrolltop/index.html      |    6 +-
 files/fr/web/api/element/scrollwidth/index.html    |   14 +-
 files/fr/web/api/element/select_event/index.html   |   40 +-
 files/fr/web/api/element/setattribute/index.html   |    6 +-
 .../fr/web/api/element/setattributenode/index.html |   12 +-
 .../web/api/element/setattributenodens/index.html  |   12 +-
 files/fr/web/api/element/setattributens/index.html |   20 +-
 .../web/api/element/setpointercapture/index.html   |    8 +-
 files/fr/web/api/element/tagname/index.html        |   10 +-
 files/fr/web/api/encoding_api/index.html           |    4 +-
 files/fr/web/api/errorevent/index.html             |    2 +-
 files/fr/web/api/event/bubbles/index.html          |   28 +-
 files/fr/web/api/event/cancelable/index.html       |   38 +-
 files/fr/web/api/event/cancelbubble/index.html     |    8 +-
 .../event/comparison_of_event_targets/index.html   |   34 +-
 files/fr/web/api/event/currenttarget/index.html    |    6 +-
 files/fr/web/api/event/defaultprevented/index.html |    4 +-
 files/fr/web/api/event/event/index.html            |   12 +-
 files/fr/web/api/event/eventphase/index.html       |  112 +-
 files/fr/web/api/event/index.html                  |    4 +-
 files/fr/web/api/event/initevent/index.html        |   12 +-
 files/fr/web/api/event/istrusted/index.html        |    2 +-
 files/fr/web/api/event/originaltarget/index.html   |   12 +-
 files/fr/web/api/event/returnvalue/index.html      |   10 +-
 files/fr/web/api/event/srcelement/index.html       |    2 +-
 files/fr/web/api/event/stoppropagation/index.html  |   24 +-
 files/fr/web/api/event/target/index.html           |   40 +-
 files/fr/web/api/event/timestamp/index.html        |   52 +-
 files/fr/web/api/event/type/index.html             |   68 +-
 files/fr/web/api/eventlistener/index.html          |   38 +-
 files/fr/web/api/eventsource/close/index.html      |    4 +-
 files/fr/web/api/eventsource/index.html            |    4 +-
 files/fr/web/api/eventsource/onopen/index.html     |    5 +-
 .../api/eventtarget/addeventlistener/index.html    |    8 +-
 .../web/api/eventtarget/dispatchevent/index.html   |   16 +-
 .../fr/web/api/eventtarget/eventtarget/index.html  |    2 +-
 files/fr/web/api/eventtarget/index.html            |    6 +-
 .../api/eventtarget/removeeventlistener/index.html |    4 +-
 .../api/extendableevent/extendableevent/index.html |    8 +-
 files/fr/web/api/extendableevent/index.html        |    8 +-
 .../extendablemessageevent/index.html              |    6 +-
 files/fr/web/api/extendablemessageevent/index.html |    6 +-
 .../extendablemessageevent/lasteventid/index.html  |    8 +-
 .../api/extendablemessageevent/origin/index.html   |   16 +-
 .../api/extendablemessageevent/ports/index.html    |    8 +-
 .../api/featurepolicy/allowedfeatures/index.html   |    8 +-
 .../web/api/featurepolicy/allowsfeature/index.html |    8 +-
 files/fr/web/api/featurepolicy/features/index.html |    6 +-
 .../getallowlistforfeature/index.html              |    6 +-
 files/fr/web/api/fetch/index.html                  |   16 +-
 .../fr/web/api/fetch_api/basic_concepts/index.html |   10 +-
 files/fr/web/api/fetch_api/index.html              |    8 +-
 files/fr/web/api/fetch_api/using_fetch/index.html  |   20 +-
 files/fr/web/api/fetchevent/index.html             |    2 +-
 files/fr/web/api/file/name/index.html              |    6 +-
 .../using_files_from_web_applications/index.html   |   36 +-
 .../api/file_and_directory_entries_api/index.html  |   30 +-
 files/fr/web/api/filelist/index.html               |   14 +-
 .../api/filereader/readasarraybuffer/index.html    |    5 +-
 .../api/filereader/readasbinarystring/index.html   |    2 +-
 .../fr/web/api/filereader/readasdataurl/index.html |    4 +-
 files/fr/web/api/filerequest/index.html            |    2 +-
 files/fr/web/api/filerequest/onprogress/index.html |    6 +-
 files/fr/web/api/force_touch_events/index.html     |    2 +-
 files/fr/web/api/formdata/append/index.html        |    8 +-
 files/fr/web/api/formdata/delete/index.html        |    8 +-
 files/fr/web/api/formdata/entries/index.html       |    8 +-
 files/fr/web/api/formdata/formdata/index.html      |    6 +-
 files/fr/web/api/formdata/get/index.html           |    4 +-
 files/fr/web/api/formdata/getall/index.html        |    8 +-
 files/fr/web/api/formdata/has/index.html           |    8 +-
 files/fr/web/api/formdata/index.html               |    6 +-
 files/fr/web/api/formdata/keys/index.html          |    8 +-
 files/fr/web/api/formdata/set/index.html           |    8 +-
 .../api/formdata/using_formdata_objects/index.html |   12 +-
 files/fr/web/api/formdata/values/index.html        |    8 +-
 files/fr/web/api/fullscreen_api/index.html         |   48 +-
 files/fr/web/api/gainnode/index.html               |    4 +-
 files/fr/web/api/gamepad_api/index.html            |   22 +-
 .../gamepad_api/using_the_gamepad_api/index.html   |   34 +-
 .../api/geolocation/getcurrentposition/index.html  |    2 +-
 .../web/api/geolocation/watchposition/index.html   |    5 +-
 files/fr/web/api/geolocation_api/index.html        |    6 +-
 files/fr/web/api/geolocationcoordinates/index.html |    4 +-
 .../fr/web/api/geolocationpositionerror/index.html |    2 +-
 files/fr/web/api/gestureevent/index.html           |    2 +-
 files/fr/web/api/globaleventhandlers/index.html    |   12 +-
 .../web/api/globaleventhandlers/onabort/index.html |   10 +-
 .../api/globaleventhandlers/onauxclick/index.html  |   12 +-
 .../web/api/globaleventhandlers/onblur/index.html  |   10 +-
 .../api/globaleventhandlers/onchange/index.html    |   12 +-
 .../web/api/globaleventhandlers/onclick/index.html |   14 +-
 .../web/api/globaleventhandlers/onclose/index.html |    2 +-
 .../api/globaleventhandlers/ondblclick/index.html  |   10 +-
 .../web/api/globaleventhandlers/onerror/index.html |    8 +-
 .../web/api/globaleventhandlers/onfocus/index.html |    8 +-
 .../api/globaleventhandlers/onkeydown/index.html   |   14 +-
 .../api/globaleventhandlers/onkeypress/index.html  |   14 +-
 .../web/api/globaleventhandlers/onkeyup/index.html |   14 +-
 .../web/api/globaleventhandlers/onload/index.html  |   17 +-
 .../api/globaleventhandlers/onmousedown/index.html |    8 +-
 .../api/globaleventhandlers/onmousemove/index.html |   16 +-
 .../api/globaleventhandlers/onmouseout/index.html  |    8 +-
 .../api/globaleventhandlers/onmouseover/index.html |   13 +-
 .../api/globaleventhandlers/onmouseup/index.html   |    8 +-
 .../web/api/globaleventhandlers/onreset/index.html |   12 +-
 .../api/globaleventhandlers/onresize/index.html    |   10 +-
 .../api/globaleventhandlers/onscroll/index.html    |    8 +-
 .../api/globaleventhandlers/onselect/index.html    |   12 +-
 .../web/api/globaleventhandlers/onwheel/index.html |    4 +-
 files/fr/web/api/headers/index.html                |   16 +-
 files/fr/web/api/history/index.html                |   20 +-
 files/fr/web/api/history/length/index.html         |    2 +-
 files/fr/web/api/history_api/example/index.html    |   32 +-
 files/fr/web/api/history_api/index.html            |   38 +-
 .../drag_operations/index.html                     |   96 +-
 files/fr/web/api/html_drag_and_drop_api/index.html |   46 +-
 files/fr/web/api/htmlbuttonelement/index.html      |   84 +-
 .../api/htmlcanvaselement/getcontext/index.html    |    4 +-
 .../fr/web/api/htmlcanvaselement/height/index.html |    6 +-
 files/fr/web/api/htmlcanvaselement/index.html      |    6 +-
 files/fr/web/api/htmlcollection/index.html         |    2 +-
 .../getdistributednodes/index.html                 |    6 +-
 files/fr/web/api/htmlcontentelement/index.html     |    4 +-
 .../web/api/htmlcontentelement/select/index.html   |    6 +-
 .../api/htmldialogelement/close_event/index.html   |   12 +-
 files/fr/web/api/htmldialogelement/index.html      |    4 +-
 files/fr/web/api/htmldocument/index.html           |    4 +-
 files/fr/web/api/htmlelement/accesskey/index.html  |    2 +-
 .../api/htmlelement/animationend_event/index.html  |    4 +-
 .../animationiteration_event/index.html            |    4 +-
 .../htmlelement/animationstart_event/index.html    |    4 +-
 .../fr/web/api/htmlelement/change_event/index.html |    4 +-
 files/fr/web/api/htmlelement/click/index.html      |   14 +-
 .../web/api/htmlelement/contenteditable/index.html |    4 +-
 files/fr/web/api/htmlelement/dir/index.html        |   14 +-
 files/fr/web/api/htmlelement/hidden/index.html     |   22 +-
 files/fr/web/api/htmlelement/index.html            |    4 +-
 files/fr/web/api/htmlelement/innertext/index.html  |    2 +-
 .../fr/web/api/htmlelement/input_event/index.html  |    4 +-
 .../api/htmlelement/iscontenteditable/index.html   |   14 +-
 files/fr/web/api/htmlelement/lang/index.html       |   12 +-
 .../fr/web/api/htmlelement/offsetheight/index.html |   44 +-
 files/fr/web/api/htmlelement/offsetleft/index.html |   22 +-
 .../fr/web/api/htmlelement/offsetparent/index.html |    8 +-
 files/fr/web/api/htmlelement/offsettop/index.html  |   18 +-
 .../fr/web/api/htmlelement/offsetwidth/index.html  |   38 +-
 files/fr/web/api/htmlelement/title/index.html      |    8 +-
 .../api/htmlelement/transitionend_event/index.html |   12 +-
 .../api/htmlformelement/acceptcharset/index.html   |   10 +-
 files/fr/web/api/htmlformelement/action/index.html |   10 +-
 .../fr/web/api/htmlformelement/elements/index.html |   12 +-
 .../fr/web/api/htmlformelement/enctype/index.html  |   10 +-
 files/fr/web/api/htmlformelement/index.html        |  134 +-
 files/fr/web/api/htmlformelement/length/index.html |    8 +-
 files/fr/web/api/htmlformelement/method/index.html |   10 +-
 files/fr/web/api/htmlformelement/name/index.html   |   10 +-
 .../api/htmlformelement/reportvalidity/index.html  |    6 +-
 files/fr/web/api/htmlformelement/reset/index.html  |    6 +-
 files/fr/web/api/htmlformelement/submit/index.html |   12 +-
 .../api/htmlformelement/submit_event/index.html    |    2 +-
 files/fr/web/api/htmlformelement/target/index.html |   10 +-
 .../htmliframeelement/contentdocument/index.html   |    2 +-
 .../api/htmliframeelement/contentwindow/index.html |    8 +-
 files/fr/web/api/htmliframeelement/csp/index.html  |    2 +-
 .../api/htmliframeelement/featurepolicy/index.html |    6 +-
 files/fr/web/api/htmlimageelement/image/index.html |   10 +-
 files/fr/web/api/htmlimageelement/index.html       |   32 +-
 files/fr/web/api/htmlinputelement/index.html       |   18 +-
 .../api/htmlmediaelement/abort_event/index.html    |    2 +-
 .../api/htmlmediaelement/canplay_event/index.html  |    2 +-
 .../canplaythrough_event/index.html                |    2 +-
 .../durationchange_event/index.html                |    2 +-
 .../api/htmlmediaelement/emptied_event/index.html  |    2 +-
 .../api/htmlmediaelement/ended_event/index.html    |   12 +-
 files/fr/web/api/htmlmediaelement/index.html       |   19 +-
 files/fr/web/api/htmlmediaelement/play/index.html  |    2 +-
 .../fr/web/api/htmlmediaelement/volume/index.html  |    4 +-
 files/fr/web/api/htmloptionelement/index.html      |   11 +-
 .../fr/web/api/htmloptionelement/option/index.html |    3 +-
 files/fr/web/api/htmlquoteelement/index.html       |    2 +-
 .../fr/web/api/htmlselectelement/remove/index.html |    2 +-
 .../api/htmlselectelement/selectedindex/index.html |    2 +-
 .../htmlselectelement/setcustomvalidity/index.html |    2 +-
 files/fr/web/api/htmlshadowelement/index.html      |    2 +-
 files/fr/web/api/htmlspanelement/index.html        |    6 +-
 files/fr/web/api/htmlstyleelement/index.html       |   14 +-
 files/fr/web/api/htmltablecellelement/index.html   |   12 +-
 .../fr/web/api/htmltableelement/caption/index.html |   14 +-
 files/fr/web/api/htmltableelement/index.html       |    8 +-
 .../web/api/htmltableelement/insertrow/index.html  |   10 +-
 files/fr/web/api/htmltablerowelement/index.html    |    4 +-
 .../api/htmltablerowelement/insertcell/index.html  |    4 +-
 files/fr/web/api/htmltimeelement/index.html        |    2 +-
 files/fr/web/api/htmlvideoelement/index.html       |    2 +-
 files/fr/web/api/idbcursor/index.html              |    8 +-
 files/fr/web/api/idbdatabase/close/index.html      |    2 +-
 files/fr/web/api/idbdatabase/index.html            |    9 +-
 files/fr/web/api/idbdatabase/name/index.html       |    6 +-
 .../api/idbdatabase/objectstorenames/index.html    |    4 +-
 .../fr/web/api/idbdatabase/transaction/index.html  |   31 +-
 files/fr/web/api/idbdatabase/version/index.html    |    4 +-
 files/fr/web/api/idbenvironment/index.html         |    6 +-
 files/fr/web/api/idbfactory/cmp/index.html         |    4 +-
 .../web/api/idbfactory/deletedatabase/index.html   |    2 +-
 files/fr/web/api/idbfactory/index.html             |    4 +-
 files/fr/web/api/idbfactory/open/index.html        |    8 +-
 files/fr/web/api/idbindex/get/index.html           |    6 +-
 files/fr/web/api/idbindex/getall/index.html        |    2 +-
 files/fr/web/api/idbindex/getallkeys/index.html    |    6 +-
 files/fr/web/api/idbindex/getkey/index.html        |    2 +-
 files/fr/web/api/idbindex/index.html               |   10 +-
 files/fr/web/api/idbindex/isautolocale/index.html  |    2 +-
 files/fr/web/api/idbindex/keypath/index.html       |    6 +-
 files/fr/web/api/idbindex/locale/index.html        |    4 +-
 files/fr/web/api/idbindex/multientry/index.html    |    2 +-
 files/fr/web/api/idbindex/name/index.html          |    2 +-
 files/fr/web/api/idbindex/objectstore/index.html   |    6 +-
 files/fr/web/api/idbindex/opencursor/index.html    |    6 +-
 files/fr/web/api/idbindex/openkeycursor/index.html |    4 +-
 files/fr/web/api/idbindex/unique/index.html        |    2 +-
 files/fr/web/api/idbkeyrange/bound/index.html      |    4 +-
 files/fr/web/api/idbkeyrange/index.html            |    6 +-
 files/fr/web/api/idbkeyrange/lower/index.html      |    4 +-
 files/fr/web/api/idbkeyrange/lowerbound/index.html |    4 +-
 files/fr/web/api/idbkeyrange/loweropen/index.html  |    4 +-
 files/fr/web/api/idbkeyrange/only/index.html       |    4 +-
 files/fr/web/api/idbkeyrange/upper/index.html      |    4 +-
 files/fr/web/api/idbkeyrange/upperbound/index.html |    4 +-
 files/fr/web/api/idbkeyrange/upperopen/index.html  |    6 +-
 files/fr/web/api/idbobjectstore/add/index.html     |    2 +-
 .../api/idbobjectstore/autoincrement/index.html    |   12 +-
 files/fr/web/api/idbobjectstore/clear/index.html   |   10 +-
 files/fr/web/api/idbobjectstore/count/index.html   |    2 +-
 .../web/api/idbobjectstore/createindex/index.html  |   16 +-
 files/fr/web/api/idbobjectstore/delete/index.html  |    2 +-
 .../web/api/idbobjectstore/deleteindex/index.html  |   14 +-
 files/fr/web/api/idbobjectstore/get/index.html     |    6 +-
 .../web/api/idbobjectstore/getallkeys/index.html   |    4 +-
 files/fr/web/api/idbobjectstore/getkey/index.html  |    2 +-
 files/fr/web/api/idbobjectstore/index.html         |   12 +-
 files/fr/web/api/idbobjectstore/index/index.html   |    2 +-
 .../web/api/idbobjectstore/indexnames/index.html   |    2 +-
 files/fr/web/api/idbobjectstore/keypath/index.html |    2 +-
 files/fr/web/api/idbobjectstore/name/index.html    |    2 +-
 .../web/api/idbobjectstore/opencursor/index.html   |    2 +-
 .../api/idbobjectstore/openkeycursor/index.html    |    2 +-
 files/fr/web/api/idbobjectstore/put/index.html     |    2 +-
 .../web/api/idbobjectstore/transaction/index.html  |    4 +-
 .../api/idbopendbrequest/blocked_event/index.html  |   22 +-
 files/fr/web/api/idbopendbrequest/index.html       |   19 +-
 files/fr/web/api/idbrequest/error/index.html       |    2 +-
 files/fr/web/api/idbrequest/index.html             |    6 +-
 files/fr/web/api/idbrequest/onerror/index.html     |    4 +-
 files/fr/web/api/idbrequest/onsuccess/index.html   |    2 +-
 files/fr/web/api/idbrequest/result/index.html      |    4 +-
 files/fr/web/api/idbrequest/source/index.html      |    2 +-
 files/fr/web/api/idbrequest/transaction/index.html |    6 +-
 files/fr/web/api/idbtransaction/abort/index.html   |    2 +-
 .../web/api/idbtransaction/abort_event/index.html  |    2 +-
 .../api/idbtransaction/complete_event/index.html   |    2 +-
 files/fr/web/api/idbtransaction/db/index.html      |    6 +-
 files/fr/web/api/idbtransaction/error/index.html   |   10 +-
 files/fr/web/api/idbtransaction/index.html         |    4 +-
 files/fr/web/api/idbtransaction/mode/index.html    |    2 +-
 .../web/api/idbtransaction/objectstore/index.html  |    4 +-
 files/fr/web/api/idbtransaction/onabort/index.html |    4 +-
 .../web/api/idbtransaction/oncomplete/index.html   |    7 +-
 files/fr/web/api/idbtransaction/onerror/index.html |    4 +-
 files/fr/web/api/imagedata/data/index.html         |    4 +-
 files/fr/web/api/index.html                        |    2 +-
 files/fr/web/api/indexeddb/index.html              |    4 +-
 .../index.html                                     |   20 +-
 files/fr/web/api/indexeddb_api/index.html          |   39 +-
 .../api/indexeddb_api/using_indexeddb/index.html   | 1896 ++++++++++----------
 files/fr/web/api/inputevent/index.html             |    2 +-
 .../web/api/intersection_observer_api/index.html   |   14 +-
 files/fr/web/api/intersectionobserver/index.html   |    2 +-
 .../intersectionobserver/index.html                |    2 +-
 .../api/intersectionobserver/observe/index.html    |    2 +-
 .../web/api/intersectionobserver/root/index.html   |    2 +-
 .../intersectionobserver/takerecords/index.html    |    7 +-
 .../api/intersectionobserver/thresholds/index.html |    5 +-
 .../api/intersectionobserver/unobserve/index.html  |    2 +-
 .../web/api/intersectionobserverentry/index.html   |    4 +-
 .../intersectionobserverentry/target/index.html    |    2 +-
 files/fr/web/api/keyboardevent/charcode/index.html |   26 +-
 files/fr/web/api/keyboardevent/code/index.html     |   14 +-
 files/fr/web/api/keyboardevent/index.html          |   38 +-
 files/fr/web/api/keyboardevent/key/index.html      |  150 +-
 .../api/keyboardevent/key/key_values/index.html    |  308 ++--
 .../web/api/keyboardevent/keyboardevent/index.html |   46 +-
 files/fr/web/api/localfilesystem/index.html        |   46 +-
 files/fr/web/api/location/index.html               |   28 +-
 files/fr/web/api/location/reload/index.html        |    2 +-
 files/fr/web/api/media_streams_api/index.html      |    8 +-
 .../web/api/mediadevices/getusermedia/index.html   |   80 +-
 files/fr/web/api/mediadevices/index.html           |    6 +-
 files/fr/web/api/mediasource/index.html            |    2 +-
 files/fr/web/api/mediastream/index.html            |   16 +-
 .../web/api/mediastreamaudiosourcenode/index.html  |    2 +-
 files/fr/web/api/mediastreamevent/index.html       |    4 +-
 files/fr/web/api/mouseevent/index.html             |   44 +-
 files/fr/web/api/mutationobserver/index.html       |   44 +-
 files/fr/web/api/navigator/battery/index.html      |    6 +-
 .../fr/web/api/navigator/cookieenabled/index.html  |    2 +-
 files/fr/web/api/navigator/donottrack/index.html   |   12 +-
 files/fr/web/api/navigator/getgamepads/index.html  |    2 +-
 files/fr/web/api/navigator/getusermedia/index.html |   16 +-
 .../api/navigator/mozislocallyavailable/index.html |   17 +-
 .../navigator/registerprotocolhandler/index.html   |   22 +-
 .../web-based_protocol_handlers/index.html         |   20 +-
 files/fr/web/api/navigator/share/index.html        |    2 +-
 files/fr/web/api/navigator/vibrate/index.html      |    4 +-
 files/fr/web/api/node/appendchild/index.html       |   12 +-
 files/fr/web/api/node/baseuri/index.html           |   14 +-
 files/fr/web/api/node/childnodes/index.html        |   36 +-
 files/fr/web/api/node/clonenode/index.html         |   10 +-
 .../api/node/comparedocumentposition/index.html    |   12 +-
 files/fr/web/api/node/contains/index.html          |    4 +-
 files/fr/web/api/node/firstchild/index.html        |   12 +-
 files/fr/web/api/node/getrootnode/index.html       |   10 +-
 files/fr/web/api/node/haschildnodes/index.html     |    2 +-
 files/fr/web/api/node/index.html                   |   94 +-
 files/fr/web/api/node/insertbefore/index.html      |    4 +-
 files/fr/web/api/node/isconnected/index.html       |    8 +-
 .../fr/web/api/node/isdefaultnamespace/index.html  |    8 +-
 files/fr/web/api/node/isequalnode/index.html       |   40 +-
 files/fr/web/api/node/issamenode/index.html        |    6 +-
 files/fr/web/api/node/issupported/index.html       |   27 +-
 files/fr/web/api/node/lastchild/index.html         |   14 +-
 .../fr/web/api/node/lookupnamespaceuri/index.html  |    4 +-
 files/fr/web/api/node/lookupprefix/index.html      |    4 +-
 files/fr/web/api/node/nextsibling/index.html       |   46 +-
 files/fr/web/api/node/nodename/index.html          |   10 +-
 files/fr/web/api/node/nodetype/index.html          |   24 +-
 files/fr/web/api/node/nodevalue/index.html         |    6 +-
 files/fr/web/api/node/normalize/index.html         |   14 +-
 files/fr/web/api/node/ownerdocument/index.html     |   16 +-
 files/fr/web/api/node/parentelement/index.html     |   16 +-
 files/fr/web/api/node/parentnode/index.html        |   37 +-
 files/fr/web/api/node/previoussibling/index.html   |   26 +-
 files/fr/web/api/node/removechild/index.html       |   88 +-
 files/fr/web/api/node/replacechild/index.html      |    2 +-
 files/fr/web/api/node/textcontent/index.html       |   56 +-
 files/fr/web/api/nodefilter/acceptnode/index.html  |   10 +-
 files/fr/web/api/nodefilter/index.html             |    4 +-
 files/fr/web/api/nodeiterator/detach/index.html    |    6 +-
 .../nodeiterator/expandentityreferences/index.html |   10 +-
 files/fr/web/api/nodeiterator/filter/index.html    |    4 +-
 files/fr/web/api/nodeiterator/index.html           |    6 +-
 files/fr/web/api/nodeiterator/nextnode/index.html  |    6 +-
 .../pointerbeforereferencenode/index.html          |    6 +-
 .../web/api/nodeiterator/previousnode/index.html   |    6 +-
 .../web/api/nodeiterator/referencenode/index.html  |    6 +-
 files/fr/web/api/nodeiterator/root/index.html      |    6 +-
 .../fr/web/api/nodeiterator/whattoshow/index.html  |    6 +-
 files/fr/web/api/nodelist/entries/index.html       |    2 +-
 files/fr/web/api/nodelist/foreach/index.html       |    2 +-
 files/fr/web/api/nodelist/index.html               |   31 +-
 files/fr/web/api/nodelist/item/index.html          |    8 +-
 files/fr/web/api/nodelist/keys/index.html          |    2 +-
 files/fr/web/api/nodelist/length/index.html        |   10 +-
 files/fr/web/api/nodelist/values/index.html        |    2 +-
 files/fr/web/api/notification/actions/index.html   |   10 +-
 files/fr/web/api/notification/badge/index.html     |    6 +-
 files/fr/web/api/notification/body/index.html      |    4 +-
 files/fr/web/api/notification/close/index.html     |    6 +-
 files/fr/web/api/notification/data/index.html      |    4 +-
 files/fr/web/api/notification/dir/index.html       |   10 +-
 files/fr/web/api/notification/icon/index.html      |    2 +-
 files/fr/web/api/notification/image/index.html     |    6 +-
 files/fr/web/api/notification/index.html           |   13 +-
 files/fr/web/api/notification/lang/index.html      |    4 +-
 .../fr/web/api/notification/maxactions/index.html  |    4 +-
 .../web/api/notification/notification/index.html   |    4 +-
 files/fr/web/api/notification/onclick/index.html   |    2 +-
 files/fr/web/api/notification/onclose/index.html   |    4 +-
 files/fr/web/api/notification/onerror/index.html   |    6 +-
 files/fr/web/api/notification/onshow/index.html    |    4 +-
 .../fr/web/api/notification/permission/index.html  |   10 +-
 files/fr/web/api/notification/renotify/index.html  |    4 +-
 .../api/notification/requestpermission/index.html  |   14 +-
 .../api/notification/requireinteraction/index.html |    6 +-
 files/fr/web/api/notification/silent/index.html    |    4 +-
 files/fr/web/api/notification/tag/index.html       |    2 +-
 files/fr/web/api/notification/timestamp/index.html |    8 +-
 files/fr/web/api/notification/title/index.html     |    4 +-
 files/fr/web/api/notification/vibrate/index.html   |    8 +-
 files/fr/web/api/notifications_api/index.html      |   14 +-
 .../web/api/notifyaudioavailableevent/index.html   |    2 +-
 .../offlineaudiocontext/complete_event/index.html  |    2 +-
 files/fr/web/api/offscreencanvas/index.html        |    2 +-
 files/fr/web/api/oscillatornode/index.html         |    2 +-
 files/fr/web/api/page_visibility_api/index.html    |   37 +-
 files/fr/web/api/pagetransitionevent/index.html    |    2 +-
 files/fr/web/api/payment_request_api/index.html    |    4 +-
 files/fr/web/api/performance/clearmarks/index.html |    2 +-
 .../web/api/performance/clearmeasures/index.html   |    2 +-
 .../performance/clearresourcetimings/index.html    |    2 +-
 files/fr/web/api/performance/getentries/index.html |    2 +-
 .../api/performance/getentriesbyname/index.html    |    2 +-
 .../api/performance/getentriesbytype/index.html    |    2 +-
 files/fr/web/api/performance/index.html            |   12 +-
 files/fr/web/api/performance/mark/index.html       |    2 +-
 files/fr/web/api/performance/measure/index.html    |    2 +-
 files/fr/web/api/performance/navigation/index.html |    6 +-
 files/fr/web/api/performance/now/index.html        |    2 +-
 .../onresourcetimingbufferfull/index.html          |    2 +-
 .../resourcetimingbufferfull_event/index.html      |    2 +-
 .../setresourcetimingbuffersize/index.html         |    2 +-
 files/fr/web/api/performance/timeorigin/index.html |    2 +-
 files/fr/web/api/performance/timing/index.html     |    6 +-
 files/fr/web/api/performance/tojson/index.html     |    2 +-
 files/fr/web/api/performance_api/index.html        |    4 +-
 .../using_the_performance_api/index.html           |    4 +-
 files/fr/web/api/performance_timeline/index.html   |    8 +-
 .../using_performance_timeline/index.html          |    4 +-
 .../performanceelementtiming/element/index.html    |    6 +-
 .../web/api/performanceelementtiming/id/index.html |    6 +-
 .../performanceelementtiming/identifier/index.html |    6 +-
 .../fr/web/api/performanceelementtiming/index.html |    2 +-
 .../intersectionrect/index.html                    |    6 +-
 .../performanceelementtiming/loadtime/index.html   |    6 +-
 .../naturalheight/index.html                       |    6 +-
 .../naturalwidth/index.html                        |    6 +-
 .../performanceelementtiming/rendertime/index.html |    6 +-
 .../api/performanceelementtiming/tojson/index.html |    6 +-
 .../api/performanceelementtiming/url/index.html    |    6 +-
 .../web/api/performanceentry/duration/index.html   |    2 +-
 .../web/api/performanceentry/entrytype/index.html  |    2 +-
 files/fr/web/api/performanceentry/index.html       |    2 +-
 files/fr/web/api/performanceentry/name/index.html  |    2 +-
 .../web/api/performanceentry/starttime/index.html  |    2 +-
 .../fr/web/api/performanceentry/tojson/index.html  |    2 +-
 files/fr/web/api/performanceeventtiming/index.html |    8 +-
 files/fr/web/api/performanceframetiming/index.html |    2 +-
 files/fr/web/api/performancemark/index.html        |    2 +-
 files/fr/web/api/performancemeasure/index.html     |    2 +-
 files/fr/web/api/performancenavigation/index.html  |    2 +-
 .../performancenavigation/redirectcount/index.html |    2 +-
 .../web/api/performancenavigation/type/index.html  |    2 +-
 .../domcomplete/index.html                         |    2 +-
 .../web/api/performancenavigationtiming/index.html |    5 +-
 files/fr/web/api/performanceobserver/index.html    |    2 +-
 .../web/api/performanceobserver/observe/index.html |    6 +-
 .../performanceobserver/index.html                 |    2 +-
 .../getentries/index.html                          |    6 +-
 .../getentriesbyname/index.html                    |    6 +-
 .../getentriesbytype/index.html                    |    6 +-
 .../api/performanceobserverentrylist/index.html    |    6 +-
 files/fr/web/api/performancepainttiming/index.html |    2 +-
 .../connectend/index.html                          |    2 +-
 .../connectstart/index.html                        |    2 +-
 .../decodedbodysize/index.html                     |    2 +-
 .../domainlookupend/index.html                     |    2 +-
 .../domainlookupstart/index.html                   |    2 +-
 .../encodedbodysize/index.html                     |    2 +-
 .../fetchstart/index.html                          |    2 +-
 .../web/api/performanceresourcetiming/index.html   |    2 +-
 .../initiatortype/index.html                       |    2 +-
 .../nexthopprotocol/index.html                     |    2 +-
 .../redirectend/index.html                         |    2 +-
 .../redirectstart/index.html                       |    2 +-
 .../requeststart/index.html                        |    2 +-
 .../responseend/index.html                         |    2 +-
 .../responsestart/index.html                       |    2 +-
 .../secureconnectionstart/index.html               |    2 +-
 .../servertiming/index.html                        |    2 +-
 .../performanceresourcetiming/tojson/index.html    |    2 +-
 .../transfersize/index.html                        |    2 +-
 .../workerstart/index.html                         |    2 +-
 .../performanceservertiming/description/index.html |    2 +-
 .../performanceservertiming/duration/index.html    |    2 +-
 .../fr/web/api/performanceservertiming/index.html  |    2 +-
 .../api/performanceservertiming/name/index.html    |    2 +-
 .../api/performanceservertiming/tojson/index.html  |    2 +-
 .../api/performancetiming/connectend/index.html    |    4 +-
 .../api/performancetiming/connectstart/index.html  |    4 +-
 .../performancetiming/domainlookupend/index.html   |    4 +-
 .../performancetiming/domainlookupstart/index.html |    4 +-
 .../api/performancetiming/domcomplete/index.html   |    4 +-
 .../domcontentloadedeventend/index.html            |    4 +-
 .../domcontentloadedeventstart/index.html          |    4 +-
 .../performancetiming/dominteractive/index.html    |    4 +-
 .../api/performancetiming/domloading/index.html    |    4 +-
 .../api/performancetiming/fetchstart/index.html    |    4 +-
 files/fr/web/api/performancetiming/index.html      |    4 +-
 .../api/performancetiming/loadeventend/index.html  |    4 +-
 .../performancetiming/loadeventstart/index.html    |    4 +-
 .../performancetiming/navigationstart/index.html   |    4 +-
 .../api/performancetiming/redirectend/index.html   |    4 +-
 .../api/performancetiming/redirectstart/index.html |    4 +-
 .../api/performancetiming/requeststart/index.html  |    4 +-
 .../api/performancetiming/responseend/index.html   |    4 +-
 .../api/performancetiming/responsestart/index.html |    4 +-
 .../secureconnectionstart/index.html               |    4 +-
 .../performancetiming/unloadeventend/index.html    |    4 +-
 .../performancetiming/unloadeventstart/index.html  |    4 +-
 files/fr/web/api/plugin/index.html                 |    6 +-
 files/fr/web/api/pointer_events/index.html         |   24 +-
 .../pointer_events/pinch_zoom_gestures/index.html  |    6 +-
 files/fr/web/api/pointer_lock_api/index.html       |   24 +-
 files/fr/web/api/pointerevent/index.html           |    4 +-
 .../web/api/positionoptions/maximumage/index.html  |    2 +-
 .../fr/web/api/positionoptions/timeout/index.html  |    2 +-
 files/fr/web/api/processinginstruction/index.html  |   14 +-
 files/fr/web/api/push_api/index.html               |   18 +-
 files/fr/web/api/pushevent/index.html              |    4 +-
 files/fr/web/api/queuemicrotask/index.html         |    4 +-
 .../api/range/createcontextualfragment/index.html  |    6 +-
 files/fr/web/api/range/extractcontents/index.html  |    2 +-
 files/fr/web/api/range/index.html                  |   24 +-
 files/fr/web/api/range/selectnode/index.html       |    8 +-
 files/fr/web/api/range/setstart/index.html         |   10 +-
 files/fr/web/api/range/surroundcontents/index.html |    8 +-
 files/fr/web/api/request/index.html                |   10 +-
 files/fr/web/api/request/mode/index.html           |    2 +-
 files/fr/web/api/request/request/index.html        |    6 +-
 files/fr/web/api/resize_observer_api/index.html    |    2 +-
 files/fr/web/api/rtciceserver/index.html           |    2 +-
 .../rtcpeerconnection/setconfiguration/index.html  |    2 +-
 files/fr/web/api/screen_capture_api/index.html     |    4 +-
 .../audioprocess_event/index.html                  |    2 +-
 files/fr/web/api/selection/index.html              |   30 +-
 files/fr/web/api/selection/tostring/index.html     |   15 +-
 files/fr/web/api/server-sent_events/index.html     |   62 +-
 .../using_server-sent_events/index.html            |   10 +-
 files/fr/web/api/service_worker_api/index.html     |   20 +-
 .../using_service_workers/index.html               |   73 +-
 files/fr/web/api/serviceworker/index.html          |    6 +-
 .../getregistration/index.html                     |    4 +-
 files/fr/web/api/serviceworkercontainer/index.html |   14 +-
 .../api/serviceworkercontainer/register/index.html |   20 +-
 .../fr/web/api/serviceworkerglobalscope/index.html |    6 +-
 .../onnotificationclick/index.html                 |   12 +-
 .../serviceworkerregistration/active/index.html    |   16 +-
 .../getnotifications/index.html                    |    6 +-
 .../web/api/serviceworkerregistration/index.html   |   14 +-
 .../api/serviceworkerregistration/scope/index.html |    8 +-
 .../shownotification/index.html                    |    4 +-
 files/fr/web/api/settimeout/index.html             |   20 +-
 .../web/api/shadowroot/delegatesfocus/index.html   |    4 +-
 files/fr/web/api/sharedworker/index.html           |   52 +-
 files/fr/web/api/sharedworker/port/index.html      |    2 +-
 .../web/api/sharedworker/sharedworker/index.html   |    4 +-
 .../applicationcache/index.html                    |    4 +-
 .../sharedworkerglobalscope/onconnect/index.html   |    8 +-
 files/fr/web/api/speechrecognition/index.html      |    2 +-
 files/fr/web/api/storage/clear/index.html          |    4 +-
 files/fr/web/api/storage/getitem/index.html        |    8 +-
 files/fr/web/api/storage/key/index.html            |    2 +-
 files/fr/web/api/storage/length/index.html         |    2 +-
 files/fr/web/api/storage/removeitem/index.html     |   12 +-
 files/fr/web/api/storage/setitem/index.html        |    2 +-
 files/fr/web/api/storage_api/index.html            |    4 +-
 .../fr/web/api/storagemanager/estimate/index.html  |    2 +-
 files/fr/web/api/storagemanager/persist/index.html |    2 +-
 .../fr/web/api/storagemanager/persisted/index.html |    2 +-
 files/fr/web/api/streams_api/index.html            |   10 +-
 files/fr/web/api/stylesheet/disabled/index.html    |   22 +-
 files/fr/web/api/stylesheet/href/index.html        |   62 +-
 files/fr/web/api/stylesheet/index.html             |    4 +-
 files/fr/web/api/stylesheet/media/index.html       |   30 +-
 files/fr/web/api/stylesheet/ownernode/index.html   |   52 +-
 .../web/api/stylesheet/parentstylesheet/index.html |   34 +-
 files/fr/web/api/stylesheet/title/index.html       |   14 +-
 files/fr/web/api/stylesheet/type/index.html        |   22 +-
 files/fr/web/api/stylesheetlist/index.html         |    4 +-
 files/fr/web/api/subtlecrypto/digest/index.html    |   20 +-
 files/fr/web/api/subtlecrypto/index.html           |    2 +-
 files/fr/web/api/svgaelement/index.html            |    2 +-
 files/fr/web/api/svgelement/index.html             |    2 +-
 files/fr/web/api/svgmatrix/index.html              |    8 +-
 files/fr/web/api/svgrect/index.html                |    2 +-
 files/fr/web/api/svgtitleelement/index.html        |    2 +-
 files/fr/web/api/syncmanager/index.html            |    2 +-
 files/fr/web/api/text/index.html                   |    6 +-
 files/fr/web/api/textencoder/index.html            |   16 +-
 .../fr/web/api/textencoder/textencoder/index.html  |   10 +-
 files/fr/web/api/textmetrics/width/index.html      |    4 +-
 files/fr/web/api/timeranges/index.html             |   10 +-
 files/fr/web/api/touch_events/index.html           |   27 +-
 files/fr/web/api/transferable/index.html           |    4 +-
 files/fr/web/api/transitionevent/index.html        |  117 +-
 files/fr/web/api/treewalker/currentnode/index.html |    6 +-
 .../treewalker/expandentityreferences/index.html   |    6 +-
 files/fr/web/api/treewalker/filter/index.html      |    6 +-
 files/fr/web/api/treewalker/firstchild/index.html  |    6 +-
 files/fr/web/api/treewalker/index.html             |    8 +-
 files/fr/web/api/treewalker/lastchild/index.html   |    6 +-
 files/fr/web/api/treewalker/nextnode/index.html    |    6 +-
 files/fr/web/api/treewalker/nextsibling/index.html |    6 +-
 files/fr/web/api/treewalker/parentnode/index.html  |    6 +-
 .../fr/web/api/treewalker/previousnode/index.html  |    6 +-
 .../web/api/treewalker/previoussibling/index.html  |    6 +-
 files/fr/web/api/treewalker/root/index.html        |    6 +-
 files/fr/web/api/treewalker/whattoshow/index.html  |    2 +-
 files/fr/web/api/uievent/index.html                |    8 +-
 files/fr/web/api/uievent/layerx/index.html         |    4 +-
 files/fr/web/api/url/createobjecturl/index.html    |   27 +-
 files/fr/web/api/url/hash/index.html               |    2 +-
 files/fr/web/api/url/index.html                    |   46 +-
 files/fr/web/api/url/revokeobjecturl/index.html    |    2 +-
 files/fr/web/api/url/tojson/index.html             |    4 +-
 files/fr/web/api/url/tostring/index.html           |    4 +-
 files/fr/web/api/url/url/index.html                |   42 +-
 .../fr/web/api/urlsearchparams/entries/index.html  |    4 +-
 files/fr/web/api/usvstring/index.html              |    2 +-
 files/fr/web/api/videotrack/id/index.html          |    2 +-
 files/fr/web/api/videotrack/index.html             |    8 +-
 files/fr/web/api/web_animations_api/index.html     |    8 +-
 .../audionodes.svg                                 |    5 +
 .../fttaudiodata.svg                               |   39 +
 .../basic_concepts_behind_web_audio_api/index.html |   39 +-
 .../listener.svg                                   |    1 +
 .../pannernode.svg                                 |    1 +
 .../sampleframe.svg                                |  133 ++
 files/fr/web/api/web_audio_api/index.html          |   68 +-
 .../web_audio_api/using_web_audio_api/index.html   |   29 +-
 .../visualizations_with_web_audio_api/index.html   |   18 +-
 .../web_audio_spatialization_basics/index.html     |   24 +-
 files/fr/web/api/web_speech_api/index.html         |   18 +-
 .../using_the_web_speech_api/index.html            |   50 +-
 files/fr/web/api/web_storage_api/index.html        |    8 +-
 .../using_the_web_storage_api/index.html           |   26 +-
 .../index.html                                     |    6 +-
 files/fr/web/api/web_workers_api/index.html        |   10 +-
 .../structured_clone_algorithm/index.html          |   14 +-
 .../web_workers_api/using_web_workers/index.html   |   27 +-
 files/fr/web/api/webgl2renderingcontext/index.html |    2 +-
 .../by_example/basic_scissoring/index.html         |    4 +-
 .../webgl_api/by_example/boilerplate_1/index.html  |    2 +-
 .../by_example/canvas_size_and_webgl/index.html    |    2 +-
 .../by_example/clearing_by_clicking/index.html     |    2 +-
 .../by_example/clearing_with_colors/index.html     |    2 +-
 .../webgl_api/by_example/color_masking/index.html  |   10 +-
 .../webgl_api/by_example/detect_webgl/index.html   |    2 +-
 .../api/webgl_api/by_example/hello_glsl/index.html |    2 +-
 .../by_example/hello_vertex_attributes/index.html  |    2 +-
 files/fr/web/api/webgl_api/by_example/index.html   |    4 +-
 .../by_example/raining_rectangles/index.html       |    4 +-
 .../by_example/scissor_animation/index.html        |    2 +-
 .../by_example/simple_color_animation/index.html   |    4 +-
 .../by_example/textures_from_code/index.html       |    8 +-
 .../webgl_api/by_example/video_textures/index.html |    2 +-
 files/fr/web/api/webgl_api/index.html              |   50 +-
 .../index.html                                     |    8 +-
 .../animating_textures_in_webgl/index.html         |    2 +-
 .../tutorial/getting_started_with_webgl/index.html |   16 +-
 files/fr/web/api/webgl_api/tutorial/index.html     |    8 +-
 .../index.html                                     |    2 +-
 .../tutorial/using_textures_in_webgl/index.html    |    6 +-
 .../api/webglrenderingcontext/enable/index.html    |    6 +-
 .../enablevertexattribarray/index.html             |   12 +-
 .../getuniformlocation/index.html                  |   22 +-
 files/fr/web/api/webglrenderingcontext/index.html  |    2 +-
 .../webglrenderingcontext/teximage2d/index.html    |   15 +-
 .../api/webglrenderingcontext/uniform/index.html   |    2 +-
 .../vertexattribpointer/index.html                 |   26 +-
 .../fr/web/api/webrtc_api/connectivity/index.html  |    8 +-
 files/fr/web/api/webrtc_api/index.html             |   33 +-
 .../web/api/webrtc_api/session_lifetime/index.html |   17 +-
 .../signaling_and_video_calling/index.html         |   46 +-
 .../api/webrtc_api/taking_still_photos/index.html  |    4 +-
 files/fr/web/api/websocket/index.html              |    1 -
 files/fr/web/api/websocket/websocket/index.html    |    4 +-
 files/fr/web/api/websockets_api/index.html         |   36 +-
 .../writing_a_websocket_server_in_java/index.html  |   18 +-
 .../index.html                                     |   28 +-
 .../writing_websocket_servers/index.html           |   58 +-
 files/fr/web/api/webvr_api/index.html              |    2 +-
 .../using_vr_controllers_with_webvr/index.html     |    4 +-
 files/fr/web/api/webvtt_api/index.html             |  164 +-
 files/fr/web/api/webxr_device_api/index.html       |   10 +-
 files/fr/web/api/wheelevent/deltax/index.html      |    4 +-
 files/fr/web/api/wheelevent/deltay/index.html      |    4 +-
 files/fr/web/api/wheelevent/deltaz/index.html      |    4 +-
 files/fr/web/api/wheelevent/index.html             |   10 +-
 .../fr/web/api/window/afterprint_event/index.html  |    4 +-
 files/fr/web/api/window/alert/index.html           |   27 +-
 .../fr/web/api/window/applicationcache/index.html  |   12 +-
 files/fr/web/api/window/back/index.html            |    6 +-
 .../fr/web/api/window/beforeprint_event/index.html |    4 +-
 .../web/api/window/beforeunload_event/index.html   |    6 +-
 files/fr/web/api/window/blur/index.html            |   14 +-
 .../web/api/window/cancelanimationframe/index.html |    2 +-
 .../web/api/window/cancelidlecallback/index.html   |   10 +-
 files/fr/web/api/window/captureevents/index.html   |    4 +-
 files/fr/web/api/window/clearimmediate/index.html  |   13 +-
 files/fr/web/api/window/close/index.html           |   23 +-
 files/fr/web/api/window/closed/index.html          |   24 +-
 files/fr/web/api/window/confirm/index.html         |   24 +-
 files/fr/web/api/window/console/index.html         |    6 +-
 files/fr/web/api/window/content/index.html         |   15 +-
 files/fr/web/api/window/controllers/index.html     |   14 +-
 files/fr/web/api/window/copy_event/index.html      |    4 +-
 files/fr/web/api/window/customelements/index.html  |    6 +-
 files/fr/web/api/window/cut_event/index.html       |    4 +-
 files/fr/web/api/window/defaultstatus/index.html   |   14 +-
 .../web/api/window/devicemotion_event/index.html   |   32 +-
 .../fr/web/api/window/devicepixelratio/index.html  |    2 +-
 files/fr/web/api/window/dialogarguments/index.html |    4 +-
 files/fr/web/api/window/directories/index.html     |   12 +-
 files/fr/web/api/window/document/index.html        |    4 +-
 .../api/window/domcontentloaded_event/index.html   |   12 +-
 files/fr/web/api/window/dump/index.html            |   14 +-
 files/fr/web/api/window/event/index.html           |    2 +-
 files/fr/web/api/window/find/index.html            |    8 +-
 files/fr/web/api/window/focus/index.html           |    6 +-
 files/fr/web/api/window/frameelement/index.html    |    6 +-
 files/fr/web/api/window/frames/index.html          |   18 +-
 files/fr/web/api/window/fullscreen/index.html      |   18 +-
 .../api/window/gamepadconnected_event/index.html   |    4 +-
 .../window/gamepaddisconnected_event/index.html    |    4 +-
 .../fr/web/api/window/getcomputedstyle/index.html  |   32 +-
 files/fr/web/api/window/getselection/index.html    |   22 +-
 files/fr/web/api/window/history/index.html         |   18 +-
 files/fr/web/api/window/home/index.html            |    4 +-
 files/fr/web/api/window/index.html                 |  129 +-
 files/fr/web/api/window/innerheight/index.html     |   20 +-
 files/fr/web/api/window/innerwidth/index.html      |    6 +-
 files/fr/web/api/window/issecurecontext/index.html |    4 +-
 .../web/api/window/languagechange_event/index.html |    4 +-
 files/fr/web/api/window/length/index.html          |    8 +-
 files/fr/web/api/window/load_event/index.html      |    2 +-
 files/fr/web/api/window/localstorage/index.html    |    4 +-
 files/fr/web/api/window/locationbar/index.html     |    4 +-
 files/fr/web/api/window/matchmedia/index.html      |   17 +-
 files/fr/web/api/window/menubar/index.html         |    4 +-
 files/fr/web/api/window/message_event/index.html   |    8 +-
 .../web/api/window/messageerror_event/index.html   |    4 +-
 .../api/window/mozanimationstarttime/index.html    |    8 +-
 files/fr/web/api/window/mozinnerscreenx/index.html |    6 +-
 files/fr/web/api/window/mozinnerscreeny/index.html |    8 +-
 files/fr/web/api/window/mozpaintcount/index.html   |   10 +-
 files/fr/web/api/window/offline_event/index.html   |    4 +-
 files/fr/web/api/window/online_event/index.html    |   12 +-
 files/fr/web/api/window/onpaint/index.html         |    6 +-
 files/fr/web/api/window/open/index.html            |  536 ++----
 files/fr/web/api/window/opendialog/index.html      |   89 +-
 files/fr/web/api/window/opener/index.html          |   15 +-
 files/fr/web/api/window/outerheight/index.html     |    6 +-
 files/fr/web/api/window/outerwidth/index.html      |   14 +-
 files/fr/web/api/window/pagehide_event/index.html  |   26 +-
 files/fr/web/api/window/pageshow_event/index.html  |   26 +-
 files/fr/web/api/window/parent/index.html          |   10 +-
 files/fr/web/api/window/paste_event/index.html     |    6 +-
 files/fr/web/api/window/popstate_event/index.html  |    2 +-
 files/fr/web/api/window/postmessage/index.html     |   28 +-
 files/fr/web/api/window/print/index.html           |   10 +-
 files/fr/web/api/window/prompt/index.html          |    8 +-
 .../api/window/rejectionhandled_event/index.html   |    6 +-
 .../api/window/requestanimationframe/index.html    |   20 +-
 .../web/api/window/requestidlecallback/index.html  |   10 +-
 files/fr/web/api/window/resizeby/index.html        |    6 +-
 files/fr/web/api/window/screen/index.html          |    8 +-
 files/fr/web/api/window/screenx/index.html         |    6 +-
 files/fr/web/api/window/scroll/index.html          |   17 +-
 files/fr/web/api/window/scrollbars/index.html      |    4 +-
 files/fr/web/api/window/scrollby/index.html        |   12 +-
 files/fr/web/api/window/scrollbylines/index.html   |   18 +-
 files/fr/web/api/window/scrollbypages/index.html   |   14 +-
 files/fr/web/api/window/scrollto/index.html        |   16 +-
 files/fr/web/api/window/scrolly/index.html         |   10 +-
 files/fr/web/api/window/sessionstorage/index.html  |   10 +-
 files/fr/web/api/window/showmodaldialog/index.html |   30 +-
 files/fr/web/api/window/stop/index.html            |   20 +-
 files/fr/web/api/window/storage_event/index.html   |    4 +-
 files/fr/web/api/window/top/index.html             |    2 +-
 files/fr/web/api/window/unload_event/index.html    |   23 +-
 .../api/window/vrdisplayconnect_event/index.html   |    4 +-
 .../window/vrdisplaydisconnect_event/index.html    |    4 +-
 .../window/vrdisplaypresentchange_event/index.html |    4 +-
 files/fr/web/api/windowclient/focus/index.html     |    2 +-
 files/fr/web/api/windowclient/index.html           |    2 +-
 files/fr/web/api/windowclient/navigate/index.html  |    4 +-
 .../api/windowclient/visibilitystate/index.html    |    8 +-
 files/fr/web/api/windoweventhandlers/index.html    |    3 +-
 .../windoweventhandlers/onafterprint/index.html    |    6 +-
 .../windoweventhandlers/onbeforeprint/index.html   |   14 +-
 .../windoweventhandlers/onbeforeunload/index.html  |   10 +-
 .../windoweventhandlers/onhashchange/index.html    |    4 +-
 .../onlanguagechange/index.html                    |    4 +-
 .../api/windoweventhandlers/onpopstate/index.html  |   16 +-
 .../web/api/windoworworkerglobalscope/index.html   |    4 +-
 files/fr/web/api/worker/index.html                 |   28 +-
 files/fr/web/api/worker/onmessage/index.html       |    4 +-
 files/fr/web/api/worker/postmessage/index.html     |  123 +-
 files/fr/web/api/worker/worker/index.html          |   12 +-
 .../web/api/workerglobalscope/console/index.html   |    2 +-
 files/fr/web/api/workerglobalscope/dump/index.html |    4 +-
 .../api/workerglobalscope/importscripts/index.html |    2 +-
 files/fr/web/api/workerglobalscope/index.html      |    4 +-
 .../web/api/workerglobalscope/location/index.html  |    4 +-
 .../web/api/workerglobalscope/navigator/index.html |    4 +-
 files/fr/web/api/workerglobalscope/self/index.html |    2 +-
 files/fr/web/api/xmldocument/async/index.html      |    4 +-
 files/fr/web/api/xmldocument/load/index.html       |   14 +-
 .../web/api/xmlhttprequest/abort_event/index.html  |    4 +-
 files/fr/web/api/xmlhttprequest/index.html         |   38 +-
 .../xmlhttprequest/onreadystatechange/index.html   |    8 +-
 files/fr/web/api/xmlhttprequest/open/index.html    |   10 +-
 .../web/api/xmlhttprequest/readystate/index.html   |    6 +-
 .../fr/web/api/xmlhttprequest/response/index.html  |    2 +-
 .../web/api/xmlhttprequest/responsetext/index.html |    6 +-
 files/fr/web/api/xmlhttprequest/send/index.html    |   10 +-
 .../api/xmlhttprequest/setrequestheader/index.html |    2 +-
 files/fr/web/api/xmlhttprequest/status/index.html  |    2 +-
 files/fr/web/api/xmlhttprequest/timeout/index.html |    8 +-
 .../xmlhttprequest/using_xmlhttprequest/index.html |   98 +-
 .../api/xmlhttprequest/xmlhttprequest/index.html   |    8 +-
 .../web/api/xmlhttprequesteventtarget/index.html   |    2 +-
 .../xmlhttprequesteventtarget/onload/index.html    |    8 +-
 files/fr/web/api/xmlserializer/index.html          |   18 +-
 files/fr/web/api/xpathexpression/index.html        |    2 +-
 .../web/api/xsltprocessor/basic_example/index.html |    2 +-
 .../xsltprocessor/browser_differences/index.html   |    4 +-
 .../api/xsltprocessor/generating_html/index.html   |   16 +-
 files/fr/web/api/xsltprocessor/index.html          |    6 +-
 .../xsl_transformations_in_mozilla_faq/index.html  |   35 +-
 1237 files changed, 9965 insertions(+), 10958 deletions(-)
 create mode 100644 files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/audionodes.svg
 create mode 100644 files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/fttaudiodata.svg
 create mode 100644 files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/listener.svg
 create mode 100644 files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/pannernode.svg
 create mode 100644 files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/sampleframe.svg

(limited to 'files/fr')

diff --git a/files/fr/web/api/abortsignal/index.html b/files/fr/web/api/abortsignal/index.html
index 5e4a319cbf..11a48ef3d1 100644
--- a/files/fr/web/api/abortsignal/index.html
+++ b/files/fr/web/api/abortsignal/index.html
@@ -35,13 +35,13 @@ translation_of: Web/API/AbortSignal
 
 

Exemples

-

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

+

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.

+

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 controller = new AbortController();
 var signal = controller.signal;
 
 var downloadBtn = document.querySelector('.download');
@@ -64,7 +64,7 @@ function fetchVideo() {
 }
-

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

+

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

@@ -93,6 +93,6 @@ function fetchVideo() {

Voir aussi

diff --git a/files/fr/web/api/analysernode/analysernode/index.html b/files/fr/web/api/analysernode/analysernode/index.html index c3ef05a74c..a10fd3ee15 100644 --- a/files/fr/web/api/analysernode/analysernode/index.html +++ b/files/fr/web/api/analysernode/analysernode/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/AnalyserNode/AnalyserNode ---

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

-

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

+

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

Syntax

@@ -17,11 +17,11 @@ translation_of: Web/API/AnalyserNode/AnalyserNode
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.
  • +
  • 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
diff --git a/files/fr/web/api/analysernode/fftsize/index.html b/files/fr/web/api/analysernode/fftsize/index.html index cc22b77283..966bf915dd 100644 --- a/files/fr/web/api/analysernode/fftsize/index.html +++ b/files/fr/web/api/analysernode/fftsize/index.html @@ -5,12 +5,12 @@ 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 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.

+

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

diff --git a/files/fr/web/api/analysernode/frequencybincount/index.html b/files/fr/web/api/analysernode/frequencybincount/index.html index a40c20348e..90a99b7f10 100644 --- a/files/fr/web/api/analysernode/frequencybincount/index.html +++ b/files/fr/web/api/analysernode/frequencybincount/index.html @@ -5,7 +5,7 @@ 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.

+ 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

@@ -20,7 +20,7 @@ var tailleMemoireTampon = analyseur.frequencyBinCount;

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

+

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();
@@ -84,5 +84,5 @@ dessiner();

Voir aussi

diff --git a/files/fr/web/api/analysernode/getbytefrequencydata/index.html b/files/fr/web/api/analysernode/getbytefrequencydata/index.html index d61d173cc5..dde3750690 100644 --- a/files/fr/web/api/analysernode/getbytefrequencydata/index.html +++ b/files/fr/web/api/analysernode/getbytefrequencydata/index.html @@ -5,7 +5,7 @@ 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.

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

@@ -29,7 +29,7 @@ analyseur.getByteFrequencyData(tableauDonnees);

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

+

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();
@@ -97,7 +97,7 @@ dessiner();

Voir aussi

-

Utiliser la Web Audio API

+

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 index 0b856d5a7c..1610af5c55 100644 --- a/files/fr/web/api/analysernode/getbytetimedomaindata/index.html +++ b/files/fr/web/api/analysernode/getbytetimedomaindata/index.html @@ -13,11 +13,11 @@ translation_of: Web/API/AnalyserNode/getByteTimeDomainData

Syntaxe

-
var contexteAudio = new AudioContext();
-var analyseur = contexteAudio.createAnalyser();
+
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);
+// 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); 
@@ -30,8 +30,8 @@ analyseur.getByteTimeDomainData(tableauDonnees);

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();
+
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
 
   ...
 
diff --git a/files/fr/web/api/analysernode/getfloatfrequencydata/index.html b/files/fr/web/api/analysernode/getfloatfrequencydata/index.html
index 86cbae8c06..fb4e6e2785 100644
--- a/files/fr/web/api/analysernode/getfloatfrequencydata/index.html
+++ b/files/fr/web/api/analysernode/getfloatfrequencydata/index.html
@@ -27,7 +27,7 @@ analyseur.getByteTimeDomainData(tableauDonnees);
 
 
array
-
{{domxref("Float32Array")}} dans lequel seront copiées les données de fréquence. Pour tout échantillon silencieux, la valeur est -Infinity.
+
{{domxref("Float32Array")}} dans lequel seront copiées les données de fréquence. Pour tout échantillon silencieux, la valeur est -Infinity.

Valeur de retour

diff --git a/files/fr/web/api/analysernode/index.html b/files/fr/web/api/analysernode/index.html index 5b7114d578..217c8b7f64 100644 --- a/files/fr/web/api/analysernode/index.html +++ b/files/fr/web/api/analysernode/index.html @@ -13,12 +13,12 @@ translation_of: Web/API/AnalyserNode

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

-

Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT.

+

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.

- + @@ -94,12 +94,12 @@ translation_of: Web/API/AnalyserNode

Exemples

-

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

+

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 contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 var analyseur = contexteAudio.createAnalyser();
 
   ...
@@ -110,8 +110,7 @@ var tableauDonnees = new Uint8Array(tailleMemoireTampon);
 analyseur.getByteTimeDomainData(tableauDonnees);
 
 // dessine un oscilloscope de la source audio
-
-var canvas = document.getElementById("oscilloscope");
+var canvas = document.getElementById("oscilloscope");
 var contexteCanvas = canvas.getContext("2d");
 
 function dessiner() {
@@ -149,7 +148,7 @@ function dessiner() {
       contexteCanvas.stroke();
     };
 
-    dessiner();
+ dessiner();

Spécifications

diff --git a/files/fr/web/api/analysernode/maxdecibels/index.html b/files/fr/web/api/analysernode/maxdecibels/index.html index 8a60ef75ca..046c1bcf64 100644 --- a/files/fr/web/api/analysernode/maxdecibels/index.html +++ b/files/fr/web/api/analysernode/maxdecibels/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/AnalyserNode/maxDecibels

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.

+

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

Syntaxe

diff --git a/files/fr/web/api/analysernode/mindecibels/index.html b/files/fr/web/api/analysernode/mindecibels/index.html index 4d8961e51d..af3c639646 100644 --- a/files/fr/web/api/analysernode/mindecibels/index.html +++ b/files/fr/web/api/analysernode/mindecibels/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/AnalyserNode/minDecibels

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.

+

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

Syntaxe

diff --git a/files/fr/web/api/analysernode/smoothingtimeconstant/index.html b/files/fr/web/api/analysernode/smoothingtimeconstant/index.html index 51ee0e3c5d..5e438dd47b 100644 --- a/files/fr/web/api/analysernode/smoothingtimeconstant/index.html +++ b/files/fr/web/api/analysernode/smoothingtimeconstant/index.html @@ -5,14 +5,14 @@ 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 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.

+

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

Syntaxe

diff --git a/files/fr/web/api/animation/index.html b/files/fr/web/api/animation/index.html index ac14fa817f..d2a3f61044 100644 --- a/files/fr/web/api/animation/index.html +++ b/files/fr/web/api/animation/index.html @@ -14,7 +14,7 @@ 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.

+

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

diff --git a/files/fr/web/api/animationevent/animationevent/index.html b/files/fr/web/api/animationevent/animationevent/index.html index d610f10bec..aa793738cf 100644 --- a/files/fr/web/api/animationevent/animationevent/index.html +++ b/files/fr/web/api/animationevent/animationevent/index.html @@ -22,11 +22,11 @@ translation_of: Web/API/AnimationEvent/AnimationEvent
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 "".
+
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 "".
+
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

diff --git a/files/fr/web/api/animationevent/index.html b/files/fr/web/api/animationevent/index.html index 0001dcfe0d..9b24b82be1 100644 --- a/files/fr/web/api/animationevent/index.html +++ b/files/fr/web/api/animationevent/index.html @@ -11,7 +11,7 @@ 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.

+

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

{{InheritanceDiagram}}

diff --git a/files/fr/web/api/animationevent/pseudoelement/index.html b/files/fr/web/api/animationevent/pseudoelement/index.html index 188f2b43f0..9bee1cda03 100644 --- a/files/fr/web/api/animationevent/pseudoelement/index.html +++ b/files/fr/web/api/animationevent/pseudoelement/index.html @@ -11,7 +11,7 @@ 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 : ''.

+

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

diff --git a/files/fr/web/api/atob/index.html b/files/fr/web/api/atob/index.html index bcc94f59e4..b7b3b16a43 100644 --- a/files/fr/web/api/atob/index.html +++ b/files/fr/web/api/atob/index.html @@ -15,7 +15,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/atob

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

+

Syntaxe

var donneesDecodees = scope.atob(donneesEncodees);
 
@@ -24,7 +24,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/atob

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

+

Exemple

donneesEncodees = window.btoa('Salut, monde'); // encode une chaîne
 donneesDecodees = window.atob(donneesEncodees); // décode la chaîne
@@ -71,8 +71,8 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/atob
 

Voir aussi

diff --git a/files/fr/web/api/attr/index.html b/files/fr/web/api/attr/index.html index 50a32d5cd0..8a97846bae 100644 --- a/files/fr/web/api/attr/index.html +++ b/files/fr/web/api/attr/index.html @@ -21,25 +21,25 @@ translation_of: Web/API/Attr
{{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.
+
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.
+
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é.
+
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é.

+

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

+

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.
+
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.
@@ -50,7 +50,7 @@ translation_of: Web/API/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

+

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.

@@ -62,7 +62,7 @@ translation_of: Web/API/Attr
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.
+
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
@@ -80,7 +80,7 @@ translation_of: Web/API/Attr
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é.
+
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
diff --git a/files/fr/web/api/attr/localname/index.html b/files/fr/web/api/attr/localname/index.html index 6582711298..c23a595af4 100644 --- a/files/fr/web/api/attr/localname/index.html +++ b/files/fr/web/api/attr/localname/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Attr/localName

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

-

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

+

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

Syntaxe

diff --git a/files/fr/web/api/attr/namespaceuri/index.html b/files/fr/web/api/attr/namespaceuri/index.html index cdcab759be..73f89cbdeb 100644 --- a/files/fr/web/api/attr/namespaceuri/index.html +++ b/files/fr/web/api/attr/namespaceuri/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Attr/namespaceURI

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.

-

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

+

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

Syntaxe

@@ -33,11 +33,11 @@ translation_of: Web/API/Attr/namespaceURI

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")}}

+

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.

+

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

diff --git a/files/fr/web/api/attr/prefix/index.html b/files/fr/web/api/attr/prefix/index.html index 8ea0dc7a6d..92f9bcfe1b 100644 --- a/files/fr/web/api/attr/prefix/index.html +++ b/files/fr/web/api/attr/prefix/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Attr/prefix

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é

-

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

+

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

Syntaxe

diff --git a/files/fr/web/api/audiobuffer/audiobuffer/index.html b/files/fr/web/api/audiobuffer/audiobuffer/index.html index ad6a102ba3..ce67efa5e8 100644 --- a/files/fr/web/api/audiobuffer/audiobuffer/index.html +++ b/files/fr/web/api/audiobuffer/audiobuffer/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/AudioBuffer/AudioBuffer ---

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

-

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

+

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

Syntax

@@ -16,13 +16,13 @@ var audioBuffer = new AudioBuffer(context[, options]);
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.
+
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.
  • +
  • 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
  • +
  • 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
diff --git a/files/fr/web/api/audiobuffer/copyfromchannel/index.html b/files/fr/web/api/audiobuffer/copyfromchannel/index.html index ae483b7912..2ae87ca120 100644 --- a/files/fr/web/api/audiobuffer/copyfromchannel/index.html +++ b/files/fr/web/api/audiobuffer/copyfromchannel/index.html @@ -10,9 +10,7 @@ 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.

-
+

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

Syntaxe

diff --git a/files/fr/web/api/audiobuffer/copytochannel/index.html b/files/fr/web/api/audiobuffer/copytochannel/index.html index 6a6f0966b4..38a6393ebc 100644 --- a/files/fr/web/api/audiobuffer/copytochannel/index.html +++ b/files/fr/web/api/audiobuffer/copytochannel/index.html @@ -5,9 +5,7 @@ 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é.

-
+

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

Syntaxe

diff --git a/files/fr/web/api/audiobuffer/duration/index.html b/files/fr/web/api/audiobuffer/duration/index.html index 12030c1a84..447932473d 100644 --- a/files/fr/web/api/audiobuffer/duration/index.html +++ b/files/fr/web/api/audiobuffer/duration/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/AudioBuffer/duration

Syntaxe

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

Valeur

@@ -20,7 +20,7 @@ tableauTampon.duration;

Exemple

-
// Stereo
+
// Stereo
 var nombreCanaux = 2;
 
 // Crée une mémoire tampon vide de 2 secondes
diff --git a/files/fr/web/api/audiobuffer/getchanneldata/index.html b/files/fr/web/api/audiobuffer/getchanneldata/index.html
index bab087dc68..7f64f907a0 100644
--- a/files/fr/web/api/audiobuffer/getchanneldata/index.html
+++ b/files/fr/web/api/audiobuffer/getchanneldata/index.html
@@ -5,15 +5,11 @@ 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).

-
-
+

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 tableauDonnees = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
 var tampon = tableauDonnees.getChannelData(canal);

Valeur

@@ -24,7 +20,7 @@ var tampon = tableauDonnees.getChannelData(canal);

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 contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 var bouton = document.querySelector('button');
 var preformate = document.querySelector('pre');
 var monScript = document.querySelector('script');
diff --git a/files/fr/web/api/audiobuffer/index.html b/files/fr/web/api/audiobuffer/index.html
index effd8fd44c..faa4f0f309 100644
--- a/files/fr/web/api/audiobuffer/index.html
+++ b/files/fr/web/api/audiobuffer/index.html
@@ -40,51 +40,51 @@ translation_of: Web/API/AudioBuffer
  
{{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.
+
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.
+
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;
+
// 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);
+// 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;
-    }
-  }
+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();
+  // 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;
+  // 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);
+  // connecte le AudioBufferSourceNode avec
+  // la destination pour qu'on puisse entendre le son
+  source.connect(contexteAudio.destination);
 
-  // lance la lecture du so
-  source.start();
+  // lance la lecture du so
+  source.start();
 
-}
+}

Spécifications

@@ -110,5 +110,5 @@ bouton.onclick Voir aussi diff --git a/files/fr/web/api/audiobuffer/length/index.html b/files/fr/web/api/audiobuffer/length/index.html index ee33981adf..f61ff06e0d 100644 --- a/files/fr/web/api/audiobuffer/length/index.html +++ b/files/fr/web/api/audiobuffer/length/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/AudioBuffer/length

Syntaxe

-
var tableauMemoireTampon = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+
var tableauMemoireTampon = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
 tableauMemoireTampon.length;
 
@@ -21,7 +21,7 @@ tableauMemoireTampon.length;

Exemple

-
// Stereo
+
// Stereo
 var nombreCanaux = 2;
 
 // Crée une mémoire tampon vide de 2 secondes
diff --git a/files/fr/web/api/audiobuffer/numberofchannels/index.html b/files/fr/web/api/audiobuffer/numberofchannels/index.html
index 84898ecd94..470397e34d 100644
--- a/files/fr/web/api/audiobuffer/numberofchannels/index.html
+++ b/files/fr/web/api/audiobuffer/numberofchannels/index.html
@@ -11,7 +11,7 @@ translation_of: Web/API/AudioBuffer/numberOfChannels
 
 

Syntaxe

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

Exemple

-
// Stereo
+
// Stereo
 var nombreCanaux = 2;
 
 // Crée une mémoire tampon vide de 2 secondes
diff --git a/files/fr/web/api/audiobuffer/samplerate/index.html b/files/fr/web/api/audiobuffer/samplerate/index.html
index ad1b23917a..79e2abb6d2 100644
--- a/files/fr/web/api/audiobuffer/samplerate/index.html
+++ b/files/fr/web/api/audiobuffer/samplerate/index.html
@@ -11,7 +11,7 @@ translation_of: Web/API/AudioBuffer/sampleRate
 
 

Syntaxe

-
var tableauMemoireTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+
var tableauMemoireTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
 tableauMemoireTampon.sampleRate;
 
@@ -21,7 +21,7 @@ tableauMemoireTampon.sampleRate;

Exemple

-
// Stereo
+
// Stereo
 var nombreCanaux = 2;
 
 // Crée une mémoire tampon vide de 2 secondes
diff --git a/files/fr/web/api/audiobuffersourcenode/buffer/index.html b/files/fr/web/api/audiobuffersourcenode/buffer/index.html
index 08181c687c..377e917158 100644
--- a/files/fr/web/api/audiobuffersourcenode/buffer/index.html
+++ b/files/fr/web/api/audiobuffersourcenode/buffer/index.html
@@ -5,9 +5,7 @@ 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).

@@ -23,10 +21,10 @@ translation_of: Web/API/AudioBufferSourceNode/buffer

Exemple

-

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

+

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

-
var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
+
var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
 
 button.onclick = function() {
   // Remplit le buffer avec du bruit blanc;
diff --git a/files/fr/web/api/audiobuffersourcenode/detune/index.html b/files/fr/web/api/audiobuffersourcenode/detune/index.html
index 60fc6f0121..bb352ab774 100644
--- a/files/fr/web/api/audiobuffersourcenode/detune/index.html
+++ b/files/fr/web/api/audiobuffersourcenode/detune/index.html
@@ -16,7 +16,7 @@ translation_of: Web/API/AudioBufferSourceNode/detune
 
 

Syntaxe

-
var source = contexteAudio.createBufferSource();
+
var source = contexteAudio.createBufferSource();
 source.detune.value = 100; // valeur en cents
@@ -29,7 +29,7 @@ source.detune.value = 100; // valeur en cents

Exemple

-
var audioCtx = new AudioContext();
+
var audioCtx = new AudioContext();
 
 var nbChan = 2;
 var nbFrames = audioCtx.sampleRate * 2.0;
diff --git a/files/fr/web/api/audiobuffersourcenode/index.html b/files/fr/web/api/audiobuffersourcenode/index.html
index b689f99b77..ce90a90902 100644
--- a/files/fr/web/api/audiobuffersourcenode/index.html
+++ b/files/fr/web/api/audiobuffersourcenode/index.html
@@ -11,20 +11,18 @@ 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")}}.

+

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

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

-

The AudioBufferSourceNode takes the content of an AudioBuffer and m

- - +

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

Nombre d'entréesNombre d'entrées 1
@@ -69,7 +67,7 @@ translation_of: Web/API/AudioBufferSourceNode
{{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

+

Gestionnaires d'évènement

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

@@ -82,52 +80,52 @@ translation_of: Web/API/AudioBufferSourceNode

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.

+

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();
-}
+
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")}}.

+

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

Spécifications

diff --git a/files/fr/web/api/audiobuffersourcenode/loop/index.html b/files/fr/web/api/audiobuffersourcenode/loop/index.html index feac85d179..739e46de9c 100644 --- a/files/fr/web/api/audiobuffersourcenode/loop/index.html +++ b/files/fr/web/api/audiobuffersourcenode/loop/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/AudioBufferSourceNode/loop

Syntaxe

-
var source = audioCtx.createBufferSource();
+
var source = audioCtx.createBufferSource();
 source.loop = true;
 
@@ -34,10 +34,10 @@ source.loop = true;

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

+

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

-
function getData() {
+
function getData() {
   source = audioCtx.createBufferSource();
   request = new XMLHttpRequest();
 
diff --git a/files/fr/web/api/audiobuffersourcenode/loopend/index.html b/files/fr/web/api/audiobuffersourcenode/loopend/index.html
index fa1bde9140..c580e48ecb 100644
--- a/files/fr/web/api/audiobuffersourcenode/loopend/index.html
+++ b/files/fr/web/api/audiobuffersourcenode/loopend/index.html
@@ -16,7 +16,7 @@ translation_of: Web/API/AudioBufferSourceNode/loopEnd
 
 

Syntaxe

-
var source = contexteAudio.createBufferSource();
+
var source = contexteAudio.createBufferSource();
 source.loopEnd = 3;
 
@@ -31,7 +31,7 @@ source.loopEnd = 3;

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.

function getData() {
diff --git a/files/fr/web/api/audiobuffersourcenode/loopstart/index.html b/files/fr/web/api/audiobuffersourcenode/loopstart/index.html
index b155c78b81..11a5b2165e 100644
--- a/files/fr/web/api/audiobuffersourcenode/loopstart/index.html
+++ b/files/fr/web/api/audiobuffersourcenode/loopstart/index.html
@@ -8,7 +8,7 @@ translation_of: Web/API/AudioBufferSourceNode/loopStart
 
 

Syntaxe

-
var source = contexteAudio.createBufferSource();
+
var source = contexteAudio.createBufferSource();
 source.loopStart = 3;
 
@@ -23,7 +23,7 @@ source.loopStart = 3;

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.

function getData() {
diff --git a/files/fr/web/api/audiobuffersourcenode/playbackrate/index.html b/files/fr/web/api/audiobuffersourcenode/playbackrate/index.html
index e9c4047369..5f13016165 100644
--- a/files/fr/web/api/audiobuffersourcenode/playbackrate/index.html
+++ b/files/fr/web/api/audiobuffersourcenode/playbackrate/index.html
@@ -6,7 +6,7 @@ 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.

+

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.

@@ -17,10 +17,8 @@ translation_of: Web/API/AudioBufferSourceNode/playbackRate 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.

-
+

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

Valeur

@@ -40,14 +38,14 @@ source.playbackRate.value = 1.25; // proportion : 25% plus rapide que la vitesse

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.

<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() {
+
function getData() {
   source = contexteAudio.createBufferSource();
   requete = new XMLHttpRequest();
 
diff --git a/files/fr/web/api/audiobuffersourcenode/start/index.html b/files/fr/web/api/audiobuffersourcenode/start/index.html
index 99f3314c3c..b07993659d 100644
--- a/files/fr/web/api/audiobuffersourcenode/start/index.html
+++ b/files/fr/web/api/audiobuffersourcenode/start/index.html
@@ -51,7 +51,7 @@ translation_of: Web/API/AudioBufferSourceNode/start
 
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.

+

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.

diff --git a/files/fr/web/api/audiocontext/createmediaelementsource/index.html b/files/fr/web/api/audiocontext/createmediaelementsource/index.html index 7c5344a346..3809f56dcd 100644 --- a/files/fr/web/api/audiocontext/createmediaelementsource/index.html +++ b/files/fr/web/api/audiocontext/createmediaelementsource/index.html @@ -32,7 +32,7 @@ var source = audioCtx.createMediaElementSource(myMediaElement);

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.

+

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

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
@@ -73,7 +73,7 @@ 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.

+

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

diff --git a/files/fr/web/api/audiocontext/index.html b/files/fr/web/api/audiocontext/index.html index c69aae1f26..6378d52164 100644 --- a/files/fr/web/api/audiocontext/index.html +++ b/files/fr/web/api/audiocontext/index.html @@ -167,6 +167,6 @@ var finish = contexteAudio.destination;

Voir aussi

diff --git a/files/fr/web/api/audiolistener/index.html b/files/fr/web/api/audiolistener/index.html index afc71bf7ec..b8343c1642 100644 --- a/files/fr/web/api/audiolistener/index.html +++ b/files/fr/web/api/audiolistener/index.html @@ -12,16 +12,16 @@ translation_of: Web/API/AudioListener

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

+

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

-

We see the position, velocity, up and front vectors of an AudioListener, with the up and front vectors at 90° each from the other

+

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.

-

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.

+

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.

@@ -51,7 +51,7 @@ translation_of: Web/API/AudioListener
{{domxref("AudioListener.setOrientation()")}}
-
Définit l'orientation de l'auditeur.
+
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.
diff --git a/files/fr/web/api/audionode/index.html b/files/fr/web/api/audionode/index.html index 57207dbfb9..b3e51998b0 100644 --- a/files/fr/web/api/audionode/index.html +++ b/files/fr/web/api/audionode/index.html @@ -9,17 +9,18 @@ translation_of: Web/API/AudioNode

{{InheritanceDiagram}}

-

AudioNodes participating in an AudioContext create a audio routing graph.

+

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

+

Note : Un AudioNode peut être la cible d'évènements, et implémente donc l'interface {{domxref("EventTarget")}}.

-

Propriétés

+

Propriétés

{{domxref("AudioNode.context")}} {{readonlyInline}}
@@ -61,9 +62,9 @@ translation_of: Web/API/AudioNode

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

+

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 AudioContext = window.AudioContext || window.webkitAudioContext;
 
 var audioCtx = new AudioContext();
 
diff --git a/files/fr/web/api/audioparam/index.html b/files/fr/web/api/audioparam/index.html
index 66812ad876..bd0fca5e56 100644
--- a/files/fr/web/api/audioparam/index.html
+++ b/files/fr/web/api/audioparam/index.html
@@ -67,7 +67,7 @@ translation_of: Web/API/AudioParam
 
 

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 AudioContext = window.AudioContext || window.webkitAudioContext;
 var audioCtx = new AudioContext();
 
 var gainNode = audioCtx.createGain();
@@ -75,7 +75,7 @@ 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 AudioContext = window.AudioContext || window.webkitAudioContext;
 var audioCtx = new AudioContext();
 
 var biquadFilter = audioCtx.createBiquadFilter();
diff --git a/files/fr/web/api/audioprocessingevent/index.html b/files/fr/web/api/audioprocessingevent/index.html
index 09678f539d..a43186edb4 100644
--- a/files/fr/web/api/audioprocessingevent/index.html
+++ b/files/fr/web/api/audioprocessingevent/index.html
@@ -10,10 +10,10 @@ 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é.

+

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.

+

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

diff --git a/files/fr/web/api/audioworklet/index.html b/files/fr/web/api/audioworklet/index.html index e87fdefa21..7e0330b10c 100644 --- a/files/fr/web/api/audioworklet/index.html +++ b/files/fr/web/api/audioworklet/index.html @@ -19,7 +19,7 @@ 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'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")}}.

diff --git a/files/fr/web/api/authenticatorresponse/index.html b/files/fr/web/api/authenticatorresponse/index.html index 89c305fed8..097cbfad44 100644 --- a/files/fr/web/api/authenticatorresponse/index.html +++ b/files/fr/web/api/authenticatorresponse/index.html @@ -17,12 +17,10 @@ translation_of: Web/API/AuthenticatorResponse

Voici la liste des interfaces basées sur AuthenticatorResponse.

-
  • {{domxref("AuthenticatorAssertionResponse")}}
  • {{domxref("AuthenticatorAttestationResponse")}}
-

Propriétés

diff --git a/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.html b/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.html index d7af5e1521..3d995409bb 100644 --- a/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.html +++ b/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.html @@ -21,11 +21,11 @@ translation_of: Web/API/BaseAudioContext/createBiquadFilter
baseAudioContext.createBiquadFilter();
-

Retourne

+

Retourne

un {{domxref("BiquadFilterNode")}}.

-

Exemple

+

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

diff --git a/files/fr/web/api/baseaudiocontext/createbuffer/index.html b/files/fr/web/api/baseaudiocontext/createbuffer/index.html index 420f1ed11f..55ca8f3ea5 100644 --- a/files/fr/web/api/baseaudiocontext/createbuffer/index.html +++ b/files/fr/web/api/baseaudiocontext/createbuffer/index.html @@ -35,7 +35,7 @@ translation_of: Web/API/BaseAudioContext/createBuffer
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.
+
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.
@@ -64,7 +64,7 @@ var tampon = ctxAudio.createBuffer(1, 22050, 22050);

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)();
+
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);
diff --git a/files/fr/web/api/baseaudiocontext/createbuffersource/index.html b/files/fr/web/api/baseaudiocontext/createbuffersource/index.html
index 18d96da80c..9a9dfe08cf 100644
--- a/files/fr/web/api/baseaudiocontext/createbuffersource/index.html
+++ b/files/fr/web/api/baseaudiocontext/createbuffersource/index.html
@@ -5,7 +5,9 @@ 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.

+

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

@@ -20,10 +22,10 @@ translation_of: Web/API/BaseAudioContext/createBufferSource

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.

+

Note : Vous pouvez également exécuter le code en direct, ou voir la source.

-
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 var button = document.querySelector('button');
 var pre = document.querySelector('pre');
 var myScript = document.querySelector('script');
@@ -87,5 +89,5 @@ button.onclick = function() {
 

Voir aussi

diff --git a/files/fr/web/api/baseaudiocontext/creategain/index.html b/files/fr/web/api/baseaudiocontext/creategain/index.html index e400ee7198..90039ecc31 100644 --- a/files/fr/web/api/baseaudiocontext/creategain/index.html +++ b/files/fr/web/api/baseaudiocontext/creategain/index.html @@ -25,11 +25,11 @@ original_slug: Web/API/AudioContext/createGain
var contexteAudio = new AudioContext();
 var gainNode = contexteAudio.createGain();
-

Retourne

+

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

+

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

+

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.

diff --git a/files/fr/web/api/baseaudiocontext/createpanner/index.html b/files/fr/web/api/baseaudiocontext/createpanner/index.html index 9630c4af5f..2c11e2a02e 100644 --- a/files/fr/web/api/baseaudiocontext/createpanner/index.html +++ b/files/fr/web/api/baseaudiocontext/createpanner/index.html @@ -120,7 +120,7 @@ function positionPanner() { }

-

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.

+

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

diff --git a/files/fr/web/api/baseaudiocontext/createperiodicwave/index.html b/files/fr/web/api/baseaudiocontext/createperiodicwave/index.html index 94622f3a32..5678fadb26 100644 --- a/files/fr/web/api/baseaudiocontext/createperiodicwave/index.html +++ b/files/fr/web/api/baseaudiocontext/createperiodicwave/index.html @@ -14,9 +14,7 @@ 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") }}.

-
+

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

@@ -42,7 +40,7 @@ translation_of: Web/API/BaseAudioContext/createPeriodicWave
-

Si normalisée, l'onde résultante aura une valeur absolue de sommet égale à 1.

+

Note : Si normalisée, l'onde résultante aura une valeur absolue de sommet égale à 1.

Exemple

diff --git a/files/fr/web/api/baseaudiocontext/index.html b/files/fr/web/api/baseaudiocontext/index.html index 4d1fe561b4..af570e1037 100644 --- a/files/fr/web/api/baseaudiocontext/index.html +++ b/files/fr/web/api/baseaudiocontext/index.html @@ -13,7 +13,7 @@ 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.

+

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

@@ -31,7 +31,7 @@ translation_of: Web/API/BaseAudioContext
{{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.
+
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.
@@ -94,11 +94,11 @@ translation_of: Web/API/BaseAudioContext

Déclaration de context audio de base:

-
var audioCtx = new AudioContext();
+
var audioCtx = new AudioContext();

Variante de nagivateur croisé:

-
var AudioContext = window.AudioContext || window.webkitAudioContext;
+
var AudioContext = window.AudioContext || window.webkitAudioContext;
 var audioCtx = new AudioContext();
 
 var oscillatorNode = audioCtx.createOscillator();
@@ -129,7 +129,7 @@ var finish = audioCtx.destination;
 
 

Voir aussi

-
    +
    • Utilisation de l'API Web Audio
    • {{domxref("AudioContext")}}
    • {{domxref("OfflineAudioContext")}}
    • diff --git a/files/fr/web/api/battery_status_api/index.html b/files/fr/web/api/battery_status_api/index.html index acdc9362cf..ee8ceeb9b6 100644 --- a/files/fr/web/api/battery_status_api/index.html +++ b/files/fr/web/api/battery_status_api/index.html @@ -71,7 +71,7 @@ translation_of: Web/API/Battery_Status_API });
-

Voir aussi l'exemple de la spécification.

+

Voir aussi l'exemple de la spécification.

Spécifications

@@ -100,5 +100,5 @@ translation_of: Web/API/Battery_Status_API diff --git a/files/fr/web/api/batterymanager/charging/index.html b/files/fr/web/api/batterymanager/charging/index.html index ee1bc221fe..7eaad0d9f8 100644 --- a/files/fr/web/api/batterymanager/charging/index.html +++ b/files/fr/web/api/batterymanager/charging/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/BatteryManager/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

+

Exemple

Code HTML

@@ -23,7 +23,7 @@ translation_of: Web/API/BatteryManager/charging

Code JavaScript

-
navigator.getBattery().then(function(battery) {
+
navigator.getBattery().then(function(battery) {
 
     var charging = battery.charging;
 
diff --git a/files/fr/web/api/batterymanager/chargingtime/index.html b/files/fr/web/api/batterymanager/chargingtime/index.html
index ebc264ff0d..7456fdb8fd 100644
--- a/files/fr/web/api/batterymanager/chargingtime/index.html
+++ b/files/fr/web/api/batterymanager/chargingtime/index.html
@@ -10,7 +10,7 @@ translation_of: Web/API/BatteryManager/chargingTime
 

Indique le temps, en secondes, qu'il reste jusqu'à que la batterie soit rechargée.

-

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.

+

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

@@ -19,7 +19,7 @@ translation_of: Web/API/BatteryManager/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

+

Exemple

Code HTML

@@ -28,7 +28,7 @@ translation_of: Web/API/BatteryManager/chargingTime

Code JavaScript

-
navigator.getBattery().then(function(battery) {
+
navigator.getBattery().then(function(battery) {
 
    var time = battery.chargingTime;
 
diff --git a/files/fr/web/api/batterymanager/dischargingtime/index.html b/files/fr/web/api/batterymanager/dischargingtime/index.html
index 2ebddfe7db..8ad8ea8602 100644
--- a/files/fr/web/api/batterymanager/dischargingtime/index.html
+++ b/files/fr/web/api/batterymanager/dischargingtime/index.html
@@ -10,16 +10,16 @@ translation_of: Web/API/BatteryManager/dischargingTime
 

Indique le temps, en secondes, qu'il reste jusqu'à que la batterie soit déchargée.

-

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.

+

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.

+

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

+

Exemple

Code HTML

@@ -28,7 +28,7 @@ translation_of: Web/API/BatteryManager/dischargingTime

Code JavaScript

-
navigator.getBattery().then(function(battery) {
+
navigator.getBattery().then(function(battery) {
 
     var time = battery.dischargingTime;
 
diff --git a/files/fr/web/api/batterymanager/index.html b/files/fr/web/api/batterymanager/index.html
index 3c01c62708..644c04acab 100644
--- a/files/fr/web/api/batterymanager/index.html
+++ b/files/fr/web/api/batterymanager/index.html
@@ -75,5 +75,5 @@ translation_of: Web/API/BatteryManager
 
 
diff --git a/files/fr/web/api/batterymanager/level/index.html b/files/fr/web/api/batterymanager/level/index.html
index 65b1145473..30fb39da87 100644
--- a/files/fr/web/api/batterymanager/level/index.html
+++ b/files/fr/web/api/batterymanager/level/index.html
@@ -17,16 +17,16 @@ translation_of: Web/API/BatteryManager/level
 
 

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

+

Exemple

Code HTML

-
<div id="level">(niveau de batterie inconnu)</div>
-
+
<div id="level">(niveau de batterie inconnu)</div>
+

Code JavaScript

-
navigator.getBattery().then(function(battery) {
+
navigator.getBattery().then(function(battery) {
 
     var level = battery.level;
 
diff --git a/files/fr/web/api/beforeunloadevent/index.html b/files/fr/web/api/beforeunloadevent/index.html
index 3dc2bac5cd..4a74d1689d 100644
--- a/files/fr/web/api/beforeunloadevent/index.html
+++ b/files/fr/web/api/beforeunloadevent/index.html
@@ -37,7 +37,7 @@ translation_of: Web/API/BeforeUnloadEvent
 
 

Exemples

-
window.addEventListener("beforeunload", function(event) {
+
window.addEventListener("beforeunload", function(event) {
   event.returnValue = "\o/";
 });
 
@@ -48,7 +48,7 @@ window.addEventListener("beforeunload", function(event) {
 
 

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) {
+
window.addEventListener("beforeunload", function (e) {
   var confirmationMessage = "\o/";
 
   (e || window.event).returnValue = confirmationMessage;     // Gecko + IE
diff --git a/files/fr/web/api/biquadfilternode/frequency/index.html b/files/fr/web/api/biquadfilternode/frequency/index.html
index 64bdce0416..508cf54cf8 100644
--- a/files/fr/web/api/biquadfilternode/frequency/index.html
+++ b/files/fr/web/api/biquadfilternode/frequency/index.html
@@ -18,7 +18,7 @@ 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.

+

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

Valeur

diff --git a/files/fr/web/api/biquadfilternode/index.html b/files/fr/web/api/biquadfilternode/index.html index 6dd514077b..f5215ba3a6 100644 --- a/files/fr/web/api/biquadfilternode/index.html +++ b/files/fr/web/api/biquadfilternode/index.html @@ -10,7 +10,7 @@ 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.

+

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.

@@ -52,15 +52,13 @@ translation_of: Web/API/BiquadFilterNode
{{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.
+
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)
-
+

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)

@@ -77,14 +75,14 @@ translation_of: Web/API/BiquadFilterNode - + - + diff --git a/files/fr/web/api/blob/blob/index.html b/files/fr/web/api/blob/blob/index.html index fa229550e2..eb08cd3667 100644 --- a/files/fr/web/api/blob/blob/index.html +++ b/files/fr/web/api/blob/blob/index.html @@ -41,7 +41,7 @@ var aBlob = new Blob( array, options );

Exemples

-
// Un tableau qui contient une seule DOMString
+
// Un tableau qui contient une seule DOMString
 var aFileParts = ['<a id="a"><b id="b">Coucou :) !</b></a>'];
 
 // Le blob
diff --git a/files/fr/web/api/blob/index.html b/files/fr/web/api/blob/index.html
index a036e2723c..6cf6467846 100644
--- a/files/fr/web/api/blob/index.html
+++ b/files/fr/web/api/blob/index.html
@@ -19,7 +19,9 @@ translation_of: Web/API/Blob
 

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

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

diff --git a/files/fr/web/api/blob/size/index.html b/files/fr/web/api/blob/size/index.html index 8896e44695..b82751abd0 100644 --- a/files/fr/web/api/blob/size/index.html +++ b/files/fr/web/api/blob/size/index.html @@ -17,7 +17,9 @@ original_slug: Web/API/File/fileSize

Renvoie la taille du fichier en octets.

-
Cette propriété est dépréciée. Utilisez {{domxref("Blob.size")}} à la place.
+
+

Note : Cette propriété est dépréciée. Utilisez {{domxref("Blob.size")}} à la place.

+

Syntaxe

diff --git a/files/fr/web/api/blobbuilder/index.html b/files/fr/web/api/blobbuilder/index.html index 69aab6d794..7098c3d185 100644 --- a/files/fr/web/api/blobbuilder/index.html +++ b/files/fr/web/api/blobbuilder/index.html @@ -12,7 +12,9 @@ translation_of: Web/API/BlobBuilder

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')}}.
+
+

Note: L'interface BlobBuilder est désormais déconseillé (deprecated) au profit du nouveau constructeur {{domxref('Blob')}}.

+

Aperçu des méthodes

@@ -57,7 +59,7 @@ void append( );
-
Paramètres
+

Paramètres

data
@@ -75,14 +77,14 @@ void append( );
-
Paramètres
+

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
+

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.

@@ -96,7 +98,7 @@ void append( ); -
Paramètres
+

Paramètres

name
@@ -105,7 +107,7 @@ void append(
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
+

Valeur deretour

Un objet {{domxref("File")}}.

diff --git a/files/fr/web/api/btoa/index.html b/files/fr/web/api/btoa/index.html index 9c07b8bb40..3d4bad306e 100644 --- a/files/fr/web/api/btoa/index.html +++ b/files/fr/web/api/btoa/index.html @@ -46,7 +46,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/btoa var donneesDecodees = window.atob(donneesEncodees); // décode la chaîne -

Notes

+

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.

@@ -56,9 +56,9 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/btoa

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 :

+

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
+
// Chaîne ucs-2 en ascii encodé en base64
 function uena(chn) {
     return window.btoa(unescape(encodeURIComponent(chn)));
 }
@@ -73,7 +73,7 @@ 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.

+

Une solution meilleure, plus fiable et moins coûteuse consiste à utiliser des tableaux typés pour faire la conversion.

Spécifications

@@ -116,8 +116,8 @@ aenu('SSDimaEgVW5pY29kZSE='); // "I ♡ Unicode!"

Voir aussi

diff --git a/files/fr/web/api/cache/add/index.html b/files/fr/web/api/cache/add/index.html index 0106a19573..83fd3085ba 100644 --- a/files/fr/web/api/cache/add/index.html +++ b/files/fr/web/api/cache/add/index.html @@ -27,12 +27,12 @@ translation_of: Web/API/Cache/add

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.

+

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() {
+
cache.add(request).then(function() {
   //request a été ajoutée au cache
 });
 
diff --git a/files/fr/web/api/cache/addall/index.html b/files/fr/web/api/cache/addall/index.html index 2c01cdc54d..98f5111d78 100644 --- a/files/fr/web/api/cache/addall/index.html +++ b/files/fr/web/api/cache/addall/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/Cache/addAll

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. 

-

NoteaddAll() é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().

+

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

diff --git a/files/fr/web/api/cache/delete/index.html b/files/fr/web/api/cache/delete/index.html index b75eccb772..5100ece8c8 100644 --- a/files/fr/web/api/cache/delete/index.html +++ b/files/fr/web/api/cache/delete/index.html @@ -43,7 +43,7 @@ translation_of: Web/API/Cache/delete

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

+

Exemples

caches.open('v1').then(function(cache) {
   cache.delete('/images/image.png').then(function(response) {
diff --git a/files/fr/web/api/cache/index.html b/files/fr/web/api/cache/index.html
index b9215d7cf4..384689d3fa 100644
--- a/files/fr/web/api/cache/index.html
+++ b/files/fr/web/api/cache/index.html
@@ -21,12 +21,12 @@ translation_of: Web/API/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 : 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'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.

@@ -62,7 +62,9 @@ translation_of: Web/API/Cache

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

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;
 
@@ -145,8 +147,8 @@ self.addEventListener('fetch', function(event) {
 
 
diff --git a/files/fr/web/api/cache/keys/index.html b/files/fr/web/api/cache/keys/index.html
index 090d9375a7..faabe1581d 100644
--- a/files/fr/web/api/cache/keys/index.html
+++ b/files/fr/web/api/cache/keys/index.html
@@ -19,7 +19,7 @@ translation_of: Web/API/Cache/keys
 

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.

+

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

@@ -35,8 +35,7 @@ translation_of: Web/API/Cache/keys
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 :
-
+

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.
  • @@ -50,7 +49,7 @@ translation_of: Web/API/Cache/keys

    Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}.

    -

    Exemples

    +

    Exemples

    caches.open('v1').then(function(cache) {
       cache.keys().then(function(keys) {
    diff --git a/files/fr/web/api/cache/match/index.html b/files/fr/web/api/cache/match/index.html
    index a49e733af6..7867ba79a6 100644
    --- a/files/fr/web/api/cache/match/index.html
    +++ b/files/fr/web/api/cache/match/index.html
    @@ -44,16 +44,16 @@ translation_of: Web/API/Cache/match
     

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

    +

    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

    +

    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. 

    +

    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.
    diff --git a/files/fr/web/api/cache/matchall/index.html b/files/fr/web/api/cache/matchall/index.html
    index 50126ead5c..86d1dad2bf 100644
    --- a/files/fr/web/api/cache/matchall/index.html
    +++ b/files/fr/web/api/cache/matchall/index.html
    @@ -30,7 +30,7 @@ translation_of: Web/API/Cache/matchAll
      
    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 : +

    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.
    • @@ -44,10 +44,10 @@ translation_of: Web/API/Cache/matchAll

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

      +

      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

      +

      Exemples

      caches.open('v1').then(function(cache) {
         cache.matchAll('/images/').then(function(response) {
      diff --git a/files/fr/web/api/cache/put/index.html b/files/fr/web/api/cache/put/index.html
      index c5d6b0a51e..b8a7f9f5cd 100644
      --- a/files/fr/web/api/cache/put/index.html
      +++ b/files/fr/web/api/cache/put/index.html
      @@ -27,15 +27,15 @@ translation_of: Web/API/Cache/put
       })
      -

      Note: put() écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête.

      +

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

      +

      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

      @@ -59,10 +59,10 @@ translation_of: Web/API/Cache/put

      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.

      +

      Note : La promesse sera rompue avec un TypeError si le schéma d'URL n'est pas http ou https.

      -

      Exemples

      +

      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 :

      diff --git a/files/fr/web/api/cachestorage/delete/index.html b/files/fr/web/api/cachestorage/delete/index.html index d1d5499d48..6d088f5d7f 100644 --- a/files/fr/web/api/cachestorage/delete/index.html +++ b/files/fr/web/api/cachestorage/delete/index.html @@ -35,7 +35,7 @@ translation_of: Web/API/CacheStorage/delete

      Une {{jsxref("Promise", "Promesse")}} qui renvoie true si l'objet {{domxref("Cache")}} est trouvé et supprimé, false sinon.

      -

      Exemples

      +

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

      diff --git a/files/fr/web/api/cachestorage/has/index.html b/files/fr/web/api/cachestorage/has/index.html index d28ba6eeb0..5b1b6a6ae0 100644 --- a/files/fr/web/api/cachestorage/has/index.html +++ b/files/fr/web/api/cachestorage/has/index.html @@ -36,7 +36,7 @@ translation_of: Web/API/CacheStorage/has

      Une {{jsxref("Promise", "Promesse")}} qui renvoie true si le cache existe.

      -

      Exemples

      +

      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.

      diff --git a/files/fr/web/api/cachestorage/index.html b/files/fr/web/api/cachestorage/index.html index 73138a4baf..276393aa31 100644 --- a/files/fr/web/api/cachestorage/index.html +++ b/files/fr/web/api/cachestorage/index.html @@ -19,7 +19,8 @@ translation_of: Web/API/CacheStorage
      • Fournit un répertoire principal de tous les caches nommés qui peut être accessible par un {{domxref("ServiceWorker")}} ou un autre type de travailleur ou portée de {{domxref("window")}} (vous n'êtes pas limité à l'utiliser uniquement avec des Service Workers, même si la spécification {{SpecName("Service Workers")}} le définit). -
        Note : Chrome et Safari n'exposent que "CacheStorage" au contexte fenêtré sur HTTPS (EN). {{domxref("window.caches")}} sera indéfinie, à moins qu'un certificat SSL ne soit configuré.
        +
        +

        Note : Chrome et Safari n'exposent que "CacheStorage" au contexte fenêtré sur HTTPS. {{domxref("window.caches")}} sera indéfinie, à moins qu'un certificat SSL ne soit configuré.

      • Maintient une correspondance entre les noms des chaînes de caractères et les objets {{domxref("Cache")}} correspondants.
      @@ -30,9 +31,13 @@ translation_of: Web/API/CacheStorage

      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 : 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()")}}.
      +
      +

      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

      @@ -190,7 +195,7 @@ try {

      Voir aussi

      diff --git a/files/fr/web/api/cachestorage/keys/index.html b/files/fr/web/api/cachestorage/keys/index.html index 69d08de58b..ed61c3716c 100644 --- a/files/fr/web/api/cachestorage/keys/index.html +++ b/files/fr/web/api/cachestorage/keys/index.html @@ -33,7 +33,7 @@ translation_of: Web/API/CacheStorage/keys

      Une {{jsxref("Promise", "Promesse")}} qui retourne une liste de noms de {{domxref("Cache")}} contenus dans un objet {{domxref("CacheStorage")}}.

      -

      Exemples

      +

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

      diff --git a/files/fr/web/api/cachestorage/match/index.html b/files/fr/web/api/cachestorage/match/index.html index 22e25ab644..704f299794 100644 --- a/files/fr/web/api/cachestorage/match/index.html +++ b/files/fr/web/api/cachestorage/match/index.html @@ -20,7 +20,9 @@ translation_of: Web/API/CacheStorage/match

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

      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

      @@ -40,7 +42,7 @@ translation_of: Web/API/CacheStorage/match
    • 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.
    • +
    • cacheName: Un {{domxref("DOMString")}} qui représente le cache dans lequel on recherche.
    @@ -49,7 +51,7 @@ translation_of: Web/API/CacheStorage/match

    Une {{jsxref("Promise", "Promesse")}} qui renvoie les {{domxref("Response", "Réponses")}} correspondante.

    -

    Exemples

    +

    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:

    diff --git a/files/fr/web/api/cachestorage/open/index.html b/files/fr/web/api/cachestorage/open/index.html index a2c81af6f9..87d45d11b3 100644 --- a/files/fr/web/api/cachestorage/open/index.html +++ b/files/fr/web/api/cachestorage/open/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/CacheStorage/open

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

    +

    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

    @@ -40,7 +40,7 @@ translation_of: Web/API/CacheStorage/open

    Une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} demandé.

    -

    Exemples

    +

    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.

    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 index fc87a5c200..b3520fecbd 100644 --- 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 @@ -12,42 +12,42 @@ 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.

    +

    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 ?

    +

    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.

    +

    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.

    +

    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 ?

    +

    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.

    +

    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.

    +

    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

    +

    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)

    +

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

    +

    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

    +

    Voir aussi

    diff --git a/files/fr/web/api/canvas_api/index.html b/files/fr/web/api/canvas_api/index.html index a697d99b2a..9c3ea0f0ef 100644 --- a/files/fr/web/api/canvas_api/index.html +++ b/files/fr/web/api/canvas_api/index.html @@ -9,11 +9,11 @@ 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.

    +

    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.

    +

    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.

    +

    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

    @@ -21,12 +21,12 @@ translation_of: Web/API/Canvas_API

    HTML

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

    JavaScript

    -
    var canvas = document.getElementById('canvas');
    +
    var canvas = document.getElementById('canvas');
     var ctx = canvas.getContext('2d');
     
     ctx.fillStyle = 'green';
    @@ -35,10 +35,9 @@ ctx.fillRect(10, 10, 100, 100);
     
     

    Éditez le code ci-dessous pour voir les changements avoir lieu directement dans le canvas:

    - -

    {{ EmbedLiveSample('Playable_code', 700, 360) }}

    +

    {{ EmbedLiveSample('code_jouable', 700, 360) }}

    Références

    -
    • {{domxref("HTMLCanvasElement")}}
    • {{domxref("CanvasRenderingContext2D")}}
    • @@ -92,9 +89,8 @@ window.addEventListener('load', drawCanvas);
    • {{domxref("OffscreenCanvas")}}{{experimental_inline}}
    • {{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}
    -
    -

    Les interfaces liées au WebGLRenderingContext sont référencées sous WebGL.

    +

    Les interfaces liées au WebGLRenderingContext sont référencées sous WebGL.

    {{domxref("CanvasCaptureMediaStream")}} est lié.

    @@ -103,7 +99,7 @@ window.addEventListener('load', drawCanvas);
    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
    +
    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.
    @@ -134,7 +130,7 @@ window.addEventListener('load', drawCanvas);
  • PlayCanvas est un moteur de jeu open-source.
  • Pixi.js est un moteur de jeu open-source.
  • PlotKit est une bibliothèque permettant de réaliser des diagrammes et des graphiques.
  • -
  • Rekapi est une API d'animation par key-framing pour Canvas.
  • +
  • Rekapi est une API d'animation par key-framing pour Canvas.
  • PhiloGL est un framework WebGL pour la visualisation de données, pour la programmation créative et pour le developpement de jeux.
  • JavaScript InfoVis Toolkit crée des visualisation de données interactives en 2D avec canvas pour le Web.
  • EaselJS est une bibliothèque gratuite/open-source qui facilite l'utilisation de canvas pour faire des jeux ou de l'art
  • 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 index e2b627d4ed..80e8707ba3 100644 --- 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 @@ -9,52 +9,52 @@ 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.

    +

    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.

    +

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

    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. +
    3. 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.
    4. 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é.
    5. Quand le document se charge, la méthode processor.doLoad(), dans le script main.js, est exécutée.
    @@ -67,93 +67,93 @@ original_slug: HTML/Manipulating_video_using_canvas

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

    -

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

    +

    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);
    -  },
    +
    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.

    +

    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.

    +

    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.

    +

    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;
    -  }
    +
    processor.computeFrame = function computeFrame() {
    +    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
    +    let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
    +    let l = frame.data.length / 4;
    +
    +    for (let i = 0; i < l; i++) {
    +      let r = frame.data[i * 4 + 0];
    +      let g = frame.data[i * 4 + 1];
    +      let b = frame.data[i * 4 + 2];
    +      if (g > 100 && r > 100 && b < 43)
    +        frame.data[i * 4 + 3] = 0;
    +    }
    +    this.ctx2.putImageData(frame, 0, 0);
    +    return;
    +  }

    ²

    Quand la routine est appelée, l'élément vidéo affiche les données de la plus récente image de la vidéo, ce qui ressemble à :

    -

    video.png

    +

    À la seconde ligne, cette image est copiée dans le contexte graphique ctx1 du premier élément canvas, en spécifiant ses hauteur et largeur, définies plus tôt (soit, réduites de moitié). Notez que c'est très simplement que vous passez les données de l'élément vidéo à afficher dans le contexte graphique avec la méthode drawImage(). Voici ce que cela donne :

    -

    sourcectx.png

    +

    -

    La ligne 3 extrait une copie des données graphiques brutes pour l'image courante de la vidéo en appelant la méthode getImageData() sur le premier contexte. Cela fournit des données brutes d'image pixel 32 bits que nous pouvons ensuite manipuler. La ligne 4 calcule le nombre de pixels de l'image en divisant la taille totale des données d'image du cadre par quatre.

    +

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

    +

    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.

    +

    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 :

    +

    L'image résultante ressemble à ceci :

    -

    output.png

    +

    -

    Cela se fait de façon répétée au fur et à mesure que la vidéo est lue, de sorte que, image après image, la vidéo est traitée et affichée avec l'effet de chrominance.

    +

    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.

    +

    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 index 6f98b0c468..d21ac69028 100644 --- a/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.html +++ b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.html @@ -6,20 +6,18 @@ 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.

    -
    +

    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>
    +
    <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 canvas = document.getElementById('canvas');
     var ctx = canvas.getContext('2d');
     
     var ball = {
    @@ -42,9 +40,9 @@ ball.draw();

    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.

    +

    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 canvas = document.getElementById('canvas');
     var ctx = canvas.getContext('2d');
     var raf;
     
    @@ -87,7 +85,7 @@ ball.draw();
     
     

    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) {
    +
    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) {
    @@ -98,10 +96,9 @@ if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
     
     

    Voyons voir ce que cela donne. Déplacez votre souris dans le canevas pour commencer l'animation :

    -

    {{EmbedLiveSample("Première_demo", "610", "310")}}

    @@ -156,17 +152,16 @@ ball.draw();

    Afin d'obtenir un mouvement plus réel, vous pouvez jouer sur la vitesse, par exemple :

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

    Ceci ralentit la vitesse verticale à chaque rendu d'image de sorte que la balle va rebondir de moins en moins haut.

    - -

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

    +

    {{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.fillStyle = 'rgba(255,255,255,0.3)';
     ctx.fillRect(0,0,canvas.width,canvas.height);
    - -

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

    +

    {{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 canvas = document.getElementById('canvas');
     var ctx = canvas.getContext('2d');
     var raf;
     var running = false;
    @@ -365,13 +355,13 @@ ball.draw();
     
     

    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.

    +

    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 index d7eb97ce5f..12d7d76e45 100644 --- 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 @@ -12,11 +12,9 @@ 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.

    -
    +

    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

    +

    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 .

    @@ -30,23 +28,23 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs

    color est une chaîne représentant un CSS {{cssxref("<color>")}}, d'un objet gradient ou d'un objet motif. Nous allons examiner le gradient et la structure des objets plus tard. Par défaut, l'encadrement et la couleur de remplissage sont fixés sur noir (valeur #000000 de CSS color).

    -

    Remarque: Lorsque vous définissez strokeStyle et fillStyle, la nouvelle valeur devient la valeur par défaut pour toutes les formes en cours d'élaboration à partir de là. Pour chaque forme que vous voulez dans une couleur différente, vous aurez besoin de réaffecter fillStyle ou strokeStyle.

    +

    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"
    +
    // 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)';
    +ctx.fillStyle = 'orange'; +ctx.fillStyle = '#FFA500'; +ctx.fillStyle = 'rgb(255, 165, 0)'; +ctx.fillStyle = 'rgba(255, 165, 0, 1)';
    -

    Un exemple fillStyle

    +

    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() {
    +
    function draw() {
       var ctx = document.getElementById('canvas').getContext('2d');
       for (var i = 0; i < 6; i++) {
         for (var j = 0; j < 6; j++) {
    @@ -57,44 +55,43 @@ ctx.fillStyle 
    -
    <canvas id="canvas" width="150" height="150"></canvas>
    + + + -
    draw();
    -

Le résultat ressemble à ceci:

-

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

+

{{EmbedLiveSample("A_fillStyle_example", 160, 160, "canvas_fillstyle.png")}}

-

Un exemple strokeStyle

+

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

Le résultat ressemble à ceci :

-

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

+

{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}}

-

Transparence

+

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.

@@ -107,7 +104,7 @@ ctx.fillStyle //Affecter des couleurs transparentes pour dessiner et remplir le style +
//Affecter des couleurs transparentes pour dessiner et remplir le style
 
 ctx.strokeStyle = "rgba(255, 0, 0, .5)";
 ctx.fillStyle = "rgba(255, 0, 0, .5)";
@@ -115,77 +112,74 @@ 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

+

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();
-  }
-}
- - +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  // draw background
+  ctx.fillStyle = '#FD0';
+  ctx.fillRect(0, 0, 75, 75);
+  ctx.fillStyle = '#6C0';
+  ctx.fillRect(75, 0, 75, 75);
+  ctx.fillStyle = '#09F';
+  ctx.fillRect(0, 75, 75, 75);
+  ctx.fillStyle = '#F30';
+  ctx.fillRect(75, 75, 75, 75);
+  ctx.fillStyle = '#FFF';
+
+  // règle la valeur de transparence
+  ctx.globalAlpha = 0.2;
+
+  // Dessine des cercles semi-transparents
+  for (i = 0; i < 7; i++) {
+    ctx.beginPath();
+    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
+    ctx.fill();
+  }
+}
+ + + -

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

+ -

Un exemple en utilisant rgba()

+

{{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);
-    }
-  }
-}
- - +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
 
-

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

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

Le style des lignes

+

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

@@ -208,7 +202,7 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)";

Vous aurez une meilleure compréhension de ce qu'ils font en regardant les exemples ci-dessous.

-

Un exemple lineWidth

+

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.

@@ -216,28 +210,26 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)";

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

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

+

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

@@ -246,19 +238,17 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)";

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.

+

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 .

+

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

+

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.
@@ -272,322 +262,310 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)";

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

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

+ -

Un exemple de lineJoin

+ + +

{{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.
+
Les segments connectés sont reliés en prolongeant leurs bords extérieurs pour se connecter en un seul point, avec pour effet de remplir une zone supplémentaire en forme de losange. Ce paramètre est effectué par la propriété miterLimit qui est expliquée ci-dessous.
-

L'exemple ci-dessous dessine trois chemins différents, démontrant chacun de ces trois paramètres de propriété lineJoin ; la sortie est montrée ci-dessus.

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

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

+

{{EmbedLiveSample("A_lineJoin_example", "180", "180", "canvas_linejoin.png")}}

-

Une démonstration de la propriété miterLimit

+

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.

+

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.

+

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 :

+

Plus précisément, la limite d'onglet est le rapport maximal autorisé de la longueur d'extension (dans le canvas HTML, il est mesuré entre le coin extérieur des bords joints de la ligne et le point d'extrémité commun des segments de connexion spécifiés dans le chemin) à la moitié de la largeur de la ligne. Il peut être défini, de manière équivalente, comme le rapport maximum autorisé de la distance entre les points de jonction intérieur et extérieur des bords et la largeur totale de la ligne. Il est alors égal à la cosécante de la moitié de l'angle interne minimum des segments de connexion, en-dessous de laquelle aucune jointure d'onglet ne sera rendue, mais seulement une jointure en biseau :

  • miterLimit = max miterLength / lineWidth = 1 / sin ( min θ / 2 )
  • -
  • La limite d'onglet par défaut de 10.0 supprimera tous les onglets pour les angles vifs inférieurs à environ 11 degrés.
  • -
  • Une limite d'onglet égale à √2 ≈ 1.4142136 (arrondie au-dessus) enlèvera les onglets pour tous les angles aigus, en conservant les joints d'onglet seulement pour les angles obtus ou droits.
  • -
  • Une limite d'onglet égale à 1.0 est valide mais désactivera tous les onglets.
  • -
  • Les valeurs inférieures à 1.0 sont invalides pour la limite d'onglet.
  • +
  • La limite d'onglet par défaut de 10.0 supprimera tous les onglets pour les angles vifs inférieurs à environ 11 degrés.
  • +
  • Une limite d'onglet égale à √2 ≈ 1.4142136 (arrondie au-dessus) enlèvera les onglets pour tous les angles aigus, en conservant les joints d'onglet seulement pour les angles obtus ou droits.
  • +
  • Une limite d'onglet égale à 1.0 est valide mais désactivera tous les onglets.
  • +
  • Les valeurs inférieures à 1.0 sont invalides pour la limite d'onglet.
-

Voici une petite démo dans laquelle vous pouvez définir dynamiquement miterLimit et voir comment cela affecte les formes sur le canevas. Les lignes bleues indiquent où se trouvent les points de départ et d'arrivée de chacune des lignes du motif en zig-zag.

- -

Si vous spécifiez une valeur miterLimit inférieure à 4.2 dans cette démo, aucun des coins visibles ne se joindra avec une extension onglet, mais seulement avec un petit biseau près des lignes bleues ; avec une limite à onglets au-dessus de 10, la plupart des coins de cette démo devraient se combiner avec un onglet loin des lignes bleues et dont la hauteur diminue entre les coins de gauche à droite, car ils se connectent avec des angles croissants ; avec des valeurs intermédiaires, les coins du côté gauche ne rejoignent qu'un biseau près des lignes bleues et les coins du côté droit avec une extension à onglets (également avec une hauteur décroissante).

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Éffacer canvas
-  ctx.clearRect(0, 0, 150, 150);
-
-  // Dessiner des guides
-  ctx.strokeStyle = '#09f';
-  ctx.lineWidth   = 2;
-  ctx.strokeRect(-5, 50, 160, 50);
-
-  // Définir les styles de lignes
-  ctx.strokeStyle = '#000';
-  ctx.lineWidth = 10;
-
-  // Vérifier l'entrée (input)
-  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
-    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
-  } else {
-    alert('Value must be a positive number');
-  }
-
-  // Dessiner des lignes
-  ctx.beginPath();
-  ctx.moveTo(0, 100);
-  for (i = 0; i < 24 ; i++) {
-    var dy = i % 2 == 0 ? 25 : -25;
-    ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
-  }
-  ctx.stroke();
-  return false;
-}
- - +

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

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

+ // Dessiner des guides + ctx.strokeStyle = '#09f'; + ctx.lineWidth = 2; + ctx.strokeRect(-5, 50, 160, 50); -

Utilisation de lignes pointillées

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

+

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;
+
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 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);
-}
+function march() {
+  offset++;
+  if (offset > 16) {
+    offset = 0;
+  }
+  draw();
+  setTimeout(march, 20);
+}
 
-march();
+march();
-

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

+

{{EmbedLiveSample("Using_line_dashes", "120", "120", "marching-ants.png")}}

-

Dégradés

+

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.

+

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).
+
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.
+
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);
+
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 ().

+

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

+

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');
+
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+lineargradient.addColorStop(0, 'white');
+lineargradient.addColorStop(1, 'black');
-

Un exemple de createLinearGradient

+

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.

+

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');
+
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');
+  // 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)');
+  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;
+  // 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);
+  // Dessiner des formes
+  ctx.fillRect(10, 10, 130, 130);
+  ctx.strokeRect(50, 50, 50, 50);
 
-}
+}
- -

Le premier est un dégradé d'arrière-plan. Comme vous pouvez le voir, nous avons assigné deux couleurs à la même position. Vous faites cela pour faire des transitions de couleurs très nettes - dans ce cas du blanc au vert. Normalement, peu importe dans quel ordre vous définissez l'arrêt de la couleur, mais dans ce cas particulier, la différence peut être significative. Si vous conservez les affectations dans l'ordre où vous voulez qu'elles apparaissent, cela ne posera aucun problème.

- -

Dans le second gradient, nous n'avons pas assigné la couleur de départ (à la position 0.0) puisqu'il n'était pas strictement nécessaire car il prendra automatiquement la valeur de la prochaine couleur. Par conséquent, l'attribution de la couleur noire à la position 0,5 fait automatiquement passer le dégradé, du début à l'arrêt, en noir.

- -

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

+

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.

-

Un exemple de createRadialGradient

+

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.

-

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

+

{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "canvas_lineargradient.png")}}

-
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
+

Un exemple de createRadialGradient

- // 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)'); +

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

- 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)'); +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
 
-  // 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);
-}
+ // 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.

+

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

+

Le dernier arrêt de couleur dans chacun des quatre dégradés utilise une couleur entièrement transparente. Si vous voulez une transition agréable de cette étape à la couleur précédente, les deux couleurs doivent être égales. Ce n'est pas très évident dans le code, car il utilise deux méthodes CSS différentes en démonstration, mais dans le premier dégradé # 019F62 = rgba (1,159,98,1).

-

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

+

{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "canvas_radialgradient.png")}}

-

Modèles

+

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

+

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

+

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.
+
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
@@ -596,125 +574,120 @@ lineargradient.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 :

+

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');
+
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é.

+

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

+

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.

+

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');
+
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
 
-  // créer un nouvel objet image à utiliser comme modèle
-  var img = new Image();
-  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
-  img.onload = function() {
+  // créer 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);
+    // créer le modèle
+    var ptrn = ctx.createPattern(img, 'repeat');
+    ctx.fillStyle = ptrn;
+    ctx.fillRect(0, 0, 150, 150);
 
-  }
-}
+ } +}
- -

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

+

{{EmbedLiveSample("A_createPattern_example", "180", "180", "canvas_createpattern.png")}}

Ombres

-

L'utilisation des ombres ne comporte que quatre propriétés :

+

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

+

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

+

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.

+

Note : Les ombres ne sont dessinées que pour les opérations de composition source-over.

-

Un exemple de texte ombré

+

Un exemple de texte ombré

-

Cet exemple dessine une chaîne de texte avec un effet d'ombrage.

+

Cet exemple dessine une chaîne de texte avec un effet d'ombrage.

-
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
+
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.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);
-}
+ ctx.font = '20px Times New Roman'; + ctx.fillStyle = 'Black'; + ctx.fillText('Sample String', 5, 30); +}
- + -

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

+

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

+

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

+

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

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

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

+

{{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 index 95fa3c4f0e..e37d15eba9 100644 --- a/files/fr/web/api/canvas_api/tutorial/basic_animations/index.html +++ b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.html @@ -13,13 +13,11 @@ 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

+

Les étapes d'une animation basique

Voici les étapes à suivre à chaque image dessinée (frame) :

@@ -34,7 +32,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Animations_basiques Si l'état du canevas a été sauvegardé, vous  restaurez cet état avant le prochain rendu. -

Contrôle d'une animation

+

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.

@@ -60,20 +58,20 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Animations_basiques

Dans les exemples suivants, nous utiliserons {{domxref("window.requestAnimationFrame()")}} pour contrôler les animations. Cette technique est plus fluide et plus efficace, elle appelle les opérations de rendu quand le système est prêt à dessiner l'image. Dans des conditions idéales, la fonction est alors lancée 60 fois par seconde, mais la fréquence sera réduite si l'animation se passe dans un onglet non visible.

-

Pour plus d'informations sur la boucle d'animation, plus spécialement pour les jeux, rendez-vous sur l'article L'anatomie d'un jeu vidéo dans notre section Développement de jeux vidéo.

+

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 sun = new Image();
 var moon = new Image();
 var earth = new Image();
 function init(){
-  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
-  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
-  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
+  sun.src = 'canvas_sun.png';
+  moon.src = 'canvas_moon.png';
+  earth.src = 'canvas_earth.png';
   window.requestAnimationFrame(draw);
 }
 
@@ -116,17 +114,15 @@ function draw() {
 init();
 
- + -

{{EmbedLiveSample("Un_système_terrestre_animé", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}

+

{{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(){
+
function clock(){
   var now = new Date();
   var ctx = document.getElementById('canvas').getContext('2d');
   ctx.save();
@@ -225,22 +221,20 @@ init();
 
 window.requestAnimationFrame(clock);
- + -

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

+

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

+

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();
+
var img = new Image();
 
 // Variables utilisateur - les personnaliser pour changer l'image qui défile, ses
 // directions, et la vitesse.
 
-img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
+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
@@ -324,16 +318,16 @@ function draw() {
 
 

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>
+
<canvas id="canvas" width="800" height="200"></canvas>

{{EmbedLiveSample("Un_panorama_défilant_en_boucle", "830", "230")}}

-

Autres exemples

+

Autres exemples

-
Un raycaster basique avec canvas
+
Un raycaster basique avec canvas
Un bon exemple d'animation contrôlée par le clavier.
-
Animations avancées
+
Animations avancées
Nous nous attarderons sur quelques techniques d'animation et de gestion de physique avancées dans le prochain châpitre.
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 index 79129b01ae..0faa7a82ec 100644 --- a/files/fr/web/api/canvas_api/tutorial/basic_usage/index.html +++ b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.html @@ -16,7 +16,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_de_base

Commençons par regarder l'élément {{HTMLElement("canvas")}} lui-même.

-
<canvas id="tutoriel" width="150" height="150"></canvas>
+
<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.

@@ -29,7 +29,6 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_de_base

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.

@@ -38,7 +37,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_de_base

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">
+
<canvas id="stockGraph" width="150" height="150">
   current stock price: $3.15 + 0.15
 </canvas>
 
@@ -58,21 +57,20 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_de_base
 
 

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.

+

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 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');
+
var canvas = document.getElementById('tutorial');
 
 if (canvas.getContext) {
   var ctx = canvas.getContext('2d');
@@ -80,14 +78,13 @@ if (canvas.getContext) {
 } 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>
+
<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8"/>
@@ -119,7 +116,7 @@ if (canvas.getContext) {
 
 

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>
+
<!DOCTYPE html>
 <html>
  <head>
   <meta charset="utf-8"/>
@@ -145,6 +142,6 @@ if (canvas.getContext) {
 
 

Cet exemple ressemble a ceci :

-

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

+

{{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 index 0cde521d32..f2992ea69d 100644 --- a/files/fr/web/api/canvas_api/tutorial/compositing/example/index.html +++ b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.html @@ -21,7 +21,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition/Example

Ce code configure les valeurs globales utilisées par le reste du programme.

-
var canvas1 = document.createElement("canvas");
+
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',
@@ -65,7 +65,7 @@ var height = 340;
 
 

Quand la page se charge, le code suivant s'exécute pour configurer et exécuter l'exemple:

-
window.onload = function() {
+
window.onload = function() {
     // lum en sRGB
     var lum = {
         r: 0.33,
@@ -86,7 +86,7 @@ var height = 340;
 
 

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() {
+
function createCanvas() {
     var canvas = document.createElement("canvas");
     canvas.style.background = "url("+op_8x8.data+")";
     canvas.style.border = "1px solid #000";
@@ -162,7 +162,7 @@ function runComposite() {
 
 

Notre programme repose sur un certain nombbre de fonctions utilitaires:

-
var lightMix = function() {
+
var lightMix = function() {
     var ctx = canvas2.getContext("2d");
     ctx.save();
     ctx.globalCompositeOperation = "lighter";
@@ -186,7 +186,7 @@ function runComposite() {
 };
 
-
var colorSphere = function(element) {
+
var colorSphere = function(element) {
     var ctx = canvas1.getContext("2d");
     var width = 360;
     var halfWidth = width / 2;
@@ -218,7 +218,7 @@ function runComposite() {
 };
 
-
// HSV (1978) = H: Hue / S: Saturation / V: Value
+
// HSV (1978) = H: Hue / S: Saturation / V: Value
 Color = {};
 Color.HSV_RGB = function (o) {
     var H = o.H / 360,
diff --git a/files/fr/web/api/canvas_api/tutorial/compositing/index.html b/files/fr/web/api/canvas_api/tutorial/compositing/index.html
index 8cde4179fa..0ce19656af 100644
--- a/files/fr/web/api/canvas_api/tutorial/compositing/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/compositing/index.html
@@ -10,11 +10,9 @@ 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

+

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.

@@ -27,13 +25,15 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition

{{EmbedLiveSample("Exemple_de_composition", 750, 6750, "" ,"/Tutoriel_canvas/Composition/Example")}}

-

Détourage

+

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.

+

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.

+

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()")}}
@@ -42,13 +42,13 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition

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.

+

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

+

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() {
+
function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   ctx.fillRect(0, 0, 150, 150);
   ctx.translate(75, 75);
@@ -96,16 +96,14 @@ function drawStar(ctx, r) {
 }
 
- +

Dans les premières lignes de code, nous dessinons un rectangle noir ayant la même taille que le canvas comme toile de fond puis nous déplaçons l'origine au centre de l'image. Ensuite, nous créons le détourage circulaire en dessinant un arc (complet) et en faisant appelle à clip(). Les détourages font aussi partie de l'état de sauvegarde des canvas. Si on voulait garder le détourage d'origine, on pourrait par exemple sauvegarder l'état du canvas au préalable.

Tout ce qui sera dessiné après la création du détourage n'apparaîtra qu'à l'intérieur de ce chemin. Vous pouvez voir ça clairement avec le dégradé linéaire qui est dessiné après. Ensuite, un ensemble de 50 étoiles aléatoires est dessiné, en utilisant la fonction drawStar(). Nous pouvons voir, une fois de plus, que les éléments (ici les étoiles) n'apparaissent qu'à l'intérieur du détourage.

-

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

+

{{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 index 66e04ba19f..b265fb649a 100644 --- a/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.html +++ b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.html @@ -14,17 +14,18 @@ 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.

+

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.

+

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.

+

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 :

@@ -42,16 +43,14 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques

Exemple de forme rectangulaire

- -
function draw() {
+
function draw() {
   var canvas = document.getElementById('canvas');
   if (canvas.getContext) {
     var ctx = canvas.getContext('2d');
@@ -64,7 +63,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
 

Le résultat de cet exemple est montré ci-dessous.

-

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

+

{{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é.

@@ -78,7 +77,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
  1. Tout d'abord, vous devez créer le trajet.
  2. -
  3. Ensuite vous devez utiliser des instructions de dessin pour dessiner sur le trajet.
  4. +
  5. Ensuite vous devez utiliser des instructions de dessin pour dessiner sur le trajet.
  6. Finalement, vous devez fermer le trajet.
  7. Une fois que le trajet a été créé, vous devez le tracer ou le remplir pour le faire apparaître.
@@ -88,7 +87,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
{{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 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.
@@ -100,28 +99,30 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques

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

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

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() {
+
function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
@@ -137,7 +138,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
 

Le résultat ressemble à :

-

{{EmbedLiveSample("Dessin_d'un_triangle", 110, 110, "https://mdn.mozillademos.org/files/9847/triangle.png")}}

+

{{EmbedLiveSample("Dessin_d'un_triangle", 110, 110, "triangle.png")}}

Déplacement du stylo

@@ -152,16 +153,14 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques

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() {
+
function draw() {
   var canvas = document.getElementById('canvas');
   if (canvas.getContext) {
     var ctx = canvas.getContext('2d');
@@ -181,12 +180,12 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
 

Le résultat ressemble à ce qui suit :

-

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

+

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

+

Note : Pour en savoir plus sur la fonction arc(), voir la section {{anch("Arcs")}} ci-dessous.

Les lignes

@@ -202,16 +201,14 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques

L'exemple ci-dessous dessine deux triangles, un rempli et un filaire.

- -
function dessiner() {
+
function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
@@ -236,7 +233,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
 

Il commence par appeler beginPath() pour démarrer un nouveau trajet de forme. Nous utilisons ensuite la méthode moveTo() pour déplacer le point de départ à la position désirée. En dessous, deux lignes sont dessinées, qui constituent deux côtés du triangle.

-

{{EmbedLiveSample("Les_lignes", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}

+

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

@@ -254,31 +251,29 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques

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.

+

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

+

Note : Cet exemple requiert canevas légèrement plus large que les autres sur cette page : 150 x 200 pixels.

- -
function dessiner() {
+
function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
@@ -306,7 +301,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 }
 
-

{{EmbedLiveSample("Les_arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}

+

{{EmbedLiveSample("Les_arcs", 160, 210, "canvas_arc.png")}}

Les courbes quadratiques et de Bézier

@@ -319,7 +314,9 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
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.

+

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.

@@ -331,16 +328,14 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques

Cet exemple utilise plusieurs courbes quadratiques de Bézier pour rendre une bulle de dialogue.

- -
function dessiner() {
+
function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
@@ -359,22 +354,20 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 }
 
-

{{EmbedLiveSample("Courbes_de_Bézier_quadratiques", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}

+

{{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() {
+
function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
@@ -393,7 +386,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 }
 
-

{{EmbedLiveSample("Les_courbes_de_Bézier_cubiques", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}

+

{{EmbedLiveSample("Les_courbes_de_Bézier_cubiques", 160, 160, "canvas_bezier.png")}}

Rectangles

@@ -410,16 +403,14 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques

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() {
+
function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
@@ -507,14 +498,11 @@ function rectArrondi(ctx, x, y, largeur, hauteur, rayon) {
 
 

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

@@ -523,14 +511,14 @@ function rectArrondi(ctx, x, y, largeur, hauteur, rayon) {
{{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.
+
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 moveTorectarc ou quadraticCurveTo, etc., que nous avons appris à connaître ci-dessus, sont disponibles sur les objets Path2D.

+

Toutes les méthodes de trajet telles que moveTorectarc 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.

@@ -543,16 +531,14 @@ new Path2D(d); // trajet depuis des données de trajet SVG

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() {
+
function dessiner() {
   var canevas = document.getElementById('canvas');
   if (canevas.getContext){
     var ctx = canevas.getContext('2d');
@@ -569,13 +555,13 @@ new Path2D(d);    // trajet depuis des données de trajet SVG
} }
-

{{EmbedLiveSample("Exemple_de_Path2D", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}

+

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

+

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.

+

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");
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 index 463e89310b..4a1dfdcfa8 100644 --- a/files/fr/web/api/canvas_api/tutorial/drawing_text/index.html +++ b/files/fr/web/api/canvas_api/tutorial/drawing_text/index.html @@ -11,7 +11,7 @@ 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.

+

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

@@ -24,60 +24,56 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Dessin_de_texte_avec_canvas
Trait d'un texte donné à la position (x, y). Facultatif, avec une largeur maximale à dessiner.
-

Un exemple fillText

+

Un exemple fillText

-

Le texte est rempli en utilisant le fillStyle actuel.

+

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

+

Un exemple de strokeText

-

Le texte est rempli en utilisant le strokeStyle courant.

+

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

+

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 :

+

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

+

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.

+

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
@@ -92,71 +88,69 @@ 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 :

+

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);
+
ctx.font = '48px serif';
+ctx.textBaseline = 'hanging';
+ctx.strokeText('Hello world', 0, 100);
- +textarea.addEventListener('input', drawCanvas); +window.addEventListener('load', drawCanvas);

{{ EmbedLiveSample('Playable_code', 700, 360) }}

-

Mesures de texte avancées

+

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.

+

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

+

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;
-}
+
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var text = ctx.measureText('foo'); // objet TextMetrics
+  text.width; // 16;
+}
-

Notes spécifiques à Gecko

+

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.

+

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 index c02ef18e12..4370d57dec 100644 --- 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 @@ -6,13 +6,13 @@ 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.
+

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>
+
<canvas>
   <h2>Shapes</h2>
   <p>A rectangle with a black border.
    In the background is a pink circle.
@@ -29,7 +29,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Hit_regions_and_accessibility
 
 

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>
+
<canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas>
 

Zones cibles (hit Region)

@@ -47,7 +47,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Hit_regions_and_accessibility

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>
+
<canvas id="canvas"></canvas>
 <script>
 var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
@@ -66,7 +66,7 @@ canvas.addEventListener('mousemove', function(event) {
 
 

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});
+
ctx.addHitRegion({control: element});

Cela peut être utile pour le routage d'éléments {{HTMLElement("input")}}, par exemple. Regardez aussi codepen demo.

diff --git a/files/fr/web/api/canvas_api/tutorial/index.html b/files/fr/web/api/canvas_api/tutorial/index.html index 43019f1319..d10b22ec7a 100644 --- a/files/fr/web/api/canvas_api/tutorial/index.html +++ b/files/fr/web/api/canvas_api/tutorial/index.html @@ -12,42 +12,40 @@ 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.

-

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

-

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.

-

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

-

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.

-

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

+

Dans ce tutoriel

-

Voir aussi

+

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 index 4d7f4358d2..700966e07c 100644 --- a/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.html +++ b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.html @@ -6,9 +6,7 @@ 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

@@ -18,7 +16,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Optimizing_canvas

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 = document.createElement("canvas");
 myEntity.offscreenCanvas.width = myEntity.width;
 myEntity.offscreenCanvas.height = myEntity.height;
 myEntity.offscreenContext = myEntity.offscreenCanvas.getContext("2d");
@@ -30,7 +28,7 @@ myEntity.render(myEntity.offscreenContext);
 
 

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);
+
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()")}}.

@@ -45,7 +43,7 @@ myEntity.render(myEntity.offscreenContext);

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">
+
<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>
@@ -73,7 +71,7 @@ myEntity.render(myEntity.offscreenContext);
 
 

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 scaleX = window.innerWidth / canvas.width;
 var scaleY = window.innerHeight / canvas.height;
 
 var scaleToFit = Math.min(scaleX, scaleY);
@@ -87,7 +85,7 @@ stage.style.transform = "scale(" + scaleToFit + ")";
 
 

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>
+
<canvas id="mycanvas" moz-opaque></canvas>

D'autres conseils

@@ -100,7 +98,7 @@ stage.style.transform = "scale(" + scaleToFit + ")";
  • Essayer différents moyens d'effacer le canvas : ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} vs. {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} vs. redimensionner le canevas).
  • Avec les animations, utiliser {{domxref("window.requestAnimationFrame()")}} plutôt que {{domxref("window.setInterval()")}}.
  • Faire attention aux bibliothèques physiques lourdes.
  • -
  • Tester les performances avec JSPerf.
  • +
  • Tester les performances avec JSPerf.
  • Voir aussi

    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 index 56bd411943..053a07aa30 100644 --- 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 @@ -6,9 +6,7 @@ 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

    @@ -29,51 +27,49 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Pixel_manipulation_with_canvas

    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];
    +
    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;
    +
    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);
    +
    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);
    +
    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);
    +
    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.

    +

    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.

    +

    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.

    +

    Dans cet exemple, nous utilisons la méthode getImageData() pour afficher la couleur en dessous du curseur de la souris. Pour cela, nous avons besoin de la position en cours de la souris donnée par layerX et layerY, nous recherchons ensuite les données pixel à cette position dans le tableau de pixels que getImageData() nous fournit. Finalement, nous utilisons les données du tableau pour définir une couleur d'arrière-plan et un texte dans le <div> pour afficher la couleur.

    -
    var img = new Image();
    -img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
    +img.src = './assets/rhino.jpg';
     var canvas = document.getElementById('canvas');
     var ctx = canvas.getContext('2d');
     img.onload = function() {
    @@ -97,33 +93,31 @@ canvas.addEventListener('mousemove', pick);

    Peinture des données pixel dans un contexte

    -

    Vous pouvez utiliser la méthode putImageData() pour peindre les 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);
    +
    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);
    +
    ctx.putImageData(monImageData, 0, 0);
     

    Niveaux de gris et inversion de couleurs

    Dans cet exemple, nous itérons sur tous les pixels pour changer leurs valeurs, puis nous remettons le tableau de pixels modifié sur le canevas à l'aide de putImageData(). La fonction inversion soustrait simplement chaque couleur de la valeur maximale 255. La fonction  grayscale (niveaux de gris) fait simplement la moyenne du rouge, du vert et du bleu. Vous pouvez également utiliser une moyenne pondérée, donnée par la formule x = 0.299r + 0.587v + 0.114b, par exemple. Voir Niveaux de gris sur Wikipedia pour plus d'informations.

    - -
    var img = new Image();
    -img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
    +
    var img = new Image();
    +img.src = './assets/rhino.jpg';
     img.onload = function() {
       dessiner(this);
     };
    @@ -166,20 +160,19 @@ function dessiner(img) {
     
     

    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.

    +

    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.

    +

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

    +

    É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

    - -
    var img = new Image();
    -img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
    +
     
    -

    {{ EmbedLiveSample('Zoom_example', 620, 490) }}

    +

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

    +

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

    +

    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.

    +

    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.
    +
    Crée un objet Blob représentant l'image contenue dans le canevas.

    Voir aussi

    diff --git a/files/fr/web/api/canvas_api/tutorial/transformations/index.html b/files/fr/web/api/canvas_api/tutorial/transformations/index.html index 61443be765..eec783769b 100644 --- a/files/fr/web/api/canvas_api/tutorial/transformations/index.html +++ b/files/fr/web/api/canvas_api/tutorial/transformations/index.html @@ -12,7 +12,7 @@ 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.
    +

    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

    @@ -39,7 +39,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations

    Cet exemple tente d'illustrer comment fonctionne la pile d'états de dessin en dessinant un ensemble de rectangles consécutifs.

    -
    function draw() {
    +
    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
    @@ -60,11 +60,9 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
       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.

    @@ -72,17 +70,19 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations

    Lorsque la deuxième instruction restore() est appelée, l'état d'origine (celui que nous avons configuré avant le premier appel à enregistrer) est restauré et le dernier rectangle est de nouveau tracé en noir.

    -

    {{EmbedLiveSample("Un_exemple_de_sauvegarde_et_de_restauration_de_l_état_du_canevas", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}

    +

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

    +

    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

    @@ -91,7 +91,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations

    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() {
    +
    function draw() {
       var ctx = document.getElementById('canvas').getContext('2d');
       for (var i = 0; i < 3; i++) {
         for (var j = 0; j < 3; j++) {
    @@ -104,23 +104,24 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
       }
     }
    - + -

    {{EmbedLiveSample("Un_exemple_translate", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}

    + +

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

    +

    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

    @@ -128,10 +129,10 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations

    Dans cet exemple, nous utiliserons la méthode rotate () pour faire d'abord tourner un rectangle à partir de l'origine du canevas, puis du centre du rectangle lui-même à l'aide de translate ().

    -

    Rappel : Les angles sont en radians, pas en degrés. Pour convertir en degrés, nous utilisons : radians = (Math.PI/180)*degrees.

    +

    Note : Les angles sont en radians, pas en degrés. Pour convertir en degrés, nous utilisons : radians = (Math.PI/180)*degrees.

    -
    function draw() {
    +
    function draw() {
       var ctx = document.getElementById('canvas').getContext('2d');
     
       // rectangles de gauche, rotation depuis l'origine du canevas
    @@ -163,13 +164,11 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
     
     

    Pour faire pivoter le rectangle autour de son propre centre, nous déplaçons le canevas au centre du rectangle, puis faisons pivoter le canevas, puis le déplaçons à 0,0, puis dessinons le rectangle.

    - + -

    {{EmbedLiveSample("Un_exemple_rotate", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}

    +

    {{EmbedLiveSample("Un_exemple_rotate", "310", "210", "rotate.png")}}

    Mise à l'échelle

    @@ -188,7 +187,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations

    Dans ce dernier exemple, nous allons dessiner des  formes avec différents facteurs d'échelle.

    -
    function draw() {
    +
    function draw() {
       var ctx = document.getElementById('canvas').getContext('2d');
     
       // dessine un rectangle simple, mais le met à l'échelle.
    @@ -203,13 +202,11 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
       ctx.fillText('MDN', -135, 120);
     }
    - + -

    {{EmbedLiveSample("Un_exemple_scale", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}

    +

    {{EmbedLiveSample("Un_exemple_scale", "160", "160", "scale.png")}}

    Transformation

    @@ -217,11 +214,8 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
    {{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.
    +

    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 :

    @@ -247,7 +241,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations

    Exemple pour transform et setTransform

    -
    function draw() {
    +
    function draw() {
       var ctx = document.getElementById('canvas').getContext('2d');
     
       var sin = Math.sin(Math.PI / 6);
    @@ -266,12 +260,10 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
       ctx.fillRect(0, 50, 100, 100);
     }
    - + -

    {{EmbedLiveSample("Exemple_pour_transform_et_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}

    +

    {{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 index a90c9ff8b3..cd72e968a9 100644 --- a/files/fr/web/api/canvas_api/tutorial/using_images/index.html +++ b/files/fr/web/api/canvas_api/tutorial/using_images/index.html @@ -12,7 +12,7 @@ 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 !

    +

    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 :

    @@ -125,22 +125,20 @@ function getMyVideo() {
    -

    Les images SVG doivent spécifier une largeur et une hauteur dans l'élément racine <svg>.

    +

    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() {
    @@ -178,18 +176,16 @@ function draw() {
     

    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.

    +

    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() {
    diff --git a/files/fr/web/api/canvasgradient/addcolorstop/index.html b/files/fr/web/api/canvasgradient/addcolorstop/index.html
    index 15eb25cea5..f88d7413a9 100644
    --- a/files/fr/web/api/canvasgradient/addcolorstop/index.html
    +++ b/files/fr/web/api/canvasgradient/addcolorstop/index.html
    @@ -40,7 +40,7 @@ translation_of: Web/API/CanvasGradient/addColorStop
     
     

    JavaScript

    -
    var canevas = document.getElementById('canevas');
    +
    var canevas = document.getElementById('canevas');
     var ctx = canevas.getContext('2d');
     
     var degrade = ctx.createLinearGradient(0, 0, 200, 0);
    @@ -52,10 +52,9 @@ ctx.fillRect(10, 10, 200, 100);
     
     

    Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :

    - -

    {{ EmbedLiveSample('Playable_code', 700, 360) }}

    +

    {{ EmbedLiveSample('code_jouable', 700, 360) }}

    Spécifications

    diff --git a/files/fr/web/api/canvasrenderingcontext2d/arc/index.html b/files/fr/web/api/canvasrenderingcontext2d/arc/index.html index c0e3642253..d51cb083df 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/arc/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/arc/index.html @@ -26,39 +26,38 @@ translation_of: Web/API/CanvasRenderingContext2D/arc
    La position en y du centre de l'arc.
    radius (rayon)
    Le rayon de l'arc.
    -
    startAngle (angle départ)
    +
    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}}
    +
    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 

    +

    En utilisant la méthode arc 

    Voici un code simple permettant de dessiner un cercle .

    HTML

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

    JavaScript

    -
    var canvas = document.getElementById('canvas');
    +
    var canvas = document.getElementById('canvas');
     var ctx = canvas.getContext('2d');
     
     ctx.beginPath();
     ctx.arc(75, 75, 50, 0, 2 * Math.PI);
    -ctx.stroke();
    +ctx.stroke();

    Modifiez le code ci-dessous et voyez les changements en direct sur le canvas :

    -
    lowpass Filtre 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 hautIndique comment la fréquence a culminé autour de la coupure. Plus la valeur est élevée, plus le point culminant est haut Non utilisé
    highpass Filtre 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 hautIndique comment la fréquence a culminé autour de la coupure. Plus la valeur est élevée, plus le point culminant est haut Non utilisé
    @@ -85,5 +85,5 @@ translation_of: Web/API/CharacterData

    Voir aussi

    diff --git a/files/fr/web/api/clearinterval/index.html b/files/fr/web/api/clearinterval/index.html index f65d566b16..a6dbfe8cb4 100644 --- a/files/fr/web/api/clearinterval/index.html +++ b/files/fr/web/api/clearinterval/index.html @@ -14,7 +14,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/clearInterval

    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

    +

    Syntaxe

    scope.clearInterval(intervalID)
     
    @@ -32,11 +32,11 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/clearInterval

    {{jsxref("undefined")}}

    -

    Exemples

    +

    Exemples

    -

    Voir l'exemple setInterval().

    +

    Voir l'exemple setInterval().

    -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/client/index.html b/files/fr/web/api/client/index.html index ceb18926b1..1852bcbdb3 100644 --- a/files/fr/web/api/client/index.html +++ b/files/fr/web/api/client/index.html @@ -21,7 +21,7 @@ translation_of: Web/API/Client
    {{domxref("Client.postMessage()")}}
    -
    Permet à un service worker d'envoyer un message au ServiceWorkerClient.
    +
    Permet à un service worker d'envoyer un message au ServiceWorkerClient.

    Propriétés

    @@ -41,7 +41,7 @@ translation_of: Web/API/Client

    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)
    +
    // 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
    @@ -86,7 +86,7 @@ self.addEventListener("message", function(e) {
      
  • Utiliser les Service Workers
  • Exemple simple de service workers
  • Est ce que le ServiceWorker est prêt ?
  • -
  • Promesses
  • +
  • Promesses
  • Utilisation performante des web workers
  • Channel Messaging API
  • diff --git a/files/fr/web/api/clients/claim/index.html b/files/fr/web/api/clients/claim/index.html index 349e8aee72..bd76981af1 100644 --- a/files/fr/web/api/clients/claim/index.html +++ b/files/fr/web/api/clients/claim/index.html @@ -29,7 +29,7 @@ translation_of: Web/API/Clients/claim

    Valeur de retour

    -

    Une Promise.

    +

    Une Promise.

    Exemple

    diff --git a/files/fr/web/api/clients/get/index.html b/files/fr/web/api/clients/get/index.html index 381478b4bc..dd2d46c018 100644 --- a/files/fr/web/api/clients/get/index.html +++ b/files/fr/web/api/clients/get/index.html @@ -14,8 +14,6 @@ translation_of: Web/API/Clients/get
    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) {
    @@ -31,9 +29,7 @@ translation_of: Web/API/Clients/get
     
     

    Valeur de retour

    -
    -
    Une Promise qui se résoud avec un objet {{domxref("Client")}}.
    -
    +

    Une Promise qui se résoud avec un objet {{domxref("Client")}}.

    Exemples

    diff --git a/files/fr/web/api/clients/index.html b/files/fr/web/api/clients/index.html index 3607baccad..aab1e6c132 100644 --- a/files/fr/web/api/clients/index.html +++ b/files/fr/web/api/clients/index.html @@ -15,7 +15,7 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/clients/matchall/index.html b/files/fr/web/api/clients/matchall/index.html index 868f7bd22a..2636074f8d 100644 --- a/files/fr/web/api/clients/matchall/index.html +++ b/files/fr/web/api/clients/matchall/index.html @@ -12,7 +12,7 @@ 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.
    +
    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.
     
    @@ -26,7 +26,7 @@ translation_of: Web/API/Clients/matchAll
    options
    -
    L'objet option vous permet de définir les options pour l'opération. Les options disponibles sont : +

    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.
    • @@ -36,9 +36,7 @@ translation_of: Web/API/Clients/matchAll

      Valeur de retour

      -
      -
      Une  Promesse qui se résout avec un tableau d'objets {{domxref("Client")}}.
      -
      +

      Une  Promesse qui se résout avec un tableau d'objets {{domxref("Client")}}.

      Exemples

      diff --git a/files/fr/web/api/clients/openwindow/index.html b/files/fr/web/api/clients/openwindow/index.html index 50282ead56..1116da97f5 100644 --- a/files/fr/web/api/clients/openwindow/index.html +++ b/files/fr/web/api/clients/openwindow/index.html @@ -24,9 +24,7 @@ translation_of: Web/API/Clients/openWindow

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

      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

      diff --git a/files/fr/web/api/clipboard/index.html b/files/fr/web/api/clipboard/index.html index a248206ee7..2dbef5414b 100644 --- a/files/fr/web/api/clipboard/index.html +++ b/files/fr/web/api/clipboard/index.html @@ -15,21 +15,20 @@ translation_of: Web/API/Clipboard ---

      {{APIRef("Clipboard API")}}

      -
      -

      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.

      +
      +

      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.

      +

      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.

      +

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

      @@ -55,7 +54,7 @@ translation_of: Web/API/Clipboard

      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.

      +

      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.

      diff --git a/files/fr/web/api/clipboard/write/index.html b/files/fr/web/api/clipboard/write/index.html index c7b8435565..214a32eac6 100644 --- a/files/fr/web/api/clipboard/write/index.html +++ b/files/fr/web/api/clipboard/write/index.html @@ -5,7 +5,7 @@ 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.

      +

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

      diff --git a/files/fr/web/api/clipboard/writetext/index.html b/files/fr/web/api/clipboard/writetext/index.html index 4b29e6ed6a..93b7310625 100644 --- a/files/fr/web/api/clipboard/writetext/index.html +++ b/files/fr/web/api/clipboard/writetext/index.html @@ -8,7 +8,7 @@ translation_of: Web/API/Clipboard/writeText

      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.

      +

      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

      diff --git a/files/fr/web/api/clipboard_api/index.html b/files/fr/web/api/clipboard_api/index.html index d87dd0d03c..bef8e4bafd 100644 --- a/files/fr/web/api/clipboard_api/index.html +++ b/files/fr/web/api/clipboard_api/index.html @@ -7,8 +7,8 @@ translation_of: 'Web/API/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")}}).

      +
      +

      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()")}}.

      diff --git a/files/fr/web/api/closeevent/index.html b/files/fr/web/api/closeevent/index.html index 4713523bb0..3873ad5d76 100644 --- a/files/fr/web/api/closeevent/index.html +++ b/files/fr/web/api/closeevent/index.html @@ -13,14 +13,14 @@ translation_of: Web/API/CloseEvent

      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

      +

      Constructeur

      {{domxref("CloseEvent.CloseEvent", "CloseEvent()")}}
      Construit un nouvel événement CloseEvent.
      -

      Propriétés

      +

      Propriétés

      Cette interface hérite également des propriétés de sa mère, {{domxref("Event")}}.

      diff --git a/files/fr/web/api/comment/comment/index.html b/files/fr/web/api/comment/comment/index.html index 3813e32b8e..8e4017c0d3 100644 --- a/files/fr/web/api/comment/comment/index.html +++ b/files/fr/web/api/comment/comment/index.html @@ -19,9 +19,9 @@ translation_of: Web/API/Comment/Comment

      Exemple

      -
      var comment = new Comment("Test");
      +
      var comment = new Comment("Test");
      -

      Spécifications

      +

      Spécifications

    @@ -47,7 +47,7 @@ translation_of: Web/API/Comment/Comment

    Voir aussi

     

    diff --git a/files/fr/web/api/comment/index.html b/files/fr/web/api/comment/index.html index 0e41471865..804bd44d58 100644 --- a/files/fr/web/api/comment/index.html +++ b/files/fr/web/api/comment/index.html @@ -27,7 +27,7 @@ translation_of: Web/API/Comment

    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écifications

    @@ -66,5 +66,5 @@ translation_of: Web/API/Comment

    Voir aussi

    diff --git a/files/fr/web/api/compositionevent/index.html b/files/fr/web/api/compositionevent/index.html index 38a29c7202..cf94e5b643 100644 --- a/files/fr/web/api/compositionevent/index.html +++ b/files/fr/web/api/compositionevent/index.html @@ -9,7 +9,7 @@ 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.

    +

    Le CompositionEvent DOM représente les évènements qui se produisent en raison de l'utilisateur entrant indirectement le texte.

    Constructeur

    @@ -24,9 +24,9 @@ translation_of: Web/API/CompositionEvent
    {{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.
    +
    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).
    +
    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

    @@ -74,6 +74,6 @@ translation_of: Web/API/CompositionEvent
  • compositionstart
  • compositionend
  • compositionupdate
  • -
  • UIEvent
  • -
  • Event
  • +
  • UIEvent
  • +
  • Event
  • diff --git a/files/fr/web/api/console/assert/index.html b/files/fr/web/api/console/assert/index.html index 37fc75d36c..db81d236b2 100644 --- a/files/fr/web/api/console/assert/index.html +++ b/files/fr/web/api/console/assert/index.html @@ -20,13 +20,13 @@ translation_of: Web/API/console/assert

    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

    +

    Syntaxe

    console.assert(assertion, obj1 [, obj2, ..., objN]);
     console.assert(assertion, msg [, subst1, ..., substN]);
     
    -

    Paramètres

    +

    Paramètres

    assertion
    @@ -39,9 +39,9 @@ console.assert(assertion, msg [, subst1, ..., sub
    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.

    +

    Allez voir Afficher du texte dans la console dans la documentation de {{domxref("console")}} pour plus de détails.

    -

    Spécification

    +

    Spécification

    @@ -62,11 +62,11 @@ console.assert(assertion, msg [, subst1, ..., sub

     

    -

    Compatibilité entre les navigateurs

    +

    Compatibilité entre les navigateurs

    {{Compat("api.Console.assert")}}

    -

    Voir aussi

    +

    Voir aussi

    • WHATWG Console Standard: console.assert
    • diff --git a/files/fr/web/api/console/count/index.html b/files/fr/web/api/console/count/index.html index 8364fc83f4..6c10e8458f 100644 --- a/files/fr/web/api/console/count/index.html +++ b/files/fr/web/api/console/count/index.html @@ -77,9 +77,7 @@ console.count("alice");
      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.
      +

      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

      @@ -103,8 +101,4 @@ console.count("alice");

      Compatibilité des navigateurs

      -

      {{Compat("api.Console.count")}}

      - -
       
      - -
       
      +

      {{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 index 2a5106ebfd..7cf74195e7 100644 --- a/files/fr/web/api/console/countreset/index.html +++ b/files/fr/web/api/console/countreset/index.html @@ -25,21 +25,21 @@ translation_of: Web/API/Console/countReset

      Si le paramètre label à été spécifié :

      -
       counter-name: 0
      +
       counter-name: 0

      Si aucun label n'as été specifié

      -
      default: 0
      +
      default: 0

      Warnings

      -

      Si label est specifié mais n'existe pas countReset() renvoie cet avertissement :

      +

      Si label est specifié mais n'existe pas countReset() renvoie cet avertissement :

      -
      Counter "counter-name" doesn’t exist.
      +
      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.
      +
      Counter "default" doesn’t exist.

      Examples

      diff --git a/files/fr/web/api/console/debug/index.html b/files/fr/web/api/console/debug/index.html index fc2f692b32..03082131d9 100644 --- a/files/fr/web/api/console/debug/index.html +++ b/files/fr/web/api/console/debug/index.html @@ -13,7 +13,7 @@ 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.

      +

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

      diff --git a/files/fr/web/api/console/dir/index.html b/files/fr/web/api/console/dir/index.html index a7582315c6..82b45f36cf 100644 --- a/files/fr/web/api/console/dir/index.html +++ b/files/fr/web/api/console/dir/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/Console/dir

      {{AvailableInWorkers}}

      -

      console-dir.png

      +

      Syntaxe

      @@ -61,7 +61,7 @@ translation_of: Web/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 index cad694b8a9..8571cc33a4 100644 --- a/files/fr/web/api/console/dirxml/index.html +++ b/files/fr/web/api/console/dirxml/index.html @@ -54,5 +54,5 @@ translation_of: Web/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 index 46eef2ccd3..21bfa8b40a 100644 --- a/files/fr/web/api/console/error/index.html +++ b/files/fr/web/api/console/error/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/Console/error

      {{AvailableInWorkers}}

      -

      Syntaxe

      +

      Syntaxe

      console.error(obj1 [, obj2, ..., objN]);
       console.error(msg [, subst1, ..., substN]);
      @@ -29,7 +29,7 @@ console.exception(msg [, subst1, ..., substN]);
       

      Note: console.exception() est un alias de console.error(); ils sont fonctionnellement identiques.

      -

      Paramètres

      +

      Paramètres

      obj1 ... objN
      @@ -40,9 +40,9 @@ console.exception(msg [, 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.

      +

      Voir Afficher du texte dans la console dans la documentation de  {{domxref("console")}} pour plus de détails.

      -

      Spécification

      +

      Spécification

    @@ -61,11 +61,11 @@ console.exception(msg [, subst1, ..., substN]);
    -

    Compatibilité des navigateurs

    +

    Compatibilité des navigateurs

    {{Compat("api.Console.error")}}
    -

    Voir aussi

    +

    Voir aussi

    • Opera Dragonfly documentation: Console
    • diff --git a/files/fr/web/api/console/group/index.html b/files/fr/web/api/console/group/index.html index 5b4a81302d..0a3e6f8265 100644 --- a/files/fr/web/api/console/group/index.html +++ b/files/fr/web/api/console/group/index.html @@ -31,7 +31,7 @@ translation_of: Web/API/Console/group

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

      +

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

      @@ -39,22 +39,22 @@ translation_of: Web/API/Console/group

      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");
      +
      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 :

      +

      La sortie ressemble à ceci :

      -

      A screenshot of messages nested in the console output.

      +

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

      +

      Pour plus de détail, se reporter à l'article Using groups in the console dans la documentation sur la {{domxref("console")}}.

      Spécifications

      @@ -82,5 +82,5 @@ console.log<

      Voir aussi

      diff --git a/files/fr/web/api/console/groupcollapsed/index.html b/files/fr/web/api/console/groupcollapsed/index.html index 11679a50e2..5956aca479 100644 --- a/files/fr/web/api/console/groupcollapsed/index.html +++ b/files/fr/web/api/console/groupcollapsed/index.html @@ -14,11 +14,11 @@ 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.

      +

      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.

      +

      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.

      +

      Voir Using groups in the console dans la documentation  de {{domxref("console")}}  pour plus de détails et des exemples.

      {{AvailableInWorkers}}

      @@ -60,5 +60,5 @@ translation_of: Web/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 index 5bd3f19cb9..bb64ea32cb 100644 --- a/files/fr/web/api/console/groupend/index.html +++ b/files/fr/web/api/console/groupend/index.html @@ -12,7 +12,7 @@ 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.

      +

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

      @@ -51,5 +51,5 @@ translation_of: Web/API/Console/groupEnd

      Voir aussi

      diff --git a/files/fr/web/api/console/index.html b/files/fr/web/api/console/index.html index 822d90a5da..3fea02614b 100644 --- a/files/fr/web/api/console/index.html +++ b/files/fr/web/api/console/index.html @@ -11,11 +11,11 @@ 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.

      +

      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 :

      +

      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")
      +
      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")}}.

      @@ -35,7 +35,7 @@ translation_of: Web/API/Console
      -

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

      +

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

      @@ -46,41 +46,41 @@ translation_of: Web/API/Console

      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.
      +
      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().
      +
      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().
      +
      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.
      +
      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.
      +
      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.
      +
      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.
      +
      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).
      +
      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.
      +
      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.
      +
      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.
      +
      Ajoute un marqueur dans la Timeline du navigateur ou l'outil Waterfall.
      {{domxref("Console.trace()")}}
      -
      Affiche une trace d'appels.
      +
      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.
      +
      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

      +

      Exemples d'utilisation

      -

      Afficher du texte dans la console

      +

      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.

      @@ -115,7 +115,7 @@ console.info("My first car was a", car, ". The object is: ", someObject);

    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 :

    - +
    @@ -127,7 +127,7 @@ console.info("My first car was a", car, ". The object is: ", someObject); - + @@ -160,23 +160,23 @@ console.info("My first car was a", car, ". The object is: ", someObject);

    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");
    - -
    +
    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.

    +

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

    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 :

    +

    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();
    @@ -192,7 +192,7 @@ console.debug("Back to the outer level");
     
     

    L'affichage ressemblera à ceci :

    -

    nesting.png

    +

    Démonstration de groupes imbriqués dans la console Firefox

    {{h3_gecko_minversion("Timers", "10.0")}}
    @@ -207,11 +207,13 @@ console.timeEnd("answer time");

    affichera le temps pour l'utilisateur dont il a eu besoin pour faire disparaitre la fenêtre d'alerte :

    -

    timerresult.png

    +

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

    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

    @@ -229,9 +231,9 @@ function foo() {

    L'affichage dans la console ressemblera à ceci :

    -

    +

    -

    Spécification

    +

    Spécification

    caractère de substitution
    %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 01Affiche 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
    %s
    @@ -251,18 +253,18 @@ function foo() {

    Notes

      -
    • Au moins dans Firefox, si une page définit un objet console, cet objet remplace celui créé dans Firefox.
    • -
    • Antérieur à {{Gecko ("12.0")}}, les méthodes de l'objet console ne fonctionnent que lorsque la console Web est ouverte. À partir de {{Gecko ("12.0")}}, la sortie est mise en cache jusqu'à ce que la console Web soit ouverte, puis affichée à ce moment-là.
    • -
    • Il est à noter que l'objet de console intégré de Firefox est compatible avec celui fourni par Firebug.
    • +
    • Au moins dans Firefox, si une page définit un objet console, cet objet remplace celui créé dans Firefox.
    • +
    • Antérieur à {{Gecko ("12.0")}}, les méthodes de l'objet console ne fonctionnent que lorsque la console Web est ouverte. À partir de {{Gecko ("12.0")}}, la sortie est mise en cache jusqu'à ce que la console Web soit ouverte, puis affichée à ce moment-là.
    • +
    • Il est à noter que l'objet de console intégré de Firefox est compatible avec celui fourni par Firebug.

    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 index 44cac76f82..a9263f8f27 100644 --- a/files/fr/web/api/console/info/index.html +++ b/files/fr/web/api/console/info/index.html @@ -11,15 +11,13 @@ translation_of: Web/API/Console/info ---

    {{ APIRef("Console API") }}{{Non-standard_header}}

    -

    Résumé

    -

    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

    +

    Syntaxe

    -
    console.info(obj1 [, obj2, ..., objN]);
    +
    console.info(obj1 [, obj2, ..., objN]);
     console.info(msg [, subst1, ..., substN]);
     
    @@ -34,7 +32,7 @@ console.info(msg [, 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.

    +

    Voir Afficher du texte sur la console dans la documentation de {{ domxref("console") }} pour plus de détails.

    Spécification

    diff --git a/files/fr/web/api/console/profile/index.html b/files/fr/web/api/console/profile/index.html index e35031d483..d26727f201 100644 --- a/files/fr/web/api/console/profile/index.html +++ b/files/fr/web/api/console/profile/index.html @@ -11,7 +11,7 @@ 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).

    +

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

    diff --git a/files/fr/web/api/console/profileend/index.html b/files/fr/web/api/console/profileend/index.html index dc76f8eac9..9b267eb029 100644 --- a/files/fr/web/api/console/profileend/index.html +++ b/files/fr/web/api/console/profileend/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Console/profileEnd

    {{APIRef("Console API")}}{{Non-standard_header}}

    -

    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.

    +

    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()")}}.

    diff --git a/files/fr/web/api/console/table/index.html b/files/fr/web/api/console/table/index.html index dabdd1fa6d..1f5beabcd2 100644 --- a/files/fr/web/api/console/table/index.html +++ b/files/fr/web/api/console/table/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Console/table ---
    {{APIRef("Console API")}}
    -

    Affiche des données tabulaires sous la forme d'un tableau.

    +

    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.

    @@ -30,7 +30,7 @@ translation_of: Web/API/Console/table console.table(["apples", "oranges", "bananas"]);
    -

    +

    // un objet dont les propriétés sont des chaînes de caractères
     
    @@ -43,7 +43,7 @@ var me = new Person("John", "Smith");
     
     console.table(me);
    -

    +

    Collections de données composées

    @@ -54,7 +54,7 @@ console.table(me); var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]] console.table(people); -

    +

    Un tableau qui affiche un tableau de tableaux

    // un tableau d'objets
     
    @@ -71,7 +71,7 @@ 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
     
    @@ -83,7 +83,7 @@ family.daughter = new Person("Emily", "Smith");
     
     console.table(family);
    -

    +

    Un tableau affichant des objets composés d'objets

    Restreindre les colonnes affichées

    @@ -102,7 +102,7 @@ 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

    @@ -113,7 +113,7 @@ console.table([john, jane, emily], ["firstName"]);
    console.table(data [, columns]);
     
    -

    Paramètres

    +

    Paramètres

    data
    @@ -122,7 +122,7 @@ console.table([john, jane, emily], ["firstName"]);
    Un tableau contenant les noms des colonnes à inclure dans la sortie.
    -

    Spécification

    +

    Spécification

    @@ -141,12 +141,6 @@ console.table([john, jane, emily], ["firstName"]);
    -

    Compatibilité des navigateurs

    +

    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 index 69c5e481d9..271b2e5497 100644 --- a/files/fr/web/api/console/time/index.html +++ b/files/fr/web/api/console/time/index.html @@ -13,11 +13,11 @@ 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.

    +

    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.

    +

    Voir Timers dans la documentation de {{ domxref("console") }} pour plus de details et d'exemples.

    -

    Syntaxe

    +

    Syntaxe

    console.time(label);
     
    @@ -29,7 +29,7 @@ translation_of: Web/API/Console/time
    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écification

    @@ -56,5 +56,5 @@ translation_of: Web/API/Console/time diff --git a/files/fr/web/api/console/timeend/index.html b/files/fr/web/api/console/timeend/index.html index f4a94062cf..dc45ee8468 100644 --- a/files/fr/web/api/console/timeend/index.html +++ b/files/fr/web/api/console/timeend/index.html @@ -14,9 +14,9 @@ translation_of: Web/API/Console/timeEnd

    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.

    +

    Voir Timers dans la documentation de {{domxref("console")}} pour des détails et des exemples.

    -

    Syntaxe

    +

    Syntaxe

    console.timeEnd(label);
     
    @@ -25,10 +25,10 @@ translation_of: Web/API/Console/timeEnd
    label
    -
    Le nom du timer à stopper. Une fois arrêté, le temps écoulé est automatiquement affiché dans la Console Web.
    +
    Le nom du timer à stopper. Une fois arrêté, le temps écoulé est automatiquement affiché dans la Console Web.
    -

    Spécification

    +

    Spécification

    diff --git a/files/fr/web/api/console/timelog/index.html b/files/fr/web/api/console/timelog/index.html index 0b06d664eb..cd1f33d3be 100644 --- a/files/fr/web/api/console/timelog/index.html +++ b/files/fr/web/api/console/timelog/index.html @@ -61,7 +61,7 @@ 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 :

    -

    timerresult.png

    +

    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é

    diff --git a/files/fr/web/api/console/timestamp/index.html b/files/fr/web/api/console/timestamp/index.html index 2bc0f56843..ebf2f9bd83 100644 --- a/files/fr/web/api/console/timestamp/index.html +++ b/files/fr/web/api/console/timestamp/index.html @@ -11,7 +11,7 @@ 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.

    +

    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.

    @@ -38,5 +38,5 @@ translation_of: Web/API/Console/timeStamp diff --git a/files/fr/web/api/console/trace/index.html b/files/fr/web/api/console/trace/index.html index 35e3cf2838..481fb9f954 100644 --- a/files/fr/web/api/console/trace/index.html +++ b/files/fr/web/api/console/trace/index.html @@ -13,35 +13,35 @@ translation_of: Web/API/Console/trace ---

    {{ APIRef("Console API") }}

    -

    Affiche la stack trace dans la Web Console.

    +

    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.

    +

    Voir Stack traces dans la documentation de {{ domxref("console") }} pour plus de détails et d'exemples.

    -

    Syntaxe

    +

    Syntaxe

    console.trace();
     

    Exemple

    -
    function foo() {
    -  function bar() {
    -    console.trace();
    -  }
    -  bar();
    -}
    +
    function foo() {
    +  function bar() {
    +    console.trace();
    +  }
    +  bar();
    +}
     
    -foo();
    +foo();

    Dans la console, la trace suivante sera affichée :

    -
    bar
    +
    bar
     foo
    -<anonymous>
    +<anonymous>
    -

    Spécification

    +

    Spécification

    @@ -66,4 +66,4 @@ foo

    Voir aussi

    -

    Opera Dragonfly documentation: Console

    +

    Opera Dragonfly documentation: Console

    diff --git a/files/fr/web/api/console/warn/index.html b/files/fr/web/api/console/warn/index.html index 4da87fa1a3..f67adb3582 100644 --- a/files/fr/web/api/console/warn/index.html +++ b/files/fr/web/api/console/warn/index.html @@ -16,9 +16,11 @@ translation_of: Web/API/Console/warn

    {{AvailableInWorkers}}

    -
    Note: Dans Firefox, une icône de point d'exclamation est affichée à côté des messages d'avertissement
    +
    +

    Note : Dans Firefox, une icône de point d'exclamation est affichée à côté des messages d'avertissement

    +
    -

    Syntaxe

    +

    Syntaxe

    console.warn(obj1 [, obj2, ..., objN]);
     console.warn(msg [, subst1, ..., substN]);
    @@ -35,9 +37,9 @@ console.warn(msg [, 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.

    +

    Voir Outputting text to the console dans la documentation de {{ domxref("console") }} pour plus de détails.

    -

    Spécification

    +

    Spécification

    @@ -63,6 +65,6 @@ console.warn(msg [, subst1, ..., substN]);

    Voir aussi

    diff --git a/files/fr/web/api/console_api/index.html b/files/fr/web/api/console_api/index.html index f261988da5..95de8bab21 100644 --- a/files/fr/web/api/console_api/index.html +++ b/files/fr/web/api/console_api/index.html @@ -13,7 +13,7 @@ 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.

    +

    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

    @@ -37,7 +37,7 @@ translation_of: Web/API/Console_API

    Exemples

    -
    let myString = 'Hello world'
    +
    let myString = 'Hello world'
     
     // Output "Hello world" to the console
     console.log(myString)
    @@ -68,7 +68,7 @@ console.log(myString)

    Voir également

    diff --git a/files/fr/web/api/credential/index.html b/files/fr/web/api/credential/index.html index caabff8aaa..f5dd37c020 100644 --- a/files/fr/web/api/credential/index.html +++ b/files/fr/web/api/credential/index.html @@ -23,7 +23,7 @@ translation_of: Web/API/Credential
    • password (pour {{domxref("PasswordCredential")}})
    • federated (pour {{domxref("FederatedCredential")}})
    • -
    • public-key (pour {{domxref("PublicKeyCredential")}})
    • +
    • public-key (pour {{domxref("PublicKeyCredential")}})
    diff --git a/files/fr/web/api/credential_management_api/index.html b/files/fr/web/api/credential_management_api/index.html index 2f57393cbc..643d918367 100644 --- a/files/fr/web/api/credential_management_api/index.html +++ b/files/fr/web/api/credential_management_api/index.html @@ -13,8 +13,7 @@ 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.

    -
    +

    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

    diff --git a/files/fr/web/api/credentialscontainer/create/index.html b/files/fr/web/api/credentialscontainer/create/index.html index 8ff6ad3bfc..88f609ad56 100644 --- a/files/fr/web/api/credentialscontainer/create/index.html +++ b/files/fr/web/api/credentialscontainer/create/index.html @@ -33,7 +33,7 @@ translation_of: Web/API/CredentialsContainer/create
    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")}} +
    • 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")}}
      • @@ -41,7 +41,7 @@ translation_of: Web/API/CredentialsContainer/create
      • 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 : +
    • 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")}}
      • diff --git a/files/fr/web/api/crypto/getrandomvalues/index.html b/files/fr/web/api/crypto/getrandomvalues/index.html index 049be85f45..7c0b91e5d7 100644 --- a/files/fr/web/api/crypto/getrandomvalues/index.html +++ b/files/fr/web/api/crypto/getrandomvalues/index.html @@ -47,9 +47,9 @@ for (var i = 0; i < array.length; i++) { } -

        Spécification

        +

        Spécification

        -
    +
    @@ -66,7 +66,7 @@ for (var i = 0; i < array.length; i++) {

    Compatibilité des navigateurs

    -
    {{Compat("api.Crypto.getRandomValues")}}
    +
    {{Compat("api.Crypto.getRandomValues")}}

    Voir aussi

    diff --git a/files/fr/web/api/crypto/index.html b/files/fr/web/api/crypto/index.html index e7cbb32d09..f31a2ebaf6 100644 --- a/files/fr/web/api/crypto/index.html +++ b/files/fr/web/api/crypto/index.html @@ -25,32 +25,30 @@ translation_of: Web/API/Crypto
    {{domxref("RandomSource.getRandomValues()") }}
    Rempli le {{ jsxref("TypedArray") }} passé avec des valeurs aléatoires utilisables pour la cryptographie.
    -
    -

    Spécifications

    - -
    Specification
    - - - - - - - - - - - - - - -
    SpécificationStatutCommentaire
    {{SpecName("Web Crypto API", "#crypto-interface", "Crypto")}}{{Spec2("Web Crypto API")}}Definition
    - initiale
    - -
    -

    Voir aussi

    - - -
    + +

    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/css/index.html b/files/fr/web/api/css/index.html index e63c612007..93f55c6ad4 100644 --- a/files/fr/web/api/css/index.html +++ b/files/fr/web/api/css/index.html @@ -5,15 +5,15 @@ 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.

    +

    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.

    +

    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.

    +

    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

    diff --git a/files/fr/web/api/css_font_loading_api/index.html b/files/fr/web/api/css_font_loading_api/index.html index deed5bdd38..664e4de90a 100644 --- a/files/fr/web/api/css_font_loading_api/index.html +++ b/files/fr/web/api/css_font_loading_api/index.html @@ -5,10 +5,10 @@ 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.

    +

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

    +
    +

    Note : cette fonctionnalité est disponible dans l'API Web Workers (self.fonts donne accès à {{domxref('FontFaceSet')}}).

    Interfaces

    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 index 04bb432759..4b0fc4ff56 100644 --- 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 @@ -9,27 +9,27 @@ translation_of: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements

    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.

    +

    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 ?

    +

    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.

    +

    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.

    +

    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.

    -

    Image:Dimensions-offset.png

    +

    -

    Quelle est la taille du contenu affiché ?

    +

    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 :

    +

    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 :

    -

    Image:Dimensions-client.png

    +

    -

    Grandeur totale

    +

    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.

    +

    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.

    @@ -38,6 +38,6 @@ translation_of: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements

    Voir aussi

    diff --git a/files/fr/web/api/css_object_model/index.html b/files/fr/web/api/css_object_model/index.html index 81547c72c2..ae59f591a9 100644 --- a/files/fr/web/api/css_object_model/index.html +++ b/files/fr/web/api/css_object_model/index.html @@ -13,7 +13,6 @@ translation_of: Web/API/CSS_Object_Model

    Référence

    -
    • {{domxref("AnimationEvent")}}
    • {{domxref("CaretPosition")}}
    • @@ -51,7 +50,6 @@ translation_of: Web/API/CSS_Object_Model
    • {{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")}}.

    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 index 39b279e9d3..73406a99b5 100644 --- 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 @@ -12,12 +12,12 @@ translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation

    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.

    +

    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 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.
    @@ -132,7 +132,7 @@ li {

    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.

    +

    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.

    @@ -175,6 +175,6 @@ li {
  • {{domxref("Screen.lockOrientation()")}}
  • {{domxref("Screen.unlockOrientation()")}}
  • {{domxref("Screen.onorientationchange")}}
  • -
  • Media query orientation
  • -
  • A short introduction to media queries in Firefox 3.5
  • +
  • Media query orientation
  • +
  • A short introduction to media queries in Firefox 3.5
  • diff --git a/files/fr/web/api/cssrulelist/index.html b/files/fr/web/api/cssrulelist/index.html index 0fcb6dc857..86f5f4cc8a 100644 --- a/files/fr/web/api/cssrulelist/index.html +++ b/files/fr/web/api/cssrulelist/index.html @@ -8,24 +8,22 @@ translation_of: Web/API/CSSRuleList ---

    {{ APIRef("CSSOM") }}

    -

    Résumé

    +

    A CSSRuleList est un objet de type tableau contenant une collection ordonnée d'objects CSSRule.

    -

    A CSSRuleList est un objet de type tableau contenant une collection ordonnée d'objects CSSRule.

    - -

    Description

    +

    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

    +

    Exemple

    // récuperer la première règle de la première feuille de style
     var firstRule = document.styleSheets[0].cssRules[0];
     
    -

    Voir aussi

    +

    Voir aussi

    Implémentations de CSSRuleList

    @@ -39,11 +37,11 @@ var firstRule = document.styleSheets[0].cssRules[0];
  • {{ domxref("CSSMozDocumentRule") }} property {{ domxref("CSSMozDocumentRule/cssRules", "cssRules") }}
  • -

    Spécification

    +

    Spécification

    diff --git a/files/fr/web/api/cssstyledeclaration/csstext/index.html b/files/fr/web/api/cssstyledeclaration/csstext/index.html index 509fcc5969..e8b9d228ae 100644 --- a/files/fr/web/api/cssstyledeclaration/csstext/index.html +++ b/files/fr/web/api/cssstyledeclaration/csstext/index.html @@ -7,16 +7,14 @@ translation_of: Web/API/CSSStyleDeclaration/cssText
    {{APIRef("CSSOM") }}
    -

    Résumé

    +

    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.

    -

    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

    +

    Syntaxe

    chaine = elem.style.cssText
     
    -

    Exemple

    +

    Exemple

    <span id="s1" style="color: red;">
     Du texte
    @@ -28,7 +26,7 @@ Du texte
     </script>
     
    -

    Spécification

    +

    Spécification

    • DOM Level 2 Style CSS - Interface CSSStyleDeclaration (introduced in DOM Level 2)
    • diff --git a/files/fr/web/api/cssstyledeclaration/index.html b/files/fr/web/api/cssstyledeclaration/index.html index a770fe95fc..e9169825d9 100644 --- a/files/fr/web/api/cssstyledeclaration/index.html +++ b/files/fr/web/api/cssstyledeclaration/index.html @@ -12,17 +12,15 @@ translation_of: Web/API/CSSStyleDeclaration ---

      {{ APIRef("CSSOM") }}

      -

      Résumé

      -

      CSSStyleDeclaration représente une collection de paires propriété/valeur CSS. Elle est utilisée dans quelques API :

      -

      Attributs

      +

      Attributs

      {{domxref("CSSStyleDeclaration.cssText")}}
      @@ -47,10 +45,10 @@ translation_of: Web/API/CSSStyleDeclaration
      {{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.
      +
      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

      +

      Exemple

      var objStyle = document.styleSheets[0].cssRules[0].style;
       console.log(objStyle.cssText);
      @@ -62,17 +60,17 @@ for (var i = objStyle.length; i--;) {
       
       console.log(objStyle.cssText);
      -

      Notes

      +

      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écifications

      diff --git a/files/fr/web/api/cssstylerule/index.html b/files/fr/web/api/cssstylerule/index.html index 28bf895067..01f85ea178 100644 --- a/files/fr/web/api/cssstylerule/index.html +++ b/files/fr/web/api/cssstylerule/index.html @@ -5,11 +5,11 @@ 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).

      +

      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.

      +

      La syntaxe est décrite à l'aide du format WebIDL.

      interface CSSStyleRule : CSSRule {
           attribute DOMString selectorText;
      @@ -19,9 +19,9 @@ translation_of: Web/API/CSSStyleRule
       

      Properties

      -
      {{domxref("CSSStyleRule.selectorText")}}
      -
      Obtient la représentation textuelle du sélecteur pour cette règle, par exemple "H1, H2".
      -
      {{domxref("CSSStyleRule.style")}}
      +
      {{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.
      diff --git a/files/fr/web/api/customevent/detail/index.html b/files/fr/web/api/customevent/detail/index.html index 0890ad04bb..17b2453a60 100644 --- a/files/fr/web/api/customevent/detail/index.html +++ b/files/fr/web/api/customevent/detail/index.html @@ -41,7 +41,7 @@ let myDetail = event.detail;

      Spécifications

      -
      +
      diff --git a/files/fr/web/api/customevent/index.html b/files/fr/web/api/customevent/index.html index d49584c1fb..5fcc5dc9a1 100644 --- a/files/fr/web/api/customevent/index.html +++ b/files/fr/web/api/customevent/index.html @@ -15,18 +15,18 @@ translation_of: Web/API/CustomEvent

      {{AvailableInWorkers}}

      -

      Constructeur

      +

      Constructeur

      {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}
      Crée un CustomEvent.
      -

      Propriétés

      +

      Propriétés

      {{domxref("CustomEvent.detail")}} {{readonlyinline}}
      -
      Toute donnée transmise lors de l'initialisation de l'événement.
      +
      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")}}:

      @@ -37,7 +37,7 @@ translation_of: Web/API/CustomEvent
      {{domxref("CustomEvent.initCustomEvent()")}} {{deprecated_inline}}
      -
      Initialise un objet CustomEvent. Si l'événement a déjà été distribué, cette méthode ne fait rien.
      +
      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")}}:

      @@ -63,33 +63,29 @@ translation_of: Web/API/CustomEvent
      Spécification
      -

      Compatibilité des navigateurs

      - - +

      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.

      +

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

      +

      Voir aussi

      diff --git a/files/fr/web/api/customevent/initcustomevent/index.html b/files/fr/web/api/customevent/initcustomevent/index.html index 4a1896eb5f..29dfb281d8 100644 --- a/files/fr/web/api/customevent/initcustomevent/index.html +++ b/files/fr/web/api/customevent/initcustomevent/index.html @@ -13,10 +13,10 @@ translation_of: Web/API/CustomEvent/initCustomEvent

      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.

      -
      -

      N'utilisez plus cette méthode car elle est dépréciée.

      +
      +

      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.

      +

      À 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

      diff --git a/files/fr/web/api/datatransfer/cleardata/index.html b/files/fr/web/api/datatransfer/cleardata/index.html index 30ec655f1f..c594fa95e7 100644 --- a/files/fr/web/api/datatransfer/cleardata/index.html +++ b/files/fr/web/api/datatransfer/cleardata/index.html @@ -13,7 +13,9 @@ translation_of: Web/API/DataTransfer/clearData

      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.

      -

      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.

      +
      +

      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

      @@ -37,7 +39,7 @@ translation_of: Web/API/DataTransfer/clearData

      HTML

      -
      <span class="tweaked" id="source" draggable="true">
      +
      <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>
      @@ -47,7 +49,7 @@ translation_of: Web/API/DataTransfer/clearData
       
       

      CSS

      -
      span.tweaked {
      +
      span.tweaked {
         display: inline-block;
         margin: 1em 0;
         padding: 1em 2em;
      diff --git a/files/fr/web/api/datatransfer/files/index.html b/files/fr/web/api/datatransfer/files/index.html
      index 092a1a717e..122add4eae 100644
      --- a/files/fr/web/api/datatransfer/files/index.html
      +++ b/files/fr/web/api/datatransfer/files/index.html
      @@ -29,8 +29,8 @@ translation_of: Web/API/DataTransfer/files
       

      Voici deux exemples :

      Specifications

      diff --git a/files/fr/web/api/datatransfer/index.html b/files/fr/web/api/datatransfer/index.html index 025c439831..45608285ef 100644 --- a/files/fr/web/api/datatransfer/index.html +++ b/files/fr/web/api/datatransfer/index.html @@ -6,11 +6,11 @@ tags: - 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.

      +

      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.

      +

      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

      +

      Aperçu des proprietés

      @@ -19,132 +19,134 @@ translation_of: Web/API/DataTransfer - - + + - - + + - + - - + + - + - + - - + + - - + +
      Type
      dropEffectStringdropEffectString
      effectAllowedStringeffectAllowedString
      filesfiles {{ domxref("FileList") }}
      mozCursor {{ non-standard_inline() }}StringmozCursor {{ non-standard_inline() }}String
      mozItemCount {{ non-standard_inline() }}mozItemCount {{ non-standard_inline() }} unsigned long
      mozSourceNode {{ non-standard_inline() }}mozSourceNode {{ non-standard_inline() }} {{ domxref("Node") }}
      mozUserCancelledBooleanmozUserCancelledBoolean
      typesStringListtypesStringList
      -

      Aperçu des méthodes

      +

      Aperçu des méthodes

      - + - + - + - + - + - + - + - + - +
      void addElement(in Element image)void addElement(in Element image)
      void clearData([in String type])void clearData([in String type])
      String getData(in String type)String getData(in String type)
      void setData(in String type, in String data)void setData(in String type, in String data)
      void setDragImage(in nsIDOMElement image, in long x, in long y)void setDragImage(in nsIDOMElement image, in long x, in long y)
      void mozClearDataAt([in String type, in unsigned long index])void mozClearDataAt([in String type, in unsigned long index])
      nsIVariant mozGetDataAt(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)void mozSetDataAt(in String type, in nsIVariant data, in unsigned long index)
      StringList mozTypesAt([in unsigned long index])StringList mozTypesAt([in unsigned long index])
      -

      Propriétés

      +

      Propriétés

      -

      dropEffect

      +

      dropEffect

      -

      L'effet utilisé, qui doit toujours être l'une des valeurs possibles de effectAllowed.

      +

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

      +

      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é.
      • +
      • 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.

      +

      Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur.

      -

      effectAllowed

      +

      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.

      +

      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.
      • -
      • copyLinkUne 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.
      • -
      • allToutes les opérations sont autorisées.
      • -
      • none: l'élément ne peut être déposé.
      • -
      • uninitializedla valeur par défaut lorsque l'effet n'a pas été spécifié, ce qui équivaut à all.
      • +
      • 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.

      +

      Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur.

      -

      files

      +

      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.

      +

      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/

      +

      Cet exemple retourne la liste des fichiers traînée dans la fenêtre du navigateur:  http://jsfiddle.net/9C2EF/

      -

      types

      +

      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.

      +

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

      Note : Cette méthode n'est actuellement implémentée que sur Windows.

      +

      Valeurs possibles

      @@ -155,81 +157,89 @@ translation_of: Web/API/DataTransfer
      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é.
      +
      +

      Note : Si vous spécifiez une valeur autre que "default", "auto" est supposé.

      +
      -

      mozItemCount

      +

      mozItemCount

      -

      Le nombre d'éléments glissés.

      +

      Le nombre d'éléments glissés.

      -
      Note: Cette propriété est  spécifique a Gecko.
      +
      +

      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.

      +

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

      Note : Cette propriété est  spécifique a Gecko.

      +
      -

      mozUserCancelled

      +

      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.

      +

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

      Note : Cette propriété est  spécifique a Gecko.

      +
      -

      Methods

      +

      Methods

      -

      addElement()

      +

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

      +

      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
      +

      Parametres

      element
      L'élément à ajouter.
      -

      clearData()

      +

      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.

      +

      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
      +

      Parametres

      type
      The type of data to remove.
      -

      getData()

      +

      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.

      +

      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.

      +

      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
      +

      Parametres

      type
      Le type de donnée à récupérer.
      -

      setData()

      +

      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.

      +

      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,
      @@ -237,7 +247,7 @@ translation_of: Web/API/DataTransfer
        );
       
      -
      Parametres
      +

      Parametres

      type
      @@ -246,13 +256,13 @@ translation_of: Web/API/DataTransfer
      La donnée à ajouter.
      -

      setDragImage()

      +

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

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

      + 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,
      @@ -261,7 +271,7 @@ translation_of: Web/API/DataTransfer
        );
       
      -
      Parametres
      +

      Parametres

      image
      @@ -272,16 +282,18 @@ translation_of: Web/API/DataTransfer
      Décalage vertical à l'intérieur de l'image.
      -

      mozClearDataAt()

      +

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

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

      Note : Cette méthode est spécifique à Gecko.

      +
       void mozClearDataAt(
          [optional] in String type,
      @@ -289,7 +301,7 @@ translation_of: Web/API/DataTransfer
        );
       
      -
      Parametres
      +

      Parametres

      type
      @@ -298,11 +310,13 @@ translation_of: Web/API/DataTransfer
      L'index de la donnée à supprimer.
      -

      mozGetDataAt()

      +

      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.

      +

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

      Note : Cette méthode est spécifique à Gecko.

      +
       nsIVariant mozGetDataAt(
          [optional] in String type,
      @@ -310,7 +324,7 @@ translation_of: Web/API/DataTransfer
        );
       
      -
      Parametres
      +

      Parametres

      type
      @@ -319,15 +333,17 @@ translation_of: Web/API/DataTransfer
      L'indice de la donnée à récupérer.
      -

      mozSetDataAt()

      +

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

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

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

      Note : Cette méthode est spécifique à Gecko.

      +
       void mozSetDataAt(
          [optional] in String type,
      @@ -336,7 +352,7 @@ translation_of: Web/API/DataTransfer
        );
       
      -
      Parametres
      +

      Parametres

      type
      @@ -347,24 +363,26 @@ translation_of: Web/API/DataTransfer
      L'index de la donnée à ajouter.
      -

      mozTypesAt()

      +

      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.

      +

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

      Note : Cette méthode est spécifique à Gecko.

      +
       nsIVariant mozTypesAt(
          in unsigned long index
        );
       
      -
      Parameters
      +

      Parameters

      index
      L'index de la donnée pour laquelle récupérer les types.
      -

      Voir Aussi

      +

      Voir Aussi

      -

      Drag and Drop

      +

      Drag and Drop

      diff --git a/files/fr/web/api/dedicatedworkerglobalscope/close/index.html b/files/fr/web/api/dedicatedworkerglobalscope/close/index.html index c698546a65..919907cd8f 100644 --- a/files/fr/web/api/dedicatedworkerglobalscope/close/index.html +++ b/files/fr/web/api/dedicatedworkerglobalscope/close/index.html @@ -26,7 +26,7 @@ translation_of: Web/API/DedicatedWorkerGlobalScope/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")}}.

      +

      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

      diff --git a/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.html b/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.html index bc385e15c3..64ab8dff1d 100644 --- a/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.html +++ b/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.html @@ -13,26 +13,26 @@ 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é.

      +

      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

      +

      Syntaxe

      var acceleration = instanceOfDeviceMotionEvent.accelerationIncludingGravity;
       
      -

      Valeur

      +

      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.
      +
      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
      +
      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
      +
      Représente l'accélération sur l'axe z qui est l'axe haut-bas

      Spécifications

      @@ -66,6 +66,6 @@ translation_of: Web/API/DeviceMotionEvent/accelerationIncludingGravity
    • {{ domxref("window.ondevicemotion") }}
    • {{ event("deviceorientation") }}
    • {{ domxref("DeviceOrientationEvent") }}
    • -
    • Détecter l'orientation de l'appareil
    • -
    • Les données d'orientation et de mouvement expliquées
    • +
    • Détecter l'orientation de l'appareil
    • +
    • Les données d'orientation et de mouvement expliquées
    diff --git a/files/fr/web/api/devicemotionevent/devicemotionevent/index.html b/files/fr/web/api/devicemotionevent/devicemotionevent/index.html index 51f9674109..c8fa453f7e 100644 --- a/files/fr/web/api/devicemotionevent/devicemotionevent/index.html +++ b/files/fr/web/api/devicemotionevent/devicemotionevent/index.html @@ -20,15 +20,14 @@ translation_of: Web/API/DeviceMotionEvent/DeviceMotionEvent

    Paramètres

    -

    type

    -
    +
    type
    Doit être "devicemotion".
    options {{optional_inline}}
    -
    Les options sont les suivantes : +

    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.
    • +
    • 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.
    diff --git a/files/fr/web/api/devicemotionevent/index.html b/files/fr/web/api/devicemotionevent/index.html index 67d449fc90..259f1c68b0 100644 --- a/files/fr/web/api/devicemotionevent/index.html +++ b/files/fr/web/api/devicemotionevent/index.html @@ -19,32 +19,32 @@ translation_of: Web/API/DeviceMotionEvent

    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.

    +

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

    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.
    +
    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.
    +
    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.
    +
    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) {
    +
    window.addEventListener('devicemotion', function(event) {
       console.log(event.acceleration.x + ' m/s2');
     });
    diff --git a/files/fr/web/api/devicemotionevent/rotationrate/index.html b/files/fr/web/api/devicemotionevent/rotationrate/index.html index 929f04f6fa..d12e2c76d7 100644 --- a/files/fr/web/api/devicemotionevent/rotationrate/index.html +++ b/files/fr/web/api/devicemotionevent/rotationrate/index.html @@ -14,7 +14,9 @@ translation_of: Web/API/DeviceMotionEvent/rotationRate

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

    Note : Si le matériel n'est pas capable de fournir cette information, la propriété renvoie null.

    +

    Syntaxe

    @@ -65,6 +67,6 @@ translation_of: Web/API/DeviceMotionEvent/rotationRate
  • {{ domxref("window.ondevicemotion") }}
  • {{ event("deviceorientation") }}
  • {{ domxref("DeviceOrientationEvent") }}
  • -
  • Détecter l'orientation de l'appareil
  • -
  • Les données d'orientation et de mouvement expliquées
  • +
  • Détecter l'orientation de l'appareil
  • +
  • Les données d'orientation et de mouvement expliquées
  • diff --git a/files/fr/web/api/devicemotioneventrotationrate/alpha/index.html b/files/fr/web/api/devicemotioneventrotationrate/alpha/index.html index 1cfc5d6a75..219e4cc1e9 100644 --- a/files/fr/web/api/devicemotioneventrotationrate/alpha/index.html +++ b/files/fr/web/api/devicemotioneventrotationrate/alpha/index.html @@ -25,11 +25,11 @@ original_slug: Web/API/DeviceRotationRate/alpha

    Cette propriété est en lecture seule.

    -

    Valeur retournée

    +

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

    diff --git a/files/fr/web/api/devicemotioneventrotationrate/beta/index.html b/files/fr/web/api/devicemotioneventrotationrate/beta/index.html index 5b9460a141..a5868c5ca1 100644 --- a/files/fr/web/api/devicemotioneventrotationrate/beta/index.html +++ b/files/fr/web/api/devicemotioneventrotationrate/beta/index.html @@ -29,7 +29,7 @@ original_slug: Web/API/DeviceRotationRate/beta
    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.
    +
    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

    diff --git a/files/fr/web/api/devicemotioneventrotationrate/gamma/index.html b/files/fr/web/api/devicemotioneventrotationrate/gamma/index.html index 4ebd62ee90..09b40183ba 100644 --- a/files/fr/web/api/devicemotioneventrotationrate/gamma/index.html +++ b/files/fr/web/api/devicemotioneventrotationrate/gamma/index.html @@ -25,11 +25,11 @@ original_slug: Web/API/DeviceRotationRate/gamma

    Cette propriété est en lecture seule.

    -

    Valeur retournée

    +

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

    diff --git a/files/fr/web/api/deviceorientationevent/absolute/index.html b/files/fr/web/api/deviceorientationevent/absolute/index.html index a60703c262..9feaac1fdd 100644 --- a/files/fr/web/api/deviceorientationevent/absolute/index.html +++ b/files/fr/web/api/deviceorientationevent/absolute/index.html @@ -6,11 +6,9 @@ original_slug: Web/API/DeviceOrientationEvent.absolute ---

    {{ ApiRef() }}

    -

    Sommaire

    +

    Indique si l'appareil partage des données en référentiel absolut c'est à dire sur avec des cordonnées issu du référentiel terrestre, ou si il partage des données utilisant un référentiel arbitraire déterminé par l'appareil. Voir Orientation et mouvement expliqué pour plus de détails.

    -

    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

    +

    Syntaxe

    var absolute = instanceOfDeviceOrientationEvent.absolute;
     
    @@ -49,8 +47,8 @@ original_slug: Web/API/DeviceOrientationEvent.absolute diff --git a/files/fr/web/api/deviceorientationevent/index.html b/files/fr/web/api/deviceorientationevent/index.html index c5fd5b44e7..fed84dfd6d 100644 --- a/files/fr/web/api/deviceorientationevent/index.html +++ b/files/fr/web/api/deviceorientationevent/index.html @@ -72,6 +72,6 @@ translation_of: Web/API/DeviceOrientationEvent
  • {{ event("deviceorientation") }}
  • {{ domxref("DeviceMotionEvent") }}
  • {{ event("devicemotion") }}
  • -
  • Detecting device orientation
  • -
  • Orientation and motion data explained
  • +
  • Detecting device orientation
  • +
  • Orientation and motion data explained
  • diff --git a/files/fr/web/api/document/activeelement/index.html b/files/fr/web/api/document/activeelement/index.html index fe982e77d7..2b09fac218 100644 --- a/files/fr/web/api/document/activeelement/index.html +++ b/files/fr/web/api/document/activeelement/index.html @@ -8,19 +8,14 @@ translation_of_original: Web/API/Document/activeElement original_slug: Web/API/DocumentOrShadowRoot/activeElement ---

    {{ ApiRef() }}

    -

    Résumé

    +

    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

    +

    Syntaxe

    var elemCourant = document.activeElement;
     
    -

    Exemple

    -

    Spécification

    +

    Exemple

    +

    Spécification

    -

     

    -

     

    -
    -  
    -

    {{ languages( { "en": "en/DOM/document.activeElement", "es": "es/DOM/element.activeElement", "ja": "ja/DOM/document.activeElement", "pl": "pl/DOM/document.activeElement" } ) }}

    +
  • Focus management (brouillon de travail HTML 5)
  • + \ 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 index 16b8760df2..3c5270aa80 100644 --- a/files/fr/web/api/document/adoptnode/index.html +++ b/files/fr/web/api/document/adoptnode/index.html @@ -14,23 +14,23 @@ translation_of: Web/API/Document/adoptNode
     
    -

    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.

    +

    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

    +

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

    +

    Exemple

    var iframe = document.getElementById('my-iframe');
     var iframeImages = iframe.contentDocument.getElementsByTagName('img');
    @@ -42,20 +42,20 @@ for (var i = 0; i < iframeImages.length; i++) {
     }
     
    -

    Notes

    +

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

    +

    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 +

    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.

    + WRONG_DOCUMENT_ERR est déclenchée (NS_ERROR_DOM_WRONG_DOCUMENT_ERR). implémentation dans le bug 47903.

    -

    Spécification

    +

    Spécification

    • DOM Level 3 Core: Document.adoptNode
    • diff --git a/files/fr/web/api/document/alinkcolor/index.html b/files/fr/web/api/document/alinkcolor/index.html index d80fd7c834..5f8b845548 100644 --- a/files/fr/web/api/document/alinkcolor/index.html +++ b/files/fr/web/api/document/alinkcolor/index.html @@ -25,9 +25,9 @@ translation_of: Web/API/Document/alinkColor

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

      +

      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.

      +

      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.

      diff --git a/files/fr/web/api/document/anchors/index.html b/files/fr/web/api/document/anchors/index.html index 0fc1039a41..ea16e0f96f 100644 --- a/files/fr/web/api/document/anchors/index.html +++ b/files/fr/web/api/document/anchors/index.html @@ -8,12 +8,12 @@ original_slug: Web/API/Document/Document.anchors

      anchors retourne une liste de toutes les ancres du document.

      -

      Syntaxe

      +

      Syntaxe

      nodeList = document.anchors;
       
      -

      Exemple

      +

      Exemple

      if ( document.anchors.length >= 5 ) {
         dump("Trop d'ancres trouvées !");
      @@ -70,11 +70,11 @@ function init() {
       
       

      Voir dans JSFiddle

      -

      Notes

      +

      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

      +

      Spécification

      • DOM Level 2 HTML: anchors
      • diff --git a/files/fr/web/api/document/applets/index.html b/files/fr/web/api/document/applets/index.html index dfbb22d9b7..ea763af9a4 100644 --- a/files/fr/web/api/document/applets/index.html +++ b/files/fr/web/api/document/applets/index.html @@ -4,14 +4,14 @@ slug: Web/API/Document/applets translation_of: Web/API/Document/applets ---

        {{ ApiRef() }}

        -

        Résumé

        +

        applets retourne une liste ordonnée des applets contenus dans un document.

        -

        Syntaxe

        +

        Syntaxe

        nodeList = document.applets
         
        -

        Exemple

        +

        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

        +

        Spécification

        +

        DOM Level 2 HTML: applets

        diff --git a/files/fr/web/api/document/body/index.html b/files/fr/web/api/document/body/index.html index 65b872d225..57a6cdfe79 100644 --- a/files/fr/web/api/document/body/index.html +++ b/files/fr/web/api/document/body/index.html @@ -8,12 +8,11 @@ translation_of: Web/API/Document/body ---
        {{ApiRef}}
        -

        Résumé

        Retourne l'élément <body> ou <frameset> du document courant.

        -

        Syntaxe

        +

        Syntaxe

        var objRef = document.body;
         document.body = objRef;
        -

        Exemple

        +

        Exemple

        // dans le HTML: <body id="ancienElementBody"></body>
         alert(document.body.id); // "ancienElementBody"
         
        @@ -23,10 +22,10 @@ unNouvelElementBody .id = "nouvelElementBody";
         document.body = unNouvelElementBody ;
         alert(document.body.id); // "nouvelElementBody"
         
        -

        Notes

        +

        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

        +

        Spécification

        diff --git a/files/fr/web/api/document/caretrangefrompoint/index.html b/files/fr/web/api/document/caretrangefrompoint/index.html index e0166becb3..ed72fe6bd7 100644 --- a/files/fr/web/api/document/caretrangefrompoint/index.html +++ b/files/fr/web/api/document/caretrangefrompoint/index.html @@ -33,10 +33,10 @@ translation_of: Web/API/Document/caretRangeFromPoint
        x
        Une position horizontale dans la fenêtre courante.
        y
        -
        Une position verticale dans la fenêtre courante.
        +
        Une position verticale dans la fenêtre courante.
    -

    Exemple

    +

    Exemple

    Démonstration de base : lorsque vous cliquez dans un paragraphe, insérez un saut de ligne à la position du curseur :

    diff --git a/files/fr/web/api/document/characterset/index.html b/files/fr/web/api/document/characterset/index.html index fb023e7871..d43772b7fb 100644 --- a/files/fr/web/api/document/characterset/index.html +++ b/files/fr/web/api/document/characterset/index.html @@ -12,7 +12,7 @@ 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.

    +

    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.

    diff --git a/files/fr/web/api/document/clear/index.html b/files/fr/web/api/document/clear/index.html index a8489b0248..24fab67361 100644 --- a/files/fr/web/api/document/clear/index.html +++ b/files/fr/web/api/document/clear/index.html @@ -27,7 +27,7 @@ translation_of: Web/API/Document/clear

    Spécifications

    Compatibilité des navigateurs

    diff --git a/files/fr/web/api/document/compatmode/index.html b/files/fr/web/api/document/compatmode/index.html index 0197c02c50..fd984565fe 100644 --- a/files/fr/web/api/document/compatmode/index.html +++ b/files/fr/web/api/document/compatmode/index.html @@ -10,9 +10,9 @@ 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.

    +

    Indique si le document est affiché en mode dégradé (Quirks mode) ou dans le respect des standards.

    -

    Syntaxe

    +

    Syntaxe

    mode = document.compatMode
     
    @@ -20,7 +20,7 @@ translation_of: Web/API/Document/compatMode

    Valeurs

      -
    • "BackCompat" si le document est affiché en mode "quirks" ;
    • +
    • "BackCompat" si le document est a ffiché en mode   "quirks" ; 
    @@ -29,25 +29,25 @@ translation_of: Web/API/Document/compatMode
      -
    • "CSS1Compat" si le document est affiché en mode "no-quirks" (aussi connu sous le nom de mode "standard") ou "limited-quirks" (mode "proche du standard").
    • +
    • "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.

    +

    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

    +

    Exemple

    if (document.compatMode == "BackCompat") {
       // en mode Quirks
     }
     
    -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/document/contenttype/index.html b/files/fr/web/api/document/contenttype/index.html index 3301c615c1..32d072bbae 100644 --- a/files/fr/web/api/document/contenttype/index.html +++ b/files/fr/web/api/document/contenttype/index.html @@ -14,17 +14,17 @@ translation_of: Web/API/Document/contentType

    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

    +

    Syntaxe

    contentType = document.contentType;
     

    contentType est une propriété en lecture seule.

    -

    Notes

    +

    Notes

    La  propriété n'est pas affectée par les balises META.

    -

    Spécifications

    +

    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 index fa0f93d1e0..bfec33bfa2 100644 --- a/files/fr/web/api/document/createattribute/index.html +++ b/files/fr/web/api/document/createattribute/index.html @@ -13,15 +13,15 @@ translation_of: Web/API/Document/createAttribute

    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.

    +

    Note : La chaîne de caractères donnée dans le paramètre est convertie en minuscules.

    -

    Syntaxe

    +

    Syntaxe

    attribut = document.createAttribute(nom)
     
    -

    Paramètres

    +

    Paramètres

    • nom est une chaîne de caractères contenant le nom de l'attribut.
    • @@ -48,7 +48,7 @@ console.log(node.getAttribute("my_attrib")); // "newVal"

    Spécifications

    - +
    diff --git a/files/fr/web/api/document/createcdatasection/index.html b/files/fr/web/api/document/createcdatasection/index.html index ea4fb083ea..f1a44c9a07 100644 --- a/files/fr/web/api/document/createcdatasection/index.html +++ b/files/fr/web/api/document/createcdatasection/index.html @@ -16,17 +16,17 @@ translation_of: Web/API/Document/createCDATASection

    createCDATASection() crée un nouveau noeud de section CDATA et le renvoie.

    -

    Syntaxe

    +

    Syntaxe

    CDATASectionNode = document.createCDATASection(data)
     
      -
    • CDATASectionNode est un noeud de Section CDATA.
    • +
    • 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

    +

    Exemple

    var docu = new DOMParser().parseFromString('<xml></xml>',  "application/xml")
     
    @@ -38,14 +38,14 @@ alert(new XMLSerializer().serializeToString(docu));
     // Affiche : <xml><![CDATA[Some <CDATA> data & then some]]></xml>
     
    -

    Notes

    +

    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

    +

    Spécification

    • createCDATASection
    • diff --git a/files/fr/web/api/document/createcomment/index.html b/files/fr/web/api/document/createcomment/index.html index 8aaa2be9f3..5e16be2ecb 100644 --- a/files/fr/web/api/document/createcomment/index.html +++ b/files/fr/web/api/document/createcomment/index.html @@ -12,19 +12,19 @@ translation_of: Web/API/Document/createComment

      createComment() crée et retourne un nouveau noeud de type commentaire.

      -

      Syntaxe

      +

      Syntaxe

      CommentNode = document.createComment(data)
       
      -

      Paramètres

      +

      Paramètres

      data
      Une chaîne de caractères représentant le contenu du commentaire.
      -

      Exemple

      +

      Exemple

      var docu = new DOMParser().parseFromString('<xml></xml>',  "application/xml");
       var comment = docu.createComment('Voici un commentaire pas très bien caché');
      @@ -37,5 +37,5 @@ alert(new XMLSerializer().serializeToString(docu));
       

      Spécification

      diff --git a/files/fr/web/api/document/createdocumentfragment/index.html b/files/fr/web/api/document/createdocumentfragment/index.html index 806a9db921..629d26ed27 100644 --- a/files/fr/web/api/document/createdocumentfragment/index.html +++ b/files/fr/web/api/document/createdocumentfragment/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Document/createDocumentFragment

      Crée un nouvel objet vide de type {{domxref("DocumentFragment")}}.

      -

      Syntaxe

      +

      Syntaxe

      var fragment = document.createDocumentFragment();
       
      @@ -27,29 +27,29 @@ translation_of: Web/API/Document/createDocumentFragment

      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

      +

      Exemple

      Cet exemple crée une liste des principaux navigateurs du web.

      HTML

      -
      <ul id="ul">
      -</ul>
      +
      <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'];
      +
      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);
      -});
      +browsers.forEach(function(browser) {
      +    var li = document.createElement('li');
      +    li.textContent = browser;
      +    fragment.appendChild(li);
      +});
       
      -element.appendChild(fragment);
      +element.appendChild(fragment);

      Résultat

      diff --git a/files/fr/web/api/document/createelement/index.html b/files/fr/web/api/document/createelement/index.html index e62a086f10..aaf9bf831b 100644 --- a/files/fr/web/api/document/createelement/index.html +++ b/files/fr/web/api/document/createelement/index.html @@ -12,7 +12,7 @@ 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.

      +

      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

      @@ -95,7 +95,7 @@ customElements.define('expanding-list', ExpandingList, { extends: 'ul' });

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

      +

      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

      diff --git a/files/fr/web/api/document/createelementns/index.html b/files/fr/web/api/document/createelementns/index.html index 74f17956dd..4949f5203e 100644 --- a/files/fr/web/api/document/createelementns/index.html +++ b/files/fr/web/api/document/createelementns/index.html @@ -15,31 +15,28 @@ translation_of: Web/API/Document/createElementNS

      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 .

      +

      Pour créer un élément sans spécifier d'URI d'espace de noms, utilisez la méthode createElement .

      -

      Syntaxe

      +

      Syntaxe

      -
      var element = document.createElementNS(namespaceURI, qualifiedName[, options]);
      +
      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
      +
      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.
      +
      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.
      -
      +

      Le nouvel element.

      -

      URI d'espaces de nom valides

      +

      URI d'espaces de nom valides

      • HTML - Utiliser http://www.w3.org/1999/xhtml
      • @@ -48,17 +45,17 @@ translation_of: Web/API/Document/createElementNS
      • XUL - Utiliser http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul
      -

      Exemple

      +

      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 :

      +

      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()">
      +
      <?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[
      +<script type="text/javascript"><![CDATA[
        var container;
        var newdiv;
        var txtnode;
      @@ -71,21 +68,21 @@ translation_of: Web/API/Document/createElementNS
          container.appendChild(newdiv);
        }
       
      -]]></script>
      +]]></script>
       
      - <vbox id='ContainerBox' flex='1'>
      -  <html:div>
      + <vbox id='ContainerBox' flex='1'>
      +  <html:div>
          Le script sur cette page ajoutera du contenu dynamique ci-dessous :
      -  </html:div>
      - </vbox>
      +  </html:div>
      + </vbox>
       
      -</page>
      +</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écifications

    Spécification
    @@ -111,6 +108,6 @@ translation_of: Web/API/Document/createElementNS diff --git a/files/fr/web/api/document/createentityreference/index.html b/files/fr/web/api/document/createentityreference/index.html index c8881dddcb..46269f94bc 100644 --- a/files/fr/web/api/document/createentityreference/index.html +++ b/files/fr/web/api/document/createentityreference/index.html @@ -7,8 +7,8 @@ translation_of: Web/API/Document/createEntityReference

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

    +

    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

    +

    Spécifications

    -

    createEntityReference

    +

    createEntityReference

    diff --git a/files/fr/web/api/document/createevent/index.html b/files/fr/web/api/document/createevent/index.html index b07312c314..3cccde91e3 100644 --- a/files/fr/web/api/document/createevent/index.html +++ b/files/fr/web/api/document/createevent/index.html @@ -9,26 +9,24 @@ tags: translation_of: Web/API/Document/createEvent ---
    -

    De nombreuses méthodes utilisées avec createEvent, tels que initCustomEvent, sont obsolètes. Utilisez le constructeur d'événement à la place.

    +

    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.

    -

    Crée un event du type spécifié. L'objet retourné doit être intialisé et peut être passé ensuite à element.dispatchEvent.

    - -

    Syntaxe

    +

    Syntaxe

    var event = document.createEvent(type);
     
      -
    • event est l'objet Event créé.
    • +
    • event est l'objet Event créé.
    • type est une chaîne de caractères qui représente le type d'événement à créer. Les types possibles d'événement incluent "UIEvents", "MouseEvents", "MutationEvents" et "HTMLEvents". Voir la section {{Anch("Notes")}} pour plus de détails.
    -

    Exemple

    +

    Exemple

    // Crée l'événement.
     var event = document.createEvent('Event');
    @@ -36,7 +34,7 @@ var event = document.createEvent('Event');
     // Nomme l'événement 'build'.
     event.initEvent('build', true, true);
     
    -//  Écoute l'événement.
    +//  Écoute l'événement.
     elem.addEventListener('build', function (e) {
       // e.target correspond à elem
     }, false);
    @@ -47,9 +45,9 @@ 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.

    +

    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 :

    +

    Gecko prend en charge certains alias d'objet événement non standard, répertoriés ci-dessous :

    @@ -79,12 +77,12 @@ elem.dispatchEvent(event);

    Spécification

    Voir aussi

    diff --git a/files/fr/web/api/document/createexpression/index.html b/files/fr/web/api/document/createexpression/index.html index 57bd734923..778ef4bdd4 100644 --- a/files/fr/web/api/document/createexpression/index.html +++ b/files/fr/web/api/document/createexpression/index.html @@ -10,14 +10,14 @@ 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).

    +

    Cette méthode compile une XPathExpression qui peut ensuite être utilisée pour des évaluations (répétées).

    -

    Syntaxe

    +

    Syntaxe

    xpathExpr = document.createExpression(xpathText, namespaceURLMapper);
     
    -

    Paramètres

    +

    Paramètres

    • String (chaîne de caractères) xpathText (l'expression XPath à compiler)
    • @@ -26,6 +26,6 @@ translation_of: Web/API/Document/createExpression

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

      +

      Valeur retournée

      -

      XPathExpression

      +

      XPathExpression

      diff --git a/files/fr/web/api/document/createnodeiterator/index.html b/files/fr/web/api/document/createnodeiterator/index.html index b43b427f36..7183969144 100644 --- a/files/fr/web/api/document/createnodeiterator/index.html +++ b/files/fr/web/api/document/createnodeiterator/index.html @@ -9,11 +9,11 @@ translation_of: Web/API/Document/createNodeIterator ---

      {{APIRef("DOM")}}

      -

      Renvoie un  nouvel objet NodeIterator.

      +

      Renvoie un  nouvel objet NodeIterator.

      -

      Syntaxe

      +

      Syntaxe

      -
      var nodeIterator = document.createNodeIterator(root, whatToShow, filter);
      +
      var nodeIterator = document.createNodeIterator(root, whatToShow, filter);
       

      Valeurs

      @@ -22,7 +22,7 @@ translation_of: Web/API/Document/createNodeIterator
      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. +
      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.
    @@ -102,9 +102,11 @@ translation_of: Web/API/Document/createNodeIterator
    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.
    +
    +

    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

    +

    Exemple

    var nodeIterator = document.createNodeIterator(
         document.body,
    @@ -122,16 +124,16 @@ while (currentNode = nodeIterator.nextNode()) {
     
     
    -

    Compatibilité des navigateurs

    +

    Compatibilité des navigateurs

    Pris en charge dans FF 3.5+, Chrome 1+, Opera 9+, Safari 3+, IE9+, Edge

    -

    Voir aussi

    +

    Voir aussi

    -

    Spécifications

    +

    Spécifications

    -

    DOM Level 2 Traversal : NodeIterator

    +

    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 index d9546328ae..1311c87a86 100644 --- a/files/fr/web/api/document/creatensresolver/index.html +++ b/files/fr/web/api/document/creatensresolver/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Document/createNSResolver

    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

    +

    Syntaxe

    nsResolver = document.createNSResolver(node);
     
    @@ -29,21 +29,21 @@ translation_of: Web/API/Document/createNSResolver
  • nsResolver est un objet XPathNSResolver.
  • -

    Notes

    +

    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.

    +

    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.

    +

    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

    +

    Voir aussi

    -

    Spécifications

    +

    Spécifications

    -

    DOM Level 3 XPath Specification : createNSResolver

    +

    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 index 91c7652457..0bdd5ee83f 100644 --- a/files/fr/web/api/document/createprocessinginstruction/index.html +++ b/files/fr/web/api/document/createprocessinginstruction/index.html @@ -12,16 +12,16 @@ tags: - instructions translation_of: Web/API/Document/createProcessingInstruction --- -

    {{APIRef("DOM")}}

    +
    {{APIRef("DOM")}}

    createProcessingInstruction() crée un nouveau noeud d'instruction de traitement et le renvoie.

    -

    Syntaxe

    +

    Syntaxe

    Processing instruction node = document.createProcessingInstruction(target, data)
     
    -

    Paramètres

    +

    Paramètres

    • Processing Instruction node est un noeud {{domxref("ProcessingInstruction")}}.
    • @@ -29,7 +29,7 @@ translation_of: Web/API/Document/createProcessingInstruction
    • data est une string (chaîne de caractères) contenant les données à ajouter aux données du noeud.
    -

    Exceptions

    +

    Exceptions

    NOT_SUPPORTED_ERR
    @@ -38,7 +38,7 @@ translation_of: Web/API/Document/createProcessingInstruction
    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

    +

    Exemple

    var docu = new DOMParser().parseFromString('<xml></xml>',  "application/xml")
     
    @@ -50,6 +50,6 @@ alert(new XMLSerializer().serializeToString(docu));
     // Affiche: <?xml-stylesheet href="mycss.css" type="text/css"?><xml/>
     
    -

    Spécifications

    +

    Spécifications

    -

    DOM 4: createProcessingInstruction

    +

    DOM 4: createProcessingInstruction

    diff --git a/files/fr/web/api/document/createrange/index.html b/files/fr/web/api/document/createrange/index.html index 5a187c5f3a..9ef3bffc27 100644 --- a/files/fr/web/api/document/createrange/index.html +++ b/files/fr/web/api/document/createrange/index.html @@ -12,14 +12,14 @@ translation_of: Web/API/Document/createRange

    Retourne un objet {{domxref("Range")}}.

    -

    Syntaxe

    +

    Syntaxe

    range = document.createRange();
     

    range devient un objet {{domxref("Range")}}.

    -

    Exemple

    +

    Exemple

    var range = document.createRange();
     
    @@ -27,12 +27,12 @@ range.setStart(startNode, startOffset);
     range.setEnd(endNode, endOffset);
     
    -

    Notes

    +

    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

    +

    Spécification

    diff --git a/files/fr/web/api/document/createtextnode/index.html b/files/fr/web/api/document/createtextnode/index.html index 2455a75c30..7fc4bfe701 100644 --- a/files/fr/web/api/document/createtextnode/index.html +++ b/files/fr/web/api/document/createtextnode/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Document/createTextNode

    Crée un nouveau nœud de texte.

    -

    Syntaxe

    +

    Syntaxe

    var text = document.createTextNode(données);
     
    @@ -22,34 +22,34 @@ translation_of: Web/API/Document/createTextNode
  • donnees est une chaîne contenant les données à placer dans le nœud de texte.
  • -

    Exemple

    +

    Exemple

    -
    <!DOCTYPE html>
    -<html lang="en">
    -<head>
    -<title>createTextNode example</title>
    -<script>
    -function addTextNode(text) {
    -  var newtext = document.createTextNode(text),
    -      p1 = document.getElementById("p1");
    +
    <!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>
    +  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>
    +<body>
    +  <button onclick="addTextNode('YES! ');">YES!</button>
    +  <button onclick="addTextNode('NO! ');">NO!</button>
    +  <button onclick="addTextNode('WE CAN! ');">WE CAN!</button>
     
    -  <hr />
    +  <hr />
     
    -  <p id="p1">First line of paragraph.</p>
    -</body>
    -</html>
    + <p id="p1">First line of paragraph.</p> +</body> +</html>
    -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/document/defaultview/index.html b/files/fr/web/api/document/defaultview/index.html index e956485e62..fce4d88134 100644 --- a/files/fr/web/api/document/defaultview/index.html +++ b/files/fr/web/api/document/defaultview/index.html @@ -3,16 +3,15 @@ title: document.defaultView slug: Web/API/Document/defaultView translation_of: Web/API/Document/defaultView --- -

    Résumé

    -

    Dans les navigateurs, cette propriété renvoie l'objet window associé au document ou null si non disponible.

    -

    Syntaxe

    +

    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

    +

    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 index e91fdfdf7a..0a4edb5920 100644 --- a/files/fr/web/api/document/designmode/index.html +++ b/files/fr/web/api/document/designmode/index.html @@ -5,11 +5,7 @@ translation_of: Web/API/Document/designMode ---
    {{ ApiRef() }}
    -
     
    - -

    Résumé

    - -

    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.

    +

    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

    @@ -17,7 +13,7 @@ translation_of: Web/API/Document/designMode document.designMode = "on"; document.designMode = "off"; -

    Exemple

    +

    Exemple

    Rendre un document {{HTMLElement("iframe")}} éditable

    diff --git a/files/fr/web/api/document/dir/index.html b/files/fr/web/api/document/dir/index.html index e1a40ecb59..03e94f3230 100644 --- a/files/fr/web/api/document/dir/index.html +++ b/files/fr/web/api/document/dir/index.html @@ -10,7 +10,7 @@ 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.

    +

    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

    @@ -18,7 +18,7 @@ translation_of: Web/API/Document/dir document.dir = dirStr; -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/document/document/index.html b/files/fr/web/api/document/document/index.html index b3da3b5f6b..7b0e3c2501 100644 --- a/files/fr/web/api/document/document/index.html +++ b/files/fr/web/api/document/document/index.html @@ -21,7 +21,7 @@ translation_of: Web/API/Document/Document

    None.

    -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/document/documentelement/index.html b/files/fr/web/api/document/documentelement/index.html index e345027b13..84e62d8bea 100644 --- a/files/fr/web/api/document/documentelement/index.html +++ b/files/fr/web/api/document/documentelement/index.html @@ -12,14 +12,14 @@ 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).

    +

    Document.documentElementrenvoie l'Element qui est l'élément racine du document (par exemple, l'élément <html> pour les documents HTML).

    -

    Syntaxe

    +

    Syntaxe

    var element = document.documentElement;
     
    -

    Exemple

    +

    Exemple

    var racine = document.documentElement;
     var premierNiveau = racine.childNodes;
    @@ -30,13 +30,13 @@ for (var i = 0; i < premierNiveau.length; i++) {
     }
     
    -

    Notes

    +

    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.

    +

    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écifications

    -
    +
    diff --git a/files/fr/web/api/document/documenturiobject/index.html b/files/fr/web/api/document/documenturiobject/index.html index 3c9f6fcb6f..cc5030a977 100644 --- a/files/fr/web/api/document/documenturiobject/index.html +++ b/files/fr/web/api/document/documenturiobject/index.html @@ -10,17 +10,17 @@ 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.

    +

    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.

    +

    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

    +

    Syntaxe

    -
    var uri = doc.documentURIObject;
    +
    var uri = doc.documentURIObject;
    -

    Exemple

    +

    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
    @@ -33,6 +33,6 @@ if (uriObj.schemeIs('http')) {
     }
     
    -

    Spécifications

    +

    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 index 94d4f1775b..94575c1b4b 100644 --- a/files/fr/web/api/document/domain/index.html +++ b/files/fr/web/api/document/domain/index.html @@ -14,48 +14,46 @@ translation_of: Web/API/Document/domain ---
    {{ApiRef}}
    -

    Résumé

    +

    Retourne/définit la partie domaine de l'origine du document courant, telle qu'utilisée par la politique d'origine identique.

    -

    Retourne/définit la partie domaine de l'origine du document courant, telle qu'utilisée par la politique d'origine identique.

    - -

    Syntaxe

    +

    Syntaxe

    var chaineDomaine = document.domain; document.domain = chaine;
     
    -

    Exemple

    +

    Exemple

    -
    // Pour le document www.example.xxx/good.html,
    +
    // 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 http://developer.mozilla.org/en-US/docs/Web, ce qui
    +
    // 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

    +

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

    +

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

    +

    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

    +

    Spécification

    -

    Voir aussi

    +

    Voir aussi

    diff --git a/files/fr/web/api/document/domcontentloaded_event/index.html b/files/fr/web/api/document/domcontentloaded_event/index.html index 29c8b67905..516c713b20 100644 --- a/files/fr/web/api/document/domcontentloaded_event/index.html +++ b/files/fr/web/api/document/domcontentloaded_event/index.html @@ -82,10 +82,7 @@ if (document.readyState === 'loading') { // Loading hasn't finished yet <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div>
    -

    JS

    diff --git a/files/fr/web/api/document/drag_event/index.html b/files/fr/web/api/document/drag_event/index.html index 958df729b3..e244f365a0 100644 --- a/files/fr/web/api/document/drag_event/index.html +++ b/files/fr/web/api/document/drag_event/index.html @@ -35,28 +35,28 @@ translation_of: Web/API/Document/drag_event
    - + - + - + - + - - + + @@ -207,7 +207,7 @@ translation_of: Web/API/Document/drag_event }, false); document.addEventListener("drop", function( event ) { - // Empêche l'action par défaut (ouvrir comme lien pour certains éléments) + // 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" ) { diff --git a/files/fr/web/api/document/dragend_event/index.html b/files/fr/web/api/document/dragend_event/index.html index ac2681db24..ce28cf1673 100644 --- a/files/fr/web/api/document/dragend_event/index.html +++ b/files/fr/web/api/document/dragend_event/index.html @@ -5,19 +5,19 @@ 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éralesEdit

    +

    Informations générales

    -
    Interface
    -
    {{domxref("DragEvent")}}
    -
    Propagation
    -
    Oui
    -
    Annulable
    -
    Non
    -
    Cible
    -
    {{domxref("Document")}}, {{domxref("Element")}}
    -
    Action par défaut
    -
    Varie
    +
    Interface
    +
    {{domxref("DragEvent")}}
    +
    Propagation
    +
    Oui
    +
    Annulable
    +
    Non
    +
    Cible
    +
    {{domxref("Document")}}, {{domxref("Element")}}
    +
    Action par défaut
    +
    Varie

    Propriétés

    @@ -33,28 +33,28 @@ translation_of: Web/API/Document/dragend_event - + - + - + - + - - + + @@ -163,33 +163,33 @@ translation_of: Web/API/Document/dragend_event </style> <script> - var dragged; + var dragged; - /* Les événements sont déclenchés sur les objets glissables */ + /* 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 + // Stocke une référence sur l'objet glissable dragged = event.target; - // transparence 50% + // transparence 50% event.target.style.opacity = .5; }, false); document.addEventListener("dragend", function( event ) { - // reset de la transparence + // reset de la transparence event.target.style.opacity = ""; }, false); - /* Les événements sont déclenchés sur les cibles du drop */ + /* Les événements sont déclenchés sur les cibles du drop */ document.addEventListener("dragover", function( event ) { - // Empêche default d'autoriser le drop + // 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 + // 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"; } @@ -197,7 +197,7 @@ translation_of: Web/API/Document/dragend_event }, false); document.addEventListener("dragleave", function( event ) { - // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent + // 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 = ""; } @@ -205,16 +205,16 @@ translation_of: Web/API/Document/dragend_event }, false); document.addEventListener("drop", function( event ) { - // Empêche l'action par défaut (ouvrir comme lien pour certains éléments) + // 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 + // 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); + }, false); </script> diff --git a/files/fr/web/api/document/dragenter_event/index.html b/files/fr/web/api/document/dragenter_event/index.html index 2bdc66e42e..7f95865724 100644 --- a/files/fr/web/api/document/dragenter_event/index.html +++ b/files/fr/web/api/document/dragenter_event/index.html @@ -7,19 +7,19 @@ translation_of: Web/API/Document/dragenter_event

    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éralesEdit

    +

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

    @@ -35,28 +35,28 @@ translation_of: Web/API/Document/dragenter_event - + - + - + - + - - + + @@ -165,33 +165,33 @@ translation_of: Web/API/Document/dragenter_event </style> <script> - var dragged; + var dragged; - /* Les événements sont déclenchés sur les objets glissables */ + /* 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 + // Stocke une référence sur l'objet glissable dragged = event.target; - // transparence 50% + // transparence 50% event.target.style.opacity = .5; }, false); document.addEventListener("dragend", function( event ) { - // reset de la transparence + // reset de la transparence event.target.style.opacity = ""; }, false); - /* Les événements sont déclenchés sur les cibles du drop */ + /* Les événements sont déclenchés sur les cibles du drop */ document.addEventListener("dragover", function( event ) { - // Empêche default d'autoriser le drop + // 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 + // 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"; } @@ -199,7 +199,7 @@ translation_of: Web/API/Document/dragenter_event }, false); document.addEventListener("dragleave", function( event ) { - // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent + // 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 = ""; } @@ -207,16 +207,16 @@ translation_of: Web/API/Document/dragenter_event }, false); document.addEventListener("drop", function( event ) { - // Empêche l'action par défaut (ouvrir comme lien pour certains éléments) + // 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 + // 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); + }, false); </script> diff --git a/files/fr/web/api/document/dragleave_event/index.html b/files/fr/web/api/document/dragleave_event/index.html index dfccbbc044..9221441d5f 100644 --- a/files/fr/web/api/document/dragleave_event/index.html +++ b/files/fr/web/api/document/dragleave_event/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Document/dragleave_event
    Interface
    -
    DragEvent
    +
    DragEvent
    Propagation
    Oui
    Annulable
    @@ -33,28 +33,28 @@ translation_of: Web/API/Document/dragleave_event
    - + - + - + - + - - + + @@ -163,33 +163,33 @@ translation_of: Web/API/Document/dragleave_event </style> <script> - var dragged; + var dragged; - /* Les événements sont déclenchés sur les objets glissables */ + /* 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 + // Stocke une référence sur l'objet glissable dragged = event.target; - // transparence 50% + // transparence 50% event.target.style.opacity = .5; }, false); document.addEventListener("dragend", function( event ) { - // reset de la transparence + // reset de la transparence event.target.style.opacity = ""; }, false); - /* Les événements sont déclenchés sur les cibles du drop */ + /* Les événements sont déclenchés sur les cibles du drop */ document.addEventListener("dragover", function( event ) { - // Empêche default d'autoriser le drop + // 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 + // 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"; } @@ -197,7 +197,7 @@ translation_of: Web/API/Document/dragleave_event }, false); document.addEventListener("dragleave", function( event ) { - // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent + // 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 = ""; } @@ -205,16 +205,16 @@ translation_of: Web/API/Document/dragleave_event }, false); document.addEventListener("drop", function( event ) { - // Empêche l'action par défaut (ouvrir comme lien pour certains éléments) + // 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 + // 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); + }, false); </script> diff --git a/files/fr/web/api/document/dragover_event/index.html b/files/fr/web/api/document/dragover_event/index.html index 86df0e5440..aca2e8a435 100644 --- a/files/fr/web/api/document/dragover_event/index.html +++ b/files/fr/web/api/document/dragover_event/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Document/dragover_event
    Interface
    -
    DragEvent
    +
    DragEvent
    Propagation
    Oui
    Annulable
    @@ -35,28 +35,28 @@ translation_of: Web/API/Document/dragover_event
    - + - + - + - + - - + + @@ -138,86 +138,86 @@ translation_of: Web/API/Document/dragover_event

    Exemple

    -
    <div class="dropzone">
    -  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
    +
    <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>
    +  </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;
    -  }
    +<style>
    +  #draggable {
    +    width: 200px;
    +    height: 20px;
    +    text-align: center;
    +    background: white;
    +  }
     
    -  .dropzone {
    -    width: 200px;
    -    height: 20px;
    -    background: blueviolet;
    -    margin-bottom: 10px;
    -    padding: 10px;
    -  }
    -</style>
    +  .dropzone {
    +    width: 200px;
    +    height: 20px;
    +    background: blueviolet;
    +    margin-bottom: 10px;
    +    padding: 10px;
    +  }
    +</style>
     
    -<script>
    -  var dragged;
    +<script>
    +  var dragged;
     
    -  /* Les événements sont déclenchés sur les objets glissables */
    -  document.addEventListener("drag", function( event ) {
    +  /* Les événements sont déclenchés sur les objets glissables */
    +  document.addEventListener("drag", function( event ) {
     
    -  }, false);
    +  }, 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("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);
    +  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);
    +  /* 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";
    -      }
    +  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);
    +  }, 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 = "";
    -      }
    +  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);
    +  }, 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 );
    -      }
    +  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>
    + }, false); +</script>

    Spécifications

    diff --git a/files/fr/web/api/document/dragstart_event/index.html b/files/fr/web/api/document/dragstart_event/index.html index 4eed44888d..f45827df5c 100644 --- a/files/fr/web/api/document/dragstart_event/index.html +++ b/files/fr/web/api/document/dragstart_event/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Document/dragstart_event
    Interface
    -
    DragEvent
    +
    DragEvent
    Propagation
    Oui
    Annulable
    @@ -33,28 +33,28 @@ translation_of: Web/API/Document/dragstart_event
    - + - + - + - + - - + + diff --git a/files/fr/web/api/document/drop_event/index.html b/files/fr/web/api/document/drop_event/index.html index 68d66c8116..bb3c695f26 100644 --- a/files/fr/web/api/document/drop_event/index.html +++ b/files/fr/web/api/document/drop_event/index.html @@ -11,13 +11,13 @@ translation_of: Web/API/Document/drop_event
    Interface
    -
    DragEvent
    +
    DragEvent
    Propagation
    Oui
    Annulable
    Oui
    Cible
    -
    Document, Element
    +
    Document, Element
    Action par défaut
    Varie
    @@ -35,28 +35,28 @@ translation_of: Web/API/Document/drop_event - + - + - + - + - - + + @@ -138,88 +138,86 @@ translation_of: Web/API/Document/drop_event

    Exemple

    -
    <div class="dropzone">
    -  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
    +
    <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>
    +  </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;
    -  }
    +<style>
    +  #draggable {
    +    width: 200px;
    +    height: 20px;
    +    text-align: center;
    +    background: white;
    +  }
     
    -  .dropzone {
    -    width: 200px;
    -    height: 20px;
    -    background: blueviolet;
    -    margin-bottom: 10px;
    -    padding: 10px;
    -  }
    -</style>
    +  .dropzone {
    +    width: 200px;
    +    height: 20px;
    +    background: blueviolet;
    +    margin-bottom: 10px;
    +    padding: 10px;
    +  }
    +</style>
     
    -<script>
    -  var dragged;
    +<script>
    +  var dragged;
     
    -  /* Les événements sont déclenchés sur les objets glissables */
    -  document.addEventListener("drag", function( event ) {
    +  /* Les événements sont déclenchés sur les objets glissables */
    +  document.addEventListener("drag", function( event ) {
     
    -  }, false);
    +  }, 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("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);
    +  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);
    +  /* 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";
    -      }
    +  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);
    +  }, 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 = "";
    -      }
    +  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);
    +  }, 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 );
    -      }
    +  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>
    - -

     

    + }, false); +</script>

    Spécifications

    diff --git a/files/fr/web/api/document/elementfrompoint/index.html b/files/fr/web/api/document/elementfrompoint/index.html index 8da838500d..6a4a1f9dfd 100644 --- a/files/fr/web/api/document/elementfrompoint/index.html +++ b/files/fr/web/api/document/elementfrompoint/index.html @@ -8,9 +8,9 @@ translation_of_original: Web/API/Document/elementFromPoint original_slug: Web/API/DocumentOrShadowRoot/elementFromPoint ---

    {{ ApiRef() }}

    -

    Résumé

    +

    Résumé

    Renvoie l'élément visible au point donné, spécifié relativement au point supérieur gauche visible dans le document.

    -

    Syntaxe

    +

    Syntaxe

    element = document.elementFromPoint(x,y);
     

    where

    @@ -18,7 +18,7 @@ original_slug: Web/API/DocumentOrShadowRoot/elementFromPoint
  • element est un objet element.
  • x et y spécifient les coordonnées à vérifier.
  • -

    Exemple

    +

    Exemple

    <html>
     <head>
     <title>Exemple d'utilisation d'elementFromPoint</title>
    @@ -40,15 +40,11 @@ function changeColor(newColor)
     </body>
     </html>
     
    -

    Notes

    +

    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

    +

    Spécification

    -

     

    -
    -  
    -

    {{ languages( { "en": "en/DOM/document.elementFromPoint", "es": "es/DOM/document.elementFromPoint", "ja": "ja/DOM/document.elementFromPoint" } ) }}

    +
  • Spécification préliminaire : elementFromPoint
  • + \ 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 index 106b80d8f1..259d9da6fc 100644 --- a/files/fr/web/api/document/elementsfrompoint/index.html +++ b/files/fr/web/api/document/elementsfrompoint/index.html @@ -16,7 +16,7 @@ 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).

    +

    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

    @@ -35,7 +35,7 @@ original_slug: Web/API/DocumentOrShadowRoot/elementsFromPoint

    Un tableau (array) d'objets {{domxref('element')}} représentants les éléments du DOM concernés.

    -

    Exemples

    +

    Exemples

    HTML

    @@ -48,7 +48,7 @@ original_slug: Web/API/DocumentOrShadowRoot/elementsFromPoint

    JavaScript

    -
    var output = document.getElementById("output");
    +
    var output = document.getElementById("output");
     if (document.elementsFromPoint) {
       var elements = document.elementsFromPoint(30, 20);
       for(var i = 0; i < elements.length; i++) {
    diff --git a/files/fr/web/api/document/enablestylesheetsforset/index.html b/files/fr/web/api/document/enablestylesheetsforset/index.html
    index d6fb8bc63f..f0aca39903 100644
    --- a/files/fr/web/api/document/enablestylesheetsforset/index.html
    +++ b/files/fr/web/api/document/enablestylesheetsforset/index.html
    @@ -14,7 +14,7 @@ translation_of: Web/API/Document/enableStyleSheetsForSet
     
     

    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

    +

    Syntaxe

    document.enableStyleSheetsForSet(name)
     
    @@ -35,15 +35,15 @@ translation_of: Web/API/Document/enableStyleSheetsForSet
  • Cette méthode n'affecte jamais les valeurs de {{ domxref("document.lastStyleSheetSet") }} ou {{ domxref("document.preferredStyleSheetSet") }}.
  • -

    Exemple

    +

    Exemple

    document.enableStyleSheetsForSet("Some style sheet set name");
     
    -

    Spécifications

    +

    Spécifications

    Voir aussi

    @@ -55,5 +55,5 @@ translation_of: Web/API/Document/enableStyleSheetsForSet
  • {{ domxref("document.preferredStyleSheetSet") }}
  • {{ domxref("document.selectedStyleSheetSet") }}
  • {{ domxref("document.enableStyleSheetsForSet()") }}
  • -
  • Utiliser des titres corrects avec des feuilles de styles externes
  • +
  • Utiliser des titres corrects avec des feuilles de styles externes
  • diff --git a/files/fr/web/api/document/evaluate/index.html b/files/fr/web/api/document/evaluate/index.html index 3cdf394e5b..03cc732e3e 100644 --- a/files/fr/web/api/document/evaluate/index.html +++ b/files/fr/web/api/document/evaluate/index.html @@ -11,7 +11,7 @@ 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.

    +

    La méthode evaluate() renvoie un {{domxref("XPathResult")}} basé sur une expression XPath et d'autres paramètres donnés.

    Syntaxe

    @@ -25,7 +25,7 @@ translation_of: Web/API/Document/evaluate
    • xpathExpression est une chaîne de caractères représentant le XPath à évaluer.
    • -
    • contextNode spécifie le noeud de contexte pour la requête (voir XPath specification) . Il est courant de transmettre un document en tant que nœud de contexte.
    • +
    • contextNode spécifie le noeud de contexte pour la requête (voir XPath specification) . Il est courant de transmettre un document en tant que nœud de contexte.
    • namespaceResolver est une fonction qui recevra tous les préfixes d'espace de noms et devrait renvoyer une chaîne représentant l'URI de l'espace de noms associé à ce préfixe. Il sera utilisé pour résoudre les préfixes dans le XPath lui-même, afin qu'ils puissent être mis en correspondance avec le document. null est commun pour les documents HTML ou lorsque aucun préfixe d'espace de noms n'est utilisé.
    • resultType est un nombre entier qui correspond au type de résultat XPathResult à retourner. Utilisez des propriétés de constantes nommées, comme XPathResult.ANY_TYPE  du constructeur de XPathResult , lequel correspond à un nombre entier compris entre 0 et 9.
    • result est un XPathResult existant à utiliser pour les résultats.  null est le plus commun et va créer un nouveau XPathResult
    • @@ -33,7 +33,7 @@ translation_of: Web/API/Document/evaluate

      Exemples

      -
       var  headings  =  document .  evaluate  ( " / html / body //h2", document, null, XPathResult.ANY_TYPE, null);
      +
       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  (  )  ;
      @@ -42,17 +42,17 @@ translation_of: Web/API/Document/evaluate
         alertText  +  =  thisHeading . textContent  +   "\n"  ;
         thisHeading  =  headings .  iterateNext  (  )  ;
        }
      - alert  ( alertText )  ;   // Alerte le texte de tout élément h2 
      + 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); 
      +
      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.

      +

      Voir Introduction à l'utilisation de XPath avec JavaScript  pour plus d'informations.

      Notes

      @@ -155,7 +155,7 @@ translation_of: Web/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 index 77a39c36d2..c581db094d 100644 --- a/files/fr/web/api/document/execcommand/index.html +++ b/files/fr/web/api/document/execcommand/index.html @@ -11,13 +11,7 @@ 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 - .

      +

      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 @@ -36,7 +30,7 @@ translation_of: Web/API/Document/execCommand prise en charge ou si elle est désactivée.

      -

      Note : document.execCommand() ne renvoie +

      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 à @@ -62,169 +56,100 @@ translation_of: Web/API/Document/execCommand

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

      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")}}.
      +

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      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")}}.)
      +

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

      Centre la sélection ou le point d'insertion.

      justifyFull
      -
      Justifie la sélection ou le point d'insertion.
      +

      Justifie la sélection ou le point d'insertion.

      justifyLeft
      -
      Justifie à gauche la sélection ou le point d'insertion.
      +

      Justifie à gauche la sélection ou le point d'insertion.

      justifyRight
      -
      Justifie à droite la sélection ou le point d'insertion.
      +

      Justifie à droite la sélection ou le point d'insertion.

      outdent
      -
      Effectue un retrait d'indentation pour la ligne courante.
      +

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

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

      Rejoue l'action annulée par la précédente commande undo.

      removeFormat
      -
      Supprime toute mise en forme pour la sélection courante.
      +

      Supprime toute mise en forme pour la sélection courante.

      selectAll
      -
      Sélectionne l'ensemble du contenu de la région éditable.
      +

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

      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
      +

      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
      +

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

      Active ou désactive le soulignement pour la sélection ou au point d'insertion.

      undo
      -
      Annule la dernière commande exécutée.
      +

      Annule la dernière commande exécutée.

      unlink
      -
      Retire l'ancre de l'hyperlien sélectionné. -
      +

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

      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

      diff --git a/files/fr/web/api/document/exitfullscreen/index.html b/files/fr/web/api/document/exitfullscreen/index.html index e91d987e34..5bff1f4f8c 100644 --- a/files/fr/web/api/document/exitfullscreen/index.html +++ b/files/fr/web/api/document/exitfullscreen/index.html @@ -13,7 +13,9 @@ translation_of: Web/API/Document/exitFullscreen

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

      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

      @@ -55,7 +57,7 @@ document.onclick = function (event) {

      Voir aussi

        -
      • Utiliser le mode plein écran
      • +
      • Utiliser le mode plein écran
      • {{ domxref("Element.requestFullscreen()") }}
      • {{ domxref("Document.exitFullscreen()") }}
      • {{ domxref("Document.fullscreen") }}
      • diff --git a/files/fr/web/api/document/forms/index.html b/files/fr/web/api/document/forms/index.html index c892b63976..69a310feb2 100644 --- a/files/fr/web/api/document/forms/index.html +++ b/files/fr/web/api/document/forms/index.html @@ -17,17 +17,17 @@ translation_of: Web/API/Document/forms

        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

      +

      Syntaxe

      collection = document.forms;
      -

      Valeur

      +

      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

      +

      Exemples

      -

      Récupérer les informations d'un formulaire

      +

      Récupérer les informations d'un formulaire

      <!DOCTYPE html>
       <html lang="en">
      @@ -60,31 +60,31 @@ translation_of: Web/API/Document/forms
       var selectFormElement = document.forms[index].elements[index];
       
      -

      Accéder aux formulaires nommés

      +

      Accéder aux formulaires nommés

      -
      <!DOCTYPE html>
      -<html lang="en">
      -<head>
      -  <title>document.forms example</title>
      -</head>
      +
      <!DOCTYPE html>
      +<html lang="en">
      +<head>
      +  <title>document.forms example</title>
      +</head>
       
      -<body>
      +<body>
       
      -<form name="login">
      -  <input name="email" type="email">
      -  <input name="password" type="password">
      -  <button type="submit">Log in</button>
      -</form>
      +<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>
      +<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écifications

    Spécification
    target {{readonlyInline}}EventTargetEventTarget The element that was underneath the element being dragged.
    type {{readonlyInline}}DOMStringDOMString The type of event.
    bubbles {{readonlyInline}}BooleanBoolean Whether the event normally bubbles or not
    cancelable {{readonlyInline}}BooleanBoolean Whether the event is cancellable or not?
    view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)WindowProxydocument.defaultView (window of the document)
    detail {{readonlyInline}}
    target {{readonlyInline}}EventTargetEventTarget The element that was underneath the element being dragged.
    type {{readonlyInline}}DOMStringDOMString The type of event.
    bubbles {{readonlyInline}}BooleanBoolean Whether the event normally bubbles or not
    cancelable {{readonlyInline}}BooleanBoolean Whether the event is cancellable or not?
    view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)WindowProxydocument.defaultView (window of the document)
    detail {{readonlyInline}}
    target {{readonlyInline}}EventTargetEventTarget The element that was underneath the element being dragged.
    type {{readonlyInline}}DOMStringDOMString The type of event.
    bubbles {{readonlyInline}}BooleanBoolean Whether the event normally bubbles or not
    cancelable {{readonlyInline}}BooleanBoolean Whether the event is cancellable or not?
    view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)WindowProxydocument.defaultView (window of the document)
    detail {{readonlyInline}}
    target {{readonlyInline}}EventTargetEventTarget The element that was underneath the element being dragged.
    type {{readonlyInline}}DOMStringDOMString The type of event.
    bubbles {{readonlyInline}}BooleanBoolean Whether the event normally bubbles or not
    cancelable {{readonlyInline}}BooleanBoolean Whether the event is cancellable or not?
    view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)WindowProxydocument.defaultView (window of the document)
    detail {{readonlyInline}}
    target {{readonlyInline}}EventTargetEventTarget The element that was underneath the element being dragged.
    type {{readonlyInline}}DOMStringDOMString The type of event.
    bubbles {{readonlyInline}}BooleanBoolean Whether the event normally bubbles or not
    cancelable {{readonlyInline}}BooleanBoolean Whether the event is cancellable or not?
    view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)WindowProxydocument.defaultView (window of the document)
    detail {{readonlyInline}}
    target {{readonlyInline}}EventTargetEventTarget The element that was underneath the element being dragged.
    type {{readonlyInline}}DOMStringDOMString The type of event.
    bubbles {{readonlyInline}}BooleanBoolean Whether the event normally bubbles or not
    cancelable {{readonlyInline}}BooleanBoolean Whether the event is cancellable or not?
    view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)WindowProxydocument.defaultView (window of the document)
    detail {{readonlyInline}}
    target {{readonlyInline}}EventTargetEventTarget The element that was underneath the element being dragged.
    type {{readonlyInline}}DOMStringDOMString The type of event.
    bubbles {{readonlyInline}}BooleanBoolean Whether the event normally bubbles or not
    cancelable {{readonlyInline}}BooleanBoolean Whether the event is cancellable or not?
    view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)WindowProxydocument.defaultView (window of the document)
    detail {{readonlyInline}}
    @@ -108,9 +108,9 @@ var selectFormElement = document.forms[index].elements[index];
    -

    Voir aussi

    +

    Voir aussi

    diff --git a/files/fr/web/api/document/fullscreenchange_event/index.html b/files/fr/web/api/document/fullscreenchange_event/index.html index ca78a615cd..a2606c65b2 100644 --- a/files/fr/web/api/document/fullscreenchange_event/index.html +++ b/files/fr/web/api/document/fullscreenchange_event/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Document/fullscreenchange_event
    Spécification
    -
    Fullscreen
    +
    Fullscreen
    Interface
    {{domxref("Event")}}
    Propagation
    diff --git a/files/fr/web/api/document/fullscreenerror_event/index.html b/files/fr/web/api/document/fullscreenerror_event/index.html index 5f88b26992..dafb34cf85 100644 --- a/files/fr/web/api/document/fullscreenerror_event/index.html +++ b/files/fr/web/api/document/fullscreenerror_event/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Document/fullscreenerror_event
    Spécification
    -
    Fullscreen
    +
    Fullscreen
    Interface
    {{domxref("Event")}}
    Propagation
    diff --git a/files/fr/web/api/document/getboxobjectfor/index.html b/files/fr/web/api/document/getboxobjectfor/index.html index 97b613781e..5160c98e2a 100644 --- a/files/fr/web/api/document/getboxobjectfor/index.html +++ b/files/fr/web/api/document/getboxobjectfor/index.html @@ -13,9 +13,11 @@ translation_of: Web/API/Document/getBoxObjectFor

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

    Note : Cette méthode est obsolète. Vous devez utiliser la méthode {{domxref("element.getBoundingClientRect()")}} à la place.

    +
    -

    Syntaxe

    +

    Syntaxe

    boxObject = document.getBoxObjectFor(element);
     
    @@ -25,7 +27,7 @@ translation_of: Web/API/Document/getBoxObjectFor
  • element est un {{domxref("element","DOMElement")}}
  • -

    Exemple

    +

    Exemple

    var myDiv = document.getElementById("myDiv"),
         boxObj = document.getBoxObjectFor (myDiv);
    @@ -37,6 +39,6 @@ alert (
       ", Height:" + boxObj.height
     );
    -

    Notes

    +

    Notes

    -

    Spécifié dans nsIXULDocument.idl

    +

    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 index 74f004989b..eacf9ef0a2 100644 --- a/files/fr/web/api/document/getelementbyid/index.html +++ b/files/fr/web/api/document/getelementbyid/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/Document/getElementById

    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

    +

    Syntaxe

    var element = document.getElementById(id);
     
    @@ -25,41 +25,40 @@ translation_of: Web/API/Document/getElementById
    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

    -
    +

    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

    +

    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>
    +
    <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;
    -}
    +
    function changeColor(newColor) {
    +  var elem = document.getElementById('para');
    +  elem.style.color = newColor;
    +}
    -

    Résultat

    +

    Résultat

    {{ EmbedLiveSample('Example1', 250, 100) }}

    -

    Notes d'utilisation

    +

    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.

    @@ -67,39 +66,39 @@ translation_of: Web/API/Document/getElementById

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

    +

    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écification

    @@ -131,7 +130,7 @@ element.id =
    -

    Traduction en français (non normative) : getElementById

    +

    Traduction en français (non normative) : getElementById

    Compatibilité des navigateurs

    @@ -142,5 +141,5 @@ element.id =
    • {{domxref("Document")}} référence pour d'autres méthodes et propriétés que vous pouvez utiliser pour obtenir la référence vers des éléments du document.
    • {{domxref("Document.querySelector()")}} pour utiliser des sélecteurs avec des requêtes comme 'div.myclass'
    • -
    • xml:id dispose d'une méthode utilitaire permettant à getElementById d'obtenir les valeur 'xml:id' dans les documents XML (comme ceux qui pourraient être renvoyés par des appels Ajax).
    • +
    • xml:id dispose d'une méthode utilitaire permettant à getElementById d'obtenir les valeur 'xml:id' dans les documents XML (comme ceux qui pourraient être renvoyés par des appels Ajax).
    diff --git a/files/fr/web/api/document/getelementsbyclassname/index.html b/files/fr/web/api/document/getelementsbyclassname/index.html index 7296b18b88..43ff0fb18a 100644 --- a/files/fr/web/api/document/getelementsbyclassname/index.html +++ b/files/fr/web/api/document/getelementsbyclassname/index.html @@ -10,20 +10,20 @@ 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.

    +

    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

    +

    Syntaxe

    var elements = document.getElementsByClassName(names); // or:
     var elements = rootElement.getElementsByClassName(names);
      -
    • elements est une {{domxref ("HTMLCollection")}} des éléments trouvés.
    • +
    • elements est une {{domxref ("HTMLCollection")}} des éléments trouvés.
    • names est une chaîne représentant le nom de la classe des éléments à trouver.
    • -
    • getElementsByClassName peut être appelé sur n'importe quel élément, pas seulement sur le document. L'élément sur lequel il est appelé sera utilisé comme racine de la recherche.
    • +
    • getElementsByClassName peut être appelé sur n'importe quel élément, pas seulement sur le document. L'élément sur lequel il est appelé sera utilisé comme racine de la recherche.
    -

    Exemples

    +

    Exemples

    Trouve tous les éléments ayant la classe « test » :

    @@ -40,43 +40,43 @@ translation_of: Web/API/Document/getElementsByClassName
     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':

    +

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

    +

    XXX writeme == Notes == Une méthode semblable existe pour <code>Element</code>

    -

    Obtenir la classe  des éléments test

    +

    Obtenir la classe  des éléments test

    -

    C'est la méthode d'opération la plus couramment utilisée.

    +

    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");
    +
    <!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 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>
    + 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

    @@ -85,8 +85,8 @@ translation_of: Web/API/Document/getElementsByClassName -

    Spécification

    +

    Spécification

    diff --git a/files/fr/web/api/document/getelementsbyname/index.html b/files/fr/web/api/document/getelementsbyname/index.html index c8136c8de7..d2087a0d22 100644 --- a/files/fr/web/api/document/getelementsbyname/index.html +++ b/files/fr/web/api/document/getelementsbyname/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Document/getElementsByName

    Renvoie une liste des éléments portant un {{domxref("element.name","name")}} donné dans le document (X)HTML.

    -

    Syntaxe

    +

    Syntaxe

    elements = document.getElementsByName(name)
     
    @@ -23,36 +23,36 @@ translation_of: Web/API/Document/getElementsByName
  • name est la valeur de l'attribut name des éléments.
  • -

    Exemple

    +

    Exemple

    -
    <!DOCTYPE html>
    -<html lang="en">
    -<head>
    +
    <!DOCTYPE html>
    +<html lang="en">
    +<head>
      ...
    -</head>
    +</head>
     
    -<body>
    -<form name="up"><input type="text"></form>
    -<div name="down"><input type="text"></div>
    +<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>
    +<script> +var up_forms = document.getElementsByName("up"); +console.log(up_forms[0].tagName); // retourne "FORM" +</script> +</body> +</html>
    -

    Notes

    +

    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.

    +

    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.

    +

    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écifications

    @@ -75,7 +75,7 @@ console.log<
    -

    Voir aussi

    +

    Voir aussi

    • {{domxref("document.getElementById()")}} pour retourner une référence à un élément par son ID
    • diff --git a/files/fr/web/api/document/getelementsbytagname/index.html b/files/fr/web/api/document/getelementsbytagname/index.html index 268a5a6453..b90d19fbe0 100644 --- a/files/fr/web/api/document/getelementsbytagname/index.html +++ b/files/fr/web/api/document/getelementsbytagname/index.html @@ -12,9 +12,9 @@ translation_of: Web/API/Document/getElementsByTagName
       
      -

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

      +

      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

      +

      Syntaxe

      var elements = document.getElementsByTagName(name);
      @@ -27,79 +27,79 @@ translation_of: Web/API/Document/getElementsByTagName

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

    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.

    + document.getElementsByTagName() est similaire à {{domxref ("element.getElementsByTagName ()")}}, sauf que sa recherche englobe tout le document.

    -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/document/getelementsbytagnamens/index.html b/files/fr/web/api/document/getelementsbytagnamens/index.html index 537bc24875..7397cc7507 100644 --- a/files/fr/web/api/document/getelementsbytagnamens/index.html +++ b/files/fr/web/api/document/getelementsbytagnamens/index.html @@ -16,28 +16,30 @@ translation_of: Web/API/Document/getElementsByTagNameNS

    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

    +

    Syntaxe

    elements = document.getElementsByTagNameNS(namespace,name)
     
    • elements est une {{domxref("NodeList")}} (liste de noeud) directe (mais voir le note ci-dessous) d'éléments trouvés dans l'ordre de leur apparition dans l'arbre.
    • -
    • namespace l'URI d'espace de noms des éléments à rechercher (voir element.namespaceURI).
    • -
    • name est, soit le nom local des éléments à rechercher, soit la valeur spéciale "*" pour tous les éléments (voir element.localName).
    • +
    • namespace l'URI d'espace de noms des éléments à rechercher (voir element.namespaceURI).
    • +
    • name est, soit le nom local des éléments à rechercher, soit la valeur spéciale "*" pour tous les éléments (voir element.localName).
    -
    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.
    +
    +

    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

    +

    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.

    +

    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.

    -
    <html xmlns="http://www.w3.org/1999/xhtml">
    +
    http://www.w3.org/1999/xhtml">
     
     <head>
     <title>getElementsByTagNameNS example</title>
    @@ -46,7 +48,7 @@ translation_of: Web/API/Document/getElementsByTagNameNS
     
     function getAllParaElems()
     {
    -  var allParas = document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
    +  var allParas = document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
     
       var num = allParas.length;
     
    @@ -57,7 +59,7 @@ function getAllParaElems()
     function div1ParaElems()
     {
       var div1 = document.getElementById("div1")
    -  var div1Paras = div1.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
    +  var div1Paras = div1.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
     
       var num = div1Paras.length;
     
    @@ -68,7 +70,7 @@ function div1ParaElems()
     function div2ParaElems()
     {
       var div2 = document.getElementById("div2")
    -  var div2Paras = div2.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
    +  var div2Paras = div2.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
     
       var num = div2Paras.length;
     
    @@ -109,9 +111,9 @@ function div2ParaElems()
     </html>
     
    -

    Solution de contournement potentielle pour les navigateurs qui ne prennent pas en charge XPath

    +

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

    +

    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) {
    @@ -131,6 +133,6 @@ function div2ParaElems()
     }
     
    -

    Spécifications

    +

    Spécifications

    -

    DOM Level 2 Core: Document.getElementsByTagNameNS

    +

    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 index 676ba4d351..e485df22ae 100644 --- a/files/fr/web/api/document/getselection/index.html +++ b/files/fr/web/api/document/getselection/index.html @@ -13,4 +13,4 @@ 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.

    +

    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 index f33a56bb10..fb6088c0a9 100644 --- a/files/fr/web/api/document/hasfocus/index.html +++ b/files/fr/web/api/document/hasfocus/index.html @@ -11,59 +11,59 @@ 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.

    +

    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.

    +

    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

    +

    Syntaxe

    focused = document.hasFocus();
     
    -

    Valeur retournée

    +

    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 (
    -    "http://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>
    +

    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

    diff --git a/files/fr/web/api/document/head/index.html b/files/fr/web/api/document/head/index.html index 9927db3f3b..ef80950d76 100644 --- a/files/fr/web/api/document/head/index.html +++ b/files/fr/web/api/document/head/index.html @@ -7,16 +7,15 @@ tags: - HTML5 translation_of: Web/API/Document/head --- -

    Résumé

    Retourne l'élément {{HTMLElement("head")}} du document courant. S'il y a plus d'un élément <head>, le premier est retourné.

    -

    Syntaxe

    +

    Syntaxe

    var objRef = document.head;
     
    -

    Exemple

    +

    Exemple

    // en HTML: <head id="my-document-head">
     var aHead = document.head;
    @@ -26,7 +25,7 @@ alert(aHead.id); // "my-document-head";
     alert( document.head === document.querySelector("head") ); // true
     
    -

    Notes

    +

    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.

    diff --git a/files/fr/web/api/document/height/index.html b/files/fr/web/api/document/height/index.html index 8f69f2dbbc..6dbe1f47e8 100644 --- a/files/fr/web/api/document/height/index.html +++ b/files/fr/web/api/document/height/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Document/height

    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

    +

    Syntaxe

    height_value = document.height
     
    diff --git a/files/fr/web/api/document/images/index.html b/files/fr/web/api/document/images/index.html index 56ae7fba48..1b127eb980 100644 --- a/files/fr/web/api/document/images/index.html +++ b/files/fr/web/api/document/images/index.html @@ -6,23 +6,28 @@ tags: translation_of: Web/API/Document/images ---

    {{ ApiRef() }}

    -

    Résumé

    -

    document.images renvoie une collection des images du document HTML courant.

    -

    Syntaxe

    -
    HTMLCollection = document.images
    -
    -

    Exemple

    -
    var listeimg = document.images;
    +
    +

    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

    + +

    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 index 5f7d1a8bff..f7684fa56f 100644 --- a/files/fr/web/api/document/implementation/index.html +++ b/files/fr/web/api/document/implementation/index.html @@ -19,21 +19,21 @@ translation_of: Web/API/Document/implementation

    Exemple

    -
    var modName = "HTML";
    -var modVer = "2.0";
    -var conformTest = document.implementation.hasFeature( modName, modVer );
    +
    var modName = "HTML";
    +var modVer = "2.0";
    +var conformTest = document.implementation.hasFeature( modName, modVer );
     
    -alert( "DOM " + modName + " " + modVer + " supported?: " + conformTest );
    +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.
    +// 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.

    +

    Une liste de noms de modules (par exemple, Core, HTML, XML, etc.) est disponible dans la Conformance Section DOM niveau 2.

    -

    Notes

    +

    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.

    +

    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

    +

    Spécifications

    • DOM Level 2 Core: implementation
    • @@ -43,5 +43,5 @@ translation_of: Web/API/Document/implementation

      Notes propres à Gecko

        -
      • À partir de Gecko 19.0 {{geckoRelease ("19.0")}} la méthode {{domxref ("DOMImplementation.hasFeature", "hasFeature")}} retournera toujours true.
      • +
      • À partir de Gecko 19.0 {{geckoRelease ("19.0")}} la méthode {{domxref ("DOMImplementation.hasFeature", "hasFeature")}} retournera toujours true.
      diff --git a/files/fr/web/api/document/importnode/index.html b/files/fr/web/api/document/importnode/index.html index 32bef68f4a..afda055041 100644 --- a/files/fr/web/api/document/importnode/index.html +++ b/files/fr/web/api/document/importnode/index.html @@ -12,46 +12,46 @@ 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 ()")}}.

      +

      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

      +

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

      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.

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

      +

      Notes

      -

      Le noeud d'origine n'est pas supprimé du document d'origine. Le noeud importé est un clone de l'original.

      +

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

      +

      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.

      +

      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écifications

      diff --git a/files/fr/web/api/document/index.html b/files/fr/web/api/document/index.html index 795b4fc76d..186904db9e 100644 --- a/files/fr/web/api/document/index.html +++ b/files/fr/web/api/document/index.html @@ -11,26 +11,26 @@ 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.

      +

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

      +

      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

      +

      Constructeur

      {{domxref("Document.Document","Document()")}}{{non-standard_inline}}
      crée un nouvel objet Document .
      -

      Propriétés

      +

      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.
      +
      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.
      @@ -74,15 +74,15 @@ translation_of: Web/API/Document
      {{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")}}.
      +
      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.
      +
      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.
      +
      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}}
      @@ -96,7 +96,7 @@ translation_of: Web/API/Document
      {{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).
      +
      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")}}
      @@ -137,7 +137,7 @@ translation_of: Web/API/Document
      {{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.
      +
      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")}}
      @@ -224,17 +224,17 @@ translation_of: Web/API/Document

      Méthodes

      -

      Cette interface hérite également des interfaces {{domxref ("Node")}} et {{domxref ("EventTarget")}}.

      +

      Cette interface hérite également des interfaces {{domxref ("Node")}} et {{domxref ("EventTarget")}}.

      {{domxref("Document.adoptNode()")}}
      -
      adopte le noeud d'un document externe.
      +
      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.
      +
      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.
      +
      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()")}}
      @@ -300,15 +300,15 @@ translation_of: Web/API/Document
      {{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}
      remplace les entités, normalise les noeuds de texte, etc.
      {{domxref("Document.registerElement()")}} {{experimental_inline}}
      -
      Enregistre un composant Web.
      +
      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.
      +
      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é.
      +
      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")}} :

      @@ -317,7 +317,7 @@ translation_of: Web/API/Document
      {{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.
      +
      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.
      @@ -326,7 +326,7 @@ translation_of: Web/API/Document
      {{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).
      +
      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)")}}
      @@ -337,9 +337,9 @@ translation_of: Web/API/Document
      {{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.
      +
      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.
      +
      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)")}}
      @@ -453,38 +453,38 @@ translation_of: Web/API/Document
      {{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).
      +
      (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.
      +
      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")}}.
      +
      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.
      +
      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")}}.
      +
      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

      +

      Notes concernant Internet Explorer

      -

      Microsoft a défini quelques propriétés non standard :

      +

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

      +

      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é.
      +
      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 index e0560ef1df..76807b1f92 100644 --- a/files/fr/web/api/document/keypress_event/index.html +++ b/files/fr/web/api/document/keypress_event/index.html @@ -11,10 +11,10 @@ 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.

      +

      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.

      +
      +

      Attention : Cet évènement est déprécié et il faudrait plutôt utiliser beforeinput ou keydown.

      diff --git a/files/fr/web/api/document/lastmodified/index.html b/files/fr/web/api/document/lastmodified/index.html index c9f26ad21b..90a7738bb3 100644 --- a/files/fr/web/api/document/lastmodified/index.html +++ b/files/fr/web/api/document/lastmodified/index.html @@ -7,12 +7,12 @@ translation_of: Web/API/Document/lastModified

      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

      +

      Syntaxe

      string = document.lastModified;
       
      -

      Exemples

      +

      Exemples

      Exemple #1: Utilisation simple

      @@ -20,7 +20,7 @@ translation_of: Web/API/Document/lastModified // renvoie: 11/28/2015 16:11:15 -

      Exemple #2: Transformer lastModified en un objet de type Date

      +

      Exemple #2: Transformer lastModified en un objet de type Date

      var oLastModif = new Date(document.lastModified);
       
      @@ -30,9 +30,9 @@ translation_of: Web/API/Document/lastModified
      var nLastModif = Date.parse(document.lastModified);
       
      -

      Notes

      +

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

      +

      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;
      @@ -53,12 +53,13 @@ if (isNaN(nLastVisit) || nLastModif > nLastVisit) {
           }
       }
      -
      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)
      +
      +

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

      +

      Si vous voulez savoir si une page externe a changé, veuillez lire ce paragraphe à propos de l'API XMLHttpRequest().

      -

      Spécification

      +

      Spécification

      HTML5

      diff --git a/files/fr/web/api/document/laststylesheetset/index.html b/files/fr/web/api/document/laststylesheetset/index.html index 2f24656c13..dce73ac17e 100644 --- a/files/fr/web/api/document/laststylesheetset/index.html +++ b/files/fr/web/api/document/laststylesheetset/index.html @@ -12,16 +12,18 @@ translation_of: Web/API/Document/lastStyleSheetSet

      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

      +

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

      Note : Cette valeur ne doit pas changer lorsque {{ domxref("document.enableStyleSheetsForSet()") }} est appelé.

      +
      -

      Exemple

      +

      Exemple

      var lastSheetSet = document.lastStyleSheetSet;
       if (!lastSheetSet) {
      @@ -30,7 +32,7 @@ if (!lastSheetSet) {
       console.log("The last sheet set is: " + lastSheetSet);
       
      -

      Voir aussi

      +

      Voir aussi

      • {{ domxref("document.preferredStyleSheetSet") }}
      • @@ -39,8 +41,8 @@ console.log("The last sheet set is: " + lastSheetSet);
      • {{ domxref("document.enableStyleSheetsForSet()") }}
      -

      Spécifications

      +

      Spécifications

      diff --git a/files/fr/web/api/document/location/index.html b/files/fr/web/api/document/location/index.html index 932929b720..2a6f3e51c3 100644 --- a/files/fr/web/api/document/location/index.html +++ b/files/fr/web/api/document/location/index.html @@ -10,23 +10,23 @@ tags: - 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.

      +

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

      +

      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.

      +

      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.

      +

      Si le document courant n'est pas un contexte de navigation, la valeur renvoyée est null.

      -

      Syntaxe

      +

      Syntaxe

      -
      locationObj = document.location
      +
      locationObj = document.location
       document.location = 'http://www.mozilla.org' // équivalent à document.location.href = 'http://www.mozilla.org'
       
      -

      Exemple

      +

      Exemple

      -
      console.log(document.location);
      +
      console.log(document.location);
       // Affiche un string-like
       // "http://www.example.com/juicybits.html" dans la console
       
      diff --git a/files/fr/web/api/document/mozsetimageelement/index.html b/files/fr/web/api/document/mozsetimageelement/index.html index 1c35bcbcc5..aa70b99736 100644 --- a/files/fr/web/api/document/mozsetimageelement/index.html +++ b/files/fr/web/api/document/mozsetimageelement/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/Document/mozSetImageElement

      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

      +

      Syntaxe

      document.mozSetImageElement(imageElementId, imageElement);
       
      @@ -28,11 +28,11 @@ translation_of: Web/API/Document/mozSetImageElement
    • imageElement est le nouvel élément à utiliser comme arrière-plan correspondant à cette chaîne d'élément image. Spécifiez null pour supprimer l'élément d'arrière-plan.
    • -

      Exemple

      +

      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.

      +

      Vue de cet exemple en direct.

      <style type="text/css">
         #mybox {
      @@ -70,11 +70,11 @@ function clicked() {
       
       

      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

      +

      Spécifications

      Ne fait partie d'aucune spécification.

      -

      Voir aussi

      +

      Voir aussi

      • {{ cssxref("-moz-element") }}
      • diff --git a/files/fr/web/api/document/mozsyntheticdocument/index.html b/files/fr/web/api/document/mozsyntheticdocument/index.html index 443c3ca5e0..c8847269ca 100644 --- a/files/fr/web/api/document/mozsyntheticdocument/index.html +++ b/files/fr/web/api/document/mozsyntheticdocument/index.html @@ -12,14 +12,14 @@ translation_of: Web/API/Document/mozSyntheticDocument

        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

        +

        Syntaxe

        var isSynthetic = document.mozSyntheticDocument;
         

        En retour, isSynthetic est true (vrai) si le document est synthétique ; sinon, false (faux).

        -

        Exemple

        +

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

        @@ -30,6 +30,6 @@ if (isSynthetic) { }
      -

      Spécifications

      +

      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 index 52494ee50e..9c3d8d138a 100644 --- a/files/fr/web/api/document/onafterscriptexecute/index.html +++ b/files/fr/web/api/document/onafterscriptexecute/index.html @@ -37,7 +37,7 @@ document.addEventListener("afterscriptexecute", finished, true);

      Spécification

      Voir aussi

      diff --git a/files/fr/web/api/document/onbeforescriptexecute/index.html b/files/fr/web/api/document/onbeforescriptexecute/index.html index f0fc8ee381..8527a38555 100644 --- a/files/fr/web/api/document/onbeforescriptexecute/index.html +++ b/files/fr/web/api/document/onbeforescriptexecute/index.html @@ -35,7 +35,7 @@ document.addEventListener("beforescriptexecute", starting, true);

      Spécification

      Voir aussi

      diff --git a/files/fr/web/api/document/onoffline/index.html b/files/fr/web/api/document/onoffline/index.html index c8bfb9026a..4e9ac673aa 100644 --- a/files/fr/web/api/document/onoffline/index.html +++ b/files/fr/web/api/document/onoffline/index.html @@ -10,4 +10,4 @@ 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).

      +

      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 index ba10ffd969..251bf34aab 100644 --- a/files/fr/web/api/document/ononline/index.html +++ b/files/fr/web/api/document/ononline/index.html @@ -16,24 +16,24 @@ translation_of: Web/API/Document/ononline

      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.

      -

      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.

      +

      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 :

        -
      • en utilisant addEventListener sur window, document ou document.body
      • +
      • en utilisant addEventListener sur window, document ou document.body
      • en définissant les propriétés .ononline ou .onoffline sur document ou document.body sur un objet  Function JavaScript. (Note : l'utilisation de window.ononline ou window.onoffline ne fonctionnera pas pour des raisons de compatibilité).
      • en spécifiant les attributs ononline="..." ou onoffline="..." sur la balise <body>  dans le balisage HTML.
      -

      Exemple

      +

      Exemple

      -

      Il existe  un cas de test simple que vous pouvez exécuter pour vérifier le fonctionnement des évènements.

      +

      Il existe  un cas de test simple que vous pouvez exécuter pour vérifier le fonctionnement des évènements.

      -

      Références

      +

      Références

      diff --git a/files/fr/web/api/document/open/index.html b/files/fr/web/api/document/open/index.html index bb5aba9bc3..c8da92836a 100644 --- a/files/fr/web/api/document/open/index.html +++ b/files/fr/web/api/document/open/index.html @@ -12,14 +12,14 @@ translation_of: Web/API/Document/open
       
      -

      La méthode document.open() ouvre un document pour l'écriture.

      +

      La méthode document.open() ouvre un document pour l'écriture.

      -

      Syntaxe

      +

      Syntaxe

      document.open();
       
      -

      Exemple

      +

      Exemple

      // Dans cet exemple, le contenu du document est
       // écrasé au cours de la réinitialisation avec open()
      @@ -28,15 +28,15 @@ document.open();
       // Le document est vide.
       
      -

      Notes

      +

      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

      +

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

      +

      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.

      +

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

      diff --git a/files/fr/web/api/document/popupnode/index.html b/files/fr/web/api/document/popupnode/index.html index 8b6af6e137..be0b64250e 100644 --- a/files/fr/web/api/document/popupnode/index.html +++ b/files/fr/web/api/document/popupnode/index.html @@ -12,9 +12,11 @@ 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.
      +
      +

      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.

      +

      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.

      @@ -34,7 +36,7 @@ translation_of: Web/API/Document/popupNode </menupopup>
      -

      Voir http://www.mozilla.org/xpfe/xptoolkit/popups.html

      +

      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 index 969a9b39b0..ab47840dd3 100644 --- a/files/fr/web/api/document/preferredstylesheetset/index.html +++ b/files/fr/web/api/document/preferredstylesheetset/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Document/preferredStyleSheetSet

      Retourne la feuille de style préférée, telle que définie par l'auteur de la page.

      -

      Syntaxe

      +

      Syntaxe

      preferredStyleSheetSet = document.preferredStyleSheetSet
       
      @@ -23,7 +23,7 @@ translation_of: Web/API/Document/preferredStyleSheetSet

      En l'absence de feuille de style préférée, une chaine vide ("") est retournée.

      -

      Exemple

      +

      Exemple

      if (document.preferredStyleSheetSet) {
         console.log("La feuille de style préférée est : " + document.preferredStyleSheetSet);
      @@ -32,13 +32,13 @@ translation_of: Web/API/Document/preferredStyleSheetSet
       }
       
      -

      Spécifications

      +

      Spécifications

      -

      Voir aussi

      +

      Voir aussi

      • {{domxref("document.lastStyleSheetSet")}}
      • diff --git a/files/fr/web/api/document/querycommandstate/index.html b/files/fr/web/api/document/querycommandstate/index.html index ee8af716d0..ca874815cb 100644 --- a/files/fr/web/api/document/querycommandstate/index.html +++ b/files/fr/web/api/document/querycommandstate/index.html @@ -44,6 +44,6 @@ translation_of: Web/API/Document/queryCommandState diff --git a/files/fr/web/api/document/querycommandsupported/index.html b/files/fr/web/api/document/querycommandsupported/index.html index 986cbd52e3..ddd356a31b 100644 --- a/files/fr/web/api/document/querycommandsupported/index.html +++ b/files/fr/web/api/document/querycommandsupported/index.html @@ -19,10 +19,9 @@ translation_of: Web/API/Document/queryCommandSupported
        isSupported = document.queryCommandSupported(command);
         
        +

        Paramètres

        +
        -
        -

        Paramètres

        -
        command
        La commande pour laquelle on veut déterminer si elle est prise en charge.
        diff --git a/files/fr/web/api/document/queryselector/index.html b/files/fr/web/api/document/queryselector/index.html index 4d25c91d2b..bb81eb32c0 100644 --- a/files/fr/web/api/document/queryselector/index.html +++ b/files/fr/web/api/document/queryselector/index.html @@ -17,10 +17,10 @@ translation_of: Web/API/Document/querySelector

        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.

        +

        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

        +

        Syntaxe

        element = document.querySelector(sélecteurs);
         
        @@ -29,7 +29,7 @@ translation_of: Web/API/Document/querySelector
        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.
        +
        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.
        @@ -38,7 +38,7 @@ translation_of: Web/API/Document/querySelector

        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.

        +

        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.

        @@ -49,13 +49,13 @@ translation_of: Web/API/Document/querySelector
        La syntaxe des sélecteurs spécifiés est invalide.
        -

        Notes d'utilisation

        +

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

        +

        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

        +

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

        @@ -75,7 +75,7 @@ translation_of: Web/API/Document/querySelector </script>
      -

      Exemples

      +

      Exemples

      Trouver le premier élément correspondant à une classe

      @@ -83,13 +83,13 @@ translation_of: Web/API/Document/querySelector
      var el = document.querySelector(".maclasse");
      -

      Un sélecteur plus complexe

      +

      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é :

      +

      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']");
      +
      var el = document.querySelector("div.panneau-utilisateur.principal input[name='identifiant']");
      -

      Spécifications

      +

      Spécifications

      @@ -118,9 +118,9 @@ translation_of: Web/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 index 6347a584c8..7b73477245 100644 --- a/files/fr/web/api/document/queryselectorall/index.html +++ b/files/fr/web/api/document/queryselectorall/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/Document/querySelectorAll

      Note : Cette méthode est implémentée à partir de {{domxref("ParentNode")}}, méthode  du mixin {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} .

      -

      Syntaxe

      +

      Syntaxe

      elementList = parentNode.querySelectorAll(selectors);
       
      @@ -30,7 +30,7 @@ translation_of: Web/API/Document/querySelectorAll
      -

      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.

      +

      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

      @@ -38,7 +38,7 @@ translation_of: Web/API/Document/querySelectorAll

      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.

      +

      Note : Si les selectors spécifiés contiennent un pseudo-element CSS, la liste retournée sera toujours vide.

      Exceptions

      @@ -48,7 +48,7 @@ translation_of: Web/API/Document/querySelectorAll
      la syntaxe des chaînes selectors spécifiés n'est pas valide.
      -

      Exemples

      +

      Exemples

      Pour obtenir une {{domxref("NodeList")}} (liste de noeuds) de tous les éléments {{HTMLElement("p")}}  dans le document :

      @@ -64,7 +64,7 @@ translation_of: Web/API/Document/querySelectorAll
      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" :

      +

      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]");
      @@ -85,7 +85,7 @@ highlightedItems.forEach(function(userItem) { deleteUser(userItem); }); -

      Notes d'utilisation

      +

      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.

      diff --git a/files/fr/web/api/document/readystate/index.html b/files/fr/web/api/document/readystate/index.html index 57f7b28538..36d01f7c11 100644 --- a/files/fr/web/api/document/readystate/index.html +++ b/files/fr/web/api/document/readystate/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/Document/readyState

      Syntaxe

      -
      var string = document.readyState;
      +
      var string = document.readyState;
       

      Valeurs

      @@ -32,11 +32,11 @@ translation_of: Web/API/Document/readyState
      Le document et toutes les sous-ressources ont été chargés, et {{event("load")}} a été émis.
      -

      Exemples

      +

      Exemples

      Différents états de chargement

      -
      switch (document.readyState) {
      +
      switch (document.readyState) {
         case "loading":
           // Encore en chargement.
           break;
      @@ -50,12 +50,12 @@ translation_of: Web/API/Document/readyState
           // 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
      +
      // alternative à DOMContentLoaded
       document.onreadystatechange = function () {
         if (document.readyState == "interactive") {
           initApplication();
      @@ -64,7 +64,7 @@ document.onreadystatechange = function () {
       
       

      readystatechange comme alternative à load

      -
      // alternative à load
      +
      // alternative à load
       document.onreadystatechange = function () {
         if (document.readyState == "complete") {
           initApplication();
      @@ -73,7 +73,7 @@ document.onreadystatechange = function () {
       
       

      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
      +
      // 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(); }
      @@ -83,7 +83,7 @@ document.addEventListener('readystatechange', bootstrap, false);
       
       

      Spécifications

      -
      +
      @@ -110,12 +110,8 @@ document.addEventListener('readystatechange', bootstrap, false);

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

      diff --git a/files/fr/web/api/document/readystatechange_event/index.html b/files/fr/web/api/document/readystatechange_event/index.html index 251487fc4b..95c60dae30 100644 --- a/files/fr/web/api/document/readystatechange_event/index.html +++ b/files/fr/web/api/document/readystatechange_event/index.html @@ -6,13 +6,13 @@ original_slug: Web/Events/readystatechange ---

      {{ApiRef}}

      -

      L'événement readystatechange est déclenché lorsque l'attribut readyState d'un document a changé.

      +

      L'événement readystatechange est déclenché lorsque l'attribut readyState d'un document a changé.

      Information générale

      Specification
      -
      HTML5
      +
      HTML5
      Interface
      Event
      Bubbles
      diff --git a/files/fr/web/api/document/referrer/index.html b/files/fr/web/api/document/referrer/index.html index d8699ada15..075f837b2a 100644 --- a/files/fr/web/api/document/referrer/index.html +++ b/files/fr/web/api/document/referrer/index.html @@ -10,14 +10,14 @@ translation_of: Web/API/Document/referrer ---
      {{APIRef}}
      -

      Résumé

      +

      Résumé

      Renvoie l'URI de la page de provenance.

      -

      Syntaxe

      +

      Syntaxe

      string = document.referrer;
       
      -

      Notes

      +

      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

      +

      Spécification

      diff --git a/files/fr/web/api/document/registerelement/index.html b/files/fr/web/api/document/registerelement/index.html index 352cc8b6e9..8512a48f5f 100644 --- a/files/fr/web/api/document/registerelement/index.html +++ b/files/fr/web/api/document/registerelement/index.html @@ -13,15 +13,15 @@ translation_of: Web/API/Document/registerElement

      {{APIRef("DOM")}} {{Deprecated_header}}

      -

      Warning : document.registerElement() est déprécié en faveur de customElements.define().

      +

      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.

      +

      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.

      +

      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

      @@ -32,9 +32,7 @@ translation_of: Web/API/Document/registerElement
      nom-tag
      -
      -
      Le nom de l'élément personnalisé. Le nom doit contenir un tiret (-), par exemple mon-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.
      @@ -63,5 +61,5 @@ montag.textContent = "Je suis un élément mon-tag.";

      Voir aussi

      diff --git a/files/fr/web/api/document/releasecapture/index.html b/files/fr/web/api/document/releasecapture/index.html index 8c2a9d5bc5..bb7cafb599 100644 --- a/files/fr/web/api/document/releasecapture/index.html +++ b/files/fr/web/api/document/releasecapture/index.html @@ -16,22 +16,22 @@ translation_of: Web/API/Document/releaseCapture

      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

      +

      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

      +

      Exemple

      Voir l'exemple pour {{domxref("element.setCapture()")}}.

      -

      Spécifications

      +

      Spécifications

      Basé sur l'implémentation Internet Explorer.

      -

      Voir aussi

      +

      Voir aussi

      • {{domxref("element.setCapture()")}}
      • diff --git a/files/fr/web/api/document/scripts/index.html b/files/fr/web/api/document/scripts/index.html index e6b957e69d..cf019c81d2 100644 --- a/files/fr/web/api/document/scripts/index.html +++ b/files/fr/web/api/document/scripts/index.html @@ -11,7 +11,7 @@ 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")}}.

        +

        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

        diff --git a/files/fr/web/api/document/scroll_event/index.html b/files/fr/web/api/document/scroll_event/index.html index 8e1a13b3db..21c5ba592e 100644 --- a/files/fr/web/api/document/scroll_event/index.html +++ b/files/fr/web/api/document/scroll_event/index.html @@ -9,8 +9,9 @@ tags: - 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.

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

        @@ -39,8 +40,8 @@ translation_of: Web/API/Document/scroll_event
      Spécifications
      -
      -

      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.

      +
      +

      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

      @@ -95,7 +96,7 @@ translation_of: Web/API/Document/scroll_event

      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/
      +
      // Référence: http://www.html5rocks.com/en/tutorials/speed/animations/
       
       var derniere_position_de_scroll_connue = 0;
       var ticking = false;
      diff --git a/files/fr/web/api/document/selectedstylesheetset/index.html b/files/fr/web/api/document/selectedstylesheetset/index.html
      index 8c66beecb4..270c7d8821 100644
      --- a/files/fr/web/api/document/selectedstylesheetset/index.html
      +++ b/files/fr/web/api/document/selectedstylesheetset/index.html
      @@ -13,7 +13,7 @@ translation_of: Web/API/Document/selectedStyleSheetSet
       
       

      Indique le nom du jeu de feuilles de styles actuellement utilisé.

      -

      Syntaxe

      +

      Syntaxe

      currentStyleSheetSet = document.selectedStyleSheetSet
       
      @@ -22,20 +22,24 @@ 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.

      +

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

      Note : Cette valeur d'attribut est directe : sa modification affectera la valeur de l'attribut.

      +
      -

      Exemple

      +

      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()") }}.
      +
      +

      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

      +

      Voir aussi

      • {{ domxref("document.lastStyleSheetSet") }}
      • @@ -44,8 +48,8 @@ document.selectedStyleSheetSet = "Some other style sheet";
      • {{ domxref("document.enableStyleSheetsForSet()") }}
      -

      Spécifications

      +

      Spécifications

      diff --git a/files/fr/web/api/document/stylesheets/index.html b/files/fr/web/api/document/stylesheets/index.html index 2965e4eb43..44b8d92e15 100644 --- a/files/fr/web/api/document/stylesheets/index.html +++ b/files/fr/web/api/document/stylesheets/index.html @@ -11,7 +11,7 @@ original_slug: Web/API/DocumentOrShadowRoot/styleSheets
       
      -

      Syntaxe

      +

      Syntaxe

      var styleSheetList = document.styleSheets;
       
      @@ -20,7 +20,7 @@ original_slug: Web/API/DocumentOrShadowRoot/styleSheets

      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écification

      @@ -46,12 +46,12 @@ original_slug: Web/API/DocumentOrShadowRoot/styleSheets
      -

      Voir aussi

      +

      Voir aussi

      • {{Link("/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information")}}
      diff --git a/files/fr/web/api/document/stylesheetsets/index.html b/files/fr/web/api/document/stylesheetsets/index.html index 14adac7a18..f584192df8 100644 --- a/files/fr/web/api/document/stylesheetsets/index.html +++ b/files/fr/web/api/document/stylesheetsets/index.html @@ -13,14 +13,14 @@ translation_of: Web/API/Document/styleSheetSets

      Renvoie une liste active de tous les jeux de feuilles de styles actuellement disponibles.

      -

      Syntaxe

      +

      Syntaxe

      sets = document.styleSheetSets
       

      En retour, sets est une liste de jeux de feuilles de styles disponibles.

      -

      Exemple

      +

      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 :

      @@ -40,13 +40,13 @@ for (var i = 0; i < sheets.length; i++) {

      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

      +

      Spécifications

      -

      Voir aussi

      +

      Voir aussi

      • {{domxref("Stylesheet")}}
      • diff --git a/files/fr/web/api/document/title/index.html b/files/fr/web/api/document/title/index.html index 98cb79bb34..003f214380 100644 --- a/files/fr/web/api/document/title/index.html +++ b/files/fr/web/api/document/title/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/Document/title

        Obtient ou défini le titre de la page.

        -

        Syntaxe

        +

        Syntaxe

        var docTitle = document.title;
         
        @@ -19,7 +19,7 @@ translation_of: Web/API/Document/title

        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

        +

        Exemple

        <!DOCTYPE html>
         <html>
        @@ -38,7 +38,7 @@ alert(document.title); // Affiche "Goodbye World!"
         </html>
         
        -

        Notes

        +

        Notes

        Cette propriété s'applique à HTML, SVG, XUL, et aux autres documents Gecko.

        @@ -46,9 +46,9 @@ alert(document.title); // Affiche "Goodbye World!"

        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

        +

        Spécification

        diff --git a/files/fr/web/api/document/tooltipnode/index.html b/files/fr/web/api/document/tooltipnode/index.html index 681797c298..13c0927cff 100644 --- a/files/fr/web/api/document/tooltipnode/index.html +++ b/files/fr/web/api/document/tooltipnode/index.html @@ -15,11 +15,11 @@ translation_of: Web/API/Document/tooltipNode

        Renvoie le noeud qui est la cible de l'actuel {{ XULElem("tooltip") }}.

        -

        Syntaxe

        +

        Syntaxe

        document.tooltipNode;
         
        -

        Spécification

        +

        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 index f31ff40c44..a12b93005e 100644 --- a/files/fr/web/api/document/touchend_event/index.html +++ b/files/fr/web/api/document/touchend_event/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Document/touchend_event
        Spécification
        -
        Touch Events
        +
        Touch Events
        Interface
        {{domxref("TouchEvent")}}
        Bubbles
        @@ -62,7 +62,7 @@ translation_of: Web/API/Document/touchend_event view {{readonlyInline}} WindowProxy - document.defaultView (window of the document) + document.defaultView (window of the document) detail {{readonlyInline}} @@ -110,7 +110,7 @@ translation_of: Web/API/Document/touchend_event

        Exemples

        -

        Des exemples d'implémentation de cet événement sont disponibles : Touch events.

        +

        Des exemples d'implémentation de cet événement sont disponibles : Touch events.

        Compatibilité des navigateurs

        diff --git a/files/fr/web/api/document/transitionend_event/index.html b/files/fr/web/api/document/transitionend_event/index.html index 7b8d5c9395..55916580ec 100644 --- a/files/fr/web/api/document/transitionend_event/index.html +++ b/files/fr/web/api/document/transitionend_event/index.html @@ -30,7 +30,7 @@ translation_of: Web/API/Document/transitionend_event

        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.

        +

        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

        @@ -40,13 +40,13 @@ translation_of: Web/API/Document/transitionend_event console.log('Transition terminée'); });
      -

      La même chose, mais en utilisant la propriété ontransitionend au lieu de addEventListener() :

      +

      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.

      +

      Voir un exemple en direct sur cet évènement.

      Spécifications

      @@ -77,7 +77,7 @@ translation_of: Web/API/Document/transitionend_event
    • Le gestionnaire d’évènement {{domxref("GlobalEventHandlers.ontransitionend")}}
    • L’interface {{domxref("TransitionEvent")}}
    • Les propriétés CSS : {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}
    • -
    • Des évènements associés : transitionrun, transitionstart, transitioncancel
    • -
    • Cet évènement sur les cibles HTMLElement : transitionend
    • -
    • Cet évènement sur les cibles Window : transitionend
    • +
    • Des évènements associés : transitionrun, transitionstart, transitioncancel
    • +
    • Cet évènement sur les cibles HTMLElement : transitionend
    • +
    • Cet évènement sur les cibles Window : transitionend
    diff --git a/files/fr/web/api/document/url/index.html b/files/fr/web/api/document/url/index.html index 32b79c706d..1b599ff794 100644 --- a/files/fr/web/api/document/url/index.html +++ b/files/fr/web/api/document/url/index.html @@ -7,17 +7,17 @@ translation_of: Web/API/Document/URL

    Retourne l'URL du {{domxref("Document")}} sous forme de string (lecture seule).

    -

    Syntaxe

    +

    Syntaxe

    var string = document.URL
     
    -

    Exemple

    +

    Exemple

    var currentURL = document.URL;
     alert(currentURL);
    -

    Specification

    +

    Specification

    • DOM Level 2 HTML: URL
    • diff --git a/files/fr/web/api/document/visibilitystate/index.html b/files/fr/web/api/document/visibilitystate/index.html index 2ff5dcc883..d8ea3d1139 100644 --- a/files/fr/web/api/document/visibilitystate/index.html +++ b/files/fr/web/api/document/visibilitystate/index.html @@ -30,10 +30,10 @@ translation_of: Web/API/Document/visibilityState

      Exemples

      -
      document.addEventListener("visibilitychange", function() {
      -  console.log( document.visibilityState );
      -  // Modifier le comportement...
      -});
      +
      document.addEventListener("visibilitychange", function() {
      +  console.log( document.visibilityState );
      +  // Modifier le comportement...
      +});

      Spécifications

      diff --git a/files/fr/web/api/document/width/index.html b/files/fr/web/api/document/width/index.html index 94c91d793d..8be64c2109 100644 --- a/files/fr/web/api/document/width/index.html +++ b/files/fr/web/api/document/width/index.html @@ -6,37 +6,37 @@ translation_of: Web/API/Document/width
      {{APIRef("DOM")}} {{Obsolete_header}}
      -

      Remarque: À 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")}}.

      +

      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

      +

      Syntaxe

      pixels = document.width;
       
      -

      Exemple

      +

      Exemple

      function init() {
           alert("La largeur du document est " + document.width + " pixels.");
       }
       
      -

      Alternatives

      +

      Alternatives

      document.body.clientWidth              /* largeur de <body> */
       document.documentElement.clientWidth   /* largeur de <html> */
       window.innerWidth                      /* largeur de la fenêtre */
       
      -

      Spécification

      +

      Spécification

      HTML5

      -

      Voir également

      +

      Voir également

      • {{domxref("document.height")}}
      • diff --git a/files/fr/web/api/document/write/index.html b/files/fr/web/api/document/write/index.html index e0aec07be3..30a3d4da6b 100644 --- a/files/fr/web/api/document/write/index.html +++ b/files/fr/web/api/document/write/index.html @@ -11,13 +11,13 @@ translation_of: Web/API/Document/write ---

        {{ ApiRef("DOM") }}

        -

        Écrit une chaîne de texte dans un document ouvert par document.open().

        +

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

        +

        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

        +

        Syntaxe

        document.write(balisage);
         
        @@ -29,7 +29,7 @@ translation_of: Web/API/Document/write
        est une chaîne de caractères contenant le texte à écrire dans le document.
        -

        Exemple

        +

        Exemple

        <html>
         
        @@ -55,22 +55,22 @@ document.close();
         </html>
         
        -

        Notes

        +

        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.

        +

        É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>
        +
        <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 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 : 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.

        @@ -78,14 +78,14 @@ document.close();
        -

        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.

        +

        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

        +

        Spécification

        Voir aussi

        diff --git a/files/fr/web/api/document/writeln/index.html b/files/fr/web/api/document/writeln/index.html index 046c069cbc..eb06d11321 100644 --- a/files/fr/web/api/document/writeln/index.html +++ b/files/fr/web/api/document/writeln/index.html @@ -12,29 +12,27 @@ translation_of: Web/API/Document/writeln

        Écrit une chaine de caractères suivie d'un retour de ligne.

        -

        Syntaxe

        +

        Syntaxe

        -
        document.writeln(ligne);
        +
        document.writeln(ligne);
         
        -

        Paramètres

        +

        Paramètres

        • ligne est la chaine de caractère contenant le texte.
        -

        Exemple

        +

        Exemple

        document.writeln("<p>Entrez votre mot de passe :</p>");
         
        -

        Notes

        +

        Notes

        document.writeln est identique à {{domxref("document.write")}}, mais ajoute une nouvelle ligne.

        -
        Note : document.writeln (comme document.write) n'a aucun effet en XHTML documents (vous obtiendrez une erreur "Operation is not supported" (NS_ERROR_DOM_NOT_SUPPORTED_ERR) dans la console). Ceci est le cas si un fichier est ouvert en local avec l'extension .xhtml ou pour tous documents utilisant le type MIME application/xhtml+xml. Pour plus d'informations, visitez W3C XHTML FAQ.
        - -

        Spécifications

        +

        Spécifications

        diff --git a/files/fr/web/api/document/xmlencoding/index.html b/files/fr/web/api/document/xmlencoding/index.html index e3b98135f1..a7236fc2f6 100644 --- a/files/fr/web/api/document/xmlencoding/index.html +++ b/files/fr/web/api/document/xmlencoding/index.html @@ -14,7 +14,9 @@ translation_of: Web/API/Document/xmlEncoding

        Renvoie le codage déterminé par la déclaration XML. Devrait être null si non précisé ou inconnu.

        -
        Warning : 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") }}.
        +
        +

        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 :

        @@ -23,13 +25,11 @@ translation_of: Web/API/Document/xmlEncoding

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

        - -

         

        +

        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 index ce2a197b51..4145a61548 100644 --- a/files/fr/web/api/document/xmlversion/index.html +++ b/files/fr/web/api/document/xmlversion/index.html @@ -21,9 +21,9 @@ translation_of: Web/API/Document/xmlVersion } -

        Spécifications

        +

        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 index a1d62f4019..9754cae903 100644 --- a/files/fr/web/api/document_object_model/examples/index.html +++ b/files/fr/web/api/document_object_model/examples/index.html @@ -9,132 +9,132 @@ 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)

        +

        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

        +
        <!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>
        +
        <!DOCTYPE html>
        +<html lang="en">
        +<head>
        +<title>Changing color and font-size example</title>
         
        -<script>
        -function changeText() {
        -  var p = document.getElementById("pid");
        +<script>
        +function changeText() {
        +  var p = document.getElementById("pid");
         
        -  p.style.color = "blue"
        -  p.style.fontSize = "18pt"
        -}
        -</script>
        -</head>
        -<body>
        +  p.style.color = "blue"
        +  p.style.fontSize = "18pt"
        +}
        +</script>
        +</head>
        +<body>
         
        -<p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p>
        +<p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p>
         
        -<form>
        -  <p><input value="rec" type="button" onclick="changeText();" /></p>
        -</form>
        +<form>
        +  <p><input value="rec" type="button" onclick="changeText();" /></p>
        +</form>
         
        -</body>
        -</html>
        +</body> +</html>
        -

        Exemple 4 : utilisation de feuilles de style

        +

        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;
        +
        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" );
        -  }
        -}
        +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 :

        @@ -150,221 +150,221 @@ P #LUMPY -

        Exemple 5 : propagation d'évènements

        +

        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>
        +
        <!DOCTYPE html>
        +<html lang="en">
        +<head>
        +<title>Event Propagation</title>
         
        -<style>
        -#t-daddy { border: 1px solid red }
        -#c1 { background-color: pink; }
        -</style>
        +<style>
        +#t-daddy { border: 1px solid red }
        +#c1 { background-color: pink; }
        +</style>
         
        -<script>
        -function stopEvent(ev) {
        -  c2 = document.getElementById("c2");
        -  c2.innerHTML = "hello";
        +<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.");
        -}
        +  // 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>
        +function load() {
        +  elem = document.getElementById("tbl1");
        +  elem.addEventListener("click", stopEvent, false);
        +}
        +</script>
        +</head>
         
        -<body onload="load();">
        +<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>
        +<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>
        +</body> +</html>
        -

        Exemple 6 : getComputedStyle

        +

        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.

        +

        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>
        +
        <!DOCTYPE html>
        +<html lang="en">
        +<head>
         
        -<title>getComputedStyle example</title>
        +<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");
        +<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;
        +  txtHeight.value = h_style;
         
        -  var txtWidth = document.getElementById("t2");
        -  var w_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width");
        +  var txtWidth = document.getElementById("t2");
        +  var w_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width");
         
        -  txtWidth.value = w_style;
        +  txtWidth.value = w_style;
         
        -  var txtBackgroundColor = document.getElementById("t3");
        -  var b_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("background-color");
        +  var txtBackgroundColor = document.getElementById("t3");
        +  var b_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("background-color");
         
        -  txtBackgroundColor.value = b_style;
        -}
        -</script>
        +  txtBackgroundColor.value = b_style;
        +}
        +</script>
         
        -<style>
        -#d1 {
        -  margin-left: 10px;
        -  background-color: rgb(173, 216, 230);
        -  height: 20px;
        -  max-width: 20px;
        -}
        -</style>
        +<style>
        +#d1 {
        +  margin-left: 10px;
        +  background-color: rgb(173, 216, 230);
        +  height: 20px;
        +  max-width: 20px;
        +}
        +</style>
         
        -</head>
        +</head>
         
        -<body>
        +<body>
         
        -<div id="d1">&nbsp;</div>
        +<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>
        +<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>
        +</body> +</html>
        -

        Exemple 7 : affichage des propriétés d'un objet event

        +

        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.

        +

        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>
        +
        <!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; }
        +<style>
        +table { border-collapse: collapse; }
        +thead { font-weight: bold; }
        +td { padding: 2px 10px 2px 10px; }
         
        -.odd { background-color: #efdfef; }
        -.even { background-color: #ffffff; }
        -</style>
        +.odd { background-color: #efdfef; }
        +.even { background-color: #ffffff; }
        +</style>
         
        -<script>
        +<script>
         
        -function showEventProperties(e) {
        -  function addCell(row, text) {
        -    var cell = row.insertCell(-1);
        -    cell.appendChild(document.createTextNode(text));
        -  }
        +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 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;
        +  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]);
        -  }
        +  for (var i=0; i<len; i++) {
        +    addCell(row, lableList[i]);
        +  }
         
        -  var tbody = document.createElement('tbody');
        -  table.appendChild(tbody);
        +  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]);
        -  }
        +  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);
        -}
        +  document.body.appendChild(table);
        +}
         
        -window.onload = function(event){
        -  showEventProperties(event);
        -}
        -</script>
        -</head>
        +window.onload = function(event){
        +  showEventProperties(event);
        +}
        +</script>
        +</head>
         
        -<body>
        -<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1>
        -</body>
        +<body>
        +<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1>
        +</body>
         
        -</html>
        +</html>
        -

        Exemple 8 : utilisation de l'interface DOM Table

        +

        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>
        +
        <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;
        +<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>
        +for (var i = 0; i < 2; i++) { + cell = row.insertCell(-1); + text = 'Row ' + row.rowIndex + ' Cell ' + i; + cell.appendChild(document.createTextNode(text)); +} +</script>
        -

        Notes

        +

        Notes

        • N'utilisez jamais la propriété {{domxref("element.innerHTML","innerHTML")}} d'un tableau pour le modifier, même si vous pouvez l'utiliser pour créer un tableau entier ou le contenu d'une cellule.
        • Si vous utilisez les méthodes DOM Core {{domxref("document.createElement")}} et {{domxref("Node.appendChild")}} pour créer des lignes et cellules de tableau, il est nécessaire de les ajouter à un élément tbody dans Internet Explorer, tandis que les autres navigateurs vous permettront de les ajouter à un élément table (les lignes seront ajoutées au dernier élément tbody).
        • -
        • Un certain nombre d'autres méthodes utilitaires faisant partie de l'interface table peuvent être utilisées pour créer et modifier des tableaux.
        • +
        • Un certain nombre d'autres méthodes utilitaires faisant partie de l'interface table peuvent être utilisées pour créer et modifier des tableaux.
        diff --git a/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.html b/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.html index d599a27ad5..ed1a422071 100644 --- 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 @@ -10,9 +10,9 @@ 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).

        +

        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

        +

        Créer dynamiquement un arbre DOM

        Considérons le document XML suivant :

        @@ -85,63 +85,63 @@ peopleElem.appendChild(personElem2); doc.appendChild(peopleElem); -

        Voir également le chapitre DOM du tutoriel XUL

        +

        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.

        +
        {
        +  "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 index cf44a48c6d..dad3cd1a68 100644 --- a/files/fr/web/api/document_object_model/index.html +++ b/files/fr/web/api/document_object_model/index.html @@ -10,13 +10,12 @@ 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.

        +

        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.

        +

        Pour mieux comprendre le fonctionnement du DOM, une introduction est disponible.

        Interfaces du DOM

        -
        • {{domxref("Attr")}}
        • {{domxref("CharacterData")}}
        • @@ -60,13 +59,11 @@ translation_of: Web/API/Document_Object_Model
        • {{domxref("Worker")}}
        • {{domxref("XMLDocument")}} {{experimental_inline}}
        -

        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 :

        -
        • {{domxref("CDATASection")}}
        • {{domxref("DocumentTouch")}}
        • @@ -87,7 +84,6 @@ translation_of: Web/API/Document_Object_Model
        • {{domxref("TypeInfo")}}
        • {{domxref("UserDataHandler")}}
        -

        Interfaces HTML

        @@ -97,7 +93,6 @@ translation_of: Web/API/Document_Object_Model

        Interfaces des éléments HTML

        -
        • {{domxref("HTMLAnchorElement")}}
        • {{domxref("HTMLAppletElement")}}
        • @@ -170,11 +165,9 @@ translation_of: Web/API/Document_Object_Model
        • {{domxref("HTMLUnknownElement")}}
        • {{domxref("HTMLVideoElement")}}
        -

        Autres interfaces

        -
        • {{domxref("CanvasRenderingContext2D")}}
        • {{domxref("CanvasGradient")}}
        • @@ -191,22 +184,18 @@ translation_of: Web/API/Document_Object_Model
        • {{domxref("RadioNodeList")}}
        • {{domxref("MediaError")}}
        -

        Interfaces HTML obsolètes {{obsolete_inline}}

        -
        • {{domxref("HTMLBaseFontElement")}}
        • {{domxref("HTMLIsIndexElement")}}
        -
        -

        Interfaces SVG

        +

        Interfaces SVG

        Interfaces des éléments SVG

        -
        • {{domxref("SVGAElement")}}
        • {{domxref("SVGAltGlyphElement")}} {{deprecated_inline}}
        • @@ -307,7 +296,6 @@ translation_of: Web/API/Document_Object_Model
        • {{domxref("SVGViewElement")}}
        • {{domxref("SVGVKernElement")}} {{deprecated_inline}}
        -

        Interfaces pour les types de donnée SVG

        @@ -319,7 +307,6 @@ translation_of: Web/API/Document_Object_Model

        Interfaces statiques

        -
        • {{domxref("SVGAngle")}}
        • {{domxref("SVGColor")}} {{deprecated_inline}}
        • @@ -362,11 +349,9 @@ translation_of: Web/API/Document_Object_Model
        • {{domxref("SVGTransform")}}
        • {{domxref("SVGTransformList")}}
        -

        Interfaces animées

        -
        • {{domxref("SVGAnimatedAngle")}}
        • {{domxref("SVGAnimatedBoolean")}}
        • @@ -383,20 +368,16 @@ translation_of: Web/API/Document_Object_Model
        • {{domxref("SVGAnimatedString")}}
        • {{domxref("SVGAnimatedTransformList")}}
        -

        Interfaces relatives à SMIL

        -
        • {{domxref("ElementTimeControl")}}
        • {{domxref("TimeEvent")}}
        -

        Autres interfaces SVG

        -
        • {{domxref("GetSVGDocument")}}
        • {{domxref("ShadowAnimation")}}
        • @@ -419,7 +400,6 @@ translation_of: Web/API/Document_Object_Model
        • {{domxref("SVGZoomAndPan")}}
        • {{domxref("SVGZoomEvent")}} {{deprecated_inline}}
        -

        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 index a33909ef06..fa1af30b15 100644 --- a/files/fr/web/api/document_object_model/introduction/index.html +++ b/files/fr/web/api/document_object_model/introduction/index.html @@ -87,15 +87,15 @@ p_list = doc.getElementsByTagName("para");

        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: Parceque 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.

        +
        +

        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.

        -
        +
        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 index f8be47d2bc..72893cd5ab 100644 --- 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 @@ -13,22 +13,24 @@ original_slug: >- ---
        {{ 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'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 :

        +

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

        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.

        +

        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

        @@ -47,10 +49,10 @@ original_slug: >-

        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 index b84186a767..e21ba347fa 100644 --- 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 @@ -13,54 +13,56 @@ original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript ---

         

        -

        Introduction

        +

        Introduction

        Cet article propose une vue d'ensemble de certaines méthodes DOM Level 1 fondamentales et la façon de les utiliser depuis JavaScript. Vous y apprendrez à créer, accéder, contrôler et supprimer dynamiquement des éléments HTML. Les méthodes DOM décrites ne sont pas spécifiques au HTML et s'appliquent également au XML. Les exemples fonctionneront dans tous les navigateurs offrant le support complet du DOM niveau 1, ce qui est le cas de tous les navigateurs basés sur Mozilla comme Firefox ou Netscape. Les morceaux de code de ce document fonctionneront également dans Internet Explorer 5.

        -
        Les méthodes décrites ici font partie de la spécification Document Object Model level 1 (Core). DOM level 1 comprend des méthodes destinées à l'accès et à la manipulation des documents (DOM 1 core) ainsi que des méthodes spécifiques aux documents HTML (DOM 1 HTML).
        +
        +

        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)

        +

        Exemple: Création d'un tableau HTML dynamiquement (Sample1.html)

        Contenu HTML

        -
        <input type="button" value="Generate a table." onclick="generate_table()">
        +
        <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");
        -}
        +
        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') }}

        @@ -108,36 +110,36 @@ original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript

        Voici l'arborescence objet DOM créée par le code, pour l'élément TABLE et ses enfants :

        -

        Image:sample1-tabledom.jpg

        +

        Vous pouvez construire ce tableau ainsi que ses éléments enfants internes en utilisant juste quelques méthodes DOM. Conservez à l'esprit le modèle en arbre des structures que vous comptez créer, cela rendra plus facile l'écriture du code nécessaire. Dans l'arbre <table> de la figure 1, l'élément <table> a un enfant, l'élément <tbody>, qui lui-même a deux enfants <tr>, qui à leur tour ont chacun un enfant <td>. Enfin, chacun de ces éléments <td> a un enfant, un nœud texte.

        -

        Exemple : Définition de la couleur d'arrière-plan d'un paragraphe

        +

        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.

        +

        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>
        +
        <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];
        +
        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");
        +  // à 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)";
        -}
        + // 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') }}

        @@ -145,17 +147,17 @@ original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript
        1. On récupère d'abord une liste de tous les éléments body avec -
          myBody = document.getElementsByTagName("body")[0]
          +
          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. Ensuite, on récupère tous les éléments p qui sont des enfants de body en utilisant -
          myBodyElements = myBody.getElementsByTagName("p");
          +
          myBodyElements = myBody.getElementsByTagName("p");
        3. Pour finir on prend le deuxième élément de la liste des éléments p avec -
          myP = myBodyElements[1];
          +
          myP = myBodyElements[1];
        -

        Image:sample2a2.jpg

        +

        Une fois que vous avez l'objet DOM pour un élément HTML, vous pouvez modifier ses propriétés. Si par exemple vous voulez définir la propriété couleur d'arrière-plan du style, ajoutez simplement :

        @@ -163,15 +165,15 @@ original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript // ajoute une propriété de style inline -

        Création de nœuds texte avec document.createTextNode("..")

        +

        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");
        +
        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(...)

        +

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

        @@ -180,11 +182,13 @@ original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript

        En exécutant cet exemple, vous pouvez remarquer que les mots « hello » et « world » ne sont pas séparés : helloworld. Quand vous parcourez la page HTML les deux nœuds semblent donc n'en former qu'un seul, rappelez-vous cependant qu'ils sont bien distincts dans le modèle de document. Le second nœud est de type TEXT_NODE, et est le second enfant de la seconde balise <p>. Le schéma suivant situe ce nouvel objet dans l'arborescence du document :

        -

        Image:sample2b2.jpg

        +

        -
        L'utilisation de createTextNode et de appendChild permet aisément d'ajouter un espace entre ces deux mots. Notez cependant que la méthode appendChild ajoute le nouvel enfant à la suite de ceux déjà présents, à la manière de « world » placé après « hello ». Pour ajouter un nœud texte entre « hello » et « world » (par exemple un espace), utilisez insertBefore à la place de appendChild.
        +
        +

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

        +

        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 :

        @@ -192,9 +196,9 @@ original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript body.appendChild(nouveauNoeudBALISEP); -

        Image:sample2c.jpg

        +

        -

        Suppression de nœuds avec la méthode removeChild(...)

        +

        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 » :

        @@ -208,17 +212,17 @@ body.appendChild(nouveauNoeudBALISEP);

        L'arborescence des objets se présente désormais comme ceci :

        -

        Image:sample2d.jpg

        +

        -

        Création dynamique d'un tableau (retour à Sample1.html)

        +

        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

        +

        Rappel de la structure arborescente d'un tableau HTML

        -

        Image:sample1-tabledom.jpg

        +

        -

        Création et insertion des éléments dans l'arborescence

        +

        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 :

        @@ -230,7 +234,9 @@ body.appendChild(nouveauNoeudBALISEP);

        Le code source qui suit est un exemple commenté qui crée le tableau de Exemple1.

        -
        Il y a une ligne de code supplémentaire à la fin de la fonction start(), qui définit la propriété bordure du tableau en employant la méthode setAttribute. setAttribute utilise deux arguments : le nom de l'attribut et sa valeur, et permet de définir n'importe quelle propriété de n'importe quel élément.
        +
        +

        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>
        @@ -276,34 +282,36 @@ body.appendChild(nouveauNoeudBALISEP);
         </html>
         
        -

        Manipulation du tableau avec DOM et CSS

        +

        Manipulation du tableau avec DOM et CSS

        -

        Récupérer un nœud texte dans le tableau

        +

        Récupérer un nœud texte dans le tableau

        Cet exemple présente deux nouveaux attributs DOM. D'abord, l'attribut childNodes qui est utilisé pour récupérer la liste des nœuds enfants de cel. A la différence de getElementsByTagName, la liste renvoyée par childNodes comporte tous les enfants sans considération de type. Une fois la liste obtenue, la méthode {{ mediawiki.external('x') }} est employée pour sélectionner l'élément enfant désiré. Dans cet exemple, le nœud texte de la seconde cellule de la seconde ligne du tableau est enregistré dans celtext. Ensuite, un nouveau nœud texte contenant les données de celtext est greffé en tant qu'enfant sur l'élément <body>.

        -
        Si l'objet est un nœud texte, vous pouvez récupérer le texte qu'il contient en employant l'attribut data.
        +
        +

        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];
        +
        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];
        +// 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);
        +// 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

        +

        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");
        +
        mytable.getAttribute("border");
        -

        Cacher une colonne en changeant les propriétés de style

        +

        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.

        @@ -340,7 +348,7 @@ mybody.appen </html> -

        Original Document Information

        +

        Original Document Information

        Author(s)
        @@ -350,4 +358,4 @@ mybody.appen


        - Interwik

        + Interwik

        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 index a509d0525b..c59fe45427 100644 --- 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 @@ -11,9 +11,9 @@ original_slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_ ---

        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

        +

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

        +

        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>
        @@ -26,68 +26,59 @@ original_slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_
         </html>
         
        -

        image:Using_the_W3C_DOM_Level_1_Core-doctree.jpg

        +

        Lorsque Mozilla examine un document, un arbre de contenu est construit et ensuite utilisé pour l'affichage.

        Les termes utilisés pour décrire des arbres apparaissent souvent dans le DOM Level 1 Core. Chacune des boîtes dessinées dans l'arbre ci-dessus est un nœud dans l'arbre. La ligne au dessus d'un nœud représente une relation parent-enfant : le nœud supérieur est le parent, et le nœud inférieur est l'enfant. Deux enfants du même parent sont par conséquent des frères du même niveau. De même, on peut se référer à des ancêtres et des descendants. (Parler de cousins devient un peu compliqué par contre.)

        -

        Ce que permet le DOM Level 1 Core

        +

        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.

        +

        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

        +

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

        +

        Vous pouvez voir ce script dans un exemple complet.

        -

        Pour en apprendre plus

        +

        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.

        +

        Maintenant que vous êtes familiarisé avec les concepts basiques du DOM, il existe un document expliquant les méthodes fondamentales de DOM Level 1. C'est la suite de ce document.

        -

        Consultez également la spécification DOM Level 1 Core du W3C (traduction en français non normative). C'est une spécification relativement claire, même si elle est un peu formelle. Ce qui est surtout intéressant pour les auteurs, c'est la description des différents objets DOM et de toutes leurs propriétés et méthodes. Voyez encore notre documentation complète sur le DOM.

        - -
        -

        Informations sur le document original

        - -
          -
        • Auteur(s) : L. David Baron <dbaron at dbaron dot org>
        • -
        • Copyright : © 1998-2005 par des contributeurs individuels à mozilla.org ; le contenu est disponible sous une licence Creative Commons
        • -
        -
        +

        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 index d13a541dc7..9529722049 100644 --- a/files/fr/web/api/document_object_model/whitespace/index.html +++ b/files/fr/web/api/document_object_model/whitespace/index.html @@ -5,7 +5,7 @@ tags: - DOM translation_of: Web/API/Document_Object_Model/Whitespace --- -

        Le problème

        +

        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 :

        @@ -30,38 +30,38 @@ translation_of: Web/API/Document_Object_Model/Whitespace </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

        +

        Rendre les choses plus faciles

        -

        On peut formater leur code comme indiqué ci-dessous pour contourner le problème:

        +

        On peut formater leur code comme indiqué ci-dessous pour contourner le problème:

        -
        <!-- jolie impression conventionnelle
        +
        <!-- 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>
        + --> +<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
        @@ -70,25 +70,25 @@ translation_of: Web/API/Document_Object_Model/Whitespace
          *
          * 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));
        -}
        + */
        +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|.
        @@ -96,15 +96,15 @@ translation_of: Web/API/Document_Object_Model/Whitespace
          *                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
        -}
        +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
        @@ -116,16 +116,16 @@ translation_of: Web/API/Document_Object_Model/Whitespace
          *               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;
        -}
        -
        -/**
        + */
        +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.
          *
        @@ -134,16 +134,16 @@ translation_of: Web/API/Document_Object_Model/Whitespace
          *               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;
        -}
        -
        -/**
        + */
        +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
        @@ -154,18 +154,18 @@ translation_of: Web/API/Document_Object_Model/Whitespace
          *               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;
        -}
        -
        -/**
        + */
        +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..
          *
        @@ -174,18 +174,18 @@ translation_of: Web/API/Document_Object_Model/Whitespace
          *               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;
        -}
        -
        -/**
        + */
        +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.)
        @@ -193,40 +193,30 @@ translation_of: Web/API/Document_Object_Model/Whitespace
          * @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

        + */ +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);
        -}
        - -
        -

        Informations sur le document original

        - -
          -
        • Auteur : L. David Baron
        • -
        • Dernière mise à jour : 1er janvier 2003
        • -
        • Copyright : © 1998-2005 by individual mozilla.org contributors ; contenu disponible sous licence Creative Commons
        • -
        -
        +
        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 index 205b036775..f9c636ecef 100644 --- a/files/fr/web/api/documentfragment/documentfragment/index.html +++ b/files/fr/web/api/documentfragment/documentfragment/index.html @@ -20,9 +20,9 @@ translation_of: Web/API/DocumentFragment/DocumentFragment

        Exemple

        -
        fragment = new DocumentFragment();
        +
        fragment = new DocumentFragment();
        -

        Spécification

        +

        Spécification

        Type de donnée (Interface)
        @@ -46,5 +46,5 @@ translation_of: Web/API/DocumentFragment/DocumentFragment

        Voir aussi

        diff --git a/files/fr/web/api/documentfragment/index.html b/files/fr/web/api/documentfragment/index.html index eb109de2f1..23025411fa 100644 --- a/files/fr/web/api/documentfragment/index.html +++ b/files/fr/web/api/documentfragment/index.html @@ -12,7 +12,7 @@ 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.

        +

        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.

        @@ -22,7 +22,7 @@ translation_of: Web/API/DocumentFragment

        {{InheritanceDiagram}}

        -

        Propriétés

        +

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

        @@ -54,10 +54,10 @@ translation_of: Web/API/DocumentFragment
        {{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é.
        +
        Retourne le premier nœud {{domxref("Element")}} du DocumentFragment, dans l’ordre du document, qui correspond à l’ID spécifié.
        -

        Spécifications

        +

        Spécifications

        @@ -101,5 +101,5 @@ translation_of: Web/API/DocumentFragment

        Voir aussi

        diff --git a/files/fr/web/api/documentfragment/queryselector/index.html b/files/fr/web/api/documentfragment/queryselector/index.html index 6914d21c4a..86aac6075b 100644 --- a/files/fr/web/api/documentfragment/queryselector/index.html +++ b/files/fr/web/api/documentfragment/queryselector/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/DocumentFragment/querySelector

        Si les sélecteurs spécifiés dans paramètre sont invalides une {{domxref("DOMException")}} avec une valeur SYNTAX_ERR est lancée.

        -

        Syntaxe

        +

        Syntaxe

        element = documentfragment.querySelector(selectors);
        @@ -28,7 +28,7 @@ translation_of: Web/API/DocumentFragment/querySelector
        est une {{domxref("DOMString")}} (chaîne de caractères) contenant un ou plusieurs sélecteurs CSS séparés par des virgules.
        -

        Exemples

        +

        Exemples

        Exemple de base

        @@ -52,7 +52,7 @@ document.querySelector('#foo\\:bar') // Correspond au second div </script> -

        Spécifications

        +

        Spécifications

        @@ -74,11 +74,11 @@ document.querySelector('#foo\\:bar') // Correspond au second div
        -

        Compatibilité des navigateurs

        +

        Compatibilité des navigateurs

        {{Compat("api.DocumentFragment.querySelector")}}

        -

        Voir aussi

        +

        Voir aussi

        • L'interface {{domxref("DocumentFragment")}} à laquelle elle appartient.
        • diff --git a/files/fr/web/api/domerror/index.html b/files/fr/web/api/domerror/index.html index 6d608370ed..8e481bab48 100644 --- a/files/fr/web/api/domerror/index.html +++ b/files/fr/web/api/domerror/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/DOMError
          {{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).
          +
          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.
          diff --git a/files/fr/web/api/domexception/index.html b/files/fr/web/api/domexception/index.html index 45549ad419..a2b859da99 100644 --- a/files/fr/web/api/domexception/index.html +++ b/files/fr/web/api/domexception/index.html @@ -32,76 +32,76 @@ translation_of: Web/API/DOMException
          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

          +

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

          +

          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
          +
          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
          +
          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
          +
          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
          +
          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
          +
          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
          +
          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
          +
          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
          +
          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
          +
          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
          +
          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
          +
          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
          +
          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}}
          +
          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}}
          +
          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}}
          +
          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}}
          +
          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}}
          +
          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}}
          +
          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}}
          +
          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}}
          +
          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}}
          +
          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}}
          +
          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}}
          +
          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}}
          +
          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}}
          +
          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}}
          +
          DataError {{experimental_inline}}
          Provided data is inadequate (No legacy code value and constant name).
          -
          TransactionInactiveError {{experimental_inline}}
          +
          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}}
          +
          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}}
          +
          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}}
          +
          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}}
          +
          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).
          diff --git a/files/fr/web/api/domhighrestimestamp/index.html b/files/fr/web/api/domhighrestimestamp/index.html index beb311d169..b089be1d46 100644 --- a/files/fr/web/api/domhighrestimestamp/index.html +++ b/files/fr/web/api/domhighrestimestamp/index.html @@ -62,7 +62,7 @@ event.timeStamp;

          Ce type n'a pas de méthodes.

          -

          Spécifications

          +

          Spécifications

          @@ -93,6 +93,6 @@ event.timeStamp;

          Voir aussi

          diff --git a/files/fr/web/api/domimplementation/createdocument/index.html b/files/fr/web/api/domimplementation/createdocument/index.html index d8a6666d9f..63bccf3cb1 100644 --- a/files/fr/web/api/domimplementation/createdocument/index.html +++ b/files/fr/web/api/domimplementation/createdocument/index.html @@ -31,7 +31,7 @@ translation_of: Web/API/DOMImplementation/createDocument
          documentType {{optional_inline}}
          -
          Est le DocumentType du document à créer. Vaut null par défaut.
          +
          Est le DocumentType du document à créer. Vaut null par défaut.
            diff --git a/files/fr/web/api/domimplementation/index.html b/files/fr/web/api/domimplementation/index.html index 2f3297bde6..71e10fab87 100644 --- a/files/fr/web/api/domimplementation/index.html +++ b/files/fr/web/api/domimplementation/index.html @@ -10,7 +10,7 @@ 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")}}.

            +

            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é

            @@ -28,7 +28,7 @@ translation_of: Web/API/DOMImplementation
            {{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.
            +
            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

            diff --git a/files/fr/web/api/domobject/index.html b/files/fr/web/api/domobject/index.html index b91984316b..e179526e13 100644 --- a/files/fr/web/api/domobject/index.html +++ b/files/fr/web/api/domobject/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/DOMObject

            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écifications

          diff --git a/files/fr/web/api/domparser/index.html b/files/fr/web/api/domparser/index.html index 0151f9bec4..28daa45409 100644 --- a/files/fr/web/api/domparser/index.html +++ b/files/fr/web/api/domparser/index.html @@ -11,7 +11,7 @@ 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")}}.

          +

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

          diff --git a/files/fr/web/api/dompoint/dompoint/index.html b/files/fr/web/api/dompoint/dompoint/index.html index 960ea67846..952a148a55 100644 --- a/files/fr/web/api/dompoint/dompoint/index.html +++ b/files/fr/web/api/dompoint/dompoint/index.html @@ -39,7 +39,7 @@ translation_of: Web/API/DOMPoint/DOMPoint // DOMPoint { x: 0.4, y: 0.5, z: -0.5, w: 1 } -

          Spécifications

          +

          Spécifications

          diff --git a/files/fr/web/api/dompoint/index.html b/files/fr/web/api/dompoint/index.html index d1f50a5264..13f1adc696 100644 --- a/files/fr/web/api/dompoint/index.html +++ b/files/fr/web/api/dompoint/index.html @@ -48,9 +48,9 @@ translation_of: Web/API/DOMPoint
          La valeur de perspective du DOMPoint.
          -

          Exemples

          +

          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.

          +

          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();
          @@ -72,10 +72,10 @@ translation_of: Web/API/DOMPoint
           }
          -

          Note : Voir notre positionsensorvrdevice demo pour le code complet.

          +

          Note : Voir notre positionsensorvrdevice demo pour le code complet.

          -

          Spécifications

          +

          Spécifications

          diff --git a/files/fr/web/api/dompointreadonly/index.html b/files/fr/web/api/dompointreadonly/index.html index 13c66ec26d..f200ed1509 100644 --- a/files/fr/web/api/dompointreadonly/index.html +++ b/files/fr/web/api/dompointreadonly/index.html @@ -44,7 +44,7 @@ translation_of: Web/API/DOMPointReadOnly
          La valeur de perspective du DOMPoint.
          -

          Spécifications

          +

          Spécifications

          diff --git a/files/fr/web/api/dompointreadonly/w/index.html b/files/fr/web/api/dompointreadonly/w/index.html index 297161ae36..6eab04af2c 100644 --- a/files/fr/web/api/dompointreadonly/w/index.html +++ b/files/fr/web/api/dompointreadonly/w/index.html @@ -19,11 +19,11 @@ translation_of: Web/API/DOMPointReadOnly/w
          var perspective = DOMPoint.w;
          -

          Valeur

          +

          Valeur

          Un double.

          -

          Spécifications

          +

          Spécifications

          diff --git a/files/fr/web/api/dompointreadonly/x/index.html b/files/fr/web/api/dompointreadonly/x/index.html index 1a20413963..77c78c54d4 100644 --- a/files/fr/web/api/dompointreadonly/x/index.html +++ b/files/fr/web/api/dompointreadonly/x/index.html @@ -21,11 +21,11 @@ translation_of: Web/API/DOMPointReadOnly/x
          var xPos = DOMPoint.x;
          -

          Valeur

          +

          Valeur

          Un double.

          -

          Spécifications

          +

          Spécifications

          diff --git a/files/fr/web/api/dompointreadonly/y/index.html b/files/fr/web/api/dompointreadonly/y/index.html index eb507dea8f..74e42ccf0f 100644 --- a/files/fr/web/api/dompointreadonly/y/index.html +++ b/files/fr/web/api/dompointreadonly/y/index.html @@ -21,11 +21,11 @@ translation_of: Web/API/DOMPointReadOnly/y
          var yPos = DOMPoint.y;
          -

          Valeur

          +

          Valeur

          Un double.

          -

          Spécifications

          +

          Spécifications

          diff --git a/files/fr/web/api/dompointreadonly/z/index.html b/files/fr/web/api/dompointreadonly/z/index.html index ebb2ac2526..3befe72ac8 100644 --- a/files/fr/web/api/dompointreadonly/z/index.html +++ b/files/fr/web/api/dompointreadonly/z/index.html @@ -22,11 +22,11 @@ translation_of: Web/API/DOMPointReadOnly/z
          var zPos = DOMPoint.z;
          -

          Valeur

          +

          Valeur

          Un double.

          -

          Spécifications

          +

          Spécifications

          diff --git a/files/fr/web/api/domrect/domrect/index.html b/files/fr/web/api/domrect/domrect/index.html index e310429d61..a138a60cd0 100644 --- a/files/fr/web/api/domrect/domrect/index.html +++ b/files/fr/web/api/domrect/domrect/index.html @@ -39,7 +39,7 @@ translation_of: Web/API/DOMRect/DOMRect // DOMRect { x: 0, y: 0, width: 100, height: 100, top: 0, right: 100, bottom: 100, left: 0 } -

          Spécifications

          +

          Spécifications

          diff --git a/files/fr/web/api/domrect/index.html b/files/fr/web/api/domrect/index.html index 4c63c7bc07..a97d1c8d4e 100644 --- a/files/fr/web/api/domrect/index.html +++ b/files/fr/web/api/domrect/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/DOMRect

          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.

          +

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

          @@ -61,7 +61,7 @@ translation_of: Web/API/DOMRect
          Crée un nouvel objet DOMRect avec l'emplacement et les dimensions données.
          -

          Spécifications

          +

          Spécifications

          diff --git a/files/fr/web/api/domrectreadonly/bottom/index.html b/files/fr/web/api/domrectreadonly/bottom/index.html index 2bb2cc7599..16fb24cd52 100644 --- a/files/fr/web/api/domrectreadonly/bottom/index.html +++ b/files/fr/web/api/domrectreadonly/bottom/index.html @@ -18,11 +18,11 @@ translation_of: Web/API/DOMRectReadOnly/bottom
          var recBottom = DOMRect.bottom;
          -

          Valeur

          +

          Valeur

          Un double.

          -

          Spécifications

          +

          Spécifications

          diff --git a/files/fr/web/api/domrectreadonly/height/index.html b/files/fr/web/api/domrectreadonly/height/index.html index ca61108446..e617faaa94 100644 --- a/files/fr/web/api/domrectreadonly/height/index.html +++ b/files/fr/web/api/domrectreadonly/height/index.html @@ -18,11 +18,11 @@ translation_of: Web/API/DOMRectReadOnly/height
          var recHeight = DOMRect.height;
          -

          Valeur

          +

          Valeur

          Un double.

          -

          Spécifications

          +

          Spécifications

          diff --git a/files/fr/web/api/domrectreadonly/index.html b/files/fr/web/api/domrectreadonly/index.html index d637f21d31..6a80fa9ce0 100644 --- a/files/fr/web/api/domrectreadonly/index.html +++ b/files/fr/web/api/domrectreadonly/index.html @@ -54,7 +54,7 @@ translation_of: Web/API/DOMRectReadOnly
          Crée un nouvel objet DOMRect avec un emplacement et des dimensions donnés.
          -

          Spécifications

          +

          Spécifications

          diff --git a/files/fr/web/api/domrectreadonly/left/index.html b/files/fr/web/api/domrectreadonly/left/index.html index 3c6b68db09..63ef22ecf6 100644 --- a/files/fr/web/api/domrectreadonly/left/index.html +++ b/files/fr/web/api/domrectreadonly/left/index.html @@ -18,11 +18,11 @@ translation_of: Web/API/DOMRectReadOnly/left
          var recLeft = DOMRect.left;
          -

          Valeur

          +

          Valeur

          Un double.

          -

          Spécifications

          +

          Spécifications

          diff --git a/files/fr/web/api/domrectreadonly/right/index.html b/files/fr/web/api/domrectreadonly/right/index.html index a0cff4b6ff..011e820cf3 100644 --- a/files/fr/web/api/domrectreadonly/right/index.html +++ b/files/fr/web/api/domrectreadonly/right/index.html @@ -18,11 +18,11 @@ translation_of: Web/API/DOMRectReadOnly/right
          var recRight = DOMRect.right;
          -

          Valeur

          +

          Valeur

          Un double.

          -

          Spécifications

          +

          Spécifications

          diff --git a/files/fr/web/api/domrectreadonly/top/index.html b/files/fr/web/api/domrectreadonly/top/index.html index d264e8bf19..fa6b1644ef 100644 --- a/files/fr/web/api/domrectreadonly/top/index.html +++ b/files/fr/web/api/domrectreadonly/top/index.html @@ -18,11 +18,11 @@ translation_of: Web/API/DOMRectReadOnly/top
          var recTop = DOMRect.top;
          -

          Valeur

          +

          Valeur

          Un double.

          -

          Spécifications

          +

          Spécifications

          diff --git a/files/fr/web/api/domrectreadonly/width/index.html b/files/fr/web/api/domrectreadonly/width/index.html index 6d221b9de0..60b7427e0f 100644 --- a/files/fr/web/api/domrectreadonly/width/index.html +++ b/files/fr/web/api/domrectreadonly/width/index.html @@ -18,11 +18,11 @@ translation_of: Web/API/DOMRectReadOnly/width
          var recWidth = DOMRect.width;
          -

          Valeur

          +

          Valeur

          Un double.

          -

          Spécifications

          +

          Spécifications

          diff --git a/files/fr/web/api/domrectreadonly/x/index.html b/files/fr/web/api/domrectreadonly/x/index.html index bbdc61aaa1..89aee41f8b 100644 --- a/files/fr/web/api/domrectreadonly/x/index.html +++ b/files/fr/web/api/domrectreadonly/x/index.html @@ -19,11 +19,11 @@ translation_of: Web/API/DOMRectReadOnly/x
          var recX = DOMRect.x;
          -

          Valeur

          +

          Valeur

          Un double.

          -

          Spécifications

          +

          Spécifications

          diff --git a/files/fr/web/api/domrectreadonly/y/index.html b/files/fr/web/api/domrectreadonly/y/index.html index e1b2c23fb9..4daf265c51 100644 --- a/files/fr/web/api/domrectreadonly/y/index.html +++ b/files/fr/web/api/domrectreadonly/y/index.html @@ -19,11 +19,11 @@ translation_of: Web/API/DOMRectReadOnly/y
          var recY = DOMRect.y;
          -

          Valeur

          +

          Valeur

          Un double.

          -

          Spécifications

          +

          Spécifications

          diff --git a/files/fr/web/api/domstring/binary/index.html b/files/fr/web/api/domstring/binary/index.html index ecd56243e3..c58db9b8c9 100644 --- a/files/fr/web/api/domstring/binary/index.html +++ b/files/fr/web/api/domstring/binary/index.html @@ -8,24 +8,20 @@ tags: - données translation_of: Web/API/DOMString/Binary --- -

          Résumé

          +

          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.

          -
          -

          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.

          +

          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.

          +

          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 index 260cfe1187..7357eaec7a 100644 --- a/files/fr/web/api/domstring/index.html +++ b/files/fr/web/api/domstring/index.html @@ -8,9 +8,9 @@ tags: - 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.

          +

          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écifications

          @@ -45,9 +45,9 @@ translation_of: Web/API/DOMString

          Voir aussi

          diff --git a/files/fr/web/api/domstringlist/index.html b/files/fr/web/api/domstringlist/index.html index b0d89b14e6..dd5850119c 100644 --- a/files/fr/web/api/domstringlist/index.html +++ b/files/fr/web/api/domstringlist/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/DOMStringList ---

          {{ APIRef("DOM") }}

          -

          Un type renvoyé par certaines API contenant une liste de DOMString (chaînes de caractères).

          +

          Un type renvoyé par certaines API contenant une liste de DOMString (chaînes de caractères).

          Propriétés

          @@ -28,7 +28,7 @@ translation_of: Web/API/DOMStringList
          Renvoie un {{jsxref("Boolean")}} (booléen) indiquant si la chaîne de caractères donnée est dans la liste.
          -

          Spécifications

          +

          Spécifications

          diff --git a/files/fr/web/api/domtimestamp/index.html b/files/fr/web/api/domtimestamp/index.html index e70c4be3c3..6f9e563048 100644 --- a/files/fr/web/api/domtimestamp/index.html +++ b/files/fr/web/api/domtimestamp/index.html @@ -9,15 +9,10 @@ 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.

          +

          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écification

          -
            -
          - -
          -
          @@ -34,47 +29,3 @@ translation_of: Web/API/DOMTimeStamp
          - - - - - -
          -
          -
          -
          -
          -
          -
          -
           
          -
          -
          -
          -
          -
          -
          -
          diff --git a/files/fr/web/api/domtokenlist/add/index.html b/files/fr/web/api/domtokenlist/add/index.html index 472030ca72..b274f15ac0 100644 --- a/files/fr/web/api/domtokenlist/add/index.html +++ b/files/fr/web/api/domtokenlist/add/index.html @@ -51,7 +51,7 @@ span.textContent = classes;

          Vous pouvez ajouter plusieurs token :

          -
          span.classList.add("d", "e", "f");
          +
          span.classList.add("d", "e", "f");

          Spécifications

          @@ -72,8 +72,4 @@ span.textContent = classes;

          Compatibilité des navigateurs

          -
          {{Compat("api.DOMTokenList.add")}}
          - -
           
          - -
           
          +
          {{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 index 282e4743b2..9954b4108f 100644 --- a/files/fr/web/api/domtokenlist/contains/index.html +++ b/files/fr/web/api/domtokenlist/contains/index.html @@ -71,8 +71,4 @@ if(result) {

          Compatibilité des navigateurs

          -
          {{Compat("api.DOMTokenList.contains")}}
          - -
           
          - -

           

          +
          {{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 index 8e8527b904..8642f149aa 100644 --- a/files/fr/web/api/domtokenlist/entries/index.html +++ b/files/fr/web/api/domtokenlist/entries/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/DOMTokenList/entries

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

          +

          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 :

          diff --git a/files/fr/web/api/domtokenlist/foreach/index.html b/files/fr/web/api/domtokenlist/foreach/index.html index a472bdc26d..738ad80d7c 100644 --- a/files/fr/web/api/domtokenlist/foreach/index.html +++ b/files/fr/web/api/domtokenlist/foreach/index.html @@ -89,8 +89,6 @@ classes.forEach(
          {{Compat("api.DOMTokenList.forEach")}}
          -
           
          -

          Voir aussi

            diff --git a/files/fr/web/api/domtokenlist/index.html b/files/fr/web/api/domtokenlist/index.html index 0784f5b071..8f454506dd 100644 --- a/files/fr/web/api/domtokenlist/index.html +++ b/files/fr/web/api/domtokenlist/index.html @@ -48,23 +48,22 @@ translation_of: Web/API/DOMTokenList
            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

            -
            +

            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>
            +
            <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 + '"';
            +
            var para = document.querySelector("p");
            +var classes = para.classList;
            +para.classList.add("d");
            +para.textContent = 'paragraph classList is "' + classes + '"';

            La sortie ressemble à ceci :

            @@ -72,14 +71,14 @@ para.textContent 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 :

            +

            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>
            +
            <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 + '"';
            +
            var span = document.querySelector("span");
            +var classes = span.classList;
            +span.classList.add("x");
            +span.textContent = 'span classList is "' + classes + '"';

            La sortie ressemble à ceci :

            @@ -108,9 +107,7 @@ span.textContent -

            Voir aussi

            -
            • {{domxref("DOMSettableTokenList")}} : un objet qui étend DOMTokenList avec une propriété .value modifiable
            • diff --git a/files/fr/web/api/domtokenlist/item/index.html b/files/fr/web/api/domtokenlist/item/index.html index 1591d5c9fc..c3f6c7dc17 100644 --- a/files/fr/web/api/domtokenlist/item/index.html +++ b/files/fr/web/api/domtokenlist/item/index.html @@ -66,8 +66,4 @@ span.textContent = item;

        Compatibilité des navigateurs

        -
        {{Compat("api.DOMTokenList.item")}}
        - -
         
        - -

         

        +
        {{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 index 85855c60c6..b707fae355 100644 --- a/files/fr/web/api/domtokenlist/keys/index.html +++ b/files/fr/web/api/domtokenlist/keys/index.html @@ -69,8 +69,4 @@ for(var value of iterator) {

        Compatibilité des navigateurs

        -
        {{Compat("api.DOMTokenList.keys")}}
        - -
         
        - -
         
        +
        {{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 index 020d7bd7f6..1e21b1727f 100644 --- a/files/fr/web/api/domtokenlist/length/index.html +++ b/files/fr/web/api/domtokenlist/length/index.html @@ -61,8 +61,4 @@ span.textContent = 'classList length = ' + length;

        Compatibilité des navigateurs

        -
        {{Compat("api.DOMTokenList.length")}}
        - -
         
        - -
         
        +
        {{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 index b3721f931c..b68c42de55 100644 --- a/files/fr/web/api/domtokenlist/remove/index.html +++ b/files/fr/web/api/domtokenlist/remove/index.html @@ -48,7 +48,7 @@ span.textContent = classes;

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

        +

        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;
        @@ -76,10 +76,4 @@ span.textContent = classes;
         
         

        Compatibilité des navigateurs

        -
        {{Compat("api.DOMTokenList.remove")}}
        - -
         
        - -
         
        - -

         

        +
        {{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 index 64de0066fd..e3c1d8d799 100644 --- a/files/fr/web/api/domtokenlist/replace/index.html +++ b/files/fr/web/api/domtokenlist/replace/index.html @@ -73,8 +73,4 @@ try {

        Compatibilité des navigateurs

        -
        {{Compat("api.DOMTokenList.replace")}}
        - -
         
        - -
         
        +
        {{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 index b536c5f40c..b9fb5ea4cf 100644 --- a/files/fr/web/api/domtokenlist/supports/index.html +++ b/files/fr/web/api/domtokenlist/supports/index.html @@ -59,8 +59,4 @@ if (iframe.sandbox.supports('allow-scripts')) {

        Compatibilité des navigateurs

        -
        {{Compat("api.DOMTokenList.supports")}}
        - -
         
        - -
         
        +
        {{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 index 5dcf5826cf..ef036a01e7 100644 --- a/files/fr/web/api/domtokenlist/toggle/index.html +++ b/files/fr/web/api/domtokenlist/toggle/index.html @@ -75,8 +75,4 @@ span.onclick = function() {

        Compatibilité des navigateurs

        -
        {{Compat("api.DOMTokenList.toggle")}}
        - -
         
        - -
         
        +
        {{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 index 179b6dc852..da23f74aaf 100644 --- a/files/fr/web/api/domtokenlist/value/index.html +++ b/files/fr/web/api/domtokenlist/value/index.html @@ -58,8 +58,4 @@ span.textContent = classes.value;

        Compatibilité des navigateurs

        -
        {{Compat("api.DOMTokenList.value")}}
        - -
         
        - -
         
        +
        {{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 index 2abea40a04..294f75dd1c 100644 --- a/files/fr/web/api/domtokenlist/values/index.html +++ b/files/fr/web/api/domtokenlist/values/index.html @@ -67,8 +67,4 @@ for(var value of iterator) {

        Compatibilité des navigateurs

        -
        {{Compat("api.DOMTokenList.values")}}
        - -
         
        - -
         
        +
        {{Compat("api.DOMTokenList.values")}}
        \ No newline at end of file diff --git a/files/fr/web/api/element/animate/index.html b/files/fr/web/api/element/animate/index.html index 52da07fd40..acdf64b4b6 100644 --- a/files/fr/web/api/element/animate/index.html +++ b/files/fr/web/api/element/animate/index.html @@ -10,32 +10,29 @@ translation_of: Web/API/Element/animate

        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.

        -

        Les éléments peuvent avoir plusieurs animations. Vous pouvez obtenir une liste des animations qui affectent un élément en appelant {{domxref("Element.getAnimations()")}}.

        +

        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.

        -
        +

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

        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.
        +
        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")}}
        +
        +
        {{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.

        @@ -52,13 +49,11 @@ translation_of: Web/API/Element/animate
        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. +

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

         

        diff --git a/files/fr/web/api/element/attachshadow/index.html b/files/fr/web/api/element/attachshadow/index.html index 97ac7f7019..cde6764b54 100644 --- a/files/fr/web/api/element/attachshadow/index.html +++ b/files/fr/web/api/element/attachshadow/index.html @@ -5,11 +5,11 @@ 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.

        +

        La méthode Element.attachShadow() attache un arbre Shadow DOM à un élément spécifié et retourne une référence à son ShadowRoot.

        -

        Syntaxe

        +

        Syntaxe

        -
        var shadowroot = element.attachShadow(shadowRootInit);
        +
        var shadowroot = element.attachShadow(shadowRootInit);
         

        Paramètres

        diff --git a/files/fr/web/api/element/attributes/index.html b/files/fr/web/api/element/attributes/index.html index ad9ff22405..14c104bcfa 100644 --- a/files/fr/web/api/element/attributes/index.html +++ b/files/fr/web/api/element/attributes/index.html @@ -11,9 +11,9 @@ 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.

        +

        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

        +

        Syntaxe

        var attr = element.attributes;
         
        @@ -29,50 +29,50 @@ 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" style="color: green;">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>
        +

        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écifications

        @@ -112,5 +112,5 @@ var attr = para.attributes;
        • {{domxref("NamedNodeMap")}}, l'interface de l'objet retourné
        • -
        • Considérations de compatibilité entre navigateurs : sur quirksmode (en)
        • +
        • Considérations de compatibilité entre navigateurs : sur quirksmode (en)
        diff --git a/files/fr/web/api/element/childelementcount/index.html b/files/fr/web/api/element/childelementcount/index.html index 02b2f82a5b..a23de9fbaa 100644 --- a/files/fr/web/api/element/childelementcount/index.html +++ b/files/fr/web/api/element/childelementcount/index.html @@ -18,7 +18,7 @@ original_slug: Web/API/ParentNode/childElementCount

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

        -

        Cette propriété a été définie dans la pure interface {{domxref("ElementTraversal")}}.
        +

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

        @@ -36,30 +36,30 @@ original_slug: Web/API/ParentNode/childElementCount

        Exemple

        -
        var foo = document.getElementById("foo");
        -if (foo.childElementCount > 0) {
        -    // faire quelque chose
        -}
        +
        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);
        +
        ;(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

        @@ -93,7 +93,5 @@ original_slug: Web/API/ParentNode/childElementCount
        • Les interfaces pures {{domxref("ParentNode")}} et {{domxref("ChildNode")}}.
        • -
        • -
          Types d'objets implémentant cette interface pure : {{domxref("Document")}}, {{domxref("Element")}} et {{domxref("DocumentFragment")}}.
          -
        • +
        • Types d'objets implémentant cette interface pure : {{domxref("Document")}}, {{domxref("Element")}} et {{domxref("DocumentFragment")}}.
        diff --git a/files/fr/web/api/element/classlist/index.html b/files/fr/web/api/element/classlist/index.html index 569d6a92e7..62a8048b85 100644 --- a/files/fr/web/api/element/classlist/index.html +++ b/files/fr/web/api/element/classlist/index.html @@ -16,12 +16,12 @@ translation_of: Web/API/Element/classList

        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

        +

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

        +

        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

        @@ -34,7 +34,7 @@ translation_of: Web/API/Element/classList
        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 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.
        @@ -44,41 +44,41 @@ translation_of: Web/API/Element/classList

        Exemples

        -
        const div = document.createElement('div');
        -div.className = 'foo';
        +
        const div = document.createElement('div');
        +div.className = 'foo';
         
        -// notre point de départ: <div class="foo"></div>
        -console.log(div.outerHTML);
        +// 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");
        +// 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);
        +// <div class="anotherclass"></div>
        +console.log(div.outerHTML);
         
        -// si "visible" est défini, le supprimer, sinon, l'ajouter
        -div.classList.toggle("visible");
        +// 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 );
        +// 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"));
        +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
        +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);
        +// 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");
        +// remplacer la classe "foo" par la classe "bar" +div.classList.replace("foo", "bar");
        -

        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

        +

        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

        diff --git a/files/fr/web/api/element/classname/index.html b/files/fr/web/api/element/classname/index.html index 3796f5c7f0..125374a9db 100644 --- a/files/fr/web/api/element/classname/index.html +++ b/files/fr/web/api/element/classname/index.html @@ -11,9 +11,9 @@ 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é

        +

        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

        +

        Syntaxe

        var cName = elementNodeReference.className;
         elementNodeReference.className = cName;
        @@ -22,17 +22,17 @@ translation_of: Web/API/Element/className
      • cName est une String (chaîne de caractères) représentant la classe (ou les classes séparées par des espaces) de l'élément courant.
      • -

        Exemple

        +

        Exemple

        -
        let elm = document.getElementById('item');
        +
        let elm = document.getElementById('item');
         
        -if(elm.className === 'active'){
        -    elm.className = 'inactive';
        -} else {
        -    elm.className = 'active';
        -}
        +if(elm.className === 'active'){ + elm.className = 'inactive'; +} else { + elm.className = 'active'; +}
        -

        Notes

        +

        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.

        @@ -41,7 +41,7 @@ translation_of: Web/API/Element/className
        elm.setAttribute('class', elm.getAttribute('class'))
         
        -

        Spécifications

        +

        Spécifications

        diff --git a/files/fr/web/api/element/click_event/index.html b/files/fr/web/api/element/click_event/index.html index 69d42979d4..8e18c242d9 100644 --- a/files/fr/web/api/element/click_event/index.html +++ b/files/fr/web/api/element/click_event/index.html @@ -11,7 +11,7 @@ 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.

        +

        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.

        diff --git a/files/fr/web/api/element/clientleft/index.html b/files/fr/web/api/element/clientleft/index.html index 74de1b77da..72f3d71689 100644 --- a/files/fr/web/api/element/clientleft/index.html +++ b/files/fr/web/api/element/clientleft/index.html @@ -24,13 +24,44 @@ browser-compat: api.Element.clientLeft var left = element.clientLeft; -

        Exemple

        +

        Exemple

        -

        padding-top

        -

        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

        -

        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        -

        padding-bottom

        Left Top Right Bottom margin-top margin-bottom border-top border-bottom -
        +

        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

        diff --git a/files/fr/web/api/element/clientwidth/index.html b/files/fr/web/api/element/clientwidth/index.html index 6510d9fab8..9a3bd1012c 100644 --- a/files/fr/web/api/element/clientwidth/index.html +++ b/files/fr/web/api/element/clientwidth/index.html @@ -20,13 +20,13 @@ translation_of: Web/API/Element/clientWidth

        Syntaxe

        -
        var intElemClientWidth = element.clientWidth;
        +
        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

        -

        Image:Dimensions-client.png

        +

        Spécifications

        diff --git a/files/fr/web/api/element/closest/index.html b/files/fr/web/api/element/closest/index.html index 6854567823..61a0e9f93f 100644 --- a/files/fr/web/api/element/closest/index.html +++ b/files/fr/web/api/element/closest/index.html @@ -66,7 +66,7 @@ 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

        +

        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 :

        @@ -133,10 +133,6 @@ if (!Element.prototype.closest)
        • L'interface {{domxref("Element")}}
        • -
        • - -
        • -
        • -
          Autres méthodes utilisant des sélecteurs: {{domxref("element.querySelector()")}} et {{domxref("element.matches()")}}.
          -
        • +
        • La syntaxe pour les sélecteurs
        • +
        • Autres méthodes utilisant des sélecteurs: {{domxref("element.querySelector()")}} et {{domxref("element.matches()")}}.
        diff --git a/files/fr/web/api/element/compositionend_event/index.html b/files/fr/web/api/element/compositionend_event/index.html index 564090bd5b..546f6b3c5f 100644 --- a/files/fr/web/api/element/compositionend_event/index.html +++ b/files/fr/web/api/element/compositionend_event/index.html @@ -33,7 +33,7 @@ original_slug: Web/Events/compositionend

        Html

        -
        <div class="control">
        +
        <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>
        @@ -44,10 +44,7 @@ original_slug: Web/Events/compositionend
           <button class="clear-log">Effacer</button>
         </div>
        -

        JS

        -
        const inputElement = document.querySelector('input[type="text"]');
        +
        const inputElement = document.querySelector('input[type="text"]');
         const log = document.querySelector('.event-log-contents');
         const clearLog = document.querySelector('.clear-log');
         
        diff --git a/files/fr/web/api/element/compositionstart_event/index.html b/files/fr/web/api/element/compositionstart_event/index.html
        index 4cb57ef36e..4de27018bc 100644
        --- a/files/fr/web/api/element/compositionstart_event/index.html
        +++ b/files/fr/web/api/element/compositionstart_event/index.html
        @@ -60,10 +60,7 @@ inputElement.addEventListener('compositionstart', (event) => {
           <button class="clear-log">Clear</button>
         </div>
        -

        JS

        diff --git a/files/fr/web/api/element/contextmenu_event/index.html b/files/fr/web/api/element/contextmenu_event/index.html index 76096e954f..28b416e62e 100644 --- a/files/fr/web/api/element/contextmenu_event/index.html +++ b/files/fr/web/api/element/contextmenu_event/index.html @@ -12,7 +12,9 @@ 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.

        +

        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.

        diff --git a/files/fr/web/api/element/copy_event/index.html b/files/fr/web/api/element/copy_event/index.html index 6617dfc675..d4b370823a 100644 --- a/files/fr/web/api/element/copy_event/index.html +++ b/files/fr/web/api/element/copy_event/index.html @@ -9,23 +9,23 @@ original_slug: Web/Events/copy

        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
        +
        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){
        +
        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
        diff --git a/files/fr/web/api/element/dblclick_event/index.html b/files/fr/web/api/element/dblclick_event/index.html
        index 431a961e5f..9f82b49bd9 100644
        --- a/files/fr/web/api/element/dblclick_event/index.html
        +++ b/files/fr/web/api/element/dblclick_event/index.html
        @@ -12,7 +12,7 @@ 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).

        +

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

        diff --git a/files/fr/web/api/element/error_event/index.html b/files/fr/web/api/element/error_event/index.html index 474f4839d3..8c17b86401 100644 --- a/files/fr/web/api/element/error_event/index.html +++ b/files/fr/web/api/element/error_event/index.html @@ -10,26 +10,23 @@ tags: 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.

        +

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

        @@ -45,28 +42,28 @@ original_slug: Web/Events/error
        - + - + - + - + - - + + diff --git a/files/fr/web/api/element/focusin_event/index.html b/files/fr/web/api/element/focusin_event/index.html index 6310410cdd..4930d87a2e 100644 --- a/files/fr/web/api/element/focusin_event/index.html +++ b/files/fr/web/api/element/focusin_event/index.html @@ -4,13 +4,13 @@ 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.

        +

        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
        +
        DOM L3
        Interface
        {{domxref("FocusEvent")}}
        Propagation
        diff --git a/files/fr/web/api/element/focusout_event/index.html b/files/fr/web/api/element/focusout_event/index.html index 2d20d5050c..382060c404 100644 --- a/files/fr/web/api/element/focusout_event/index.html +++ b/files/fr/web/api/element/focusout_event/index.html @@ -10,7 +10,7 @@ original_slug: Web/Events/focusout
        Spécification
        -
        DOM L3
        +
        DOM L3
        Interface
        {{domxref("FocusEvent")}}
        Propagation
        diff --git a/files/fr/web/api/element/getattribute/index.html b/files/fr/web/api/element/getattribute/index.html index 5c50b4cd64..e0aa50f459 100644 --- a/files/fr/web/api/element/getattribute/index.html +++ b/files/fr/web/api/element/getattribute/index.html @@ -14,9 +14,9 @@ translation_of: Web/API/Element/getAttribute

        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

        +

        Syntaxe

        -
        let attribut = element.getAttribute(nom_attribut)
        +
        let attribut = element.getAttribute(nom_attribut)
         

        @@ -26,7 +26,7 @@ translation_of: Web/API/Element/getAttribute
      • nom_attribut est le nom de l'attribut dont on désire connaitre la valeur.
      • -

        Exemple

        +

        Exemple

        Soit l'HTML :

        @@ -34,7 +34,7 @@ translation_of: Web/API/Element/getAttribute

        Exemple de JavaScript :

        -
        const div1 = document.getElementById("div1");
        +
        const div1 = document.getElementById("div1");
         //=> <div id="div1">Hi Champ!</div>
         
         const attributID = div1.getAttribute("id");
        @@ -44,7 +44,7 @@ cont alignement = div1.getAttribute("align");
         //=> null
         
        -

        Description

        +

        Description

        Sensibilité à la casse

        @@ -58,14 +58,14 @@ cont alignement = div1.getAttribute("align");

        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");
        +
        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;
        +
        let nonce = script.nonce;
        -

        Spécifications

        +

        Spécifications

        target {{readonlyInline}}EventTargetEventTarget The event target (the topmost target in the DOM tree).
        type {{readonlyInline}}DOMStringDOMString The type of event.
        bubbles {{readonlyInline}}BooleanBoolean Whether the event normally bubbles or not.
        cancelable {{readonlyInline}}BooleanBoolean Whether the event is cancellable or not.
        view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)WindowProxydocument.defaultView (window of the document)
        detail {{readonlyInline}}
        @@ -80,6 +80,6 @@ cont alignement = div1.getAttribute("align");
        -

        Compatibilité des navigateurs

        +

        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 index 0fac66f4b1..d99f4465fe 100644 --- a/files/fr/web/api/element/getattributenames/index.html +++ b/files/fr/web/api/element/getattributenames/index.html @@ -15,12 +15,12 @@ translation_of: Web/API/Element/getAttributeNames

        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

        +

        Syntaxe

        let attributeNames = element.getAttributeNames();
         
        -

        Exemple

        +

        Exemple

        // Itérer sur les attributs de l'élément
         for(let name of element.getAttributeNames())
        @@ -32,7 +32,7 @@ for(let name of element.getAttributeNames())
         
         

        Polyfill

        -
        if (Element.prototype.getAttributeNames == undefined) {
        +
        if (Element.prototype.getAttributeNames == undefined) {
           Element.prototype.getAttributeNames = function () {
             var attributes = this.attributes;
             var length = attributes.length;
        @@ -42,7 +42,7 @@ for(let name of element.getAttributeNames())
             }
             return result;
           };
        -}
        +}

        Spécifications

        diff --git a/files/fr/web/api/element/getattributenode/index.html b/files/fr/web/api/element/getattributenode/index.html index efe33f1fa1..3fd3fd508d 100644 --- a/files/fr/web/api/element/getattributenode/index.html +++ b/files/fr/web/api/element/getattributenode/index.html @@ -12,20 +12,20 @@ translation_of: Web/API/Element/getAttributeNode ---

        {{ APIRef("DOM") }}

        -

        Résumé

        +

        Résumé

        Renvoie le nœud d'attribut spécifié pour l'élément courant, en tant que noeud Attr.

        -

        Syntaxe

        +

        Syntaxe

        -
        var attrNode = element.getAttributeNode(attrName);
        +
        var attrNode = element.getAttributeNode(attrName);
        • attrNode est un nœud Attr pour l'attribut demandé.
        • attrName est une chaîne de caractères qui contient le nom de l'attribut.
        -

        Exemple

        +

        Exemple

        // html: <div id="top" />
         var t = document.getElementById("top");
        @@ -33,7 +33,7 @@ var idAttr = t.getAttributeNode("id");
         alert(idAttr.value == "top")
         
        -

        Notes

        +

        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.

        @@ -43,11 +43,9 @@ alert(idAttr.value == "top")

        {{ DOMAttributeMethods() }}

        -

        Spécification

        +

        Spécification

        - -
         
        +
      • DOM Level 2 Core : getAttributeNodetraduction en français (non normative)
      • +
      • HTML 5: APIs in HTML documents
      • +
      \ 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 index f7d11eaaee..a9a9a56f60 100644 --- a/files/fr/web/api/element/getattributenodens/index.html +++ b/files/fr/web/api/element/getattributenodens/index.html @@ -5,16 +5,16 @@ translation_of: Web/API/Element/getAttributeNodeNS ---

      {{ ApiRef() }}

      -

      Résumé

      +

      Résumé

      Renvoie le nœud Attr pour l'attribut avec l'espace de noms et le nom donnés.

      -

      Syntaxe

      +

      Syntaxe

      attributeNode = element.getAttributeNodeNS(namespace,nodeName)
       
      -

      Paramètres

      +

      Paramètres

      attributeNode
      @@ -25,20 +25,16 @@ translation_of: Web/API/Element/getAttributeNodeNS
      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"

      +

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

      +

      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

      +

      Spécification

      - -
       
      - -

      {{ languages( { "en": "en/DOM/element.getAttributeNodeNS", "ja": "ja/DOM/element.getAttributeNodeNS", "pl": "pl/DOM/element.getAttributeNodeNS" } ) }}

      +
    • DOM Level 2 Core: getAttributeNodeNS (en) traduction en français (non normative)
    • +
    \ 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 index 81eb8f8c79..6a5d33ddb7 100644 --- a/files/fr/web/api/element/getattributens/index.html +++ b/files/fr/web/api/element/getattributens/index.html @@ -21,7 +21,7 @@ translation_of: Web/API/Element/getAttributeNS
    namespace
    -
    L'espace de noms dans lequel rechercher l'attribut spécifié.
    +
    L'espace de noms dans lequel rechercher l'attribut spécifié.
    name
    Le nom de l'attribut à chercher.
    @@ -31,7 +31,7 @@ translation_of: Web/API/Element/getAttributeNS

    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.

    +

    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

    @@ -80,7 +80,7 @@ translation_of: Web/API/Element/getAttributeNS

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

    +

    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() }}

    @@ -103,7 +103,7 @@ translation_of: Web/API/Element/getAttributeNS {{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. + 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()")}} diff --git a/files/fr/web/api/element/getboundingclientrect/index.html b/files/fr/web/api/element/getboundingclientrect/index.html index 7dd9a66904..7fef648005 100644 --- a/files/fr/web/api/element/getboundingclientrect/index.html +++ b/files/fr/web/api/element/getboundingclientrect/index.html @@ -27,7 +27,7 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/element/getelementsbytagname/index.html b/files/fr/web/api/element/getelementsbytagname/index.html index 634b46b5aa..8cbef3215e 100644 --- a/files/fr/web/api/element/getelementsbytagname/index.html +++ b/files/fr/web/api/element/getelementsbytagname/index.html @@ -11,13 +11,13 @@ 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.

    +

    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.

    +

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

    +

    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

    +

    Syntaxe

    elements = element.getElementsByTagName(tagName)
    @@ -27,17 +27,17 @@ translation_of: Web/API/Element/getElementsByTagName
  • tagName est le nom qualifié à rechercher. La chaîne spéciale "*" représente tous les éléments possibles. Pour la compatibilité avec XHTML, les minuscules doivent être utilisées.
  • -

    Exemple

    +

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

    diff --git a/files/fr/web/api/element/getelementsbytagnamens/index.html b/files/fr/web/api/element/getelementsbytagnamens/index.html index 51c55029de..3bb1bbba96 100644 --- a/files/fr/web/api/element/getelementsbytagnamens/index.html +++ b/files/fr/web/api/element/getelementsbytagnamens/index.html @@ -11,9 +11,9 @@ 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.

    +

    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

    +

    Syntaxe

    elements = element.getElementsByTagNameNS(namespaceURI,localName);
    @@ -21,7 +21,7 @@ translation_of: Web/API/Element/getElementsByTagNameNS
    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.
    +
    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")}}.
    @@ -30,11 +30,11 @@ translation_of: Web/API/Element/getElementsByTagNameNS

    Une collection {{domxref("HTMLCollection")}} des éléments trouvés, dans l'ordre d'apparition dans l'arbre du DOM.

    -

    Exemples

    +

    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");
    +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") {
    diff --git a/files/fr/web/api/element/hasattribute/index.html b/files/fr/web/api/element/hasattribute/index.html
    index 144fd3ec78..5c90c03771 100644
    --- a/files/fr/web/api/element/hasattribute/index.html
    +++ b/files/fr/web/api/element/hasattribute/index.html
    @@ -13,7 +13,7 @@ translation_of: Web/API/Element/hasAttribute
     
     

    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

    +

    Syntaxe

    var result = element.hasAttribute(name);
     
    @@ -25,27 +25,27 @@ translation_of: Web/API/Element/hasAttribute
    est une chaine de caractères représentant le nom de l'attribut.
    -

    Exemple

    +

    Exemple

    -
    var foo = document.getElementById("foo");
    -if (foo.hasAttribute("bar")) {
    -    // faire quelque chose
    -}
    +
    var foo = document.getElementById("foo");
    +if (foo.hasAttribute("bar")) {
    +    // faire quelque chose
    +}
    -

    Polyfill

    +

    Polyfill

    -
    ;(function(prototype) {
    -    prototype.hasAttribute = prototype.hasAttribute || function(name) {
    -        return !!(this.attributes[name] &&
    -                  this.attributes[name].specified);
    -    }
    -})(Element.prototype);
    +
    ;(function(prototype) {
    +    prototype.hasAttribute = prototype.hasAttribute || function(name) {
    +        return !!(this.attributes[name] &&
    +                  this.attributes[name].specified);
    +    }
    +})(Element.prototype);
    -

    Notes

    +

    Notes

    {{DOMAttributeMethods}}

    -

    Spécification

    +

    Spécification

    diff --git a/files/fr/web/api/element/hasattributens/index.html b/files/fr/web/api/element/hasattributens/index.html index d927bbc3c3..d30aca00e1 100644 --- a/files/fr/web/api/element/hasattributens/index.html +++ b/files/fr/web/api/element/hasattributens/index.html @@ -11,16 +11,16 @@ translation_of: Web/API/Element/hasAttributeNS ---

    {{ APIRef("DOM") }}

    -

    Résumé

    +

    Résumé

    hasAttributeNS renvoie une valeur booléenne indiquant si l'élément courant possède ou non l'attribut spécifié.

    -

    Syntaxe

    +

    Syntaxe

    -
    result =
    +
    result =
     element.hasAttributeNS(
     namespace,
    -localName)
    +localName)
    result
    @@ -31,24 +31,24 @@ localName)
    Le nom de l'attribut.
    -

    Exemple

    +

    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/",
    +        "http://www.mozilla.org/ns/specialspace/",
             "special-align")) {
        d.setAttribute("align", "center");
     }
     
    -

    Notes

    +

    Notes

    {{ DOMAttributeMethods() }}

    -

    Spécification

    +

    Spécification

    diff --git a/files/fr/web/api/element/id/index.html b/files/fr/web/api/element/id/index.html index beab7c88e1..29e4752a20 100644 --- a/files/fr/web/api/element/id/index.html +++ b/files/fr/web/api/element/id/index.html @@ -11,15 +11,15 @@ 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.

    +

    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.

    +

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

    +

    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

    +

    Syntaxe

    var idStr = elt.id; // Obtenez l'identifiant
     elt.id = idStr; // Définir l'identifiant
    @@ -64,5 +64,5 @@ translation_of: Web/API/Element/id

    Voir aussi

      -
    • L'attribut global id de DOM.
    • +
    • L'attribut global id de DOM.
    diff --git a/files/fr/web/api/element/index.html b/files/fr/web/api/element/index.html index e18976658c..ac94a2ffc9 100644 --- a/files/fr/web/api/element/index.html +++ b/files/fr/web/api/element/index.html @@ -195,7 +195,7 @@ browser-compat: api.Element
    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.
    +
    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}}
    @@ -350,7 +350,7 @@ browser-compat: api.Element
    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.
    +
    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.
    @@ -358,11 +358,11 @@ browser-compat: api.Element

    Évènements relatifs au clavier

    -
    keydown
    +
    keydown
    Déclenché lors de l'appui sur une touche du clavier. Également disponible via la propriété onkeydown.
    -
    keypress
    +
    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
    +
    keyup
    Déclenché lorsqu'une touche est relâchée. Également disponible via la propriété onkeyup.
    diff --git a/files/fr/web/api/element/innerhtml/index.html b/files/fr/web/api/element/innerhtml/index.html index 5860811bfe..91ab29da37 100644 --- a/files/fr/web/api/element/innerhtml/index.html +++ b/files/fr/web/api/element/innerhtml/index.html @@ -14,13 +14,15 @@ original_slug: Web/API/Element/innertHTML

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

    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

    +

    Syntaxe

    -
    const content = element.innerHTML;
    +
    const content = element.innerHTML;
     
     element.innerHTML = htmlString;
     
    @@ -46,12 +48,12 @@ original_slug: Web/API/Element/innertHTML

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

    +

    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

    @@ -60,13 +62,13 @@ original_slug: Web/API/Element/innertHTML

    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 = "";
    +
    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>";
    +
    document.documentElement.innerHTML = "<pre>" +
    +         document.documentElement.innerHTML.replace(/</g,"&lt;") +
    +            "</pre>";

    Détails opérationnels

    @@ -82,92 +84,92 @@ original_slug: Web/API/Element/innertHTML

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

    +

    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

    +

    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");
    +
    function log(msg) {
    +  var logElem = document.querySelector(".log");
     
    -  var time = new Date();
    -  var timeStr = time.toLocaleTimeString();
    -  logElem.innerHTML += timeStr + ": " + msg + "<br/>";
    -}
    +  var time = new Date();
    +  var timeStr = time.toLocaleTimeString();
    +  logElem.innerHTML += timeStr + ": " + msg + "<br/>";
    +}
     
    -log("Logging mouse events inside this container...");
    +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);
    -}
    +
    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");
    +
    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);
    +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>
    +
    <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.

    +

    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

    +

    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;
    -}
    +
    .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;
    -}
    +.log { + margin-top: 8px; + font-family: monospace; +}

    Résultat

    @@ -175,11 +177,11 @@ boxElem.addE

    {{EmbedLiveSample("Exemple", 640, 350)}}

    -

    Spécification

    +

    Spécification

    - + @@ -194,7 +196,7 @@ boxElem.addE
    Spécification Statut Commentaire
    -

    Voir aussi

    +

    Voir aussi

    • {{domxref("Node.textContent")}} and {{domxref("Node.innerText")}}
    • diff --git a/files/fr/web/api/element/insertadjacentelement/index.html b/files/fr/web/api/element/insertadjacentelement/index.html index 5a32d25f64..8587eb5de0 100644 --- a/files/fr/web/api/element/insertadjacentelement/index.html +++ b/files/fr/web/api/element/insertadjacentelement/index.html @@ -11,9 +11,9 @@ 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é.

      +

      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

      +

      Syntaxe

      targetElement.insertAdjacentElement(position, element);
      @@ -23,10 +23,10 @@ translation_of: Web/API/Element/insertAdjacentElement
      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.
      • +
      • '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
      @@ -60,17 +60,19 @@ translation_of: Web/API/Element/insertAdjacentElement

      Visualisation des positionnements

      -
      <!-- beforebegin -->
      -<p>
      -<!-- afterbegin -->
      +
      <!-- beforebegin -->
      +<p>
      +<!-- afterbegin -->
       foo
      -<!-- beforeend -->
      -</p>
      -<!-- afterend -->
      +<!-- 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.
      +
      +

      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

      +

      Exemple

      beforeBtn.addEventListener('click', function() {
         var tempDiv = document.createElement('div');
      @@ -92,7 +94,7 @@ afterBtn.addEventListener('click', function() {
       
       

      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écification

      diff --git a/files/fr/web/api/element/insertadjacenthtml/index.html b/files/fr/web/api/element/insertadjacenthtml/index.html index b82e7dc4a5..e1f0ffa06a 100644 --- a/files/fr/web/api/element/insertadjacenthtml/index.html +++ b/files/fr/web/api/element/insertadjacenthtml/index.html @@ -10,11 +10,11 @@ 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.

      +

      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

      +

      Syntaxe

      -
      element.insertAdjacentHTML(position, text);
      +
      element.insertAdjacentHTML(position, text);

      Paramètres

      @@ -24,10 +24,10 @@ translation_of: Web/API/Element/insertAdjacentHTML
        -
      • 'beforebegin' : Avant l'element  lui-même.
      • -
      • 'afterbegin' : Juste à l'intérieur de l'element , avant son premier enfant.
      • -
      • 'beforeend' : Juste à l'intérieur de l'element , après son dernier enfant.
      • -
      • 'afterend' : Après element lui-même.
      • +
      • 'beforebegin' : Avant l'element  lui-même.
      • +
      • 'afterbegin' : Juste à l'intérieur de l'element , avant son premier enfant.
      • +
      • 'beforeend' : Juste à l'intérieur de l'element , après son dernier enfant.
      • +
      • 'afterend' : Après element lui-même.
      @@ -37,21 +37,20 @@ translation_of: Web/API/Element/insertAdjacentHTML

      Visualisation des noms de position

      -
      -
      -
      <!-- beforebegin -->
      -<p>
      -  <!-- afterbegin -->
      +
      +
      <!-- beforebegin -->
      +<p>
      +  <!-- afterbegin -->
         foo
      -  <!-- beforeend -->
      -</p>
      -<!-- afterend -->
      -
      -
      + <!-- beforeend --> +</p> +<!-- afterend --> -
      Note : Les positions beforebegin et afterend ne fonctionnent que si le noeud est un arbre et a un élément parent.
      +
      +

      Note : Les positions beforebegin et afterend ne fonctionnent que si le noeud est un arbre et a un élément parent.

      +
      -

      Exemple

      +

      Exemple

      // <div id="one">one</div>
       var d1 = document.getElementById('one');
      @@ -60,13 +59,13 @@ d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
       // Ici la nouvelle structure est :
       // <div id="one">one</div><div id="two">two</div>
      -

      Notes

      +

      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.

      +

      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.

      +

      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

      @@ -96,5 +95,5 @@ d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
      • {{domxref("Element.insertAdjacentElement()")}}
      • {{domxref("Element.insertAdjacentText()")}}
      • -
      • hacks.mozilla.org guest post par Henri Sivonen y compris le benchmark montrant que insertAdjacentHTML peut être beaucoup plus rapide dans certains cas.
      • +
      • hacks.mozilla.org guest post par Henri Sivonen y compris le benchmark montrant que insertAdjacentHTML peut être beaucoup plus rapide dans certains cas.
      diff --git a/files/fr/web/api/element/insertadjacenttext/index.html b/files/fr/web/api/element/insertadjacenttext/index.html index 4a1b519fae..f0ab71ddad 100644 --- a/files/fr/web/api/element/insertadjacenttext/index.html +++ b/files/fr/web/api/element/insertadjacenttext/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Element/insertAdjacentText

      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

      +

      Syntaxe

      element.insertAdjacentText(position, element);
      @@ -24,10 +24,10 @@ translation_of: Web/API/Element/insertAdjacentText
      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.
      • +
      • '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
      @@ -57,17 +57,19 @@ translation_of: Web/API/Element/insertAdjacentText

      Visualisation des noms de position

      -
      <!-- beforebegin -->
      -<p>
      -<!-- afterbegin -->
      +
      <!-- beforebegin -->
      +<p>
      +<!-- afterbegin> -->
       machin
      -<!-- beforeend -->
      -</p>
      -<!-- afterend -->
      +<!-- 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.
      +
      +

      Note : Les positions beforebegin et afterend ne fonctionnent que si le noeud est dans l'arbre et possède un élément parent.

      +
      -

      Exemple

      +

      Exemple

      beforeBtn.addEventListener('click', function() {
         para.insertAdjacentText('afterbegin',textInput.value);
      @@ -94,7 +96,7 @@ afterBtn.addEventListener('click', function() {
         }
       
      -

      Spécification

      +

      Spécification

      diff --git a/files/fr/web/api/element/localname/index.html b/files/fr/web/api/element/localname/index.html index 8aea87173b..d64738b272 100644 --- a/files/fr/web/api/element/localname/index.html +++ b/files/fr/web/api/element/localname/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/Element/localName

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

      -

      Dans les versions précédentes de la spécification DOM, cet API était défini dans l'interface {{domxref("Node")}}.

      +

      Note : Dans les versions précédentes de la spécification DOM, cet API était défini dans l'interface {{domxref("Node")}}.

      Syntaxe

      diff --git a/files/fr/web/api/element/matches/index.html b/files/fr/web/api/element/matches/index.html index 00ae129138..21e4a2ee68 100644 --- a/files/fr/web/api/element/matches/index.html +++ b/files/fr/web/api/element/matches/index.html @@ -12,10 +12,10 @@ translation_of: Web/API/Element/matches

      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.

      -

      Certains navigateurs implémentent cette méthode sous le nom matchesSelector() non-standardisé et préfixé.

      +

      Attention : Certains navigateurs implémentent cette méthode sous le nom matchesSelector() non-standardisé et préfixé.

      -

      Syntaxe

      +

      Syntaxe

      var result = element.matches(selectorString);
       
      @@ -25,23 +25,23 @@ translation_of: Web/API/Element/matches
    • selectorString est une chaîne définissant le sélecteur à tester sur l'élément.
    • -

      Exemple

      +

      Exemple

      -
      <ul id="birds">
      -  <li>perroquet amazone</li>
      -  <li class="endangered">aigle des Philippines</li>
      -  <li>pélican blanc</li>
      -</ul>
      +
      <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');
      +<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>
      + 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.

      @@ -73,9 +73,9 @@ translation_of: Web/API/Element/matches

      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) {
      +
      if (!Element.prototype.matches) {
           Element.prototype.matches = Element.prototype.msMatchesSelector;
      -}
      +}

      Spécification

      @@ -103,6 +103,6 @@ translation_of: Web/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 index 8569c6878b..98ab94299d 100644 --- a/files/fr/web/api/element/mousedown_event/index.html +++ b/files/fr/web/api/element/mousedown_event/index.html @@ -12,9 +12,9 @@ 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.

      +

      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.

      @@ -43,7 +43,7 @@ translation_of: Web/API/Element/mousedown_event

      {{page("/fr/docs/Web/API/Element/mousemove_event", "Exemples")}}

      -

      Spécifications

      +

      Spécifications

      diff --git a/files/fr/web/api/element/mouseenter_event/index.html b/files/fr/web/api/element/mouseenter_event/index.html index 02fcb024bd..ba2623f7c6 100644 --- a/files/fr/web/api/element/mouseenter_event/index.html +++ b/files/fr/web/api/element/mouseenter_event/index.html @@ -12,7 +12,7 @@ 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.

      +

      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.

      @@ -39,12 +39,12 @@ translation_of: Web/API/Element/mouseenter_event

      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.png
      -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. -
      mouseover.png
      -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.
      + +

      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.

      diff --git a/files/fr/web/api/element/mouseleave_event/index.html b/files/fr/web/api/element/mouseleave_event/index.html index 48425a84f8..2c9ee0d534 100644 --- a/files/fr/web/api/element/mouseleave_event/index.html +++ b/files/fr/web/api/element/mouseleave_event/index.html @@ -12,7 +12,7 @@ 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.

      +

      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.

      @@ -37,12 +37,11 @@ translation_of: Web/API/Element/mouseleave_event

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

      -
      -
      mouseenter.png
      -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 é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.

      -
      mouseover.png
      -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.
      + +

      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

      diff --git a/files/fr/web/api/element/mousemove_event/index.html b/files/fr/web/api/element/mousemove_event/index.html index 3130ac80aa..d848446fb1 100644 --- a/files/fr/web/api/element/mousemove_event/index.html +++ b/files/fr/web/api/element/mousemove_event/index.html @@ -13,7 +13,7 @@ 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.

      +

      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.

      diff --git a/files/fr/web/api/element/mouseout_event/index.html b/files/fr/web/api/element/mouseout_event/index.html index ee0921b941..0e44a3ae9f 100644 --- a/files/fr/web/api/element/mouseout_event/index.html +++ b/files/fr/web/api/element/mouseout_event/index.html @@ -12,7 +12,7 @@ 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.

      +

      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.

      @@ -37,7 +37,7 @@ translation_of: Web/API/Element/mouseout_event

      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.

      +

      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.

      diff --git a/files/fr/web/api/element/mouseover_event/index.html b/files/fr/web/api/element/mouseover_event/index.html index 9cfdbc5ba0..368e39ddfe 100644 --- a/files/fr/web/api/element/mouseover_event/index.html +++ b/files/fr/web/api/element/mouseover_event/index.html @@ -12,7 +12,7 @@ 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.

      +

      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.

      @@ -37,7 +37,7 @@ translation_of: Web/API/Element/mouseover_event

      Exemples

      -

      L'exemple suivant illustre la différence entre les évènements mouseover et mouseenter.

      +

      L'exemple suivant illustre la différence entre les évènements mouseover et mouseenter.

      HTML

      diff --git a/files/fr/web/api/element/mouseup_event/index.html b/files/fr/web/api/element/mouseup_event/index.html index 1faf2195d2..8dcab880a9 100644 --- a/files/fr/web/api/element/mouseup_event/index.html +++ b/files/fr/web/api/element/mouseup_event/index.html @@ -13,7 +13,9 @@ 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.

      +

      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.

      diff --git a/files/fr/web/api/element/namespaceuri/index.html b/files/fr/web/api/element/namespaceuri/index.html index 11d1c2a4a7..998f6a875e 100644 --- a/files/fr/web/api/element/namespaceuri/index.html +++ b/files/fr/web/api/element/namespaceuri/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Element/namespaceURI

      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.

      -

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

      +

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

      Syntaxe

      @@ -31,13 +31,13 @@ translation_of: Web/API/Element/namespaceURI // c'est un navigateur XUL } -

      Notes

      +

      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")}}

      +

      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.

      +

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

      diff --git a/files/fr/web/api/element/outerhtml/index.html b/files/fr/web/api/element/outerhtml/index.html index e9ed7dddf1..243fac13e5 100644 --- a/files/fr/web/api/element/outerhtml/index.html +++ b/files/fr/web/api/element/outerhtml/index.html @@ -14,17 +14,17 @@ translation_of: Web/API/Element/outerHTML

      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

      +

      Syntaxe

      -
      var content = element.outerHTML;
      +
      var content = element.outerHTML;
       
      -element.outerHTML = htmlString;
      +element.outerHTML = htmlString;
      -

      Valeur

      +

      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

      +

      Exceptions

      SyntaxError
      @@ -33,7 +33,7 @@ element.outerHTML = htmlString;
      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

      +

      Exemples

      Récupérer la valeur de la propriété outerHTML d'un élément :

      @@ -67,9 +67,9 @@ console.log(container.firstChild.nodeName); // affiche "P"

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

      @@ -79,7 +79,7 @@ p.outerHTML = "<div>Ce div remplace un paragraph.</div>"; console.log(p.nodeName); // toujours "P"; -

      Spécification

      +

      Spécification

      diff --git a/files/fr/web/api/element/prefix/index.html b/files/fr/web/api/element/prefix/index.html index 814f2987ff..638e979793 100644 --- a/files/fr/web/api/element/prefix/index.html +++ b/files/fr/web/api/element/prefix/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Element/prefix

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

      -

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

      +

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

      Syntaxe

      diff --git a/files/fr/web/api/element/queryselectorall/index.html b/files/fr/web/api/element/queryselectorall/index.html index a82dccd008..cab55d02fe 100644 --- a/files/fr/web/api/element/queryselectorall/index.html +++ b/files/fr/web/api/element/queryselectorall/index.html @@ -26,53 +26,53 @@ translation_of: Web/API/Element/querySelectorAll
      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.
      +
      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

      +

      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.

      +

      Note : Si le selectors spécifié inclus un pseudo-element CSS, la liste renvoyée est toujours vide.

      -

      Exception

      +

      Exception

      SyntaxError
      La syntaxe de la chaîne du selectors spécifié n'est pas correcte.
      -

      Exemples

      +

      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");
      +
      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");
      +
      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");
      +
      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':

      +

      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]");
      +
      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]");
      +
      var container = document.querySelector("#userlist");
      +var matches = container.querySelectorAll("li[data-active=1]");

      Accès aux correspondances

      @@ -80,13 +80,13 @@ translation_of: Web/API/Element/querySelectorAll

      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");
      +
      var highlightedItems = userList.querySelectorAll(".highlighted");
       
      -highlightedItems.forEach(function(userItem) {
      -  deleteUser(userItem);
      -});
      +highlightedItems.forEach(function(userItem) { + deleteUser(userItem); +});
      -

      Notes d'utilisation

      +

      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.

      @@ -94,26 +94,26 @@ highlightedItems. -
      <div class="outer">
      -  <div class="select">
      -    <div class="inner">
      -    </div>
      -  </div>
      -</div>
      +
      <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!
      +
      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 :

      +

      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
      +
      var select = document.querySelector('.select');
      +var inner = select.querySelectorAll(':scope .outer .inner');
      +inner.length; // 0

      Spécifications

      @@ -155,12 +155,12 @@ inner.lengthLocalisation des éléments DOM avec les sélecteurs -
    • Sélecteurs d'attribut dans le guide CSS
    • -
    • Sélecteurs d'attribut dans la zone d'apprentissage de MDN
    • +
    • Localisation des éléments DOM avec les sélecteurs
    • +
    • Sélecteurs d'attribut dans le guide CSS
    • +
    • Sélecteurs d'attribut dans la zone d'apprentissage de MDN
    • {{domxref("element.querySelector()")}}
    • {{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}
    • {{domxref("DocumentFragment.querySelector()")}} et {{domxref("DocumentFragment.querySelectorAll()")}}
    • {{domxref("document.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}
    • -
    • Extraits de code pour querySelector
    • +
    • Extraits de code pour querySelector
    • diff --git a/files/fr/web/api/element/removeattribute/index.html b/files/fr/web/api/element/removeattribute/index.html index 1a1d2fde8f..b27f3eb813 100644 --- a/files/fr/web/api/element/removeattribute/index.html +++ b/files/fr/web/api/element/removeattribute/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Element/removeAttribute

      removeAttribute supprime un attribut de l'élément spécifié.

      -

      Syntaxe

      +

      Syntaxe

      element.removeAttribute(nomAttribut);
       
      @@ -23,14 +23,14 @@ translation_of: Web/API/Element/removeAttribute
    • nomAttribut est une chaîne de caractères représentant le nom de l'attribut à enlever de l'element .
    • -

      Exemple

      +

      Exemple

      // avant : <div id="div1" align="left" width="200">
       document.getElementById("div1").removeAttribute("align");
       // maintenant : <div id="div1" width="200">
       
      -

      Notes

      +

      Notes

      Il vaut mieux utiliser removeAttribute plutôt que de définir la valeur de l'attribut à null avec setAttribute.

      @@ -40,12 +40,8 @@ document.getElementById("div1").removeAttribute("align");

      {{ DOMAttributeMethods() }}

      -

      Spécification

      +

      Spécification

      - -

      Interwiki Language Links

      - -
       
      diff --git a/files/fr/web/api/element/removeattributenode/index.html b/files/fr/web/api/element/removeattributenode/index.html index ebee4f2e03..4ecd896414 100644 --- a/files/fr/web/api/element/removeattributenode/index.html +++ b/files/fr/web/api/element/removeattributenode/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Element/removeAttributeNode

      removeAttributeNode enlève l'attribut spécifié de l'élément courant.

      -

      Syntaxe

      +

      Syntaxe

      removedAttr =element.removeAttributeNode(attributeNode)
       
      @@ -22,15 +22,15 @@ translation_of: Web/API/Element/removeAttributeNode
    • removedAttr est le nœud Attr qui vient d'être enlevé.
    • -

      Exemple

      +

      Exemple

      -
      // <div id="top" align="center" />
      +
      // <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" />
      +// align est maintenant supprimé : <div id="top" />
      -

      Notes

      +

      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.

      @@ -38,8 +38,8 @@ d.removeAttributeNode(d_align);

      {{ DOMAttributeMethods() }}

      -

      Spécification

      +

      Spécification

      diff --git a/files/fr/web/api/element/removeattributens/index.html b/files/fr/web/api/element/removeattributens/index.html index 301d873233..457c552bb9 100644 --- a/files/fr/web/api/element/removeattributens/index.html +++ b/files/fr/web/api/element/removeattributens/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Element/removeAttributeNS

      Dans Firefox 3 et postérieurs, cette méthode réinitialise les valeurs DOM à leur valeur par défaut.

      -

      Syntaxe

      +

      Syntaxe

      element.removeAttributeNS(namespace,attrName);
       
      @@ -33,12 +33,12 @@ d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign"); // l'élément est devenu : <div id="div1" width="200px" /> -

      Notes

      +

      Notes

      {{ DOMAttributeMethods() }}

      -

      Spécification

      +

      Spécification

      diff --git a/files/fr/web/api/element/requestfullscreen/index.html b/files/fr/web/api/element/requestfullscreen/index.html index fb27e1ab93..ad1dbf6456 100644 --- a/files/fr/web/api/element/requestfullscreen/index.html +++ b/files/fr/web/api/element/requestfullscreen/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Element/requestFullScreen

      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.

      -

      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.

      +

      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

      diff --git a/files/fr/web/api/element/scrollheight/index.html b/files/fr/web/api/element/scrollheight/index.html index 64aa93f7ae..80bddbcd99 100644 --- a/files/fr/web/api/element/scrollheight/index.html +++ b/files/fr/web/api/element/scrollheight/index.html @@ -8,35 +8,105 @@ translation_of: Web/API/Element/scrollHeight

      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.

      -

      Cette propriété arrondit la valeur à l'entier le plus proche. Si vous avez besoin d'une valeur précise, utilisez element.getBoundingClientRect().

      +

      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

      +

      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

      + +

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

      padding-top

      +#rules { + width: 600px; + height: 130px; + padding: 5px; + border: #2A9F00 solid 2px; + border-radius: 5px; +}
      -

      Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.

      +

      JavaScript

      -

      All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

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

      Cat image and text coming from www.best-cat-art.com

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

      padding-bottom

      - -LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }} +

      Résultat

      -

      Image:scrollHeight.png

      +

      {{EmbedLiveSample('Exemple', '640', '400')}}

      -

      Problèmes et solutions

      +

      Problèmes et solutions

      Déterminer si un élément a complètement été défilé

      @@ -72,11 +142,11 @@ onload = function () {   checkReading.call(oToBeRead); } -

      Voir l'exemple en action

      +

      Voir l'exemple en action

      -

      Spécification

      +

      Spécification

      -

      scrollHeight fait partie du modèle objet DHTML de Microsoft Internet Explorer. Elle fait partie de la spécification : {{ SpecName("CSSOM View") }}.

      +

      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

      @@ -109,7 +179,7 @@ onload = function () {

      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

      +

      Voir aussi

      • MSDN: Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9
      • diff --git a/files/fr/web/api/element/scrollintoview/index.html b/files/fr/web/api/element/scrollintoview/index.html index c340c512d7..3dfbb5504a 100644 --- a/files/fr/web/api/element/scrollintoview/index.html +++ b/files/fr/web/api/element/scrollintoview/index.html @@ -12,21 +12,18 @@ translation_of: Web/API/Element/scrollIntoView

        La méthode Element.scrollIntoView() fait défiler la page de manière à rendre l'élément visible.

        -

        Syntaxe

        +

        Syntaxe

        element.scrollIntoView();
         element.scrollIntoView(alignToTop); // Paramètre booléen
         element.scrollIntoView(scrollIntoViewOptions); // Paramètre d'objet
         
        +

        Paramètres

        +
        -
        -

        Paramètres

        -
        alignToTop {{ optional_inline() }}
        -
        -

        est une valeur {{jsxref("Boolean")}} optionnelle qui :

        - +

        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"}.
        • @@ -52,11 +49,11 @@ element.scrollIntoView({block: "end"}); element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"}); -

          Notes

          +

          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écification

      diff --git a/files/fr/web/api/element/scrollintoviewifneeded/index.html b/files/fr/web/api/element/scrollintoviewifneeded/index.html index f6f4236349..c03e499120 100644 --- a/files/fr/web/api/element/scrollintoviewifneeded/index.html +++ b/files/fr/web/api/element/scrollintoviewifneeded/index.html @@ -43,5 +43,5 @@ translation_of: Web/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 index da44c622ff..9d22971f19 100644 --- a/files/fr/web/api/element/scrollleft/index.html +++ b/files/fr/web/api/element/scrollleft/index.html @@ -8,11 +8,11 @@ translation_of: Web/API/Element/scrollLeft ---

      {{ ApiRef() }}

      -

      Résumé

      +

      Résumé

      Définit ou obtient le nombre de pixels dont le contenu est défilé vers la gauche.

      -

      Syntaxe

      +

      Syntaxe

      // Obtient le nombre de pixels défilés
       var sLeft = element.scrollLeft;
      @@ -32,7 +32,7 @@ var sLeft = element.scrollLeft;
        
    • S'il reçoit une valeur plus grande que le maximum dont le contenu peut défiler, scrollLeft est mis au maximum.
    • -

      Exemple

      +

      Exemple

      <script type="text/javascript">
       
      @@ -58,14 +58,14 @@ for (var i=0; i<100; ++i){
       >
       
      -

      Spécification

      +

      Spécification

      {{ DOM0() }}

      -

      Références

      +

      Références

      {{ languages( { "en": "en/DOM/element.scrollLeft", "pl": "pl/DOM/element.scrollLeft" } ) }}

      diff --git a/files/fr/web/api/element/scrollto/index.html b/files/fr/web/api/element/scrollto/index.html index 8e5c9d4790..ba30e5fecb 100644 --- a/files/fr/web/api/element/scrollto/index.html +++ b/files/fr/web/api/element/scrollto/index.html @@ -13,13 +13,13 @@ translation_of: Web/API/Element/scrollTo

      La méthode scrollTo() de l'interface {{domxref("Element")}} permet de faire défiler le document jusqu'à un jeu de coordonnées particulier.

      -

      Syntaxe

      +

      Syntaxe

      element.scrollTo(x-coord, y-coord)
       element.scrollTo(options)
       
      -

      Paramètres

      +

      Paramètres

      • x-coord est le pixel le long de l'axe horizontal du document qui doit être affiché en haut à gauche.
      • @@ -32,7 +32,7 @@ element.scrollTo(options)
      • options est un dictionnaire de type {{domxref("ScrollToOptions")}}.
      -

      Exemples

      +

      Exemples

      En utilisant des coordonnées :

      @@ -47,7 +47,7 @@ element.scrollTo(options) behavior: 'smooth' });
      -

      Spécifications

      +

      Spécifications

      diff --git a/files/fr/web/api/element/scrolltop/index.html b/files/fr/web/api/element/scrolltop/index.html index 0053f0ab7b..4b3d0ef24b 100644 --- a/files/fr/web/api/element/scrolltop/index.html +++ b/files/fr/web/api/element/scrolltop/index.html @@ -10,14 +10,14 @@ 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 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.

      -
      -

      Pour les systèmes qui utilisent un affichage mis à l'échelle (display scaling), scrollTop peut fournir une valeur décimale.

      +
      +

      Attention : Pour les systèmes qui utilisent un affichage mis à l'échelle (display scaling), scrollTop peut fournir une valeur décimale.

      Syntaxe

      diff --git a/files/fr/web/api/element/scrollwidth/index.html b/files/fr/web/api/element/scrollwidth/index.html index 92fbdc41e1..99dd56426d 100644 --- a/files/fr/web/api/element/scrollwidth/index.html +++ b/files/fr/web/api/element/scrollwidth/index.html @@ -6,13 +6,13 @@ tags: translation_of: Web/API/Element/scrollWidth ---

      {{ ApiRef() }}

      -

      Résumé

      +

      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

      +

      Syntaxe

      var xScrollWidth = element.scrollWidth;
       

      xScrollWidth est la largeur du contenu d'element en pixels.

      -

      Exemple

      +

      Exemple

      <div id="aDiv"
            style="width: 100px; height: 200px; overflow: auto;"
       >-FooBar-FooBar-FooBar</div>
      @@ -20,12 +20,12 @@ translation_of: Web/API/Element/scrollWidth
       <input type="button" value="Show scrollWidth"
              onclick="alert(document.getElementById('aDiv').scrollWidth);">
       
      -

      Spécification

      +

      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

      +

      Un brouillon de l'éditeur existe cependant : Cascading Style Sheets Object Model (CSSOM)

      +

      Références

        -
      • +
      • scrollWidth sur MSDN
      • diff --git a/files/fr/web/api/element/select_event/index.html b/files/fr/web/api/element/select_event/index.html index b816f249bc..4f6d4d2259 100644 --- a/files/fr/web/api/element/select_event/index.html +++ b/files/fr/web/api/element/select_event/index.html @@ -3,23 +3,23 @@ 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.

        +

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

        @@ -35,28 +35,28 @@ translation_of: Web/API/Element/select_event
      - + - + - + - + - - + + @@ -66,7 +66,7 @@ translation_of: Web/API/Element/select_event
      target {{readonlyInline}}EventTargetEventTarget The event target (the topmost target in the DOM tree).
      type {{readonlyInline}}DOMStringDOMString The type of event.
      bubbles {{readonlyInline}}BooleanBoolean Whether the event normally bubbles or not.
      cancelable {{readonlyInline}}BooleanBoolean Whether the event is cancellable or not.
      view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)WindowProxydocument.defaultView (window of the document)
      detail {{readonlyInline}}
      -

      Exemple

      +

      Exemple

      <input id="test" type="text" value="Sélectionnez-moi !" />
       <script>
      diff --git a/files/fr/web/api/element/setattribute/index.html b/files/fr/web/api/element/setattribute/index.html
      index 628010c9d7..2633e74e6b 100644
      --- a/files/fr/web/api/element/setattribute/index.html
      +++ b/files/fr/web/api/element/setattribute/index.html
      @@ -62,7 +62,7 @@ b.setAttribute("disabled", "");

      Ceci démontre 2 choses :

        -
      • le premier appel de setAttribute() ci-dessus montre la modification de la valeur de l'attribut name en "helloButton". Vous pouvez le voir en utilisant l'inspecteur de page de votre navigateur (Chrome, Edge, Firefox, Safari).
      • +
      • le premier appel de setAttribute() ci-dessus montre la modification de la valeur de l'attribut name en "helloButton". Vous pouvez le voir en utilisant l'inspecteur de page de votre navigateur (Chrome, Edge, Firefox, Safari).
      • Pour définir la valeur d'un attribut booléen, tel que disabled, vous pouvez spécifier n'importe quelle valeur. Une chaîne vide ou le nom de l'attribut sont des valeurs recommandées. Tout ce qui compte est que si l'attribut est présent, quelle que soit sa valeur réelle, sa valeur est considérée comme true (vraie). L'absence de l'attribut signifie que sa valeur est false (fausse). En définissant la valeur de l'attribut disabled sur la chaîne vide (""), nous définissons disabled sur true, ce qui entraîne la désactivation du bouton.
      @@ -73,8 +73,8 @@ b.setAttribute("disabled", "");

      Spécifications

      Compatibilité des navigateurs

      diff --git a/files/fr/web/api/element/setattributenode/index.html b/files/fr/web/api/element/setattributenode/index.html index efee5a67fe..8f77b05d9a 100644 --- a/files/fr/web/api/element/setattributenode/index.html +++ b/files/fr/web/api/element/setattributenode/index.html @@ -13,16 +13,16 @@ translation_of: Web/API/Element/setAttributeNode

      setAttributeNode() ajoute un nouveau nœud Attr à l'élément courant.

      -

      Syntaxe

      +

      Syntaxe

      -
      var replacedAttr = element.setAttributeNode(attribute);
      +
      var replacedAttr = element.setAttributeNode(attribute);
      • attribute est le nœud Attr à définir sur l'élément.
      • replacedAttr est le nœud d'attribut remplacé, renvoyé par la fonction, s'il y en avait un.
      -

      Exemple

      +

      Exemple

      // <div id="one" align="left">one</div>
       // <div id="two">two</div>
      @@ -34,7 +34,7 @@ alert(d2.attributes[1].value)
       // retourne: `left'
       
      -

      Notes

      +

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

      @@ -42,8 +42,8 @@ alert(d2.attributes[1].value)

      {{DOMAttributeMethods()}}

      -

      Spécification

      +

      Spécification

      diff --git a/files/fr/web/api/element/setattributenodens/index.html b/files/fr/web/api/element/setattributenodens/index.html index 6e62b29873..b2abe3c907 100644 --- a/files/fr/web/api/element/setattributenodens/index.html +++ b/files/fr/web/api/element/setattributenodens/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Element/setAttributeNodeNS

      setAttributeNodeNS ajoute un nouveau nœud attribut avec l'espace de noms et le nom spécifiés.

      -

      Syntaxe

      +

      Syntaxe

      replacedAttr = element.setAttributeNodeNS(attributeNode)
       
      @@ -24,7 +24,7 @@ translation_of: Web/API/Element/setAttributeNodeNS
      Un nœud Attr.
      -

      Exemple

      +

      Exemple

      // <div id="one" special-align="utterleft">one</div>
       // <div id="two">two</div>
      @@ -38,16 +38,16 @@ d2.setAttributeNodeNS(a);
       alert(d2.attributes[1].value) // renvoie : "utterleft"
       
      -

      Notes

      +

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

      +

      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

      +

      Spécification

      diff --git a/files/fr/web/api/element/setattributens/index.html b/files/fr/web/api/element/setattributens/index.html index d5b1699a1b..1274563722 100644 --- a/files/fr/web/api/element/setattributens/index.html +++ b/files/fr/web/api/element/setattributens/index.html @@ -12,34 +12,34 @@ translation_of: Web/API/Element/setAttributeNS

      setAttributeNS ajoute un nouvel attribut ou modifie la valeur d'un attribut avec un espace de noms et un nom donnés.

      -

      Syntaxe

      +

      Syntaxe

      -
      element.setAttributeNS(
      +
      element.setAttributeNS(
       namespace,
       name,
      -value)
      +value)
      • namespace est une chaîne spécifiant l'espace de noms de l'attribut.
      • -
      • name est une chaîne identifiant l'attribut par son nom qualifié ; c'est-à-dire un préfixe d'espace de noms suivi d'un deux-points suivi d'un nom local.
      • +
      • name est une chaîne identifiant l'attribut par son nom qualifié ; c'est-à-dire un préfixe d'espace de noms suivi d'un deux-points suivi d'un nom local.
      • value est la valeur chaîne désirée pour le nouvel attribut.
      -

      Exemple

      +

      Exemple

      var d = document.getElementById("d1");
      -d.setAttributeNS("http://www.mozilla.org/ns/specialspace", "align", "center");
      +d.setAttributeNS("http://www.mozilla.org/ns/specialspace", "align", "center");
       
      -

      Notes

      +

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

      +

      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

      +

      Spécification

      diff --git a/files/fr/web/api/element/setpointercapture/index.html b/files/fr/web/api/element/setpointercapture/index.html index 4a3ecaa500..fe8eb2deb9 100644 --- a/files/fr/web/api/element/setpointercapture/index.html +++ b/files/fr/web/api/element/setpointercapture/index.html @@ -16,12 +16,14 @@ translation_of: Web/API/Element/setPointerCapture

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

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

      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

      -
      targetElement.setPointerCapture(pointerId);
      -
      +
      .setPointerCapture(pointerId);
      +
      targetElement

      Arguments

      diff --git a/files/fr/web/api/element/tagname/index.html b/files/fr/web/api/element/tagname/index.html index b0b3243fe0..53bee23738 100644 --- a/files/fr/web/api/element/tagname/index.html +++ b/files/fr/web/api/element/tagname/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Element/tagName

      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

      +

      Syntaxe

      elementName = element.tagName;
       
      @@ -37,12 +37,12 @@ translation_of: Web/API/Element/tagName

      Contenu JavaScript

      -
      var span = document.getElementById("naissance");
      -console.log(span.tagName);
      +
      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.

      +

      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écifications

      diff --git a/files/fr/web/api/encoding_api/index.html b/files/fr/web/api/encoding_api/index.html index 4870b3a93c..c6e927c6ad 100644 --- a/files/fr/web/api/encoding_api/index.html +++ b/files/fr/web/api/encoding_api/index.html @@ -16,20 +16,18 @@ translation_of: Web/API/Encoding_API

      Interfaces

      -
      • {{DOMxRef("TextDecoder")}}
      • {{DOMxRef("TextEncoder")}}
      • {{DOMxRef("TextDecoderStream")}}
      • {{DOMxRef("TextEncoderStream")}}
      -

      Tutoriels & Outils

      • Un shim permettant d'utiliser cette interface dans les navigateurs ne le supportant pas.
      • -
      • StringView – une représentation de type C des chaînes basée sur des tableaux typés.
      • +
      • StringView – une représentation de type C des chaînes basée sur des tableaux typés.

      Caracteristiques

      diff --git a/files/fr/web/api/errorevent/index.html b/files/fr/web/api/errorevent/index.html index faa0d46a29..9d265d8ab4 100644 --- a/files/fr/web/api/errorevent/index.html +++ b/files/fr/web/api/errorevent/index.html @@ -72,5 +72,5 @@ translation_of: Web/API/ErrorEvent

      Voir aussi

      diff --git a/files/fr/web/api/event/bubbles/index.html b/files/fr/web/api/event/bubbles/index.html index 0c59b8b0f6..6c9a6b68fc 100644 --- a/files/fr/web/api/event/bubbles/index.html +++ b/files/fr/web/api/event/bubbles/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Event/bubbles

      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.

      +

      Note : Voir Propagation et capture des évènements pour plus d'informations sur la propagation.

      Syntaxe

      @@ -25,23 +25,23 @@ translation_of: Web/API/Event/bubbles

      Retourne un booléen dont la valeur est true (vraie) si l'événement se propage à travers le DOM.

      -

      Exemple

      +

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

      +

      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écifications

      @@ -79,5 +79,5 @@ translation_of: Web/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 index 0d17c1107e..3f3b86744b 100644 --- a/files/fr/web/api/event/cancelable/index.html +++ b/files/fr/web/api/event/cancelable/index.html @@ -11,15 +11,13 @@ translation_of: Web/API/Event/cancelable ---
      {{ ApiRef("DOM") }}
      -

      Résumé

      -

      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.

      +

      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

      +

      Syntaxe

      bool = event.cancelable
       
      @@ -28,33 +26,33 @@ translation_of: Web/API/Event/cancelable
    • Le résultat est un booléen qui est true (vrai) si l'événement peut être annulé.
    • -

      Exemple

      +

      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.

      +

      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);
      -  }
      -}
      +
      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);
      +document.addEventListener('wheel', preventCancelableEvents);

       

      -

      Notes

      +

      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écifications

      diff --git a/files/fr/web/api/event/cancelbubble/index.html b/files/fr/web/api/event/cancelbubble/index.html index fad1a2ca95..07d891daed 100644 --- a/files/fr/web/api/event/cancelbubble/index.html +++ b/files/fr/web/api/event/cancelbubble/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Event/cancelBubble

      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

      +

      Syntaxe

      event.cancelBubble = bool;
       var bool = event.cancelBubble;
      @@ -44,10 +44,6 @@ translation_of: Web/API/Event/cancelBubble
        
       
      -

      Compatibilité des navigateurs

      - - +

      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 index 5ffc759a23..1c4262776f 100644 --- a/files/fr/web/api/event/comparison_of_event_targets/index.html +++ b/files/fr/web/api/event/comparison_of_event_targets/index.html @@ -10,7 +10,7 @@ original_slug: Web/API/Event/Comparaison_des_cibles_d_évènements ---

      {{ ApiRef() }}

      -

      Cibles d'évènements

      +

      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.

      @@ -24,8 +24,8 @@ original_slug: Web/API/Event/Comparaison_des_cibles_d_évènements Objectif - event.target - DOM Event Interface + event.target + DOM Event Interface

      L'élément DOM sur le côté gauche de l'appel qui a déclenché cet événement, par exemple :

      @@ -35,34 +35,34 @@ original_slug: Web/API/Event/Comparaison_des_cibles_d_évènements - event.currentTarget - DOM Event Interface - La 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.currentTarget + DOM Event Interface + La 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.relatedTarget - DOM MouseEvent Interface + event.relatedTarget + DOM MouseEvent Interface Identifie une cible secondaire pour l'évènement. - event.explicitOriginalTarget + 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 + 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. + {{ 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

      +

      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

      +

      Exemples

      <!DOCTYPE html>
       <html>
      @@ -130,7 +130,7 @@ original_slug: Web/API/Event/Comparaison_des_cibles_d_évènements
       </body>
       </html>
      -

      Utilisation de target et relatedTarget

      +

      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é à.

      @@ -138,8 +138,8 @@ original_slug: Web/API/Event/Comparaison_des_cibles_d_évènements Type d'évènement - event.target - event.relatedTarget + event.target + event.relatedTarget mouseover @@ -156,7 +156,7 @@ original_slug: Web/API/Event/Comparaison_des_cibles_d_évènements

      Problème : A également besoin de descriptions sur les évènements dragenter et dragexit.

      -

      Exemple

      +

      Exemple

      <hbox id="outer">
         <hbox id="inner"
      diff --git a/files/fr/web/api/event/currenttarget/index.html b/files/fr/web/api/event/currenttarget/index.html
      index 996b6748fa..d70ad8d00f 100644
      --- a/files/fr/web/api/event/currenttarget/index.html
      +++ b/files/fr/web/api/event/currenttarget/index.html
      @@ -15,7 +15,7 @@ translation_of: Web/API/Event/currentTarget
       
       

      Syntaxe

      -
      var currentEventTarget = event.currentTarget;
      +
      var currentEventTarget = event.currentTarget;

      Valeur

      @@ -25,7 +25,7 @@ translation_of: Web/API/Event/currentTarget

      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
      +
      // Cette fonction masque la cible courante de l'évènement
       // et l'affiche dans la console.
       function hide(e){
         e.currentTarget.style.visibility = 'hidden';
      @@ -46,7 +46,7 @@ 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).

      +

      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

      diff --git a/files/fr/web/api/event/defaultprevented/index.html b/files/fr/web/api/event/defaultprevented/index.html index 395c353226..f5b25e7c7d 100644 --- a/files/fr/web/api/event/defaultprevented/index.html +++ b/files/fr/web/api/event/defaultprevented/index.html @@ -14,7 +14,9 @@ translation_of: Web/API/Event/defaultPrevented

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

      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

      diff --git a/files/fr/web/api/event/event/index.html b/files/fr/web/api/event/event/index.html index 464a126f19..8a6992dc29 100644 --- a/files/fr/web/api/event/event/index.html +++ b/files/fr/web/api/event/event/index.html @@ -21,16 +21,12 @@ translation_of: Web/API/Event/Event
      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 : - +
      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) .
      • +
      • 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) .
      @@ -47,7 +43,7 @@ myDiv.dispatchEvent(evt);

      Spécifications

      - +
      diff --git a/files/fr/web/api/event/eventphase/index.html b/files/fr/web/api/event/eventphase/index.html index 439f769f0a..290a0e6659 100644 --- a/files/fr/web/api/event/eventphase/index.html +++ b/files/fr/web/api/event/eventphase/index.html @@ -23,7 +23,7 @@ translation_of: Web/API/Event/eventPhase

      Constantes

      -

      Constantes de phase d'événement

      +

      Constantes de phase d'événement

      Ces valeurs décrivent quelle est la phase du flux d'événements actuellement évalué.

      @@ -63,9 +63,9 @@ translation_of: Web/API/Event/eventPhase
      Spécification
      -

      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 .

      +

      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

      +

      Exemple

      HTML

      @@ -106,59 +106,59 @@ translation_of: Web/API/Event/eventPhase

      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 = '';
      -}
      +
      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') }}

      diff --git a/files/fr/web/api/event/index.html b/files/fr/web/api/event/index.html index b8c7a25d24..a85599f14b 100644 --- a/files/fr/web/api/event/index.html +++ b/files/fr/web/api/event/index.html @@ -26,7 +26,6 @@ translation_of: Web/API/Event

      On notera que l'ensemble des interfaces d'évènements ont un nom qui termine par Event (« évènement » en anglais).

      -
      -

      Constructeur

      -
      Event()
      +
      Event()
      Crée un objet Event et le renvoie à l'appelant.
      diff --git a/files/fr/web/api/event/initevent/index.html b/files/fr/web/api/event/initevent/index.html index 983a23e130..6f06e8b7f3 100644 --- a/files/fr/web/api/event/initevent/index.html +++ b/files/fr/web/api/event/initevent/index.html @@ -13,15 +13,15 @@ translation_of: Web/API/Event/initEvent

      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.

      +

      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

      +

      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.

      +

      À 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

      +

      Syntaxe

      event.initEvent(type, bubbles, cancelable)
       
      @@ -35,7 +35,7 @@ translation_of: Web/API/Event/initEvent
      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

      +

      Exemple

      // Crée un évènement.
       var event = document.createEvent('Event');
      @@ -64,7 +64,7 @@ elem.dispatchEvent(event);
         
          {{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.
      +   Depuis {{SpecName('DOM2 Events')}}, dépréciée, remplacée par les constructeurs d'événements.
         
         
          {{SpecName('DOM2 Events','##Events-Event-initEvent','Event.initEvent()')}}
      diff --git a/files/fr/web/api/event/istrusted/index.html b/files/fr/web/api/event/istrusted/index.html
      index 65df2eb716..0267223d10 100644
      --- a/files/fr/web/api/event/istrusted/index.html
      +++ b/files/fr/web/api/event/istrusted/index.html
      @@ -13,7 +13,7 @@ translation_of: Web/API/Event/isTrusted
       
       

      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

      +

      Syntaxe

      var bool = event.isTrusted;
       
      diff --git a/files/fr/web/api/event/originaltarget/index.html b/files/fr/web/api/event/originaltarget/index.html index ad65cdc914..810c8276a5 100644 --- a/files/fr/web/api/event/originaltarget/index.html +++ b/files/fr/web/api/event/originaltarget/index.html @@ -12,23 +12,19 @@ translation_of: Web/API/Event/originalTarget ---
      {{ ApiRef("DOM") }} {{Non-standard_header}}
      -
       
      - -

      Résumé

      -

      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.

      +

      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.

      +

      Voir aussi Comparaison des cibles d'évènements.

      -

      Exemple

      +

      Exemple

      Besoin d'un exemple qui ait du sens ici. ^^

      -

      Spécification

      +

      Spécification

      C'est une propriété propre à Mozilla. Définie dans {{Source("/dom/public/idl/events/nsIDOMNSEvent.idl")}}

      diff --git a/files/fr/web/api/event/returnvalue/index.html b/files/fr/web/api/event/returnvalue/index.html index 98863439b0..97654470d7 100644 --- a/files/fr/web/api/event/returnvalue/index.html +++ b/files/fr/web/api/event/returnvalue/index.html @@ -14,10 +14,10 @@ translation_of: Web/API/Event/returnValue

      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.

      -

      Utilisez {{domxref("Event.preventDefault()")}} à la place de cette méthode non standard.

      +

      Note : Utilisez {{domxref("Event.preventDefault()")}} à la place de cette méthode non standard.

      -

      Syntaxe

      +

      Syntaxe

      event.returnValue = bool;
       var bool = event.returnValue;
      @@ -27,10 +27,6 @@ translation_of: Web/API/Event/returnValue
       
       

      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

      - - +

      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 index 94328eecf1..6b0ab681b4 100644 --- a/files/fr/web/api/event/srcelement/index.html +++ b/files/fr/web/api/event/srcelement/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Event/srcElement

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

      +

      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

      diff --git a/files/fr/web/api/event/stoppropagation/index.html b/files/fr/web/api/event/stoppropagation/index.html index 5956fc1e5b..1f8dd6e09f 100644 --- a/files/fr/web/api/event/stoppropagation/index.html +++ b/files/fr/web/api/event/stoppropagation/index.html @@ -9,25 +9,25 @@ tags: - Reference translation_of: Web/API/Event/stopPropagation --- -

      {{APIRef("DOM")}}

      +
      {{APIRef("DOM")}}

      Évite que l'évènement courant ne se propage plus loin dans les phases de capture et de déploiement.

      -

      Syntaxe

      +

      Syntaxe

      event.stopPropagation();
      -

      Exemple

      +

      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.

      +

      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

      +

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

      +

      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.

      +

      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écification

      @@ -56,10 +56,4 @@ translation_of: Web/API/Event/stopPropagation

      Compatibilité des navigateurs

      - - -

      {{Compat("api.Event.stopPropagation")}}

      - -
      -
       
      -
      +

      {{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 index b624041ab6..2ab12c5de0 100644 --- a/files/fr/web/api/event/target/index.html +++ b/files/fr/web/api/event/target/index.html @@ -13,32 +13,32 @@ translation_of: Web/API/Event/target

      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

      +

      Syntaxe

      laCible = event.target
      -

      Exemple

      +

      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);
      +
      // 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);
      +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';
      -}
      +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);
      +// Attache l'écouteur à la liste +// Il se déclenche pour chaque <li> clické +ul.addEventListener('click', hide, false);

      Spécifications

      @@ -75,9 +75,9 @@ ul.addEventL

      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.

      +

      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) {
      +
      function hide(e) {
         // Support IE6-8
         var target = e.target || e.srcElement;
         target.style.visibility = 'hidden';
      @@ -86,4 +86,4 @@ ul.addEventL
       
       

      Voir aussi

      -

      Comparaison des cibles d'évènements

      +

      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 index b3e2333120..c4bc3ffe6a 100644 --- a/files/fr/web/api/event/timestamp/index.html +++ b/files/fr/web/api/event/timestamp/index.html @@ -14,65 +14,65 @@ translation_of: Web/API/Event/timeStamp

      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.

      +

      Note : Cette propriété fonctionne seulement si le système d'évènements le prend en charge pour des évènements particuliers.

      -

      Syntaxe

      +

      Syntaxe

      event.timeStamp
       
      -

      Valeur

      +

      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

      +

      Exemple

      HTML

      -
      <p>
      +
      <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>
      +</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);
      +
      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

      +

      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 (2ms) dans Firefox 60
      +event.timeStamp;
      +// 1519211809934
      +// 1519211810362
      +// 1519211811670
      +// ...
       
       
      -// Précision du temps réduite avec `privacy.resistFingerprinting` activé
      -event.timeStamp;
      -// 1519129853500
      -// 1519129858900
      -// 1519129864400
      -// ...
      +// 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écifications

      diff --git a/files/fr/web/api/event/type/index.html b/files/fr/web/api/event/type/index.html index c50dcb0fea..7931a24a5a 100644 --- a/files/fr/web/api/event/type/index.html +++ b/files/fr/web/api/event/type/index.html @@ -15,63 +15,63 @@ translation_of: Web/API/Event/type

      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.

      +

      Pour une liste des types d'événements disponibles, aller voir la page Référence des évènements.

      -

      Syntaxe

      +

      Syntaxe

      event.type
       
      -

      Exemples

      +

      Exemples

      -
      <!DOCTYPE html>
      -<html lang="en">
      -<head>
      -    <meta charset="utf-8">
      +
      <!DOCTYPE html>
      +<html lang="en">
      +<head>
      +    <meta charset="utf-8">
       
      -    <title>Event.type Example</title>
      +    <title>Event.type Example</title>
       
      -    <script>
      -        var currEvent;
      -        function getEvtType(evt) {
      -            console.group();
      +    <script>
      +        var currEvent;
      +        function getEvtType(evt) {
      +            console.group();
       
      -            currEvent = evt.type;
      -            console.log(currEvent);
      +            currEvent = evt.type;
      +            console.log(currEvent);
       
      -            document.getElementById("Etype").innerHTML = currEvent;
      +            document.getElementById("Etype").innerHTML = currEvent;
       
      -            console.groupEnd();
      -        }
      +            console.groupEnd();
      +        }
       
      -        //Évènements du clavier
      -        document.addEventListener("keypress", getEvtType, false); //[second]  
      +        //Évènements du clavier
      +        document.addEventListener("keypress", getEvtType, false); //[second]  
       
      -        document.addEventListener("keydown", getEvtType, false); //premier
      -        document.addEventListener("keyup", getEvtType, false); //troisième
      +        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
      +        //Évènements de la souris
      +        document.addEventListener("click", getEvtType, false); // troisième
       
      -        document.addEventListener("mousedown", getEvtType, false); //premier
      -        document.addEventListener("mouseup", getEvtType, false); //second
      +        document.addEventListener("mousedown", getEvtType, false); //premier
      +        document.addEventListener("mouseup", getEvtType, false); //second
       
      -    </script>
      -</head>
      +    </script>
      +</head>
       
      -<body>
      +<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>
      +<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>
      +</body> +</html>
      -

      Résultat

      +

      Résultat

      {{EmbedLiveSample('Example')}}

      -

      Spécifications

      +

      Spécifications

      diff --git a/files/fr/web/api/eventlistener/index.html b/files/fr/web/api/eventlistener/index.html index ed7d3a3dd6..8ae1a28d34 100644 --- a/files/fr/web/api/eventlistener/index.html +++ b/files/fr/web/api/eventlistener/index.html @@ -17,11 +17,11 @@ translation_of: Web/API/EventListener

      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

      +

      Propriétés

      Cette interface n'implémente ni n'hérite d'aucune propriété.

      -

      Méthodes

      +

      Méthodes

      Cette interface n'hérite d'aucune méthode.

      @@ -34,28 +34,28 @@ translation_of: Web/API/EventListener

      HTML

      -
      <button id="btn">Click here!</button>
      +
      <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!');
      -  }
      -});
      +
      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

      diff --git a/files/fr/web/api/eventsource/close/index.html b/files/fr/web/api/eventsource/close/index.html index 062ed16f58..d7289f87ef 100644 --- a/files/fr/web/api/eventsource/close/index.html +++ b/files/fr/web/api/eventsource/close/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/EventSource/close

      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.

      +

      Note : Si la connexion est déjà fermé, la fonction n'agit pas.

      Syntaxe

      @@ -44,7 +44,7 @@ bouton.onclick = function() {
      -

      Note: Vous pouvez trouver un exemple complet sur GitHub — voir Demo simple de SSE utilisant PHP.

      +

      Note : Vous pouvez trouver un exemple complet sur GitHub — voir Demo simple de SSE utilisant PHP.

      Spécifications

      diff --git a/files/fr/web/api/eventsource/index.html b/files/fr/web/api/eventsource/index.html index ad8e2ef524..3ad72e5065 100644 --- a/files/fr/web/api/eventsource/index.html +++ b/files/fr/web/api/eventsource/index.html @@ -53,7 +53,7 @@ translation_of: Web/API/EventSource

      Exemples

      -
      var evtSource = new EventSource('sse.php');
      +
      var evtSource = new EventSource('sse.php');
       var eventList = document.querySelector('ul');
       
       evtSource.onmessage = function(e) {
      @@ -91,5 +91,5 @@ evtSource.onmessage = function(e) {
       

      Voir aussi

      diff --git a/files/fr/web/api/eventsource/onopen/index.html b/files/fr/web/api/eventsource/onopen/index.html index 2db0dff38c..64b0d58fb9 100644 --- a/files/fr/web/api/eventsource/onopen/index.html +++ b/files/fr/web/api/eventsource/onopen/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/EventSource/onopen };
      -

      Note: Vous pouvez trouver un exemple complet sur GitHub — voir Simple SSE demo using PHP.

      +

      Note : Vous pouvez trouver un exemple complet sur GitHub — voir Simple SSE demo using PHP.

      Spécifications

      @@ -44,9 +44,6 @@ translation_of: Web/API/EventSource/onopen
      -
        -
      -

      Compatibilité des navigateurs

      {{Compat("api.EventSource.onopen")}}

      diff --git a/files/fr/web/api/eventtarget/addeventlistener/index.html b/files/fr/web/api/eventtarget/addeventlistener/index.html index c8e6650d62..8165dcccdf 100644 --- a/files/fr/web/api/eventtarget/addeventlistener/index.html +++ b/files/fr/web/api/eventtarget/addeventlistener/index.html @@ -30,7 +30,9 @@ 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")}}).

      +

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

      @@ -268,7 +270,7 @@ el.addEventListener("click", () => { <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="https://developer.mozilla.org/" target="_blank"> + <a class="inner2" href="/" target="_blank"> intérieur2, none-passive & preventDefault (nouvelle page non ouverte) </a> </div> @@ -744,7 +746,7 @@ if (el.addEventListener) {

      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 :

      +

      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
      diff --git a/files/fr/web/api/eventtarget/dispatchevent/index.html b/files/fr/web/api/eventtarget/dispatchevent/index.html
      index 10389d111d..ff64998f51 100644
      --- a/files/fr/web/api/eventtarget/dispatchevent/index.html
      +++ b/files/fr/web/api/eventtarget/dispatchevent/index.html
      @@ -13,12 +13,12 @@ translation_of: Web/API/EventTarget/dispatchEvent
       
       

      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

      +

      Syntaxe

      cancelled = !target.dispatchEvent(event)
       
      -

      Paramètres

      +

      Paramètres

      • event est un objet {{domxref("Event")}} à envoyer.
      • @@ -33,17 +33,17 @@ translation_of: Web/API/EventTarget/dispatchEvent

        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

        +

        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.

        +

        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.

        +

        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.

        +

        Voir aussi Objet Event référence.

        Exemple

        -

        Voir Création et déclenchement d'évènements.

        +

        Voir Création et déclenchement d'évènements.

        Spécification

        @@ -64,7 +64,7 @@ translation_of: Web/API/EventTarget/dispatchEvent -

        Compatibilité des navigateurs

        +

        Compatibilité des navigateurs

        diff --git a/files/fr/web/api/eventtarget/eventtarget/index.html b/files/fr/web/api/eventtarget/eventtarget/index.html index 522466de4b..419fd32ffe 100644 --- a/files/fr/web/api/eventtarget/eventtarget/index.html +++ b/files/fr/web/api/eventtarget/eventtarget/index.html @@ -27,7 +27,7 @@ translation_of: Web/API/EventTarget/EventTarget

        Exemples

        -
        class MyEventTarget extends EventTarget {
        +
        class MyEventTarget extends EventTarget {
           constructor(mySecret) {
             super();
             this._secret = mySecret;
        diff --git a/files/fr/web/api/eventtarget/index.html b/files/fr/web/api/eventtarget/index.html
        index 99ea213416..b58f686516 100644
        --- a/files/fr/web/api/eventtarget/index.html
        +++ b/files/fr/web/api/eventtarget/index.html
        @@ -12,9 +12,9 @@ tags:
         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.

        +

        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.

        @@ -55,7 +55,7 @@ translation_of: Web/API/EventTarget

        Implémentation simple d'EventTarget

        -
        const EventTarget = function () {
        +
        const EventTarget = function () {
           this.listeners = {}
         }
         
        diff --git a/files/fr/web/api/eventtarget/removeeventlistener/index.html b/files/fr/web/api/eventtarget/removeeventlistener/index.html
        index 322b0772a1..bef6e42e79 100644
        --- a/files/fr/web/api/eventtarget/removeeventlistener/index.html
        +++ b/files/fr/web/api/eventtarget/removeeventlistener/index.html
        @@ -74,12 +74,12 @@ element.removeEventListener("mousedown", handleMouseDown, true);

        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, { 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
        +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().

        diff --git a/files/fr/web/api/extendableevent/extendableevent/index.html b/files/fr/web/api/extendableevent/extendableevent/index.html index 45b418ff09..52786b501f 100644 --- a/files/fr/web/api/extendableevent/extendableevent/index.html +++ b/files/fr/web/api/extendableevent/extendableevent/index.html @@ -51,9 +51,9 @@ translation_of: Web/API/ExtendableEvent/ExtendableEvent

        Voir aussi

        diff --git a/files/fr/web/api/extendableevent/index.html b/files/fr/web/api/extendableevent/index.html index efae671fa9..2d5ffe78b5 100644 --- a/files/fr/web/api/extendableevent/index.html +++ b/files/fr/web/api/extendableevent/index.html @@ -21,7 +21,7 @@ browser-compat: api.ExtendableEvent

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

        +

        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.

        @@ -29,7 +29,7 @@ browser-compat: api.ExtendableEvent

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

        +

        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

        @@ -85,7 +85,9 @@ self.addEventListener('install', function(event) { ); });
        -
        Important : 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.
        +
        +

        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

        diff --git a/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.html b/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.html index d7adcfc13a..a9d04efa8a 100644 --- a/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.html +++ b/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.html @@ -68,8 +68,8 @@ var myEME = new ExtendableMessageEvent('message', init);

        Voir aussi

        diff --git a/files/fr/web/api/extendablemessageevent/index.html b/files/fr/web/api/extendablemessageevent/index.html index 1d93681f25..adad758848 100644 --- a/files/fr/web/api/extendablemessageevent/index.html +++ b/files/fr/web/api/extendablemessageevent/index.html @@ -92,8 +92,8 @@ self.onmessage = function(e) {

        Voir aussi

        diff --git a/files/fr/web/api/extendablemessageevent/lasteventid/index.html b/files/fr/web/api/extendablemessageevent/lasteventid/index.html index b424f11cde..997f1a7bf4 100644 --- a/files/fr/web/api/extendablemessageevent/lasteventid/index.html +++ b/files/fr/web/api/extendablemessageevent/lasteventid/index.html @@ -13,7 +13,7 @@ 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.

        +

        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

        @@ -69,8 +69,8 @@ self.onmessage = function(e) {

        Voir aussi

        diff --git a/files/fr/web/api/extendablemessageevent/origin/index.html b/files/fr/web/api/extendablemessageevent/origin/index.html index 22ea1988ee..1d800b866f 100644 --- a/files/fr/web/api/extendablemessageevent/origin/index.html +++ b/files/fr/web/api/extendablemessageevent/origin/index.html @@ -13,7 +13,7 @@ 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.

        +

        La propriété en lecture seule origin de l'interface {{domxref("ExtendableMessageEvent")}} retourne l'origine du  {{domxref("ServiceWorkerClient")}} qui a envoyé le message.

        Syntaxe

        @@ -25,7 +25,7 @@ translation_of: Web/API/ExtendableMessageEvent/origin

        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.

        +

        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;
         
        @@ -69,12 +69,8 @@ self.onmessage = function(e) {
         

        Voir aussi

        - -
         
        - -

         

        +
      • Canal de messages
      • +
      \ 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 index 92f9e1d3d0..e758af8154 100644 --- a/files/fr/web/api/extendablemessageevent/ports/index.html +++ b/files/fr/web/api/extendablemessageevent/ports/index.html @@ -13,7 +13,7 @@ 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é).

      +

      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

      @@ -25,7 +25,7 @@ translation_of: Web/API/ExtendableMessageEvent/ports

      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.

      +

      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;
       
      @@ -68,8 +68,8 @@ self.onmessage = function(e) {
       

      Voir aussi

      diff --git a/files/fr/web/api/featurepolicy/allowedfeatures/index.html b/files/fr/web/api/featurepolicy/allowedfeatures/index.html index d4f42561b8..1abfbd8c0f 100644 --- a/files/fr/web/api/featurepolicy/allowedfeatures/index.html +++ b/files/fr/web/api/featurepolicy/allowedfeatures/index.html @@ -11,16 +11,16 @@ 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()")}}.

      +

      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()
      +
      const permissions = FeaturePolicy.allowedFeatures()
       

      Paramètres

      -

      Aucun.

      +

      Aucun.

      Valeur de retour

      @@ -30,7 +30,7 @@ translation_of: Web/API/FeaturePolicy/allowedFeatures

      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
      +
      // D'abord, récupère l'objet Feature Policy
       const featurePolicy = document.featurePolicy
       
       // Puis demande la liste des foncitonnalités permises
      diff --git a/files/fr/web/api/featurepolicy/allowsfeature/index.html b/files/fr/web/api/featurepolicy/allowsfeature/index.html
      index 508e15dbb8..52eae7a58d 100644
      --- a/files/fr/web/api/featurepolicy/allowsfeature/index.html
      +++ b/files/fr/web/api/featurepolicy/allowsfeature/index.html
      @@ -10,16 +10,16 @@ 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é).

      +

      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>)
      +
      const listePermissions = FeaturePolicy.allowsFeature(<nomDirective>)
       

      ou

      -
      const listePermissions = FeaturePolicy.allowsFeature(<nomDirective>, <origine>)
      +
      const listePermissions = FeaturePolicy.allowsFeature(<nomDirective>, <origine>)

      Paramètres

      @@ -39,7 +39,7 @@ translation_of: Web/API/FeaturePolicy/allowsFeature

      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
      +
      // D'abord, récupère le Feature Policy
       const featurePolicy = document.featurePolicy
       
       // Demande si la fonctionnalité est disponible
      diff --git a/files/fr/web/api/featurepolicy/features/index.html b/files/fr/web/api/featurepolicy/features/index.html
      index c4061ce3a5..5027fa3465 100644
      --- a/files/fr/web/api/featurepolicy/features/index.html
      +++ b/files/fr/web/api/featurepolicy/features/index.html
      @@ -10,11 +10,11 @@ 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.

      +

      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()
      +
      const fonctionnalitésSupportées = FeaturePolicy.features()
       

      Paramètres

      @@ -29,7 +29,7 @@ translation_of: Web/API/FeaturePolicy/features

      Cet exemple affiche dans la console toutes les directives supportées par votre agent utilisateur :

      -
      // Récupère l'objet Feature Policy
      +
      // 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
      diff --git a/files/fr/web/api/featurepolicy/getallowlistforfeature/index.html b/files/fr/web/api/featurepolicy/getallowlistforfeature/index.html
      index 2134dfc1ae..9d13d0db4c 100644
      --- a/files/fr/web/api/featurepolicy/getallowlistforfeature/index.html
      +++ b/files/fr/web/api/featurepolicy/getallowlistforfeature/index.html
      @@ -10,11 +10,11 @@ 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.

      +

      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é>)
      +
      const listePermissions = FeaturePolicy.getAllowlistForFeature(<fonctionnalité>)
       

      Parameter

      @@ -35,7 +35,7 @@ translation_of: Web/API/FeaturePolicy/getAllowlistForFeature

      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
      +
      // D'abord, récupère l'objet Feature Policy
       const featurePolicy = document.featurePolicy
       
       // Puis demande la liste pour la fonctionnalité "camera"
      diff --git a/files/fr/web/api/fetch/index.html b/files/fr/web/api/fetch/index.html
      index f339f8f389..30544929ec 100644
      --- a/files/fr/web/api/fetch/index.html
      +++ b/files/fr/web/api/fetch/index.html
      @@ -16,7 +16,7 @@ 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.

      +

      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.

      @@ -25,12 +25,12 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/fetch

      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.

      -

      Les paramètres de la méthode fetch() sont identiques à ceux du contructeur d'une {{domxref("Request.Request","Request()")}}.

      +

      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]);
      +
      const fetchResponsePromise = Promise<Response> fetch(entrée[, init]);

      Paramètres

      @@ -75,7 +75,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/fetch
      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=).
      +
      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()")}}.
      @@ -103,7 +103,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/fetch

      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');
      +
      const monImage = document.querySelector('img');
       
       let maRequete = new Request('fleurs.jpg');
       
      @@ -121,7 +121,7 @@ fetch(maRequete)
       
       

      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');
      +
      const monImage = document.querySelector('img');
       
       let mesEntetes = new Headers();
       mesEntetes.append('Content-Type', 'image/jpeg');
      @@ -139,11 +139,11 @@ 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);
      +
      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',
      +
      const monInit = { method: 'GET',
                      headers: {
                          'Content-Type': 'image/jpeg'
                      },
      diff --git a/files/fr/web/api/fetch_api/basic_concepts/index.html b/files/fr/web/api/fetch_api/basic_concepts/index.html
      index 9d87d1cc6e..93a268d89b 100644
      --- a/files/fr/web/api/fetch_api/basic_concepts/index.html
      +++ b/files/fr/web/api/fetch_api/basic_concepts/index.html
      @@ -5,12 +5,10 @@ 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.

      -
      -

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

      +

      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

      @@ -60,7 +58,7 @@ translation_of: Web/API/Fetch_API/Basic_concepts

      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

        -
      • guard is request and the header name isn't a {{Glossary("forbidden header name")}} .
      • -
      • guard is request-no-cors and the header name/value is a {{Glossary("simple header")}} .
      • -
      • guard is response and the header name isn't a {{Glossary("forbidden response header name")}} .
      • +
      • guard is request and the header name isn't a {{Glossary("forbidden header name")}} .
      • +
      • guard is request-no-cors and the header name/value is a {{Glossary("simple header")}} .
      • +
      • guard is response and the header name isn't a {{Glossary("forbidden response header name")}} .
      diff --git a/files/fr/web/api/fetch_api/index.html b/files/fr/web/api/fetch_api/index.html index 1c5a2370e7..49ae613fb1 100644 --- a/files/fr/web/api/fetch_api/index.html +++ b/files/fr/web/api/fetch_api/index.html @@ -9,9 +9,9 @@ translation_of: Web/API/Fetch_API

      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.

      +

      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.

      +

      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.

      @@ -19,10 +19,10 @@ translation_of: Web/API/Fetch_API

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

      +

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

      -

      Remarque : 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.

      +

      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

      diff --git a/files/fr/web/api/fetch_api/using_fetch/index.html b/files/fr/web/api/fetch_api/using_fetch/index.html index 9282e3c392..04a5708c1a 100644 --- a/files/fr/web/api/fetch_api/using_fetch/index.html +++ b/files/fr/web/api/fetch_api/using_fetch/index.html @@ -15,9 +15,7 @@ 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.

      @@ -25,10 +23,10 @@ translation_of: Web/API/Fetch_API/Using_Fetch

      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.

      +

      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.

      +

      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é

      @@ -63,7 +61,7 @@ fetch('flowers.jpg')

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

      +

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

      @@ -141,7 +139,7 @@ fetch(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.

      +

      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)

      @@ -214,7 +212,7 @@ try {
    -

    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.

    +

    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

    @@ -242,7 +240,7 @@ addEventListener('fetch', function(event) {
    -

    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.

    +

    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

    @@ -301,14 +299,12 @@ fetch("/login", {

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

    -
    -

    Voir aussi

    diff --git a/files/fr/web/api/fetchevent/index.html b/files/fr/web/api/fetchevent/index.html index 9424760f3b..d4f17e749d 100644 --- a/files/fr/web/api/fetchevent/index.html +++ b/files/fr/web/api/fetchevent/index.html @@ -40,7 +40,7 @@ translation_of: Web/API/FetchEvent
    {{domxref("FetchEvent.respondWith()")}}
    -
    Promesse qui est résolue en retournant une {{domxref("Response")}} ou une erreur réseau  à Fetch.
    +
    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")}}.

    diff --git a/files/fr/web/api/file/name/index.html b/files/fr/web/api/file/name/index.html index 2dddc3083c..be29d91b9a 100644 --- a/files/fr/web/api/file/name/index.html +++ b/files/fr/web/api/file/name/index.html @@ -18,7 +18,9 @@ original_slug: Web/API/File/fileName

    Renvoie le nom du fichier. Pour des raisons de sécurité, le chemin est exclu de la propriété.

    -
    Cette propriété est dépréciée. Utilisez {{domxref("File.name")}} à la place.
    +
    +

    Note : Cette propriété est dépréciée. Utilisez {{domxref("File.name")}} à la place.

    +

    Syntaxe

    @@ -28,7 +30,7 @@ original_slug: Web/API/File/fileName

    Une chaîne de caractères.

    -

    Specification

    +

    Specification

    Ne fait partie d'aucune spécification.

    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 index 62587156ca..8d9eb1119e 100644 --- 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 @@ -12,7 +12,7 @@ translation_of: Web/API/File/Using_files_from_web_applications

    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.

    +

    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)

    @@ -35,7 +35,7 @@ translation_of: Web/API/File/Using_files_from_web_applications var
    fichierSelectionne = $('#input')[0].files[0];
    -

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

    +

    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

    @@ -54,7 +54,7 @@ var fichierSelectionne = $('#input')[0].files[0];

    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 :

    +

    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);
    @@ -387,7 +387,7 @@ function handleFiles(files) {
     
     
     
    -

    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)

    +

    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

    @@ -455,29 +455,29 @@ if (isset($_FILES['myFile'])) {

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

    +

    Spécifications

    @@ -488,7 +488,7 @@ window.URL{{ domxref("FileList") }}
  • {{ domxref("FileReader") }}
  • Utiliser XMLHttpRequest
  • -
  • Using the DOM File API in chrome code
  • +
  • Using the DOM File API in chrome code
  • {{ domxref("XMLHttpRequest") }}
  • -
  • jQuery JavaScript library
  • +
  • jQuery JavaScript library
  • 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 index 9ddb83f886..8d24b23d1d 100644 --- a/files/fr/web/api/file_and_directory_entries_api/index.html +++ b/files/fr/web/api/file_and_directory_entries_api/index.html @@ -15,27 +15,27 @@ original_slug: Web/API/API_fichier_systeme

    L'API asynchrone a les interfaces suivantes :

      -
    • LocalFileSystem a deux méthodes globales qui vous permet d'avoir accès à un espace virtuel : requestFileSystem() et resolveLocalFileSystemURL().  Les méthodes sont implémentées par l'objet window et le worker global scope.
    • -
    • FileSystem représente un fichier système. L'objet est la passerelle à votre API toute entière.
    • -
    • Entry représente une entrée dans un fichier système. L'entrée peut être un fichier ou un dossier.
    • -
    • DirectoryEntry représente un dossier dans un fichier système.
    • -
    • DirectoryReader vous permet la lecture de fichiers et dossiers à partir d'un dossier.
    • -
    • FileEntry représente un fichier dans un fichier système.
    • -
    • FileError est une erreur que vous pourriez rencontrer pendant l'utilisation des méthodes asynchrones.
    • +
    • LocalFileSystem a deux méthodes globales qui vous permet d'avoir accès à un espace virtuel : requestFileSystem() et resolveLocalFileSystemURL().  Les méthodes sont implémentées par l'objet window et le worker global scope.
    • +
    • FileSystem représente un fichier système. L'objet est la passerelle à votre API toute entière.
    • +
    • Entry représente une entrée dans un fichier système. L'entrée peut être un fichier ou un dossier.
    • +
    • DirectoryEntry représente un dossier dans un fichier système.
    • +
    • DirectoryReader vous permet la lecture de fichiers et dossiers à partir d'un dossier.
    • +
    • FileEntry représente un fichier dans un fichier système.
    • +
    • FileError est une erreur que vous pourriez rencontrer pendant l'utilisation des méthodes asynchrones.

    API synchrone

    -

    L'API synchrone est utile avec les WebWorkers. Contrairement à l'API asynchrone, l'API synchrone n'utilise pas les callbacks parce que les méthodes de l'API retournent des valeurs.

    +

    L'API synchrone est utile avec les WebWorkers. Contrairement à l'API asynchrone, l'API synchrone n'utilise pas les callbacks parce que les méthodes de l'API retournent des valeurs.

      -
    • LocalFileSystemSync a deux méthodes globales qui vous permet d'avoir accès à un espace virtuel : requestFileSystemSync() et resolveLocalFileSystemSyncURL(). Les méthodes sont implémentées par l'objet worker.
    • -
    • FileSystemSync représente un fichier système.
    • -
    • EntrySync représente une entrée dans un fichier système. L'entrée peut être un fichier ou un dossier.
    • -
    • DirectoryEntrySync représente un dossier dans un fichier système.
    • -
    • DirectoryReaderSync  vous permet la lecture de fichiers et dossiers à partir d'un dossier.
    • -
    • FileEntrySync représente un fichier dans un fichier système.
    • -
    • FileException est une erreur que vous pourriez rencontrer pendant l'utilisation des méthodes synchrones.
    • +
    • LocalFileSystemSync a deux méthodes globales qui vous permet d'avoir accès à un espace virtuel : requestFileSystemSync() et resolveLocalFileSystemSyncURL(). Les méthodes sont implémentées par l'objet worker.
    • +
    • FileSystemSync représente un fichier système.
    • +
    • EntrySync représente une entrée dans un fichier système. L'entrée peut être un fichier ou un dossier.
    • +
    • DirectoryEntrySync représente un dossier dans un fichier système.
    • +
    • DirectoryReaderSync  vous permet la lecture de fichiers et dossiers à partir d'un dossier.
    • +
    • FileEntrySync représente un fichier dans un fichier système.
    • +
    • FileException est une erreur que vous pourriez rencontrer pendant l'utilisation des méthodes synchrones.

    Compatibilité navigateur

    diff --git a/files/fr/web/api/filelist/index.html b/files/fr/web/api/filelist/index.html index a1749e4099..41533953da 100644 --- a/files/fr/web/api/filelist/index.html +++ b/files/fr/web/api/filelist/index.html @@ -9,7 +9,7 @@ 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).

    +

    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

    @@ -18,7 +18,7 @@ translation_of: Web/API/FileList
    <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 :

    +

    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]
    @@ -43,7 +43,7 @@ translation_of: Web/API/FileList

    item()

    -

    Cette méthode renvoie un objet File qui représente le fichier à l'indice fourni.

    +

    Cette méthode renvoie un objet File qui représente le fichier à l'indice fourni.

     File item(
        index
    @@ -59,7 +59,7 @@ translation_of: Web/API/FileList
     
     

    Valeur de retour

    -

    L'objet File qui représente le fichier demandé.

    +

    L'objet File qui représente le fichier demandé.

    Exemples

    @@ -142,7 +142,7 @@ document.querySelector("#myFiles").onchange = recupererFichiers;

    Voir aussi

    diff --git a/files/fr/web/api/filereader/readasarraybuffer/index.html b/files/fr/web/api/filereader/readasarraybuffer/index.html index 6746cc3594..cba515b488 100644 --- a/files/fr/web/api/filereader/readasarraybuffer/index.html +++ b/files/fr/web/api/filereader/readasarraybuffer/index.html @@ -12,9 +12,8 @@ translation_of: Web/API/FileReader/readAsArrayBuffer

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

    -
    -

    Nouvelle API disponible
    - La méthode {{domxref("Blob.arrayBuffer()")}} est une nouvelle API basée sur les promesses permettant de lire un fichier.

    +
    +

    Note : La méthode {{domxref("Blob.arrayBuffer()")}} est une nouvelle API basée sur les promesses permettant de lire un fichier.

    Syntaxe

    diff --git a/files/fr/web/api/filereader/readasbinarystring/index.html b/files/fr/web/api/filereader/readasbinarystring/index.html index 0cd282ac6b..2155291f2b 100644 --- a/files/fr/web/api/filereader/readasbinarystring/index.html +++ b/files/fr/web/api/filereader/readasbinarystring/index.html @@ -52,7 +52,7 @@ canvas.toBlob(function (blob) {

    Spécifications

    - +
    diff --git a/files/fr/web/api/filereader/readasdataurl/index.html b/files/fr/web/api/filereader/readasdataurl/index.html index e4d550412e..04dbbd93f1 100644 --- a/files/fr/web/api/filereader/readasdataurl/index.html +++ b/files/fr/web/api/filereader/readasdataurl/index.html @@ -93,7 +93,9 @@ translation_of: Web/API/FileReader/readAsDataURL } -
    Remarque : 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.
    +
    +

    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

    diff --git a/files/fr/web/api/filerequest/index.html b/files/fr/web/api/filerequest/index.html index b735675817..b3a223f334 100644 --- a/files/fr/web/api/filerequest/index.html +++ b/files/fr/web/api/filerequest/index.html @@ -25,7 +25,7 @@ translation_of: Web/API/FileRequest

    L'interface FileRequest hérite également de l'interface {{domxref("DOMRequest")}}.

    -

    Méthodes

    +

    Méthodes

    Aucune.

    diff --git a/files/fr/web/api/filerequest/onprogress/index.html b/files/fr/web/api/filerequest/onprogress/index.html index 6677356045..5567917dc9 100644 --- a/files/fr/web/api/filerequest/onprogress/index.html +++ b/files/fr/web/api/filerequest/onprogress/index.html @@ -10,11 +10,9 @@ translation_of: Web/API/FileRequest/onprogress ---

    {{APIRef("File System API")}} {{non-standard_header}}

    -

    Résumé

    -

    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

    +

    Syntaxe

    instanceOfFileRequest.onprogress = function;
     
    @@ -42,7 +40,7 @@ request.onprogress = function (status) { } -

    Spécification

    +

    Spécification

    Ne fait partie d'aucune spécification.

    diff --git a/files/fr/web/api/force_touch_events/index.html b/files/fr/web/api/force_touch_events/index.html index ac64c8bb46..f20d66888f 100644 --- a/files/fr/web/api/force_touch_events/index.html +++ b/files/fr/web/api/force_touch_events/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/Force_Touch_events
    {{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")}}.
    +
    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

    diff --git a/files/fr/web/api/formdata/append/index.html b/files/fr/web/api/formdata/append/index.html index f7c1e40a75..80ab87cb3f 100644 --- a/files/fr/web/api/formdata/append/index.html +++ b/files/fr/web/api/formdata/append/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/FormData/append

    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.

    +

    Note : Cette méthode est disponible dans les Web Workers.

    Syntaxe

    @@ -28,7 +28,7 @@ translation_of: Web/API/FormData/append
    formData.append(name, value);
     formData.append(name, value, filename);
    -

    Paramètres

    +

    Paramètres

    name
    @@ -92,7 +92,7 @@ formData.append('userpic[]', myFileInput.files[1], 'chris2.jpg'); diff --git a/files/fr/web/api/formdata/delete/index.html b/files/fr/web/api/formdata/delete/index.html index 3540d9d9e0..551431a588 100644 --- a/files/fr/web/api/formdata/delete/index.html +++ b/files/fr/web/api/formdata/delete/index.html @@ -16,14 +16,14 @@ translation_of: Web/API/FormData/delete

    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.

    +

    Note : Cette méthode est disponible dans les Web Workers.

    Syntaxe

    formData.delete(name);
    -

    Paramètres

    +

    Paramètres

    name
    @@ -72,7 +72,7 @@ translation_of: Web/API/FormData/delete diff --git a/files/fr/web/api/formdata/entries/index.html b/files/fr/web/api/formdata/entries/index.html index d8996c1183..dc940b71b6 100644 --- a/files/fr/web/api/formdata/entries/index.html +++ b/files/fr/web/api/formdata/entries/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/FormData/entries 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.

    +

    Note : Cette methode est disponible dans les Web Workers.

    Syntaxe

    @@ -30,7 +30,7 @@ translation_of: Web/API/FormData/entries

    Exemple

    -
    // Creation d'un objet FormData
    +
    // Creation d'un objet FormData
     var formData = new FormData();
     formData.append('key1', 'value1');
     formData.append('key2', 'value2');
    @@ -75,7 +75,7 @@ key2, value2
    diff --git a/files/fr/web/api/formdata/formdata/index.html b/files/fr/web/api/formdata/formdata/index.html index cb9a857fad..3852b6d2be 100644 --- a/files/fr/web/api/formdata/formdata/index.html +++ b/files/fr/web/api/formdata/formdata/index.html @@ -15,14 +15,14 @@ translation_of: Web/API/FormData/FormData

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

    -

    Note : Cette fonctionnalité est disponible dans Web Workers.

    +

    Note : Cette fonctionnalité est disponible dans Web Workers.

    Syntaxe

    var formData = new FormData(form)
    -

    Paramètres

    +

    Paramètres

    form {{optional_inline}}
    @@ -60,7 +60,7 @@ translation_of: Web/API/FormData/FormData
    -

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

    +

    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');
    diff --git a/files/fr/web/api/formdata/get/index.html b/files/fr/web/api/formdata/get/index.html
    index 4d5e26fd64..5eec93c7e9 100644
    --- a/files/fr/web/api/formdata/get/index.html
    +++ b/files/fr/web/api/formdata/get/index.html
    @@ -60,7 +60,7 @@ formData.get('username'); // Renvoie "Chris"
     
     
    diff --git a/files/fr/web/api/formdata/getall/index.html b/files/fr/web/api/formdata/getall/index.html
    index 4faddd8bd8..2b1ced7864 100644
    --- a/files/fr/web/api/formdata/getall/index.html
    +++ b/files/fr/web/api/formdata/getall/index.html
    @@ -16,14 +16,14 @@ translation_of: Web/API/FormData/getAll
     

    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.

    +

    Note : Cette méthode est disponible dans les Web Workers.

    Syntaxe

    formData.getAll(name);
    -

    Paramètres

    +

    Paramètres

    name
    @@ -76,7 +76,7 @@ formData.append('username', 'Bob');
    diff --git a/files/fr/web/api/formdata/has/index.html b/files/fr/web/api/formdata/has/index.html index 0074201183..2915f9d65a 100644 --- a/files/fr/web/api/formdata/has/index.html +++ b/files/fr/web/api/formdata/has/index.html @@ -16,14 +16,14 @@ translation_of: Web/API/FormData/has

    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.

    +

    Note : Cette méthode est disponible dans les Web Workers.

    Syntaxe

    formData.has(name);
    -

    Paramètres

    +

    Paramètres

    name
    @@ -74,7 +74,7 @@ formData.has('username'); // Retourne true diff --git a/files/fr/web/api/formdata/index.html b/files/fr/web/api/formdata/index.html index 2c16e20d2a..8fbf318e86 100644 --- a/files/fr/web/api/formdata/index.html +++ b/files/fr/web/api/formdata/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/FormData

    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.

    +

    Note : Cette fonctionnalité est disponible dans les Web Workers.

    Constructeur

    @@ -81,7 +81,7 @@ translation_of: Web/API/FormData diff --git a/files/fr/web/api/formdata/keys/index.html b/files/fr/web/api/formdata/keys/index.html index b6b9ad2acf..3b3b55c86c 100644 --- a/files/fr/web/api/formdata/keys/index.html +++ b/files/fr/web/api/formdata/keys/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/FormData/keys

    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.

    +

    Note : Cette méthode est disponible dans les Web Workers.

    Syntaxe

    @@ -30,7 +30,7 @@ translation_of: Web/API/FormData/keys

    Exemple

    -
    // Créer un object FormData test
    +
    // Créer un object FormData test
     var formData = new FormData();
     formData.append('cle1', 'valeur1');
     formData.append('cle2', 'valeur2');
    @@ -73,7 +73,7 @@ cle2
    diff --git a/files/fr/web/api/formdata/set/index.html b/files/fr/web/api/formdata/set/index.html index 08531cf865..2174a28c4d 100644 --- a/files/fr/web/api/formdata/set/index.html +++ b/files/fr/web/api/formdata/set/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/FormData/set

    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.

    +

    Note : Cette méthode est disponible dans les Web Workers.

    Syntaxe

    @@ -28,7 +28,7 @@ translation_of: Web/API/FormData/set
    formData.set(name, value);
     formData.set(name, value, filename);
    -

    Paramètres

    +

    Paramètres

    name
    @@ -86,7 +86,7 @@ formData.get('name'); // "72"
    diff --git a/files/fr/web/api/formdata/using_formdata_objects/index.html b/files/fr/web/api/formdata/using_formdata_objects/index.html index 29ed3971f0..93fc4bc977 100644 --- a/files/fr/web/api/formdata/using_formdata_objects/index.html +++ b/files/fr/web/api/formdata/using_formdata_objects/index.html @@ -12,7 +12,7 @@ tags: 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.

    +

    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

    @@ -37,9 +37,11 @@ request.open("POST", "http://foo.com/submitform.php"); request.send(formData); -
    Remarque : les champs « userfile » et « webmasterfile » contiennent tous deux un fichier. Le numéro attribué au champ « accountnum » est immédiatement converti en chaîne par la méthode FormData.append() (la valeur du champ peut être un objet {{ domxref("Blob") }}, {{ domxref("File") }} ou une chaîne : s’il ne s’agit ni d’un objet Blob, ni d’un objet File, la valeur est convertie en chaîne).
    +
    +

    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()")}}.

    +

    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

    @@ -109,7 +111,7 @@ form.addEventListener('submit', function(ev) {
    -

    Remarque : si vous passez une référence dans le formulaire, la méthode spécifiée dans ce dernier sera utilisée au lieu de celle définie dans l’appel de la méthode open().

    +

    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") }} :

    @@ -134,7 +136,7 @@ $.ajax({

    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.

    +

    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 index e9ea371f97..7a5ddadcec 100644 --- a/files/fr/web/api/formdata/values/index.html +++ b/files/fr/web/api/formdata/values/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/FormData/values

    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.

    +

    Note : Cette méthode est disponible dans les Web Workers.

    Syntaxe

    @@ -30,7 +30,7 @@ translation_of: Web/API/FormData/values

    Exemple

    -
    // Créer un objet FormData test
    +
    // Créer un objet FormData test
     var formData = new FormData();
     formData.append('cle1', 'valeur1');
     formData.append('cle2', 'valeur2');
    @@ -73,7 +73,7 @@ valeur2
    diff --git a/files/fr/web/api/fullscreen_api/index.html b/files/fr/web/api/fullscreen_api/index.html index 04c11bf3e3..8b0a59233a 100644 --- a/files/fr/web/api/fullscreen_api/index.html +++ b/files/fr/web/api/fullscreen_api/index.html @@ -11,11 +11,13 @@ 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.

    +

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

    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

    +

    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()") }} .

    @@ -29,10 +31,10 @@ original_slug: Web/Guide/DOM/Using_full_screen_mode

    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();
    -}
    +
    var elem = document.getElementById("myvideo");
    +if (elem.requestFullscreen) {
    +  elem.requestFullscreen();
    +}

    Différences de présentation

    @@ -52,7 +54,7 @@ original_slug: Web/Guide/DOM/Using_full_screen_mode

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

    +

    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.

    @@ -73,13 +75,13 @@ original_slug: Web/Guide/DOM/Using_full_screen_mode
    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

    +

    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

    +

    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.

    @@ -100,23 +102,23 @@ original_slug: Web/Guide/DOM/Using_full_screen_mode

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

    +

    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 :

    +

    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 :

    Specification
    @@ -187,7 +189,7 @@ original_slug: Web/Guide/DOM/Using_full_screen_mode
    -

    Spécifications

    +

    Spécifications

    @@ -231,7 +233,7 @@ original_slug: Web/Guide/DOM/Using_full_screen_mode

    Voir aussi

      -
    • Utiliser le mode plein écran
    • +
    • Utiliser le mode plein écran
    • {{ domxref("Element.requestFullscreen()") }}
    • {{ domxref("Document.exitFullscreen()") }}
    • {{ domxref("Document.fullscreen") }}
    • diff --git a/files/fr/web/api/gainnode/index.html b/files/fr/web/api/gainnode/index.html index a0df5a4c76..93d8c9bf19 100644 --- a/files/fr/web/api/gainnode/index.html +++ b/files/fr/web/api/gainnode/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/GainNode

      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.

      -

      The GainNode is increasing the gain of the output.

      +

      Un objet GainNode augmente le gain de la sortie.

    @@ -89,5 +89,5 @@ translation_of: Web/API/GainNode

    Voir aussi

    diff --git a/files/fr/web/api/gamepad_api/index.html b/files/fr/web/api/gamepad_api/index.html index 33c6a7f458..7e81e21b27 100644 --- a/files/fr/web/api/gamepad_api/index.html +++ b/files/fr/web/api/gamepad_api/index.html @@ -5,29 +5,29 @@ 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.

    +

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

    +

    See also the extensions to the Gamepad interface, for features that allow you to access the above information.

    Extensions à d'autres interfaces

    @@ -50,7 +50,7 @@ translation_of: Web/API/Gamepad_API

    Tutoriels et guides

    @@ -85,6 +85,6 @@ translation_of: Web/API/Gamepad_API

    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 index ce71e9ae6d..d30dc4dce8 100644 --- 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 @@ -5,16 +5,16 @@ 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.

    -
    + +

    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.

    +

    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

    +

    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 :

    @@ -26,15 +26,15 @@ original_slug: Web/Guide/API/Gamepad

    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.

    +

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

    +

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

    +

    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) {
    @@ -57,11 +57,11 @@ window.addEventListener("gamepaddisconnected", function(e) { gamepadHandler(e, f
      [PAGE NON TRADUITE DEPUIS ICI...]
     
    -

    Querying the Gamepad object

    +

    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:

    +

    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];
    @@ -85,7 +85,7 @@ window.addEventListener("gamepaddisconnected", function(e) { gamepadHandler(e, f
      
  • timestamp: This returns a {{ domxref("DOMHighResTimeStamp") }} representing the last time the data for this gamepad was updated, allowing developers to determine if the axes and button data have been updated from the hardware. The value must be relative to the navigationStart attribute of the {{ domxref("PerformanceTiming") }} interface. Values are monotonically increasing, meaning that they can be compared to determine the ordering of updates, as newer values will always be greater than or equal to older values. Note that this property is not currently supported in Firefox.
  • -

    Note: The Gamepad object is available on the {{ domxref("Window.gamepadconnected") }} event rather than the {{ domxref("Window") }} object itself, for security reasons. Once we have a reference to it, we can query its properties for information about the current state of the gamepad. Behind the scenes, this object will be updated every time the gamepad's state changes.

    +

    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.

    @@ -136,10 +136,10 @@ function pollGamepads() {

    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;
    +  if (typeof(b) == "object") {
    +    return b.pressed;
    +  }
    +  return b == 1.0;
     }
     
     function gameLoop() {
    diff --git a/files/fr/web/api/geolocation/getcurrentposition/index.html b/files/fr/web/api/geolocation/getcurrentposition/index.html
    index 4dc6fe3944..8168640a6c 100644
    --- a/files/fr/web/api/geolocation/getcurrentposition/index.html
    +++ b/files/fr/web/api/geolocation/getcurrentposition/index.html
    @@ -83,6 +83,6 @@ navigator.geolocation.getCurrentPosition(success, error, options);
     

    Voir aussi

    diff --git a/files/fr/web/api/geolocation/watchposition/index.html b/files/fr/web/api/geolocation/watchposition/index.html index 4e8ae61663..c2424f4774 100644 --- a/files/fr/web/api/geolocation/watchposition/index.html +++ b/files/fr/web/api/geolocation/watchposition/index.html @@ -62,9 +62,8 @@ options = { 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. - -

     

    +
    +

    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

    diff --git a/files/fr/web/api/geolocation_api/index.html b/files/fr/web/api/geolocation_api/index.html index 330ac12430..153bce57b2 100644 --- a/files/fr/web/api/geolocation_api/index.html +++ b/files/fr/web/api/geolocation_api/index.html @@ -103,8 +103,7 @@ var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_optio

    Exemple interactif

    -

    HTML

    @@ -241,6 +239,6 @@ prompt(window, diff --git a/files/fr/web/api/geolocationcoordinates/index.html b/files/fr/web/api/geolocationcoordinates/index.html index d43ecc7f16..f7897746b3 100644 --- a/files/fr/web/api/geolocationcoordinates/index.html +++ b/files/fr/web/api/geolocationcoordinates/index.html @@ -23,7 +23,7 @@ translation_of: Web/API/GeolocationCoordinates
    {{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.
    +
    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.
    @@ -62,6 +62,6 @@ translation_of: Web/API/GeolocationCoordinates

    Voir aussi

    diff --git a/files/fr/web/api/geolocationpositionerror/index.html b/files/fr/web/api/geolocationpositionerror/index.html index 541799629c..9a7f5a0af1 100644 --- a/files/fr/web/api/geolocationpositionerror/index.html +++ b/files/fr/web/api/geolocationpositionerror/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/GeolocationPositionError
    - + diff --git a/files/fr/web/api/gestureevent/index.html b/files/fr/web/api/gestureevent/index.html index 42e37d18cc..e69a862368 100644 --- a/files/fr/web/api/gestureevent/index.html +++ b/files/fr/web/api/gestureevent/index.html @@ -8,7 +8,7 @@ tags: - Interface translation_of: Web/API/GestureEvent --- -

    {{APIRef("DOM Events")}}

    +

    {{APIRef("DOM Events")}}

    {{Non-standard_header()}}

    diff --git a/files/fr/web/api/globaleventhandlers/index.html b/files/fr/web/api/globaleventhandlers/index.html index 4207c5d0d1..7c24f31bb7 100644 --- a/files/fr/web/api/globaleventhandlers/index.html +++ b/files/fr/web/api/globaleventhandlers/index.html @@ -24,13 +24,13 @@ translation_of: Web/API/GlobalEventHandlers
    {{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.
    +
    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.
    +
    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.
    +
    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é.
    +
    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")}}
    @@ -188,9 +188,9 @@ translation_of: Web/API/GlobalEventHandlers
    {{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.
    +
    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.
    +
    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é.
    diff --git a/files/fr/web/api/globaleventhandlers/onabort/index.html b/files/fr/web/api/globaleventhandlers/onabort/index.html index 48bf36f069..746e9fa76e 100644 --- a/files/fr/web/api/globaleventhandlers/onabort/index.html +++ b/files/fr/web/api/globaleventhandlers/onabort/index.html @@ -11,15 +11,13 @@ translation_of: Web/API/GlobalEventHandlers/onabort ---
    {{ ApiRef("HTML DOM") }}
    -

    Sommaire

    -

    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

    +

    Syntaxe

    window.onabort = refFonc
     
    @@ -28,15 +26,15 @@ translation_of: Web/API/GlobalEventHandlers/onabort
  • refFonc : référence à une fonction
  • -

    Exemple

    +

    Exemple

    window.onabort = function() {
       alert("Chargement interrompu.");
     }
    -

    Spécification

    +

    Spécification

    -
    ValeurConstante associéeConstante associée Description
    +
    diff --git a/files/fr/web/api/globaleventhandlers/onauxclick/index.html b/files/fr/web/api/globaleventhandlers/onauxclick/index.html index 2fe7737bd6..edf6be44f6 100644 --- a/files/fr/web/api/globaleventhandlers/onauxclick/index.html +++ b/files/fr/web/api/globaleventhandlers/onauxclick/index.html @@ -14,13 +14,13 @@ translation_of: Web/API/GlobalEventHandlers/onauxclick

    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.

    +
    +

    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;
    +
    target.onauxclick = functionRef;
     

    Valeur

    @@ -33,7 +33,7 @@ translation_of: Web/API/GlobalEventHandlers/onauxclick

    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 button = document.querySelector('button');
     var html = document.querySelector('html');
     
     function random(number) {
    @@ -51,12 +51,12 @@ button.onauxclick = function() {
     }
    -

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

    +

    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écification
    +
    diff --git a/files/fr/web/api/globaleventhandlers/onblur/index.html b/files/fr/web/api/globaleventhandlers/onblur/index.html index c4d87d1e82..3c668a51eb 100644 --- a/files/fr/web/api/globaleventhandlers/onblur/index.html +++ b/files/fr/web/api/globaleventhandlers/onblur/index.html @@ -8,11 +8,11 @@ translation_of: Web/API/GlobalEventHandlers/onblur ---

    {{ ApiRef() }}

    -

    Résumé

    +

    Résumé

    La propriété onblur renvoie le gestionnaire de l'évènement blur (perte de focus) pour l'élément courant.

    -

    Syntaxe

    +

    Syntaxe

    element.onblur = nomFonctionUtilisateur;
     
    @@ -26,7 +26,7 @@ translation_of: Web/API/GlobalEventHandlers/onblur }; -

    Exemple

    +

    Exemple

    Lorsqu'une zone de saisie n'est plus active suite à une perte du « focus », une boîte de message (alert) est affichée.

    @@ -49,13 +49,13 @@ function afficherMessage() { </script> -

    Notes

    +

    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

    +

    Spécification

    {{ DOM0() }}

    diff --git a/files/fr/web/api/globaleventhandlers/onchange/index.html b/files/fr/web/api/globaleventhandlers/onchange/index.html index e0e4aadf81..48920d3fb0 100644 --- a/files/fr/web/api/globaleventhandlers/onchange/index.html +++ b/files/fr/web/api/globaleventhandlers/onchange/index.html @@ -8,12 +8,12 @@ tags: translation_of: Web/API/GlobalEventHandlers/onchange ---

    {{ ApiRef() }}

    -

    Résumé

    +

    Résumé

    La propriété onchange définit et renvoie le gestionnaire d'évènement onChange (modification) pour l'élément courant.

    -

    Syntaxe

    +

    Syntaxe

    element.onchange = code de gestion de l'évènement
     
    -

    Notes

    +

    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;
    @@ -27,10 +27,10 @@ translation_of: Web/API/GlobalEventHandlers/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

    +

    Specification

    {{ DOM0() }}

    -

    Voir aussi

    +

    Voir aussi

    {{ languages( { "en": "en/DOM/element.onchange" } ) }}

    diff --git a/files/fr/web/api/globaleventhandlers/onclick/index.html b/files/fr/web/api/globaleventhandlers/onclick/index.html index 3d2ffb0150..b7935b47af 100644 --- a/files/fr/web/api/globaleventhandlers/onclick/index.html +++ b/files/fr/web/api/globaleventhandlers/onclick/index.html @@ -5,19 +5,19 @@ translation_of: Web/API/GlobalEventHandlers/onclick ---

    {{ ApiRef() }}

    -

    Résumé

    +

    Résumé

    La propriété onclick représente le gestionnaire d'évènement onClick de l'élément courant.

    -

    Syntaxe

    +

    Syntaxe

    element.onclick = functionRef

    -

    functionRef est une fonction ou une expression de type function. Consulter la référence des fonctions pour plus de détails.

    +

    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

    +

    Exemple

    <!doctype html>
     <html>
    @@ -55,14 +55,14 @@ border: solid blue 2px;
     p.onclick = function() { alert("moot!"); };
     
    -

    Notes

    +

    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

    +

    Spécification

    -

    Defini en HTML.

    +

    Defini en HTML.

    {{ languages( { "en": "en/DOM/element.onclick", "pl": "pl/DOM/element.onclick" } ) }}

    diff --git a/files/fr/web/api/globaleventhandlers/onclose/index.html b/files/fr/web/api/globaleventhandlers/onclose/index.html index e7234b295e..757077c904 100644 --- a/files/fr/web/api/globaleventhandlers/onclose/index.html +++ b/files/fr/web/api/globaleventhandlers/onclose/index.html @@ -31,7 +31,7 @@ translation_of: Web/API/GlobalEventHandlers/onclose

    Spécifications

    -
    Spécification
    +
    diff --git a/files/fr/web/api/globaleventhandlers/ondblclick/index.html b/files/fr/web/api/globaleventhandlers/ondblclick/index.html index 005a6e7264..a12610afcf 100644 --- a/files/fr/web/api/globaleventhandlers/ondblclick/index.html +++ b/files/fr/web/api/globaleventhandlers/ondblclick/index.html @@ -8,9 +8,9 @@ tags: translation_of: Web/API/GlobalEventHandlers/ondblclick ---

    {{ ApiRef() }}

    -

    Résumé

    +

    Résumé

    La propriété ondblclick renvoie le gestionnaire d'évènement dblclick de l'élément courant.

    -

    Syntaxe

    +

    Syntaxe

    element.ondblclick = nomDeFonction;
     
      @@ -18,7 +18,7 @@ translation_of: Web/API/GlobalEventHandlers/ondblclick
    element.ondblclick = function() { alert("Évènement dblclick détecté"); };
     
    -

    Exemple

    +

    Exemple

    <html>
     
     <head>
    @@ -53,8 +53,8 @@ border: solid blue 2px;
     </body>
     </html>
     
    -

    Notes

    +

    Notes

    L'évènement dblclick est déclenché lorsque l'utilisateur double-clique sur un élément.

    -

    Spécification

    +

    Spécification

    {{ DOM0() }}

    {{ languages( { "en": "en/DOM/element.ondblclick" } ) }}

    diff --git a/files/fr/web/api/globaleventhandlers/onerror/index.html b/files/fr/web/api/globaleventhandlers/onerror/index.html index 192f28e23c..203d536eb2 100644 --- a/files/fr/web/api/globaleventhandlers/onerror/index.html +++ b/files/fr/web/api/globaleventhandlers/onerror/index.html @@ -28,11 +28,11 @@ translation_of: Web/API/GlobalEventHandlers/onerror

    Paramètres de la fonction :

      -
    • message : message d'erreur (chaîne ou objet évènement). Disponible comme event (sic !) dans le gestionnaire de HTML onerror="" et aussi comme objet évènement lors de l'envoi d'un Event à window, auquel cas les autres arguments ne seront pas fournis (au contraire de ErrorEvent, qui amène le passage de l'ensemble complet des arguments à window.onerror, tandis que seul l'objet d'évènement d'erreur est  passé aux gestionnaires de window.addEventListener('error'))
    • +
    • message : message d'erreur (chaîne ou objet évènement). Disponible comme event (sic !) dans le gestionnaire de HTML onerror="" et aussi comme objet évènement lors de l'envoi d'un Event à window, auquel cas les autres arguments ne seront pas fournis (au contraire de ErrorEvent, qui amène le passage de l'ensemble complet des arguments à window.onerror, tandis que seul l'objet d'évènement d'erreur est  passé aux gestionnaires de window.addEventListener('error'))
    • source : l'URL du script où l'erreur a été déclenchée (chaîne)
    • noligne : le numéro de ligne où l'erreur a été déclenchée (nombre)
    • nocolonne : le numéro de colonne où l'erreur a été déclenchée (nombre)
    • -
    • erreur : un Error Object (objet) {{gecko_minversion_inline("31.0")}}
    • +
    • erreur : un Error Object (objet) {{gecko_minversion_inline("31.0")}}

    element.onerror (et window.addEventListener('error'))

    @@ -43,7 +43,7 @@ translation_of: Web/API/GlobalEventHandlers/onerror

    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.

    +

    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();
    @@ -69,7 +69,7 @@ translation_of: Web/API/GlobalEventHandlers/onerror
     
     

    Spécifications

    -
    Spécification
    +
    diff --git a/files/fr/web/api/globaleventhandlers/onfocus/index.html b/files/fr/web/api/globaleventhandlers/onfocus/index.html index 98485a92d9..ee735aeeba 100644 --- a/files/fr/web/api/globaleventhandlers/onfocus/index.html +++ b/files/fr/web/api/globaleventhandlers/onfocus/index.html @@ -8,14 +8,14 @@ tags: translation_of: Web/API/GlobalEventHandlers/onfocus ---

    {{ ApiRef() }}

    -

    Résumé

    +

    Résumé

    La propriété onfocus renvoie le gestionnaire de l'évènement focus pour l'élément courant.

    -

    Syntaxe

    +

    Syntaxe

    code de gestion de l'évènement = element.onfocus
     
    -

    Notes

    +

    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

    +

    Spécification

    {{ DOM0() }}

    {{ languages( { "en": "en/DOM/element.onfocus" } ) }}

    diff --git a/files/fr/web/api/globaleventhandlers/onkeydown/index.html b/files/fr/web/api/globaleventhandlers/onkeydown/index.html index 3753a32bae..ba7fb146e4 100644 --- a/files/fr/web/api/globaleventhandlers/onkeydown/index.html +++ b/files/fr/web/api/globaleventhandlers/onkeydown/index.html @@ -8,16 +8,16 @@ tags: translation_of: Web/API/GlobalEventHandlers/onkeydown ---

    {{ ApiRef() }}

    -

    Résumé

    +

    Résumé

    La propriété onkeydown définit et renvoie le gestionnaire d'évènement keydown de l'élément courant.

    -

    Syntaxe

    +

    Syntaxe

    code de gestion de l'évènement = element.onkeydown
     
    -

    Notes

    +

    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

    +

    À 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() }}

    {{ languages( { "en": "en/DOM/element.onkeydown", "pl": "pl/DOM/element.onkeydown" } ) }}

    diff --git a/files/fr/web/api/globaleventhandlers/onkeypress/index.html b/files/fr/web/api/globaleventhandlers/onkeypress/index.html index 83c4c911bc..abbf50f4ac 100644 --- a/files/fr/web/api/globaleventhandlers/onkeypress/index.html +++ b/files/fr/web/api/globaleventhandlers/onkeypress/index.html @@ -8,16 +8,16 @@ tags: translation_of: Web/API/GlobalEventHandlers/onkeypress ---

    {{ ApiRef() }}

    -

    Résumé

    +

    Résumé

    La propriété onkeypress définit et renvoie le gestionnaire d'évènement keypress de l'élément courant.

    -

    Syntaxe

    +

    Syntaxe

    element.onkeypress = code de gestion de l'évènement
     
    -

    Notes

    +

    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

    +

    À 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() }}

    {{ languages( { "en": "en/DOM/element.onkeypress" } ) }}

    diff --git a/files/fr/web/api/globaleventhandlers/onkeyup/index.html b/files/fr/web/api/globaleventhandlers/onkeyup/index.html index 6c27a7cc02..ae3465af7c 100644 --- a/files/fr/web/api/globaleventhandlers/onkeyup/index.html +++ b/files/fr/web/api/globaleventhandlers/onkeyup/index.html @@ -6,18 +6,18 @@ tags: translation_of: Web/API/GlobalEventHandlers/onkeyup ---

    {{ ApiRef() }}

    -

    Résumé

    +

    Résumé

    La propriété onkeyup renvoi le gestionnaire d'évènements onKeyUp de l'élément courant.

    -

    Syntaxe

    +

    Syntaxe

    code de gestion de l'évènement = element.onkeyup

    -

    Exemple

    +

    Exemple

     <input type="text" onKeyUp="cleRelachee(event)">
      <script>function cleRelachee(evt){ alert(evt.keyCode) }</script>
     
    -

    Notes

    +

    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

    +

    Voir aussi

    +

    onkeypress onkeydown

    +

    Spécification

    Ne fait partie d'aucune spécification.

    {{ languages( { "en": "en/DOM/element.onkeyup", "pl": "pl/DOM/element.onkeyup" } ) }}

    diff --git a/files/fr/web/api/globaleventhandlers/onload/index.html b/files/fr/web/api/globaleventhandlers/onload/index.html index d8a5227c92..e1c9c1d4c7 100644 --- a/files/fr/web/api/globaleventhandlers/onload/index.html +++ b/files/fr/web/api/globaleventhandlers/onload/index.html @@ -6,22 +6,19 @@ tags: translation_of: Web/API/GlobalEventHandlers/onload ---

    {{ ApiRef() }}

    -

    Résumé

    +

    Résumé

    Un gestionnaire d'évènement pour l'évènement load (chargement) de la fenêtre.

    -

    Syntaxe

    +

    Syntaxe

    window.onload = refFct;
     
    -

    Paramètres

    +

    Paramètres

    • refFct est une référence à une fonction.
    -

    Exemple

    +

    Exemple

    window.onload = init;
     
    -

    Notes

    +

    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.

    -
    -  
    -

    {{ languages( { "en": "en/DOM/window.onload", "pl": "pl/DOM/window.onload" } ) }}

    +

    Spécification

    +

    Ne fait partie d'aucune spécification.

    \ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onmousedown/index.html b/files/fr/web/api/globaleventhandlers/onmousedown/index.html index 8da0125fb7..f0f533569d 100644 --- a/files/fr/web/api/globaleventhandlers/onmousedown/index.html +++ b/files/fr/web/api/globaleventhandlers/onmousedown/index.html @@ -8,13 +8,13 @@ tags: translation_of: Web/API/GlobalEventHandlers/onmousedown ---

    {{ ApiRef() }}

    -

    Résumé

    +

    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

    +

    Syntaxe

    code de gestion de l'évènement = element.onMouseDown
     
    -

    Notes

    +

    Notes

    L'évènement mousedown se déclenche lorsque l'utilisateur appuie sur le bouton gauche de la souris.

    -

    Spécification

    +

    Spécification

    {{ DOM0() }}

    {{ languages( { "en": "en/DOM/element.onmousedown", "pl": "pl/DOM/element.onmousedown" } ) }}

    diff --git a/files/fr/web/api/globaleventhandlers/onmousemove/index.html b/files/fr/web/api/globaleventhandlers/onmousemove/index.html index b89d701db6..0521bff2f8 100644 --- a/files/fr/web/api/globaleventhandlers/onmousemove/index.html +++ b/files/fr/web/api/globaleventhandlers/onmousemove/index.html @@ -9,33 +9,29 @@ translation_of: Web/API/GlobalEventHandlers/onmousemove ---

    {{ ApiRef() }}

    -

    Résumé

    +

    Résumé

    La propriété onmousemove renvoie le code de gestion de l'évènement mousemove pour l'élément courant.

    -

    Syntax

    +

    Syntax

    element.onmousemove = functionRef

    -

    functionRef est une fonction ou une expression de type function. Consulter la référence des fonctions pour plus de détails.

    +

    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

    +

    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

    +

    Notes

    L'évènement mousemove se déclenche lorsque l'utilisateur déplace la souris.

    -

    Spécification

    +

    Spécification

    {{ DOM0() }}

    - -
     
    - -

    {{ languages( { "en": "en/DOM/element.onmousemove", "pl": "pl/DOM/element.onmousemove" } ) }}

    diff --git a/files/fr/web/api/globaleventhandlers/onmouseout/index.html b/files/fr/web/api/globaleventhandlers/onmouseout/index.html index ac9fb708bd..e1ef1192aa 100644 --- a/files/fr/web/api/globaleventhandlers/onmouseout/index.html +++ b/files/fr/web/api/globaleventhandlers/onmouseout/index.html @@ -8,13 +8,13 @@ tags: translation_of: Web/API/GlobalEventHandlers/onmouseout ---

    {{ ApiRef() }}

    -

    Résumé

    +

    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

    +

    Syntaxe

    code de gestion de l'évènement = element.onmouseout
     
    -

    Notes

    +

    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

    +

    Spécification

    {{ DOM0() }}

    {{ languages( { "en": "en/DOM/element.onmouseout" } ) }}

    diff --git a/files/fr/web/api/globaleventhandlers/onmouseover/index.html b/files/fr/web/api/globaleventhandlers/onmouseover/index.html index f5f46d7ac9..cd357f569f 100644 --- a/files/fr/web/api/globaleventhandlers/onmouseover/index.html +++ b/files/fr/web/api/globaleventhandlers/onmouseover/index.html @@ -6,15 +6,12 @@ tags: translation_of: Web/API/GlobalEventHandlers/onmouseover ---

    {{ ApiRef() }}

    -

    Résumé

    +

    Résumé

    La propriété onmouseover renvoie le code de gestion de l'évènement onMouseOver pour l'élément courant.

    -

    Syntaxe

    +

    Syntaxe

    code de gestion de l'évènement = element.onmouseover
     
    -

    Notes

    +

    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.

    -
    -  
    -

    {{ languages( { "en": "en/DOM/element.onmouseover", "pl": "pl/DOM/element.onmouseover" } ) }}

    +

    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 index c283e36862..b50f92fa88 100644 --- a/files/fr/web/api/globaleventhandlers/onmouseup/index.html +++ b/files/fr/web/api/globaleventhandlers/onmouseup/index.html @@ -8,13 +8,13 @@ tags: translation_of: Web/API/GlobalEventHandlers/onmouseup ---

    {{ ApiRef() }}

    -

    Résumé

    +

    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

    +

    Syntaxe

    code de gestion de l'évènement = element.onMouseUp
     
    -

    Notes

    +

    Notes

    L'évènement mouseup se déclenche lorsque l'utilisateur relâche le bouton gauche de la souris.

    -

    Spécification

    +

    Spécification

    {{ DOM0() }}

    {{ languages( { "en": "en/DOM/element.onmouseup" } ) }}

    diff --git a/files/fr/web/api/globaleventhandlers/onreset/index.html b/files/fr/web/api/globaleventhandlers/onreset/index.html index 6b6a4569e1..8fd9028eb7 100644 --- a/files/fr/web/api/globaleventhandlers/onreset/index.html +++ b/files/fr/web/api/globaleventhandlers/onreset/index.html @@ -13,18 +13,18 @@ translation_of: Web/API/GlobalEventHandlers/onreset

    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

    +

    Syntaxe

    window.onreset = funcRef;
     
    -

    Paramètres

    +

    Paramètres

    • funcRef est une référence à une fonction.
    -

    Exemple

    +

    Exemple

    <html>
     <script>
    @@ -47,13 +47,13 @@ function hit() {
     </html>
     
    -

    Notes

    +

    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écification

    -
    Spécification
    +
    diff --git a/files/fr/web/api/globaleventhandlers/onresize/index.html b/files/fr/web/api/globaleventhandlers/onresize/index.html index 635fa2d4c4..1e4ca16f5c 100644 --- a/files/fr/web/api/globaleventhandlers/onresize/index.html +++ b/files/fr/web/api/globaleventhandlers/onresize/index.html @@ -9,13 +9,13 @@ translation_of_original: Web/API/Element.onresize ---

    {{ ApiRef() }}

    -

    Résumé

    +

    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

    +

    Syntaxe

    // attribue une fonction anonyme à onresize
     window.onresize = function(){alert('Redimensionnement de la fenêtre')}
    @@ -31,7 +31,7 @@ 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

    +

    Exemple

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
    @@ -56,11 +56,11 @@ window.onresize = sayHi;
     </body>
     </html>
    -

    Notes

    +

    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

    +

    Spécification

    {{ DOM0() }}

    diff --git a/files/fr/web/api/globaleventhandlers/onscroll/index.html b/files/fr/web/api/globaleventhandlers/onscroll/index.html index 5afe8002a1..a8e1f6bbd2 100644 --- a/files/fr/web/api/globaleventhandlers/onscroll/index.html +++ b/files/fr/web/api/globaleventhandlers/onscroll/index.html @@ -6,13 +6,13 @@ tags: translation_of: Web/API/GlobalEventHandlers/onscroll ---

    {{ ApiRef() }}

    -

    Résumé

    +

    Résumé

    La propriété onscroll renvoie le gestionnaire d'évènement scroll pour l'élément courant.

    -

    Syntaxe

    +

    Syntaxe

    code de gestion d'évènement = element.onscroll;
     
    -

    Notes

    +

    Notes

    L'évènement scroll se déclenche lorsque l'utilisateur fait défiler le contenu d'un élément.

    -

    Spécification

    +

    Spécification

    DOM Level 0. Ne fait partie d'aucune spécification.

    {{ languages( { "en": "en/DOM/element.onscroll" } ) }}

    diff --git a/files/fr/web/api/globaleventhandlers/onselect/index.html b/files/fr/web/api/globaleventhandlers/onselect/index.html index 862980360f..fea6ba3dde 100644 --- a/files/fr/web/api/globaleventhandlers/onselect/index.html +++ b/files/fr/web/api/globaleventhandlers/onselect/index.html @@ -15,9 +15,9 @@ translation_of: Web/API/GlobalEventHandlers/onselect

    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

    +

    Syntaxe

    -
    target.onselect = functionRef;
    +
    target.onselect = functionRef;
     

    Valeur

    @@ -30,12 +30,12 @@ translation_of: Web/API/GlobalEventHandlers/onselect

    HTML

    -
    <textarea>Essayez de sélectionner du texte dans cet élément.</textarea>
    +
    <textarea>Essayez de sélectionner du texte dans cet élément.</textarea>
     <p id="log"></p>

    JavaScript

    -
    function enregistrerSelection(event) {
    +
    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}`;
    @@ -48,9 +48,9 @@ textarea.onselect = enregistrerSelection;

    {{EmbedLiveSample("Examples")}}

    -

    Spécification

    +

    Spécification

    -
    Spécification
    +
    diff --git a/files/fr/web/api/globaleventhandlers/onwheel/index.html b/files/fr/web/api/globaleventhandlers/onwheel/index.html index e364ee08d6..00be813af4 100644 --- a/files/fr/web/api/globaleventhandlers/onwheel/index.html +++ b/files/fr/web/api/globaleventhandlers/onwheel/index.html @@ -16,11 +16,11 @@ original_slug: Web/API/Element/onwheel

    Syntaxe

    -
    element.onwheel = function() { .. }
    +
    element.onwheel = function() { .. }

    Spécification

    -
    Spécification
    +
    diff --git a/files/fr/web/api/headers/index.html b/files/fr/web/api/headers/index.html index bb33724fa5..bd5d8fd41b 100644 --- a/files/fr/web/api/headers/index.html +++ b/files/fr/web/api/headers/index.html @@ -14,7 +14,7 @@ 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.

    +

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

    @@ -25,7 +25,7 @@ translation_of: Web/API/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.

    +

    Note : Vous pouvez trouver plus d'informations à propos des Headers disponibles en lisant la page suivante : HTTP headers.

    Constructeur

    @@ -59,15 +59,15 @@ translation_of: Web/API/Headers
    -

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

    +

    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

    @@ -81,15 +81,15 @@ translation_of: Web/API/Headers

    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();
    +
    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.

    +

    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({
    +
    var mesHeaders = new Headers({
         'Content-Type': 'text/xml'
     });
     
    diff --git a/files/fr/web/api/history/index.html b/files/fr/web/api/history/index.html
    index 615def5256..dcc99caefd 100644
    --- a/files/fr/web/api/history/index.html
    +++ b/files/fr/web/api/history/index.html
    @@ -8,9 +8,9 @@ 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.

    +

    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

    +

    Propriétés

    L'interface History n'hérite d'aucune propriété.

    @@ -34,21 +34,23 @@ translation_of: Web/API/History
    {{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.
    +
    +

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

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

    diff --git a/files/fr/web/api/history/length/index.html b/files/fr/web/api/history/length/index.html index aae76e8157..bbed2b4976 100644 --- a/files/fr/web/api/history/length/index.html +++ b/files/fr/web/api/history/length/index.html @@ -5,7 +5,7 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/history_api/example/index.html b/files/fr/web/api/history_api/example/index.html index c7c7505a00..2376be43ae 100644 --- a/files/fr/web/api/history_api/example/index.html +++ b/files/fr/web/api/history_api/example/index.html @@ -5,9 +5,10 @@ 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.phppage_deux.php et page_trois.php). Pour tester cet exemple, merci de créer les fichiers suivants :

    +

    page_un.php:

    -
    -
    <?php
    +
    +
    <?php
         $page_title = "Page un";
     
         $as_json = false;
    @@ -51,10 +52,10 @@ original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur/Example
         }
     ?>
     
    -
    +

    page_deux.php:

    -
    -
    <?php
    +
    +
    <?php
         $page_title = "Page deux";
     
         $as_json = false;
    @@ -98,10 +99,10 @@ original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur/Example
         }
     ?>
     
    -
    +

    page_trois.php:

    -
    -
    <?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>";
     
    @@ -136,8 +137,9 @@ original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur/Example
         }
     ?>
     
    -
    +

    css/style.css:

    +
    #ajax-loader {
         position: fixed;
         display: table;
    @@ -175,8 +177,8 @@ original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur/Example
     <link rel="stylesheet" href="css/style.css" />
     

    js/ajax_nav.js:

    -
    -
    "use strict";
    +
    +
    "use strict";
     
     var ajaxRequest = new (function () {
     
    @@ -382,10 +384,12 @@ var ajaxRequest = new (function () {
     
     })();
     
    + +
    +

    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 10const 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. +

    -
    - 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 10const 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.

    +

    Pour plus d'informations, voyez : Manipuler l'historique du navigateur.

    Lire également

    • {{ domxref("window.history") }}
    • diff --git a/files/fr/web/api/history_api/index.html b/files/fr/web/api/history_api/index.html index 67b40d67f2..6fc89eae15 100644 --- a/files/fr/web/api/history_api/index.html +++ b/files/fr/web/api/history_api/index.html @@ -49,7 +49,9 @@ original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur
      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.
      +
      +

      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

      @@ -57,21 +59,21 @@ original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur

      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.

      +

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

      +

      Exemple de la méthode pushState()

      -

      Supposons que http://mozilla.org/foo.html exécute la séquence JavaScript suivante :

      +

      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.

      +

      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.

      +

      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.

      +

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

      @@ -90,7 +92,9 @@ history.pushState(stateObj, "page 2", "bar.html");
    -
    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.
    +
    +

    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 :

    @@ -102,7 +106,7 @@ history.pushState(stateObj, "page 2", "bar.html");

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

    @@ -112,18 +116,20 @@ history.pushState(stateObj, "page 2", "bar.html");

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

    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 :

    +

    Supposons que http://mozilla.org/foo.html exécute le code JavaScript suivant :

    -
    var stateObj = { foo: "bar" };
    -history.pushState(stateObj, "page 2", "bar.html");
    +
    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");
    +
    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.

    @@ -137,7 +143,7 @@ history.push

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

    +

    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 :

    @@ -146,7 +152,7 @@ history.push

    Exemples

    -

    Pour un exemple comple de site web AJAX, vous pouvez voir : Exemple de navigation en Ajax.

    +

    Pour un exemple comple de site web AJAX, vous pouvez voir : Exemple de navigation en Ajax.

    Spécifications

    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 index 8e95bc78bb..d6349a6d4b 100644 --- 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 @@ -6,9 +6,11 @@ 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.

    -

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

    +
    +

    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

    +

    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.

    @@ -40,7 +42,7 @@ original_slug: Web/API/API_HTML_Drag_and_Drop/Opérations_de_glissement

     

    -

    Démarrer une opération de glissement

    +

    Démarrer une opération de glissement

    Dans cet exemple, un scrutateur est ajouté à l'événement dragstart en utilisant l'attribut ondragstart.

    @@ -51,26 +53,26 @@ original_slug: Web/API/API_HTML_Drag_and_Drop/Opérations_de_glissement

    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

    +

    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.

    +

    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.

    +

    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.

    +

    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.

    +

    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 :

    +

    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.

    +

    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.

    +

    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);
    @@ -80,20 +82,20 @@ 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.

    +

    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.

    +

    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.

    +

    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

    +

    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.

    +

    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);
     
    @@ -121,13 +123,13 @@ dt.setData("text/plain", "http://www.mozilla.org");

    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.

    +

    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

    +

    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.

    +

    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";
     
    @@ -153,15 +155,15 @@ dt.setData("text/plain", "http://www.mozilla.org");
    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.

    +

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

    +

    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.

    +

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

    +

    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";
    @@ -171,19 +173,19 @@ event.dataTransfer.dropEffect = "copy";
     
     

    Vous pouvez utiliser la valeur none pour interdir tout dépôt à cet emplacement.

    -

    Spécifier les cibles de dépôt

    +

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

    +

    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.

    +

    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.

    +

    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)
     {
    @@ -193,13 +195,13 @@ event.dataTransfer.dropEffect = "copy";
     }
     
    -

    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.

    +

    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.

    +

    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

    +

    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.

    +

    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.

    @@ -208,21 +210,21 @@ event.dataTransfer.dropEffect = "copy"; }
    -

    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.

    +

    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.

    +

    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.

    +

    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

    +

    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.

    +

    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.

    +

    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)
     {
    @@ -232,13 +234,13 @@ event.dataTransfer.dropEffect = "copy";
     }
     
    -

    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.

    +

    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.

    +

    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.

    +

    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)
     {
    @@ -256,7 +258,7 @@ event.dataTransfer.dropEffect = "copy";
     }
     
    -

    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.

    +

    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:

    @@ -265,7 +267,7 @@ event.dataTransfer.dropEffect = "copy";

    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.

    +

    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.

    @@ -284,12 +286,12 @@ event.dataTransfer.dropEffect = "copy";

    This method relies on JavaScript functionality available in Firefox 3. However the code could be adjusted to support other platforms.

    -

    Finishing a Drag

    +

    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.

    +

    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.

    +

    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.

    +

    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 index 8a41f5a36f..f9856ebd08 100644 --- a/files/fr/web/api/html_drag_and_drop_api/index.html +++ b/files/fr/web/api/html_drag_and_drop_api/index.html @@ -12,7 +12,9 @@ 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.

    +

    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.

    @@ -41,12 +43,12 @@ original_slug: Web/API/API_HTML_Drag_and_Drop
    - + - + @@ -66,17 +68,19 @@ original_slug: Web/API/API_HTML_Drag_and_Drop - + - +
    Spécification
    {{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)…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).…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')}}
    {{event('dragstart')}} {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}}…l'utilisateur commence à déplacer un élément (voir démarrer une opération de glissement).…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).…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.

    +
    +

    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

    @@ -101,11 +105,13 @@ original_slug: Web/API/API_HTML_Drag_and_Drop

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

    +
    +

    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.

    +

    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

    @@ -125,7 +131,7 @@ function dragstart_handler(ev) { <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.

    +

    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

    @@ -141,7 +147,7 @@ function dragstart_handler(ev) { }
    -

    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.

    +

    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

    @@ -157,7 +163,7 @@ function dragstart_handler(ev) { }
    -

    Pour en savoir plus, voir Définir l'image de feedback pour le glisser-déposer.

    +

    Pour en savoir plus, voir Définir l'image de feedback pour le glisser-déposer.

    Définir l'effet de déplacement

    @@ -180,7 +186,7 @@ function dragstart_handler(ev) { }
    -

    See Drag Effects for more details.

    +

    See Drag Effects for more details.

    Définir la zone où déposer l'élément déplacé

    @@ -241,13 +247,13 @@ function drop_handler(ev) {

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

    +

    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

    +

    Exemples et démos

    -

    Voir aussi

    +

    Voir aussi

    diff --git a/files/fr/web/api/htmlbuttonelement/index.html b/files/fr/web/api/htmlbuttonelement/index.html index b9bb05e2c0..267f98b17b 100644 --- a/files/fr/web/api/htmlbuttonelement/index.html +++ b/files/fr/web/api/htmlbuttonelement/index.html @@ -11,70 +11,70 @@ 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.

    +

      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

    +

    Propriétés

    -

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

    +

    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.
    +
    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.
    +
    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 .
    +
    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
    .
    +
    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.
    +
    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.
    +
    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.
    +
    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.
    +
    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.
    +
    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.
    +
    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".
    +
    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.
    +
    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 .
    +
    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: +
    : 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}}
    • +
    • "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.
    +
    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.
    +
    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.
    +
    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 .
    +
    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

    +

    Les méthodes

    -

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

    +

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

    - +
    - + @@ -83,7 +83,7 @@ translation_of: Web/API/HTMLButtonElement @@ -91,12 +91,12 @@ translation_of: Web/API/HTMLButtonElement

    setCustomValidity(in DOMString error)

    - +
    NomType de retourType de retour Description
    checkValidity() {{domxref("Boolean")}} -

    Non pris en charge pour les éléments de bouton.

    +

    Non pris en charge pour les éléments de bouton.

    voidNon pris en charge pour les éléments de bouton.Non 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.

    +

    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

    @@ -110,26 +110,26 @@ translation_of: Web/API/HTMLButtonElement {{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". + 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 accesskeysont 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().
    + 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")}}. + Aucun changement de  {{SpecName("DOM1")}}. {{SpecName('DOM1', 'level-one-html.html#ID-34812697', 'HTMLButtonElement')}} {{Spec2('DOM1')}} - . Définition initiale + . Définition initiale @@ -138,8 +138,8 @@ translation_of: Web/API/HTMLButtonElement

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

    -

    Voir également

    +

    Voir également

      -
    • Élément HTML implémentant cette interface : {{HTMLElement("button")}}
    • +
    • Élément HTML implémentant cette interface : {{HTMLElement("button")}}
    diff --git a/files/fr/web/api/htmlcanvaselement/getcontext/index.html b/files/fr/web/api/htmlcanvaselement/getcontext/index.html index d3f60a88a1..db299b5342 100644 --- a/files/fr/web/api/htmlcanvaselement/getcontext/index.html +++ b/files/fr/web/api/htmlcanvaselement/getcontext/index.html @@ -25,8 +25,8 @@ translation_of: Web/API/HTMLCanvasElement/getContext
    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}}.
    • +
    • "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.
    diff --git a/files/fr/web/api/htmlcanvaselement/height/index.html b/files/fr/web/api/htmlcanvaselement/height/index.html index 6dda886f53..c56de245f4 100644 --- a/files/fr/web/api/htmlcanvaselement/height/index.html +++ b/files/fr/web/api/htmlcanvaselement/height/index.html @@ -14,11 +14,11 @@ translation_of: Web/API/HTMLCanvasElement/height -

    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.

    +

    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

    +

    Syntaxe

    var pxl = canvas.height;
     canvas.height = pxl;
    @@ -68,7 +68,7 @@ console.log(canvas.height); // 300
     
     

    {{Compat("api.HTMLCanvasElement.height")}}

    -

    Voir aussi

    +

    Voir aussi

    • L'interface la définissant, {{domxref("HTMLCanvasElement")}}.
    • diff --git a/files/fr/web/api/htmlcanvaselement/index.html b/files/fr/web/api/htmlcanvaselement/index.html index b87a8ee1fd..bdfdfd8945 100644 --- a/files/fr/web/api/htmlcanvaselement/index.html +++ b/files/fr/web/api/htmlcanvaselement/index.html @@ -7,7 +7,7 @@ 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")}}.

      +

      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

      @@ -111,7 +111,9 @@ translation_of: Web/API/HTMLCanvasElement void mozFetchAsStream(in {{interface("nsIInputStreamCallback")}} callback, [optional] in DOMString type) {{non-standard_inline}} void Cré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.
      +
      +

      Note : Cette méthode ne peut être utilisée que depuis le code chrome.

      +
      diff --git a/files/fr/web/api/htmlcollection/index.html b/files/fr/web/api/htmlcollection/index.html index ef8d29878a..4776f87c85 100644 --- a/files/fr/web/api/htmlcollection/index.html +++ b/files/fr/web/api/htmlcollection/index.html @@ -9,7 +9,7 @@ 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.

      +

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

      diff --git a/files/fr/web/api/htmlcontentelement/getdistributednodes/index.html b/files/fr/web/api/htmlcontentelement/getdistributednodes/index.html index 0b80a65c12..282b4a2933 100644 --- a/files/fr/web/api/htmlcontentelement/getdistributednodes/index.html +++ b/files/fr/web/api/htmlcontentelement/getdistributednodes/index.html @@ -17,14 +17,14 @@ translation_of: Web/API/HTMLContentElement/getDistributedNodes
      var nodeList = object.getDistributedNodes()
       
      -

      Exemple

      +

      Exemple

      // Récupère les éléments
       var nodes = myContentObject.getDistributedNodes();
      -

      Spécifications

      +

      Spécifications

      - +
      diff --git a/files/fr/web/api/htmlcontentelement/index.html b/files/fr/web/api/htmlcontentelement/index.html index ef454595d1..9746995c4a 100644 --- a/files/fr/web/api/htmlcontentelement/index.html +++ b/files/fr/web/api/htmlcontentelement/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/HTMLContentElement

      L'interface HTMLContentElement represente un élément HTML {{HTMLElement("content")}}, utilisé dans le Shadow DOM

      -

      Propriétés

      +

      Propriétés

      Cette interface hérite des propriétés de {{domxref("HTMLElement")}}.

      @@ -33,7 +33,7 @@ translation_of: Web/API/HTMLContentElement

      Spécifications

      -
      Spécification
      +
      diff --git a/files/fr/web/api/htmlcontentelement/select/index.html b/files/fr/web/api/htmlcontentelement/select/index.html index bb6160b8db..f5b8eda778 100644 --- a/files/fr/web/api/htmlcontentelement/select/index.html +++ b/files/fr/web/api/htmlcontentelement/select/index.html @@ -18,14 +18,14 @@ translation_of: Web/API/HTMLContentElement/select
      object.select = "CSSselector CSSselector ...";
       
      -

      Exemple

      +

      Exemple

      // Choisi les éléments <h1> et les elements avec la class "error"
       myContentObject.select = "h1 .error";
      -

      Spécifications

      +

      Spécifications

      -
      Spécification
      +
      diff --git a/files/fr/web/api/htmldialogelement/close_event/index.html b/files/fr/web/api/htmldialogelement/close_event/index.html index e6920a2db2..e2a81f2a09 100644 --- a/files/fr/web/api/htmldialogelement/close_event/index.html +++ b/files/fr/web/api/htmldialogelement/close_event/index.html @@ -13,7 +13,7 @@ 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

      +

      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.

      Specification
      @@ -42,7 +42,7 @@ translation_of: Web/API/HTMLDialogElement/close_event

      HTML

      -
      <dialog class="example-dialog">
      +
      <dialog class="example-dialog">
         <button class="close" type="reset">Close</button>
       </dialog>
       
      @@ -50,18 +50,14 @@ translation_of: Web/API/HTMLDialogElement/close_event
       
       <div class="result"></div>
      -

      JS

      -
      const result = document.querySelector('.result')
      +
      const result = document.querySelector('.result')
       
       const dialog = document.querySelector('.example-dialog')
       dialog.addEventListener('close', (event) => {
      diff --git a/files/fr/web/api/htmldialogelement/index.html b/files/fr/web/api/htmldialogelement/index.html
      index 7a5458bf48..15d1449571 100644
      --- a/files/fr/web/api/htmldialogelement/index.html
      +++ b/files/fr/web/api/htmldialogelement/index.html
      @@ -54,7 +54,7 @@ translation_of: Web/API/HTMLDialogElement
       
       

      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 -->
      +
        <!-- Simple pop-up dialog box, containing a form -->
         <dialog id="favDialog">
           <form method="dialog">
             <section>
      @@ -108,7 +108,7 @@ translation_of: Web/API/HTMLDialogElement
         </script>
      -

      Note: You can find this example on GitHub as htmldialogelement-basic (see it live also).

      +

      Note : You can find this example on GitHub as htmldialogelement-basic (see it live also).

      Specifications

      diff --git a/files/fr/web/api/htmldocument/index.html b/files/fr/web/api/htmldocument/index.html index ff96e73ff6..649b922b25 100644 --- a/files/fr/web/api/htmldocument/index.html +++ b/files/fr/web/api/htmldocument/index.html @@ -5,12 +5,12 @@ 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).

      +

      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 index fa212865d4..e89e767a56 100644 --- a/files/fr/web/api/htmlelement/accesskey/index.html +++ b/files/fr/web/api/htmlelement/accesskey/index.html @@ -16,7 +16,7 @@ original_slug: Web/API/Element/accessKey
       
      -

      La propriété Element.accessKey définit la touche sur laquelle l'utilisateur doit appuyer pour accéder à l'élément.

      +

      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 index 79b3ef1424..836a817daf 100644 --- a/files/fr/web/api/htmlelement/animationend_event/index.html +++ b/files/fr/web/api/htmlelement/animationend_event/index.html @@ -10,7 +10,7 @@ original_slug: Web/Events/animationend
      Spécification
      -
      CSS Animations
      +
      CSS Animations
      Interface
      AnimationEvent
      Propagation
      @@ -78,5 +78,5 @@ original_slug: Web/Events/animationend

      Voir aussi

      diff --git a/files/fr/web/api/htmlelement/animationiteration_event/index.html b/files/fr/web/api/htmlelement/animationiteration_event/index.html index a8aef20b45..f0e8c058b7 100644 --- a/files/fr/web/api/htmlelement/animationiteration_event/index.html +++ b/files/fr/web/api/htmlelement/animationiteration_event/index.html @@ -10,7 +10,7 @@ original_slug: Web/Events/animationiteration
      Spécification
      -
      CSS Animations
      +
      CSS Animations
      Interface
      AnimationEvent
      Synchronisme
      @@ -80,5 +80,5 @@ original_slug: Web/Events/animationiteration

      Voir aussi

      diff --git a/files/fr/web/api/htmlelement/animationstart_event/index.html b/files/fr/web/api/htmlelement/animationstart_event/index.html index e5290e40c2..f4dfb8d3cb 100644 --- a/files/fr/web/api/htmlelement/animationstart_event/index.html +++ b/files/fr/web/api/htmlelement/animationstart_event/index.html @@ -10,7 +10,7 @@ original_slug: Web/Events/animationstart
      Spécification
      -
      CSS Animations
      +
      CSS Animations
      Interface
      AnimationEvent
      Propagation
      @@ -78,5 +78,5 @@ original_slug: Web/Events/animationstart

      Voir aussi

      diff --git a/files/fr/web/api/htmlelement/change_event/index.html b/files/fr/web/api/htmlelement/change_event/index.html index 552a6d0e70..ba007c779b 100644 --- a/files/fr/web/api/htmlelement/change_event/index.html +++ b/files/fr/web/api/htmlelement/change_event/index.html @@ -67,8 +67,7 @@ translation_of: Web/API/HTMLElement/change_event <div class="result"></div>
      -

      Javascript

      diff --git a/files/fr/web/api/htmlelement/click/index.html b/files/fr/web/api/htmlelement/click/index.html index 06b82aff69..4fcce54685 100644 --- a/files/fr/web/api/htmlelement/click/index.html +++ b/files/fr/web/api/htmlelement/click/index.html @@ -7,14 +7,14 @@ tags: translation_of: Web/API/HTMLElement/click ---

      {{ ApiRef() }}

      -

      Résumé

      +

      Résumé

      La méthode click simule un clic sur un élément.

      -

      Syntaxe

      +

      Syntaxe

      element.click()
      -

      Notes

      +

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

      -
      +

      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 @@ -32,7 +32,7 @@ translation_of: Web/API/HTMLElement/click 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.

      +

      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.

      @@ -48,7 +48,7 @@ translation_of: Web/API/HTMLElement/click
      - + diff --git a/files/fr/web/api/htmlelement/contenteditable/index.html b/files/fr/web/api/htmlelement/contenteditable/index.html index c38bc857ec..ceb68bb2f8 100644 --- a/files/fr/web/api/htmlelement/contenteditable/index.html +++ b/files/fr/web/api/htmlelement/contenteditable/index.html @@ -57,7 +57,7 @@ element.contentEditable = "true"

      Voir aussi

      diff --git a/files/fr/web/api/htmlelement/dir/index.html b/files/fr/web/api/htmlelement/dir/index.html index e4bd63a25e..96848e9935 100644 --- a/files/fr/web/api/htmlelement/dir/index.html +++ b/files/fr/web/api/htmlelement/dir/index.html @@ -7,28 +7,28 @@ tags: translation_of: Web/API/HTMLElement/dir ---

      {{ ApiRef() }}

      -

      Résumé

      +

      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

      +

      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

      +

      Exemple

      var para = document.getElementById("para1");
       para.dir = "rtl";
       // change la direction du texte sur un paragraphe identifié par "para1"
       
      -

      Notes

      +

      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écification

      {{SpecName('DOM2 HTML', 'html.html#ID-2651361')}} traduction en français (non normative){{SpecName('DOM2 HTML', 'html.html#ID-2651361')}} traduction en français (non normative) {{Spec2('DOM2 HTML')}}  
      @@ -39,7 +39,7 @@ para.dir = "rtl"; - + diff --git a/files/fr/web/api/htmlelement/hidden/index.html b/files/fr/web/api/htmlelement/hidden/index.html index b4cbdd147a..f54affe844 100644 --- a/files/fr/web/api/htmlelement/hidden/index.html +++ b/files/fr/web/api/htmlelement/hidden/index.html @@ -3,11 +3,11 @@ 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.

      +

      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 :

      @@ -26,12 +26,12 @@ translation_of: Web/API/HTMLElement/hidden
      -

      Des éléments qui ne sont pas hidden ne doivent pas faire référence à des éléments qui le sont.

      +

      Note : Des éléments qui ne sont pas hidden ne doivent pas faire référence à des éléments qui le sont.

      -

      Syntaxe

      +

      Syntaxe

      -
      estCaché = HTMLElement.hidden;
      +
      estCaché = HTMLElement.hidden;
       
       HTMLElement.hidden = true | false;
      @@ -39,13 +39,13 @@ translation_of: Web/API/HTMLElement/hidden

      Un Boolean qui est true si l'élément est caché à la vue ; sinon, la valeur est false.

      -

      Exemple

      +

      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")
      +
      document.getElementById("boutonOk")
               .addEventListener("click", function() {
         document.getElementById("bienvenue").hidden = true;
         document.getElementById("impressionnant").hidden = false;
      @@ -59,7 +59,7 @@ translation_of: Web/API/HTMLElement/hidden
       
       

      Le panneau bienvenue

      -
      <div id="bienvenue" class="panneau">
      +
      <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>
      @@ -71,7 +71,7 @@ translation_of: Web/API/HTMLElement/hidden
       
       

      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>
      +
      <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
      @@ -82,7 +82,7 @@ translation_of: Web/API/HTMLElement/hidden
       
       

      Le contenu est mis en forme en utilisant le CSS ci-dessous.

      -
      .panneau {
      +
      .panneau {
         font: 16px "Open Sans", Helvetica, Arial, sans-serif;
         border: 1px solid #22d;
         padding: 12px;
      diff --git a/files/fr/web/api/htmlelement/index.html b/files/fr/web/api/htmlelement/index.html
      index 0f220e9526..5b5276f04e 100644
      --- a/files/fr/web/api/htmlelement/index.html
      +++ b/files/fr/web/api/htmlelement/index.html
      @@ -9,7 +9,7 @@ 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.

      +

      HTMLElement est une interface abstraite pour le DOM, héritée par tous les éléments HTML.

      Propriétés

      {{SpecName('DOM2 HTML', 'html.html#ID-52460740', 'dir')}} traduction (non normative){{SpecName('DOM2 HTML', 'html.html#ID-52460740', 'dir')}} traduction (non normative) {{Spec2('DOM2 HTML')}}  
      @@ -33,7 +33,7 @@ translation_of: Web/API/HTMLElement - + diff --git a/files/fr/web/api/htmlelement/innertext/index.html b/files/fr/web/api/htmlelement/innertext/index.html index fee68327fa..e49115801b 100644 --- a/files/fr/web/api/htmlelement/innertext/index.html +++ b/files/fr/web/api/htmlelement/innertext/index.html @@ -24,7 +24,7 @@ original_slug: Web/API/Node/innerText - +
      {{domxref("element.className", "className")}} {{domxref("DOMString")}}Le nom de la classe CSS définie pour l'élément.Le nom de la classe CSS définie pour l'élément.
      {{domxref("element.dataset", "dataset")}} {{HTMLVersionInline(5)}}
      {{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.Introduction basée sur le brouillon de spécification de innerText. Voir whatwg/html#465 et whatwg/compat#5 pour l’histoire.
      diff --git a/files/fr/web/api/htmlelement/input_event/index.html b/files/fr/web/api/htmlelement/input_event/index.html index f4996fe3c1..1e5ed92105 100644 --- a/files/fr/web/api/htmlelement/input_event/index.html +++ b/files/fr/web/api/htmlelement/input_event/index.html @@ -10,13 +10,13 @@ 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 .

      +

      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
      +
      HTML5, DOM Level 3 Events
      Interface
      {{domxref("Event")}}, {{domxref("InputEvent")}}
      Propagation
      diff --git a/files/fr/web/api/htmlelement/iscontenteditable/index.html b/files/fr/web/api/htmlelement/iscontenteditable/index.html index e1d53fb7c0..dd7c704998 100644 --- a/files/fr/web/api/htmlelement/iscontenteditable/index.html +++ b/files/fr/web/api/htmlelement/iscontenteditable/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/HTMLElement/isContentEditable

      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

      +

      Syntaxe

      editable = element.isContentEditable
       
      @@ -25,16 +25,16 @@ translation_of: Web/API/HTMLElement/isContentEditable

      JavaScript

      -
      document.getElementById("infoText1").innerHTML += document.getElementById("myText1").isContentEditable;
      -document.getElementById("infoText2").innerHTML += document.getElementById("myText2").isContentEditable;
      +
      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="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>
      +<p id="infoText1">Can edit the first paragraph? </p> +<p id="infoText2">Can edit the second paragraph? </p>

      Résultat

      diff --git a/files/fr/web/api/htmlelement/lang/index.html b/files/fr/web/api/htmlelement/lang/index.html index 990a1cd780..15d2f5536f 100644 --- a/files/fr/web/api/htmlelement/lang/index.html +++ b/files/fr/web/api/htmlelement/lang/index.html @@ -7,14 +7,14 @@ tags: translation_of: Web/API/HTMLElement/lang ---

      {{ ApiRef() }}

      -

      Résumé

      +

      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

      +

      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

      +

      Exemple

      // ce bout de code compare la langue de base et
       // redirige vers une autre URL suivant la langue
       if (document.documentElement.lang === "en") {
      @@ -23,10 +23,10 @@ if (document.documentElement.lang === "en") {
           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.

      +

      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écification

      diff --git a/files/fr/web/api/htmlelement/offsetheight/index.html b/files/fr/web/api/htmlelement/offsetheight/index.html index bfd4b1d130..ae436458f9 100644 --- a/files/fr/web/api/htmlelement/offsetheight/index.html +++ b/files/fr/web/api/htmlelement/offsetheight/index.html @@ -7,60 +7,50 @@ translation_of: Web/API/HTMLElement/offsetHeight ---

      {{ ApiRef() }}

      -

      Résumé

      +

      Résumé

      -

      Propriété DHTML permettant d'obtenir la hauteur d'un élément par rapport à la mise en page.

      +

      Propriété DHTML permettant d'obtenir la hauteur d'un élément par rapport à la mise en page.

      -

      Syntaxe

      +

      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

      +

      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

      +

      Exemple

      -
      -
      -

      padding-top

      +

      Example

      -

      Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.

      +

      -

      Image:BirmanCat.jpgAll Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

      +

      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.

      -

      Cat image and text coming from www.best-cat-art.com

      - -

      padding-bottom

      -
      -LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}
      - -

      Image:offsetHeight.png

      - -

      Spécification

      +

      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

      +

      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

      +

      Références

      -

      Voir aussi

      +

      Voir aussi

      {{ languages( { "en": "en/DOM/element.offsetHeight", "pl": "pl/DOM/element.offsetHeight" } ) }}

      diff --git a/files/fr/web/api/htmlelement/offsetleft/index.html b/files/fr/web/api/htmlelement/offsetleft/index.html index b9c055927b..c29542abcc 100644 --- a/files/fr/web/api/htmlelement/offsetleft/index.html +++ b/files/fr/web/api/htmlelement/offsetleft/index.html @@ -6,18 +6,18 @@ tags: translation_of: Web/API/HTMLElement/offsetLeft ---

      {{ ApiRef() }}

      -

      Résumé

      +

      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

      +

      Syntaxe

      left =element.offsetLeft;
       

      left est un entier représentant le décalage vers la gauche en pixels.

      -

      Note

      +

      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

      +

      Exemple

      var colorTable = document.getElementById("t1");
       var tOLeft = colorTable.offsetLeft;
       
      @@ -25,10 +25,12 @@ if (tOLeft > 5) {
         // grand décalage à gauche : faire quelque chose ici
       }
       
      -

      Exemple

      +

      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.

      -

      Image:offsetLeft.jpg

      -

      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.

      + +

      + +

      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>
      @@ -48,9 +50,9 @@ if (tOLeft > 5) {
         box.style.height = long.offsetHeight;
       </script>
       
      -

      Voir aussi

      +

      Voir aussi

      offsetParent, offsetTop, offsetWidth, offsetHeight

      -

      Spécification

      +

      Spécification

      Cette propriété ne fait partie d'aucun standard ou recommandation technique du W3C.

      -

      MSDN: offsetLeft

      +

      MSDN: offsetLeft

      {{ languages( { "en": "en/DOM/element.offsetLeft", "pl": "pl/DOM/element.offsetLeft" } ) }}

      diff --git a/files/fr/web/api/htmlelement/offsetparent/index.html b/files/fr/web/api/htmlelement/offsetparent/index.html index d466de34de..5e278fefe9 100644 --- a/files/fr/web/api/htmlelement/offsetparent/index.html +++ b/files/fr/web/api/htmlelement/offsetparent/index.html @@ -8,15 +8,15 @@ tags: translation_of: Web/API/HTMLElement/offsetParent ---

      {{ ApiRef() }}

      -

      Résumé

      +

      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

      +

      Syntaxe

      objetParent = element.offsetParent
       
      -

      Paramètres

      +

      Paramètres

      • objetParent est une référence à l'élément dans lequel l'élément courant est positionné.
      -

      Spécification

      +

      Spécification

      {{ DOM0() }}

      {{ languages( { "en": "en/DOM/element.offsetParent", "pl": "pl/DOM/element.offsetParent" } ) }}

      diff --git a/files/fr/web/api/htmlelement/offsettop/index.html b/files/fr/web/api/htmlelement/offsettop/index.html index 6be7a15bd3..44e3b80d2c 100644 --- a/files/fr/web/api/htmlelement/offsettop/index.html +++ b/files/fr/web/api/htmlelement/offsettop/index.html @@ -8,22 +8,22 @@ translation_of: Web/API/HTMLElement/offsetTop ---

      {{ ApiRef() }}

      -

      Résumé

      +

      Résumé

      offsetTop renvoie la distance entre l'élément courant et le haut du nœud offsetParent.

      -

      Syntaxe

      +

      Syntaxe

      topPos = element.offsetTop;
       
      -

      Paramètres

      +

      Paramètres

      • topPos est le nombre de pixels depuis le haut de l'élément parent.
      -

      Exemple

      +

      Exemple

      d = document.getElementById("div1");
       
      @@ -37,14 +37,10 @@ if (topPos > 10 ) {
       }
       
      -

      Spécification

      +

      Spécification

      {{ DOM0() }}

      -

      Références

      +

      Références

      -

      offsetTop definition sur MSDN

      - -
       
      - -

      {{ languages( { "en": "en/DOM/element.offsetTop", "pl": "pl/DOM/element.offsetTop" } ) }}

      +

      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 index 4d65ebae61..a7d58e4448 100644 --- a/files/fr/web/api/htmlelement/offsetwidth/index.html +++ b/files/fr/web/api/htmlelement/offsetwidth/index.html @@ -5,52 +5,38 @@ translation_of: Web/API/HTMLElement/offsetWidth ---

      {{ ApiRef() }}

      -

      Résumé

      +

      Résumé

      Renvoie la largeur totale d'un élément.

      -

      Syntaxe

      +

      Syntaxe

      var offsetWidth = element.offsetWidth;
       

      offsetWidth est une propriété en lecture seule.

      -

      Description

      +

      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

      +

      Exemple

      -
      -
      -

      padding-top

      +

      -

      Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.

      +

      Spécification

      -

      Image:BirmanCat.jpgAll Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

      +

      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.

      -

      Cat image and text coming from www.best-cat-art.com

      +

      Notes

      -

      padding-bottom

      -
      -LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}
      +

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

      -

      Image:offsetWidth.png

      - -

      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

      +

      Références

      {{ languages( { "en": "en/DOM/element.offsetWidth", "pl": "pl/DOM/element.offsetWidth" } ) }}

      diff --git a/files/fr/web/api/htmlelement/title/index.html b/files/fr/web/api/htmlelement/title/index.html index cd11dd3bc9..6c545982d7 100644 --- a/files/fr/web/api/htmlelement/title/index.html +++ b/files/fr/web/api/htmlelement/title/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/HTMLElement/title

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

      -

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

      +

      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>
      @@ -23,18 +23,18 @@ translation_of: Web/API/HTMLElement/title
       
      -

      Syntaxe

      +

      Syntaxe

      var chn = element.title;
       element.title = chn;
       
      -

      Exemple

      +

      Exemple

       bouton1.title = "cliquer pour rafraîchir";
       
      -

      Spécifications

      +

      Spécifications

      diff --git a/files/fr/web/api/htmlelement/transitionend_event/index.html b/files/fr/web/api/htmlelement/transitionend_event/index.html index 4a4a13d291..a780a3023b 100644 --- a/files/fr/web/api/htmlelement/transitionend_event/index.html +++ b/files/fr/web/api/htmlelement/transitionend_event/index.html @@ -13,7 +13,7 @@ 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é.

      +

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

      @@ -91,7 +91,7 @@ original_slug: Web/Events/transitionend

      This code gets an element that has a transition defined and adds a listener to the transitionend event:

      -
      const transition = document.querySelector('.transition');
      +
      const transition = document.querySelector('.transition');
       
       transition.addEventListener('transitionend', () => {
         console.log('Transition ended');
      @@ -99,7 +99,7 @@ transition.addEventListener('transitionend', () => {
       
       

      The same, but using the {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}:

      -
      const transition = document.querySelector('.transition');
      +
      const transition = document.querySelector('.transition');
       
       transition.ontransitionend = () => {
         console.log('Transition ended');
      @@ -109,10 +109,10 @@ transition.ontransitionend = () => {
       
       

      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="transition">Hover over me</div>
       <div class="message"></div>
      -
      .transition {
      +
      .transition {
         width: 100px;
         height: 100px;
         background: rgba(255,0,0,1);
      @@ -128,7 +128,7 @@ transition.ontransitionend = () => {
       
       

      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 message = document.querySelector('.message');
       const el = document.querySelector('.transition');
       
       el.addEventListener('transitionrun', function() {
      diff --git a/files/fr/web/api/htmlformelement/acceptcharset/index.html b/files/fr/web/api/htmlformelement/acceptcharset/index.html
      index 281ebf7a43..59cf90bc64 100644
      --- a/files/fr/web/api/htmlformelement/acceptcharset/index.html
      +++ b/files/fr/web/api/htmlformelement/acceptcharset/index.html
      @@ -9,19 +9,19 @@ translation_of: Web/API/HTMLFormElement/acceptCharset
       
       

      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

      +

      Syntaxe

      string = form.acceptCharset;
       form.acceptCharset = string;
       
      -

      Exemple

      +

      Exemple

      inputs = document.forms["myform"].acceptCharset
       
      -

      Spécification

      +

      Spécification

      -

      HTML 5, Section 4.10.3: The Form Element

      +

      HTML 5, Section 4.10.3: The Form Element

      -

      DOM Level 2 HTML: acceptCharset

      +

      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 index 7963547cd3..7faeadc67a 100644 --- a/files/fr/web/api/htmlformelement/action/index.html +++ b/files/fr/web/api/htmlformelement/action/index.html @@ -9,18 +9,18 @@ translation_of: Web/API/HTMLFormElement/action

      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

      +

      Syntaxe

      string = form.action
       form.action = string
       
      -

      Exemple

      +

      Exemple

      form.action = "/cgi-bin/publish";

      -

      Spécification

      +

      Spécification

      -

      HTML 5, Section 4.10.19.6, Form submission

      +

      HTML 5, Section 4.10.19.6, Form submission

      -

      DOM Level 2 HTML: action

      +

      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 index 14ba012b3b..fbe30d563e 100644 --- a/files/fr/web/api/htmlformelement/elements/index.html +++ b/files/fr/web/api/htmlformelement/elements/index.html @@ -7,25 +7,25 @@ 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.

      +

      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

      +

      Syntaxe

      nodeList = HTMLFormElement.elements
       
      -

      Exemple

      +

      Exemple

      var inputs = document.getElementById("form1").elements;
       var inputByIndex = inputs[2];
       var inputByName = inputs["login"];
       
      -

      Spécification

      +

      Spécification

      diff --git a/files/fr/web/api/htmlformelement/enctype/index.html b/files/fr/web/api/htmlformelement/enctype/index.html index c78cfc4b29..d706eec625 100644 --- a/files/fr/web/api/htmlformelement/enctype/index.html +++ b/files/fr/web/api/htmlformelement/enctype/index.html @@ -9,18 +9,18 @@ translation_of: Web/API/HTMLFormElement/enctype

      Le type d'encodage généralement utilisé est "application/x-www-form-urlencoded".

      -

      Syntaxe

      +

      Syntaxe

      string = form.enctype
       form.enctype = string
       
      -

      Exemple

      +

      Exemple

      form.enctype = "application/x-www-form-urlencoded";
      -

      Spécification

      +

      Spécification

      -

      HTML 5, Section 4.10.19.6, Form submission

      +

      HTML 5, Section 4.10.19.6, Form submission

      -

      DOM Level 2 HTML: enctype

      +

      DOM Level 2 HTML: enctype

      diff --git a/files/fr/web/api/htmlformelement/index.html b/files/fr/web/api/htmlformelement/index.html index 6cbdaa5313..747286a784 100644 --- a/files/fr/web/api/htmlformelement/index.html +++ b/files/fr/web/api/htmlformelement/index.html @@ -66,7 +66,7 @@ translation_of: Web/API/HTMLFormElement

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

      +

      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 :

      @@ -108,75 +108,75 @@ 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>
      +

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

      +

      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

      diff --git a/files/fr/web/api/htmlformelement/length/index.html b/files/fr/web/api/htmlformelement/length/index.html index 9ca717ea44..93fb19ff7c 100644 --- a/files/fr/web/api/htmlformelement/length/index.html +++ b/files/fr/web/api/htmlformelement/length/index.html @@ -9,21 +9,21 @@ translation_of: Web/API/HTMLFormElement/length

      La propriété en lecture seule HTMLFormElement.length retourne le nombre de contrôles présents dans l'élément {{HTMLElement("Form")}}.

      -

      Syntaxe

      +

      Syntaxe

      integer = form.length
       
      -

      Exemple

      +

      Exemple

      if (document.getElementById("form1").length > 1) {
         // more than one form control here
       }
       
      -

      Spécifications

      +

      Spécifications

      diff --git a/files/fr/web/api/htmlformelement/method/index.html b/files/fr/web/api/htmlformelement/method/index.html index 5072c652ab..2b6d2ab603 100644 --- a/files/fr/web/api/htmlformelement/method/index.html +++ b/files/fr/web/api/htmlformelement/method/index.html @@ -7,19 +7,19 @@ translation_of: Web/API/HTMLFormElement/method

      La propriété HTMLFormElement.method représente la méthode HTTP utilisée pour soumettre un formulaire.

      -

      Syntaxe

      +

      Syntaxe

      string = form.method
       form.method = string
       
      -

      Exemple

      +

      Exemple

      document.forms["myform"].method = "post";
       
      -

      Spécification

      +

      Spécification

      -

      HTML 5, Section 4.10.19.6, Form submission

      +

      HTML 5, Section 4.10.19.6, Form submission

      -

      DOM Level 2 HTML: method

      +

      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 index 6a144b2e79..50fa4fe6b1 100644 --- a/files/fr/web/api/htmlformelement/name/index.html +++ b/files/fr/web/api/htmlformelement/name/index.html @@ -11,12 +11,12 @@ translation_of: Web/API/HTMLFormElement/name

      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

      +

      Syntaxe

      string = form.name
       form.name = string
      -

      Exemple

      +

      Exemple

      var form1name = document.getElementById("form1").name;
       
      @@ -24,9 +24,9 @@ if (form1name != document.form.form1) {
          // browser doesn't support this form of reference
       }
      -

      Spécification

      +

      Spécification

      diff --git a/files/fr/web/api/htmlformelement/reportvalidity/index.html b/files/fr/web/api/htmlformelement/reportvalidity/index.html index c53f63570e..c41fd7c61d 100644 --- a/files/fr/web/api/htmlformelement/reportvalidity/index.html +++ b/files/fr/web/api/htmlformelement/reportvalidity/index.html @@ -8,14 +8,14 @@ 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. .

      +

      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

      +

      Valeur de retour

      {{domxref("Boolean")}}

      @@ -48,7 +48,7 @@ document.forms['myform'].addEventListener('submit', function() {
      - +
      {{SpecName("HTML5.1", "semantics.html#the-constraint-validation-api", "HTMLFormElement.reportValidity()")}} {{Spec2("HTML5.1")}}Définition initialeDéfinition initiale
      diff --git a/files/fr/web/api/htmlformelement/reset/index.html b/files/fr/web/api/htmlformelement/reset/index.html index 7ed17f275f..6d43514959 100644 --- a/files/fr/web/api/htmlformelement/reset/index.html +++ b/files/fr/web/api/htmlformelement/reset/index.html @@ -15,14 +15,14 @@ translation_of: Web/API/HTMLFormElement/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

      +

      Syntaxe

      HTMLFormElement.reset()
       
      -

      Exemple

      +

      Exemple

      document.getElementById("myform").reset();
       
      -

      Spécification

      +

      Spécification

      diff --git a/files/fr/web/api/htmlformelement/submit/index.html b/files/fr/web/api/htmlformelement/submit/index.html index d322958397..19479867d2 100644 --- a/files/fr/web/api/htmlformelement/submit/index.html +++ b/files/fr/web/api/htmlformelement/submit/index.html @@ -9,17 +9,17 @@ translation_of: Web/API/HTMLFormElement/submit ---
      {{APIRef("HTML DOM")}}
      -

      La méthode  HTMLFormElement.submit()  soumet un {{HtmlElement("form")}} donné

      +

      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:

      +

      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:

        -
      • Aucun événement {{event ("submit")}} n'est déclenché. En particulier, le formulaire  
      • -
      • {{domxref("GlobalEventHandlers.onsubmit", "onsubmit")}}  le gestionnaire d'événement n'est pas exécuté .
      • -
      • Constraint validation n'est pas déclenché .
      • +
      • Aucun événement {{event ("submit")}} n'est déclenché. En particulier, le formulaire  
      • +
      • {{domxref("GlobalEventHandlers.onsubmit", "onsubmit")}}  le gestionnaire d'événement n'est pas exécuté .
      • +
      • Constraint validation n'est pas déclenché .
      -

      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.

      +

      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

      diff --git a/files/fr/web/api/htmlformelement/submit_event/index.html b/files/fr/web/api/htmlformelement/submit_event/index.html index 0b5eae85bc..2e6139eced 100644 --- a/files/fr/web/api/htmlformelement/submit_event/index.html +++ b/files/fr/web/api/htmlformelement/submit_event/index.html @@ -12,7 +12,7 @@ original_slug: Web/API/HTMLFormElement/submit_event_
      Spécification
      -
      HTML5
      +
      HTML5
      Interface
      {{domxref("Event")}}
      Bouillonne
      diff --git a/files/fr/web/api/htmlformelement/target/index.html b/files/fr/web/api/htmlformelement/target/index.html index ac4d5f1e75..3d7a6002d0 100644 --- a/files/fr/web/api/htmlformelement/target/index.html +++ b/files/fr/web/api/htmlformelement/target/index.html @@ -7,19 +7,19 @@ translation_of: Web/API/HTMLFormElement/target

      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

      +

      Syntaxe

      string = form.target
       form.target = string
       
      -

      Exemple

      +

      Exemple

      myForm.target = document.frames[1].name;
       
      -

      Spécification

      +

      Spécification

      -

      HTML 5, Section 4.10.19.6, Form submission

      +

      HTML 5, Section 4.10.19.6, Form submission

      -

      DOM Level 2 HTML: target

      +

      DOM Level 2 HTML: target

      diff --git a/files/fr/web/api/htmliframeelement/contentdocument/index.html b/files/fr/web/api/htmliframeelement/contentdocument/index.html index 7b9d4c9a8e..5580e0abc8 100644 --- a/files/fr/web/api/htmliframeelement/contentdocument/index.html +++ b/files/fr/web/api/htmliframeelement/contentdocument/index.html @@ -4,7 +4,7 @@ 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.

      +

      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

      diff --git a/files/fr/web/api/htmliframeelement/contentwindow/index.html b/files/fr/web/api/htmliframeelement/contentwindow/index.html index 8ebaf2afd9..2dd8193ca3 100644 --- a/files/fr/web/api/htmliframeelement/contentwindow/index.html +++ b/files/fr/web/api/htmliframeelement/contentwindow/index.html @@ -14,11 +14,11 @@ translation_of: Web/API/HTMLIFrameElement/contentWindow

      Exemples

      -
      var x = document.getElementsByTagName("iframe")[0].contentWindow;
      -//x = window.frames[0];
      +
      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.
      +x.document.getElementsByTagName("body")[0].style.backgroundColor = "blue"; +// ceci devrait changer le 1er iframe dans le document bleu.

      Spécifications

      diff --git a/files/fr/web/api/htmliframeelement/csp/index.html b/files/fr/web/api/htmliframeelement/csp/index.html index f8a625f5ae..b07bf82f45 100644 --- a/files/fr/web/api/htmliframeelement/csp/index.html +++ b/files/fr/web/api/htmliframeelement/csp/index.html @@ -15,7 +15,7 @@ HTMLIFrameElement.csp = csp

    Valeur

    -

    Une stratégie de sécurité du contenu.

    +

    Une stratégie de sécurité du contenu.

    Spécifications

    diff --git a/files/fr/web/api/htmliframeelement/featurepolicy/index.html b/files/fr/web/api/htmliframeelement/featurepolicy/index.html index 452e826dd6..54bcd1037e 100644 --- a/files/fr/web/api/htmliframeelement/featurepolicy/index.html +++ b/files/fr/web/api/htmliframeelement/featurepolicy/index.html @@ -12,15 +12,15 @@ 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.

    +

    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
    +
    var policy = HTMLIFrameElement.featurePolicy

    Valeur

    -

    Un objet FeaturePolicy pouvant être utilisé pour consulter les paramètres Feature Policy appliqués au cadre.

    +

    Un objet FeaturePolicy pouvant être utilisé pour consulter les paramètres Feature Policy appliqués au cadre.

    Spécification

    diff --git a/files/fr/web/api/htmlimageelement/image/index.html b/files/fr/web/api/htmlimageelement/image/index.html index a3c9157213..669d6095b2 100644 --- a/files/fr/web/api/htmlimageelement/image/index.html +++ b/files/fr/web/api/htmlimageelement/image/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/HTMLImageElement/Image ---
    {{ APIRef("HTML DOM") }}
    -

    Le constructeur Image() crée une nouvelle instance {{domxref("HTMLImageElement")}} .

    +

    Le constructeur Image() crée une nouvelle instance {{domxref("HTMLImageElement")}} .

    C'est fonctionnellement équivalent à {{domxref("Document.createElement()", "document.createElement('img')")}}.

    @@ -26,21 +26,19 @@ translation_of: Web/API/HTMLImageElement/Image
    La hauteur de l'image (c'est-à-dire, la valeur pour l'attribut {{htmlattrxref("height", "img")}}).
    -

    Exemples

    +

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

    +

    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

    diff --git a/files/fr/web/api/htmlimageelement/index.html b/files/fr/web/api/htmlimageelement/index.html index 8ffe240cfb..cc2ab84054 100644 --- a/files/fr/web/api/htmlimageelement/index.html +++ b/files/fr/web/api/htmlimageelement/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/HTMLImageElement

    Propriétés

    -

    Hérite les propriétés de son parent, {{domxref ("HTMLElement")}}

    +

    Hérite les propriétés de son parent, {{domxref ("HTMLElement")}}

    {{domxref("HTMLImageElement.align")}} {{obsolete_inline}}
    @@ -21,7 +21,7 @@ translation_of: Web/API/HTMLImageElement
    {{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.
    +
    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")}}
    @@ -33,13 +33,13 @@ translation_of: Web/API/HTMLImageElement
    {{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.
    +
    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.
    +
    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}}
    @@ -64,7 +64,7 @@ translation_of: Web/API/HTMLImageElement
    {{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.
    +
    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

    @@ -81,20 +81,20 @@ translation_of: Web/API/HTMLImageElement

    Exemple

    -
    var img1 = new Image(); //  Constructeur HTML5
    -img1.src = 'image1.png';
    -img1.alt = 'alt';
    -document.body.appendChild(img1);
    +
    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);
    +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);
    +// en utilisant la première image dans le document +alert(document.images[0].src);
    -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/htmlinputelement/index.html b/files/fr/web/api/htmlinputelement/index.html index 6a61fadaed..05a9d8bdd6 100644 --- a/files/fr/web/api/htmlinputelement/index.html +++ b/files/fr/web/api/htmlinputelement/index.html @@ -77,7 +77,7 @@ translation_of: Web/API/HTMLInputElement @@ -96,7 +96,7 @@ translation_of: Web/API/HTMLInputElement
    value string: 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.

    +

    Note : If the user enters a value different from the value expected, this may return an empty string.

    - + @@ -107,7 +107,7 @@ translation_of: Web/API/HTMLInputElement - + @@ -136,7 +136,7 @@ translation_of: Web/API/HTMLInputElement
    Properties that apply only to elements of type "checkbox" or "radio"Properties that apply only to elements of type "checkbox" or "radio"
    checked{{jsxref("Boolean")}}: Returns / Sets the default state of a radio button or checkbox as originally specified in HTML that created this object.
    indeterminateindeterminate {{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.
    - + @@ -147,7 +147,7 @@ translation_of: Web/API/HTMLInputElement - + @@ -176,7 +176,7 @@ translation_of: Web/API/HTMLInputElement - + @@ -184,11 +184,11 @@ translation_of: Web/API/HTMLInputElement - + - + @@ -216,7 +216,7 @@ translation_of: Web/API/HTMLInputElement - +
    Properties that apply only to elements of type "file"Properties that apply only to elements of type "file"
    accept{{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.
    filesfiles Returns/accepts a {{domxref("FileList")}} object, which contains a list of {{domxref("File")}} objects representing the files selected for upload.
    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.)long: 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.)
    min
    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.)long: 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.string: 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.
    placeholder
    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.unsigned 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.
    diff --git a/files/fr/web/api/htmlmediaelement/abort_event/index.html b/files/fr/web/api/htmlmediaelement/abort_event/index.html index 05fe0a451a..2708b7193f 100644 --- a/files/fr/web/api/htmlmediaelement/abort_event/index.html +++ b/files/fr/web/api/htmlmediaelement/abort_event/index.html @@ -37,7 +37,7 @@ translation_of: Web/API/HTMLMediaElement/abort_event

    Exemples

    -
    const video = document.querySelector('video');
    +
    const video = document.querySelector('video');
     const videoSrc = 'https://path/to/video.webm';
     
     video.addEventListener('abort', () => {
    diff --git a/files/fr/web/api/htmlmediaelement/canplay_event/index.html b/files/fr/web/api/htmlmediaelement/canplay_event/index.html
    index 95fdb08c7e..8c55a0b0ef 100644
    --- a/files/fr/web/api/htmlmediaelement/canplay_event/index.html
    +++ b/files/fr/web/api/htmlmediaelement/canplay_event/index.html
    @@ -9,7 +9,7 @@ translation_of: Web/API/HTMLMediaElement/canplay_event
     
     
    Spécification
    -
    HTML5 media
    +
    HTML5 media
    Interface
    Event
    Propagation
    diff --git a/files/fr/web/api/htmlmediaelement/canplaythrough_event/index.html b/files/fr/web/api/htmlmediaelement/canplaythrough_event/index.html index 9a67a55a00..4d19f00190 100644 --- a/files/fr/web/api/htmlmediaelement/canplaythrough_event/index.html +++ b/files/fr/web/api/htmlmediaelement/canplaythrough_event/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/HTMLMediaElement/canplaythrough_event
    Spécification
    -
    HTML5 media
    +
    HTML5 media
    Interface
    Event
    Propagation
    diff --git a/files/fr/web/api/htmlmediaelement/durationchange_event/index.html b/files/fr/web/api/htmlmediaelement/durationchange_event/index.html index 0c5573379c..b49118ca25 100644 --- a/files/fr/web/api/htmlmediaelement/durationchange_event/index.html +++ b/files/fr/web/api/htmlmediaelement/durationchange_event/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/HTMLMediaElement/durationchange_event
    Spécification
    -
    HTML5 media
    +
    HTML5 media
    Interface
    {{domxref("Event")}}
    Propagation
    diff --git a/files/fr/web/api/htmlmediaelement/emptied_event/index.html b/files/fr/web/api/htmlmediaelement/emptied_event/index.html index d550ba2b11..34243d5fcd 100644 --- a/files/fr/web/api/htmlmediaelement/emptied_event/index.html +++ b/files/fr/web/api/htmlmediaelement/emptied_event/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/HTMLMediaElement/emptied_event
    Spécification
    -
    HTML5 media
    +
    HTML5 media
    Interface
    {{domxref("Event")}}
    propagation
    diff --git a/files/fr/web/api/htmlmediaelement/ended_event/index.html b/files/fr/web/api/htmlmediaelement/ended_event/index.html index 742ad75319..db59f0187f 100644 --- a/files/fr/web/api/htmlmediaelement/ended_event/index.html +++ b/files/fr/web/api/htmlmediaelement/ended_event/index.html @@ -9,12 +9,12 @@ translation_of: Web/API/HTMLMediaElement/ended_event
    • Les éléments basés sur {{domxref("HTMLMediaElement")}} ({{HTMLElement("audio")}} et {{HTMLElement("video")}}) déclenchent ended lorsque la lecture du média atteint la fin.
    • -
    • Les pistes de flux média, qui sont basées sur l'interface {{domxref("MediaStreamTrack")}}, déclenchent ended lorsque la source de la piste interrompt définitivement l'envoi de données sur le flux. Il y'a différentes manières d'y arriver: +
    • Les pistes de flux média, qui sont basées sur l'interface {{domxref("MediaStreamTrack")}}, déclenchent ended lorsque la source de la piste interrompt définitivement l'envoi de données sur le flux. Il y'a différentes manières d'y arriver:
      • il n'y a plus de données à envoyer.
      • -
      • L'utilisateur a révoqué les autorisations nécessaires pour que les données soient envoyées.
      • -
      • Le matériel générant les données source a été supprimé ou éjecté.
      • -
      • Un peer distant a définitivement cessé d'envoyer des données. La mise en pause des médias ne génère pas l'événement ended.
      • +
      • L'utilisateur a révoqué les autorisations nécessaires pour que les données soient envoyées.
      • +
      • Le matériel générant les données source a été supprimé ou éjecté.
      • +
      • Un peer distant a définitivement cessé d'envoyer des données. La mise en pause des médias ne génère pas l'événement ended.
    @@ -23,7 +23,7 @@ translation_of: Web/API/HTMLMediaElement/ended_event
    Spécification
    -
    HTML5 media et Media Capture and Streams
    +
    HTML5 media et Media Capture and Streams
    Interface
    {{domxref("Event")}}
    Propagation
    @@ -37,7 +37,7 @@ translation_of: Web/API/HTMLMediaElement/ended_event
    -

    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.

    +

    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

    diff --git a/files/fr/web/api/htmlmediaelement/index.html b/files/fr/web/api/htmlmediaelement/index.html index e29df54e39..86941892db 100644 --- a/files/fr/web/api/htmlmediaelement/index.html +++ b/files/fr/web/api/htmlmediaelement/index.html @@ -22,10 +22,9 @@ translation_of: Web/API/HTMLMediaElement
    {{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.
    -
    +

    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.

    -

    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.

    +

    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}}
    @@ -37,7 +36,7 @@ translation_of: Web/API/HTMLMediaElement
    {{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.
    +
    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")}}
    @@ -101,9 +100,9 @@ translation_of: Web/API/HTMLMediaElement
    {{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. +

    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.

    +

    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")}}
    @@ -163,7 +162,7 @@ translation_of: Web/API/HTMLMediaElement
    {{domxref("HTMLMediaElement.pause()")}}
    met en pause la lecture du média.
    {{domxref("HTMLMediaElement.play()")}}
    -
    commence la lecture du média.
    +
    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}}
    @@ -230,9 +229,9 @@ translation_of: Web/API/HTMLMediaElement
  • Articles
  • diff --git a/files/fr/web/api/htmlmediaelement/play/index.html b/files/fr/web/api/htmlmediaelement/play/index.html index 091fd3406d..67d72a2cc2 100644 --- a/files/fr/web/api/htmlmediaelement/play/index.html +++ b/files/fr/web/api/htmlmediaelement/play/index.html @@ -78,7 +78,7 @@ myVideo.play().then(() => {
    -

    Notez que 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.

    +

    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

    diff --git a/files/fr/web/api/htmlmediaelement/volume/index.html b/files/fr/web/api/htmlmediaelement/volume/index.html index 130734e004..718b08a924 100644 --- a/files/fr/web/api/htmlmediaelement/volume/index.html +++ b/files/fr/web/api/htmlmediaelement/volume/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/HTMLMediaElement/volume

    La propriété HTMLMediaElement.volume définit le volume auquel le média doit être lu. 

    -

    Syntaxe

    +

    Syntaxe

    var volume ​= video.volume; //1
    @@ -58,7 +58,7 @@ obj.volume = 0.75;

    {{Compat("api.HTMLMediaElement.volume")}}

    -

    Voir aussi

    +

    Voir aussi

    • The interface defining it, {{domxref("HTMLMediaElement")}}.
    • diff --git a/files/fr/web/api/htmloptionelement/index.html b/files/fr/web/api/htmloptionelement/index.html index 86864530ff..b1294570c6 100644 --- a/files/fr/web/api/htmloptionelement/index.html +++ b/files/fr/web/api/htmloptionelement/index.html @@ -88,15 +88,10 @@ translation_of: Web/API/HTMLOptionElement

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

      diff --git a/files/fr/web/api/htmloptionelement/option/index.html b/files/fr/web/api/htmloptionelement/option/index.html index 80dc7f77cd..975d2cc634 100644 --- a/files/fr/web/api/htmloptionelement/option/index.html +++ b/files/fr/web/api/htmloptionelement/option/index.html @@ -92,8 +92,7 @@ options.forEach(function(element, key) { - HTML5
      - The definition of 'Option' in that specification.
      + 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 index 793915e248..e76d04bb47 100644 --- a/files/fr/web/api/htmlquoteelement/index.html +++ b/files/fr/web/api/htmlquoteelement/index.html @@ -8,7 +8,7 @@ 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).

      +

      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

      diff --git a/files/fr/web/api/htmlselectelement/remove/index.html b/files/fr/web/api/htmlselectelement/remove/index.html index 003a8e727c..71b6fd591e 100644 --- a/files/fr/web/api/htmlselectelement/remove/index.html +++ b/files/fr/web/api/htmlselectelement/remove/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/HTMLSelectElement/remove
      collection.remove(index);
       
      -

      Paramètre

      +

      Paramètre

      • index est un entier long définissant la position du {{ domxref("HTMLOptionElement") }} à enlever de la collection. Si rien n'est trouvé à cette position dans la liste, la méthode n'a aucun effet.
      • diff --git a/files/fr/web/api/htmlselectelement/selectedindex/index.html b/files/fr/web/api/htmlselectelement/selectedindex/index.html index 5abdf83974..4000816569 100644 --- a/files/fr/web/api/htmlselectelement/selectedindex/index.html +++ b/files/fr/web/api/htmlselectelement/selectedindex/index.html @@ -30,7 +30,7 @@ translation_of: Web/API/HTMLSelectElement/selectedIndex

        JavaScript

        -
        var selectElem = document.getElementById('select');
        +
        var selectElem = document.getElementById('select');
         var pElem = document.getElementById('p');
         
         // Quand une nouvelle <option> est selectionnée
        diff --git a/files/fr/web/api/htmlselectelement/setcustomvalidity/index.html b/files/fr/web/api/htmlselectelement/setcustomvalidity/index.html
        index da37763056..aa5cad6adc 100644
        --- a/files/fr/web/api/htmlselectelement/setcustomvalidity/index.html
        +++ b/files/fr/web/api/htmlselectelement/setcustomvalidity/index.html
        @@ -9,7 +9,7 @@ translation_of: Web/API/HTMLSelectElement/setCustomValidity
         
         

        Syntaxe

        -
        ElmSelectionne.setCustomValidity(message);
        +
        ElmSelectionne.setCustomValidity(message);

        Paramètres

        diff --git a/files/fr/web/api/htmlshadowelement/index.html b/files/fr/web/api/htmlshadowelement/index.html index 74297aa31f..baaff80c85 100644 --- a/files/fr/web/api/htmlshadowelement/index.html +++ b/files/fr/web/api/htmlshadowelement/index.html @@ -11,7 +11,7 @@ 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.

        +

        L'interface HTMLShadowElement représente un élement HTML {{HTMLElement("shadow")}}, utililisé dans le Shadow DOM.

        {{InheritanceDiagram(600, 120)}}

        diff --git a/files/fr/web/api/htmlspanelement/index.html b/files/fr/web/api/htmlspanelement/index.html index 013a2d9777..1746f9c197 100644 --- a/files/fr/web/api/htmlspanelement/index.html +++ b/files/fr/web/api/htmlspanelement/index.html @@ -8,12 +8,12 @@ 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.

        +

        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 index 75fb1d9b74..c9ed1c8cbf 100644 --- a/files/fr/web/api/htmlstyleelement/index.html +++ b/files/fr/web/api/htmlstyleelement/index.html @@ -6,7 +6,7 @@ tags: translation_of: Web/API/HTMLStyleElement ---

        {{ ApiRef() }}

        -

        Notes

        +

        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

        +

        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 @@ -66,7 +66,7 @@ function resetStyle(elemId) { </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 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 @@ -98,7 +98,7 @@ 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
        +
        Propriétés
        style.media
        @@ -108,8 +108,4 @@ el.setAttribute("style", "background-color:darkblue;"); style.type
        renvoie le type de style appliqué par cette règle.
        -
        -

         

        -
        -  
        -

        {{ languages( { "en": "en/DOM/style", "es": "es/DOM/style", "pl": "pl/DOM/style" } ) }}

        + \ No newline at end of file diff --git a/files/fr/web/api/htmltablecellelement/index.html b/files/fr/web/api/htmltablecellelement/index.html index 0369164d8e..f3f3fdf60e 100644 --- a/files/fr/web/api/htmltablecellelement/index.html +++ b/files/fr/web/api/htmltablecellelement/index.html @@ -12,9 +12,9 @@ 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.

        +

        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

        +

        Propriétés

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

        @@ -40,14 +40,14 @@ translation_of: Web/API/HTMLTableCellElement
        {{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.
        +
        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

        +

        Méthodes

        Aucune méthode spécifique ; hérite des méthodes de son parent, {{domxref("HTMLElement")}}.

        @@ -68,7 +68,7 @@ translation_of: Web/API/HTMLTableCellElement
      - @@ -92,5 +92,5 @@ translation_of: Web/API/HTMLTableCellElement

      Voir aussi

        -
      • Éléments HTML implémentant cette interface   : {{HTMLElement("th")}} et {{HTMLElement("td")}} par héritage via {{domxref("HTMLTableHeaderCellElement")}} et {{domxref("HTMLTableDataCellElement")}}.
      • +
      • Éléments HTML implémentant cette interface   : {{HTMLElement("th")}} et {{HTMLElement("td")}} par héritage via {{domxref("HTMLTableHeaderCellElement")}} et {{domxref("HTMLTableDataCellElement")}}.
      diff --git a/files/fr/web/api/htmltableelement/caption/index.html b/files/fr/web/api/htmltableelement/caption/index.html index a3d9226edd..2c92407bea 100644 --- a/files/fr/web/api/htmltableelement/caption/index.html +++ b/files/fr/web/api/htmltableelement/caption/index.html @@ -6,21 +6,21 @@ tags: translation_of: Web/API/HTMLTableElement/caption ---

      {{ ApiRef() }}

      -

      Résumé

      +

      Résumé

      caption renvoie la légende du tableau.

      -

      Syntaxe

      +

      Syntaxe

      string = table.caption
       
      -

      Exemple

      +

      Exemple

      if (table.caption) {
         // On peut alors faire quelque chose avec la légende du tableau
       }
       
      -

      Notes

      +

      Notes

      Cette propriété ne renvoie rien s'il n'y a aucune légende pour le tableau.

      -

      Spécification

      +

      Spécification

      {{ languages( { "en": "en/DOM/table.caption", "pl": "pl/DOM/table.caption" } ) }}

      diff --git a/files/fr/web/api/htmltableelement/index.html b/files/fr/web/api/htmltableelement/index.html index ab997c53a9..e14d2f1f47 100644 --- a/files/fr/web/api/htmltableelement/index.html +++ b/files/fr/web/api/htmltableelement/index.html @@ -7,9 +7,9 @@ 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

      +

      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
      @@ -73,7 +73,7 @@ translation_of: Web/API/HTMLTableElement
      width obtient ou définit la largeur du tableau.
      -

      Méthodes

      +

      Méthodes

      table.createTHead
      diff --git a/files/fr/web/api/htmltableelement/insertrow/index.html b/files/fr/web/api/htmltableelement/insertrow/index.html index e469cb6679..f07140adda 100644 --- a/files/fr/web/api/htmltableelement/insertrow/index.html +++ b/files/fr/web/api/htmltableelement/insertrow/index.html @@ -16,20 +16,20 @@ translation_of: Web/API/HTMLTableElement/insertRow

      La méthode HTMLTableElement.insertRow() insère une nouvelle ligne dans la table et retourne une référence à la nouvelle ligne.

      -

      Syntaxe

      +

      Syntaxe

      var ligne = HTMLTableElement.insertRow(optionnel indice = -1);
        -
      • HTMLTableElement est une référence à un élément table HTML.
      • +
      • HTMLTableElement est une référence à un élément table HTML.
      • indice est l'indice de ligne de la nouvelle ligne.
      • -
      • ligne reçoit la référence à la nouvelle ligne. Une référence à un HTMLTableRowElement. Si l'indice est -1 ou est égal au nombre de lignes, la ligne est ajoutée comme dernière ligne. Si indice est plus grand que le nombre de lignes, une exception IndexSizeError sera générée. Si indice est omis, sa  valeur sera -1 par défaut.
      • +
      • ligne reçoit la référence à la nouvelle ligne. Une référence à un HTMLTableRowElement. Si l'indice est -1 ou est égal au nombre de lignes, la ligne est ajoutée comme dernière ligne. Si indice est plus grand que le nombre de lignes, une exception IndexSizeError sera générée. Si indice est omis, sa  valeur sera -1 par défaut.
      • Si une table a plusieurs éléments tbody, par défaut, la nouvelle ligne est ajoutée dans le dernier tbody. Pour insérer la ligne dans un tbody particulier :
        var tbody_particulier=document.getElementById(id_tbody);
        var ligne=tbody_particulier.
        insertRow(indice)
      -

      Exemple

      +

      Exemple

      <table id="TableA">
       <tr>
      @@ -60,7 +60,7 @@ ajouteLigne('TableA');
       
       

      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.

      +

      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

      diff --git a/files/fr/web/api/htmltablerowelement/index.html b/files/fr/web/api/htmltablerowelement/index.html index 18955f4af7..a382d43e45 100644 --- a/files/fr/web/api/htmltablerowelement/index.html +++ b/files/fr/web/api/htmltablerowelement/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/HTMLTableRowElement

      {{InheritanceDiagram(600, 120)}}

      -

      Propriétés

      +

      Propriétés

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

      @@ -38,7 +38,7 @@ translation_of: Web/API/HTMLTableRowElement
      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

      +

      Méthodes

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

      diff --git a/files/fr/web/api/htmltablerowelement/insertcell/index.html b/files/fr/web/api/htmltablerowelement/insertcell/index.html index 34414eead6..7b4ebb53b1 100644 --- a/files/fr/web/api/htmltablerowelement/insertcell/index.html +++ b/files/fr/web/api/htmltablerowelement/insertcell/index.html @@ -7,8 +7,8 @@ translation_of: Web/API/HTMLTableRowElement/insertCell

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

      +
      +

      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

      diff --git a/files/fr/web/api/htmltimeelement/index.html b/files/fr/web/api/htmltimeelement/index.html index 86edbee186..aa3bf1b0c7 100644 --- a/files/fr/web/api/htmltimeelement/index.html +++ b/files/fr/web/api/htmltimeelement/index.html @@ -5,7 +5,7 @@ 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")}}.

      +

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

      diff --git a/files/fr/web/api/htmlvideoelement/index.html b/files/fr/web/api/htmlvideoelement/index.html index cb4fc66b5f..e146b86d4e 100644 --- a/files/fr/web/api/htmlvideoelement/index.html +++ b/files/fr/web/api/htmlvideoelement/index.html @@ -80,7 +80,7 @@ translation_of: Web/API/HTMLVideoElement

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

      +

      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

      diff --git a/files/fr/web/api/idbcursor/index.html b/files/fr/web/api/idbcursor/index.html index dec3306209..a60210cbee 100644 --- a/files/fr/web/api/idbcursor/index.html +++ b/files/fr/web/api/idbcursor/index.html @@ -44,11 +44,13 @@ translation_of: Web/API/IDBCursor
      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

      +

      Constantes

      {{deprecated_header(13)}}

      -

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

      +
      +

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

      +
      {{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.
      +
      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).
      @@ -142,5 +144,5 @@ translation_of: Web/API/IDBCursor
    • 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
    • +
    • Exemple de référence pour IndexedDB : To-do Notifications
    • diff --git a/files/fr/web/api/idbdatabase/close/index.html b/files/fr/web/api/idbdatabase/close/index.html index 26473ab2d7..63f025584d 100644 --- a/files/fr/web/api/idbdatabase/close/index.html +++ b/files/fr/web/api/idbdatabase/close/index.html @@ -26,7 +26,7 @@ translation_of: Web/API/IDBDatabase/close

      Exemple

      -
      // ouverture de la connexion à la base de données toDoList
      +
      // ouverture de la connexion à la base de données toDoList
         var DBOpenRequest = window.indexedDB.open("toDoList", 4);
       
         // deux gestionnaires d’événements effectuant les
      diff --git a/files/fr/web/api/idbdatabase/index.html b/files/fr/web/api/idbdatabase/index.html
      index 6a9bfb1fd7..9be924fb0b 100644
      --- a/files/fr/web/api/idbdatabase/index.html
      +++ b/files/fr/web/api/idbdatabase/index.html
      @@ -15,7 +15,7 @@ translation_of: Web/API/IDBDatabase
       

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

      +

      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

      @@ -53,14 +53,13 @@ translation_of: Web/API/IDBDatabase
      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

      -
      +

      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
      +
      // On ouvre la base de données
         var DBOpenRequest = window.indexedDB.open("toDoList", 4);
       
         // On ajoute les deux gestionnaires d'événements
      diff --git a/files/fr/web/api/idbdatabase/name/index.html b/files/fr/web/api/idbdatabase/name/index.html
      index c2247da499..635a6ae383 100644
      --- a/files/fr/web/api/idbdatabase/name/index.html
      +++ b/files/fr/web/api/idbdatabase/name/index.html
      @@ -26,7 +26,7 @@ translation_of: Web/API/IDBDatabase/name
       
       

      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
      +
      // Connexion à la base de données
       var DBOpenRequest = window.indexedDB.open("toDoList", 4);
       
       // Les deux gestionnaires d'événement activés pour
      @@ -48,7 +48,9 @@ DBOpenRequest.onsuccess = function(event) {
         console.log(db.name);
       };
      -

      Pour un exemple fonctionnel complet, voir notre To-do Notifications (voir l'exemple live).

      +
      +

      Note : Pour un exemple fonctionnel complet, voir notre To-do Notifications (voir l'exemple live).

      +

      Spécifications

      diff --git a/files/fr/web/api/idbdatabase/objectstorenames/index.html b/files/fr/web/api/idbdatabase/objectstorenames/index.html index 95de1826a2..f9263bdf33 100644 --- a/files/fr/web/api/idbdatabase/objectstorenames/index.html +++ b/files/fr/web/api/idbdatabase/objectstorenames/index.html @@ -45,7 +45,9 @@ DBOpenRequest.onsuccess = function(event) { console.log(db.objectStoreNames); };
      -

      Pour un exemple fonctionnel complet, voir notre application de démo To-do Notifications (l'exemple live).

      +
      +

      Note :Pour un exemple fonctionnel complet, voir notre application de démo To-do Notifications (l'exemple live).

      +

      Spécifications

      diff --git a/files/fr/web/api/idbdatabase/transaction/index.html b/files/fr/web/api/idbdatabase/transaction/index.html index 501c1fe7a3..531edfbdb2 100644 --- a/files/fr/web/api/idbdatabase/transaction/index.html +++ b/files/fr/web/api/idbdatabase/transaction/index.html @@ -19,18 +19,14 @@ translation_of: Web/API/IDBDatabase/transaction
      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 : +

      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")}}: - +

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

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

      - +

      Le {{domxref("IDBTransactionMode","mode")}} d’{{domxref("IDBObjectStore","accès aux magasins d'objets")}} à la base de données (par default readonly):

      @@ -40,32 +36,30 @@ var transaction = db.transaction('my-store-name'); - + - + - + - +
      readonlyreadonly permet de prendre des objets dans les magasins d'objets, de lire les index et de faire des curseurs.
      readwritereadwrite Permet en plus de que l'on peut faire en readonly, d’ajouter et mettre à jour des objets dans les magasins d'objets.
      versionchange Permet 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.
      readwriteflushreadwriteflush

      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.

      -

      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.

      +

      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.

      - {{note("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: - +

      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

    @@ -121,7 +115,8 @@ transaction.onerror = function(event) { var objectStore = transaction.objectStore("toDoList"); // etc.
    -

    Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

    +

    Note :Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

    +

    Spécification

    @@ -153,5 +148,5 @@ var objectStore = transaction.objectStore("toDoList");
  • {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
  • {{domxref("IDBObjectStore","Accès aux magasins d'objets")}}
  • {{domxref("IDBCursor","Utiliser les curseur")}}
  • -
  • Exemple de référence: To-do Notifications (view example live.)
  • +
  • Exemple de référence: To-do Notifications (view example live.)
  • diff --git a/files/fr/web/api/idbdatabase/version/index.html b/files/fr/web/api/idbdatabase/version/index.html index c692965224..81289060e2 100644 --- a/files/fr/web/api/idbdatabase/version/index.html +++ b/files/fr/web/api/idbdatabase/version/index.html @@ -25,7 +25,7 @@ translation_of: Web/API/IDBDatabase/version

    Exemples

    -
    // On ouvre la base de données
    +
    // 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
    @@ -73,5 +73,5 @@ DBOpenRequest.onsuccess = function(event) {
      
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbenvironment/index.html b/files/fr/web/api/idbenvironment/index.html index aabd28dfab..ffe93f3b02 100644 --- a/files/fr/web/api/idbenvironment/index.html +++ b/files/fr/web/api/idbenvironment/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/IDBEnvironment
    {{APIRef}}
    -

    Important : À 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.

    +

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

    @@ -29,7 +29,7 @@ translation_of: Web/API/IDBEnvironment

    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;
    +
    var db;
     function openDB() {
      var DBOpenRequest = window.indexedDB.open("toDoList");
      DBOpenRequest.onsuccess = function(e) {
    @@ -74,5 +74,5 @@ function openDB() {
      
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbfactory/cmp/index.html b/files/fr/web/api/idbfactory/cmp/index.html index f564db7da3..0abf09e9d2 100644 --- a/files/fr/web/api/idbfactory/cmp/index.html +++ b/files/fr/web/api/idbfactory/cmp/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/IDBFactory/cmp

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

    +

    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

    @@ -109,5 +109,5 @@ console.log( "Résultat de la comparaison : " + result );
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbfactory/deletedatabase/index.html b/files/fr/web/api/idbfactory/deletedatabase/index.html index 77b4765efd..a890a63166 100644 --- a/files/fr/web/api/idbfactory/deletedatabase/index.html +++ b/files/fr/web/api/idbfactory/deletedatabase/index.html @@ -26,7 +26,7 @@ translation_of: Web/API/IDBFactory/deleteDatabase
    var request = indexedDB.deleteDatabase(nom);
    -

    Une version expérimentale permet de gérer des options (cf. ci-après) :

    +

    Une version expérimentale permet de gérer des options (cf. ci-après) :

    var request = indexedDB.deleteDatabase(nom, options);
    diff --git a/files/fr/web/api/idbfactory/index.html b/files/fr/web/api/idbfactory/index.html index cc1728ca4a..b424b0af20 100644 --- a/files/fr/web/api/idbfactory/index.html +++ b/files/fr/web/api/idbfactory/index.html @@ -24,9 +24,9 @@ translation_of: Web/API/IDBFactory

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

    +

    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");
    +
    var note = document.querySelector("ul");
     
     // Dans la ligne suivante, inclure les préfixes des
     // implémentations à tester
    diff --git a/files/fr/web/api/idbfactory/open/index.html b/files/fr/web/api/idbfactory/open/index.html
    index 34d73134b2..1bc014016e 100644
    --- a/files/fr/web/api/idbfactory/open/index.html
    +++ b/files/fr/web/api/idbfactory/open/index.html
    @@ -43,12 +43,14 @@ var IDBOpenDBRequest = indexedDB.open(nom, versio
     
    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.
    +
    +

    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.

    +

    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

    @@ -80,7 +82,7 @@ var IDBOpenDBRequest = indexedDB.open(nom, versio
    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).

    +

    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");
     
    diff --git a/files/fr/web/api/idbindex/get/index.html b/files/fr/web/api/idbindex/get/index.html
    index b9b6022001..f5cbe56570 100644
    --- a/files/fr/web/api/idbindex/get/index.html
    +++ b/files/fr/web/api/idbindex/get/index.html
    @@ -87,7 +87,7 @@ translation_of: Web/API/IDBIndex/get
       };
     };
    -

    Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

    +

    Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

    Spécification

    @@ -106,7 +106,7 @@ translation_of: Web/API/IDBIndex/get -

    Compatibilité avec les navigateurs

    +

    Compatibilité avec les navigateurs

    {{Compat("api.IDBIndex.get")}}

    @@ -119,5 +119,5 @@ translation_of: Web/API/IDBIndex/get
  • {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
  • {{domxref("IDBObjectStore","Accès aux magasins d'objets")}}
  • {{domxref("IDBCursor","Utiliser les curseur")}}
  • -
  • Exemple de référence: To-do Notifications (view example live.)
  • +
  • Exemple de référence: To-do Notifications (view example live.)
  • diff --git a/files/fr/web/api/idbindex/getall/index.html b/files/fr/web/api/idbindex/getall/index.html index 5099371f31..f9ed6d0d8f 100644 --- a/files/fr/web/api/idbindex/getall/index.html +++ b/files/fr/web/api/idbindex/getall/index.html @@ -97,5 +97,5 @@ getAllKeysRequest.onsuccess = function() {
  • {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
  • {{domxref("IDBObjectStore","Accès aux magasins d'objets")}}
  • {{domxref("IDBCursor","Utiliser les curseur")}}
  • -
  • Exemple de référence: To-do Notifications (view example live.)
  • +
  • Exemple de référence: To-do Notifications (view example live.)
  • diff --git a/files/fr/web/api/idbindex/getallkeys/index.html b/files/fr/web/api/idbindex/getallkeys/index.html index cabf74e895..fd13fd5758 100644 --- a/files/fr/web/api/idbindex/getallkeys/index.html +++ b/files/fr/web/api/idbindex/getallkeys/index.html @@ -25,7 +25,7 @@ var getAllKeysRequest = IDBIndex.getAllKeys(requete, quant
    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 à 232-1, une exception {{jsxref("TypeError")}} sera levée.
    +
    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

    @@ -54,7 +54,7 @@ var getAllKeysRequest = IDBIndex.getAllKeys(requete, quant {{jsxref("TypeError")}} - Le paramètre quantite n'est pas compris entre 0 et 232-1 + Le paramètre quantite n'est pas compris entre 0 et 2^32-1 @@ -98,5 +98,5 @@ getAllKeysRequest.onsuccess = function() {
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbindex/getkey/index.html b/files/fr/web/api/idbindex/getkey/index.html index 6eb5146021..828f700fb9 100644 --- a/files/fr/web/api/idbindex/getkey/index.html +++ b/files/fr/web/api/idbindex/getkey/index.html @@ -131,5 +131,5 @@ var request = myIndex.getKey(key);
  • Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
  • Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
  • Utiliser les curseurs {{domxref("IDBCursor")}}
  • -
  • L'exemple de référence : notifications de trucs à faire (voir la démonstration)
  • +
  • L'exemple de référence : notifications de trucs à faire (voir la démonstration)
  • diff --git a/files/fr/web/api/idbindex/index.html b/files/fr/web/api/idbindex/index.html index f70700fe74..57e72be398 100644 --- a/files/fr/web/api/idbindex/index.html +++ b/files/fr/web/api/idbindex/index.html @@ -25,7 +25,7 @@ translation_of: Web/API/IDBIndex

    Méthodes

    -

    Hérite de: EventTarget

    +

    Hérite de: EventTarget

    {{domxref("IDBIndex.count()")}}
    @@ -56,7 +56,7 @@ translation_of: Web/API/IDBIndex
    {{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.
    +
    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}}
    @@ -69,7 +69,7 @@ translation_of: Web/API/IDBIndex

    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() {
    +
    function displayDataByIndex() {
       tableEntry.innerHTML = '';
     
       //ouvre un transaction
    @@ -103,7 +103,7 @@ translation_of: Web/API/IDBIndex
       };
     };
    -

    Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

    +

    Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

    Spécification

    @@ -135,6 +135,6 @@ translation_of: Web/API/IDBIndex
  • {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
  • {{domxref("IDBObjectStore","Accès aux magasins d'objets")}}
  • {{domxref("IDBCursor","Utiliser les curseur")}}
  • -
  • Exemple de référence: To-do Notifications (voir l'exemple en direct.)
  • +
  • Exemple de référence: To-do Notifications (voir l'exemple en direct.)
  • diff --git a/files/fr/web/api/idbindex/isautolocale/index.html b/files/fr/web/api/idbindex/isautolocale/index.html index 32aa7556ed..70a7c7ea4a 100644 --- a/files/fr/web/api/idbindex/isautolocale/index.html +++ b/files/fr/web/api/idbindex/isautolocale/index.html @@ -75,5 +75,5 @@ console.log(monIndex.isAutoLocale);
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbindex/keypath/index.html b/files/fr/web/api/idbindex/keypath/index.html index b4378bccd4..551f9f0b73 100644 --- a/files/fr/web/api/idbindex/keypath/index.html +++ b/files/fr/web/api/idbindex/keypath/index.html @@ -6,7 +6,7 @@ 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.

    +

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

    @@ -62,7 +62,7 @@ translation_of: Web/API/IDBIndex/keyPath }; };
    -

    Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

    +

    Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

    Spécification

    @@ -94,5 +94,5 @@ translation_of: Web/API/IDBIndex/keyPath
  • {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
  • {{domxref("IDBObjectStore","Accès aux magasins d'objets")}}
  • {{domxref("IDBCursor","Utiliser les curseur")}}
  • -
  • Exemple de référence: To-do Notifications (view example live.)
  • +
  • Exemple de référence: To-do Notifications (view example live.)
  • diff --git a/files/fr/web/api/idbindex/locale/index.html b/files/fr/web/api/idbindex/locale/index.html index 830760797c..6f91a28888 100644 --- a/files/fr/web/api/idbindex/locale/index.html +++ b/files/fr/web/api/idbindex/locale/index.html @@ -60,7 +60,7 @@ translation_of: Web/API/IDBIndex/locale }; };
    -

    Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

    +

    Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

    Spécification

    @@ -79,5 +79,5 @@ translation_of: Web/API/IDBIndex/locale
  • {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
  • {{domxref("IDBObjectStore","Accès aux magasins d'objets")}}
  • {{domxref("IDBCursor","Utiliser les curseur")}}
  • -
  • Exemple de référence: To-do Notifications (view example live.)
  • +
  • Exemple de référence: To-do Notifications (view example live.)
  • diff --git a/files/fr/web/api/idbindex/multientry/index.html b/files/fr/web/api/idbindex/multientry/index.html index d3e827a3e8..730a9f074a 100644 --- a/files/fr/web/api/idbindex/multientry/index.html +++ b/files/fr/web/api/idbindex/multientry/index.html @@ -93,5 +93,5 @@ console.log(monIndex.multiEntry);
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbindex/name/index.html b/files/fr/web/api/idbindex/name/index.html index 62877bbc51..1211cc937e 100644 --- a/files/fr/web/api/idbindex/name/index.html +++ b/files/fr/web/api/idbindex/name/index.html @@ -108,5 +108,5 @@ translation_of: Web/API/IDBIndex/name
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbindex/objectstore/index.html b/files/fr/web/api/idbindex/objectstore/index.html index 51002bc8f1..72f83bc88e 100644 --- a/files/fr/web/api/idbindex/objectstore/index.html +++ b/files/fr/web/api/idbindex/objectstore/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/IDBIndex/objectStore

    Syntaxe

    -
    var indexObjectStore = myIndex.objectStore;
    +
    var indexObjectStore = myIndex.objectStore;

    Valeur

    @@ -64,7 +64,7 @@ translation_of: Web/API/IDBIndex/objectStore }; };
    -

    Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

    +

    Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

    Spécification

    @@ -96,5 +96,5 @@ translation_of: Web/API/IDBIndex/objectStore
  • {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
  • {{domxref("IDBObjectStore","Accès aux magasins d'objets")}}
  • {{domxref("IDBCursor","Utiliser les curseur")}}
  • -
  • Exemple de référence: To-do Notifications (view example live.)
  • +
  • Exemple de référence: To-do Notifications (view example live.)
  • diff --git a/files/fr/web/api/idbindex/opencursor/index.html b/files/fr/web/api/idbindex/opencursor/index.html index 360aecc871..8e0dff9573 100644 --- a/files/fr/web/api/idbindex/opencursor/index.html +++ b/files/fr/web/api/idbindex/opencursor/index.html @@ -118,7 +118,9 @@ translation_of: Web/API/IDBIndex/openCursor }; };
    -

    Note : pour un exemple fonctionnel complet, voir notre application To-do (exemple).

    +
    +

    Note : pour un exemple fonctionnel complet, voir notre application To-do (exemple).

    +

    Spécifications

    @@ -150,5 +152,5 @@ translation_of: Web/API/IDBIndex/openCursor
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbindex/openkeycursor/index.html b/files/fr/web/api/idbindex/openkeycursor/index.html index f575bc4419..a52f7c4e8e 100644 --- a/files/fr/web/api/idbindex/openkeycursor/index.html +++ b/files/fr/web/api/idbindex/openkeycursor/index.html @@ -114,7 +114,9 @@ var request = monIndex.openKeyCursor(keyRange,direction); }; }; -

    Note : pour un exemple fonctionnel complet, voir notre application To-do (exemple).

    +
    +

    Note : pour un exemple fonctionnel complet, voir notre application To-do (exemple).

    +

    Spécifications

    diff --git a/files/fr/web/api/idbindex/unique/index.html b/files/fr/web/api/idbindex/unique/index.html index c2271edaf5..4e199912a4 100644 --- a/files/fr/web/api/idbindex/unique/index.html +++ b/files/fr/web/api/idbindex/unique/index.html @@ -92,5 +92,5 @@ translation_of: Web/API/IDBIndex/unique
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbkeyrange/bound/index.html b/files/fr/web/api/idbkeyrange/bound/index.html index 487ce2897d..e235d21a8c 100644 --- a/files/fr/web/api/idbkeyrange/bound/index.html +++ b/files/fr/web/api/idbkeyrange/bound/index.html @@ -76,7 +76,7 @@ translation_of: Web/API/IDBKeyRange/bound };
    -

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

    +

    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

    @@ -111,5 +111,5 @@ translation_of: Web/API/IDBKeyRange/bound
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbkeyrange/index.html b/files/fr/web/api/idbkeyrange/index.html index 9a92d00cca..9962a1488a 100644 --- a/files/fr/web/api/idbkeyrange/index.html +++ b/files/fr/web/api/idbkeyrange/index.html @@ -130,7 +130,7 @@ translation_of: Web/API/IDBKeyRange

    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() {
    +
    function displayData() {
       var keyRangeValue = IDBKeyRange.bound("A", "F");
     
       var transaction = db.transaction(['fThings'], 'readonly');
    @@ -151,7 +151,7 @@ translation_of: Web/API/IDBKeyRange
       };
    -

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

    +

    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

    @@ -191,5 +191,5 @@ translation_of: Web/API/IDBKeyRange
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbkeyrange/lower/index.html b/files/fr/web/api/idbkeyrange/lower/index.html index 6470e2dd77..228da25525 100644 --- a/files/fr/web/api/idbkeyrange/lower/index.html +++ b/files/fr/web/api/idbkeyrange/lower/index.html @@ -51,7 +51,7 @@ translation_of: Web/API/IDBKeyRange/lower };
    -

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

    +

    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

    @@ -84,5 +84,5 @@ translation_of: Web/API/IDBKeyRange/lower
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbkeyrange/lowerbound/index.html b/files/fr/web/api/idbkeyrange/lowerbound/index.html index 6698847c92..3175f20150 100644 --- a/files/fr/web/api/idbkeyrange/lowerbound/index.html +++ b/files/fr/web/api/idbkeyrange/lowerbound/index.html @@ -65,7 +65,7 @@ IDBKeyRange.lowerBound(borne, ouvert); };
    -

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

    +

    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

    @@ -98,5 +98,5 @@ IDBKeyRange.lowerBound(borne, ouvert);
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbkeyrange/loweropen/index.html b/files/fr/web/api/idbkeyrange/loweropen/index.html index eb52d0eab0..e81e42a0d3 100644 --- a/files/fr/web/api/idbkeyrange/loweropen/index.html +++ b/files/fr/web/api/idbkeyrange/loweropen/index.html @@ -51,7 +51,7 @@ translation_of: Web/API/IDBKeyRange/lowerOpen };
    -

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

    +

    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

    @@ -84,5 +84,5 @@ translation_of: Web/API/IDBKeyRange/lowerOpen
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbkeyrange/only/index.html b/files/fr/web/api/idbkeyrange/only/index.html index f63dccc31d..dc2ed37fac 100644 --- a/files/fr/web/api/idbkeyrange/only/index.html +++ b/files/fr/web/api/idbkeyrange/only/index.html @@ -59,7 +59,7 @@ translation_of: Web/API/IDBKeyRange/only };
    -

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

    +

    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

    @@ -92,5 +92,5 @@ translation_of: Web/API/IDBKeyRange/only
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbkeyrange/upper/index.html b/files/fr/web/api/idbkeyrange/upper/index.html index d96314a08f..74b9545f8e 100644 --- a/files/fr/web/api/idbkeyrange/upper/index.html +++ b/files/fr/web/api/idbkeyrange/upper/index.html @@ -51,7 +51,7 @@ translation_of: Web/API/IDBKeyRange/upper };
    -

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

    +

    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

    @@ -84,5 +84,5 @@ translation_of: Web/API/IDBKeyRange/upper
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbkeyrange/upperbound/index.html b/files/fr/web/api/idbkeyrange/upperbound/index.html index 58f7c8b695..6adcc4fe8b 100644 --- a/files/fr/web/api/idbkeyrange/upperbound/index.html +++ b/files/fr/web/api/idbkeyrange/upperbound/index.html @@ -66,7 +66,7 @@ IDBKeyRange.upperBound(borne, ouvert); };
    -

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

    +

    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

    @@ -99,5 +99,5 @@ IDBKeyRange.upperBound(borne, ouvert);
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbkeyrange/upperopen/index.html b/files/fr/web/api/idbkeyrange/upperopen/index.html index 78bd094f95..be0068210d 100644 --- a/files/fr/web/api/idbkeyrange/upperopen/index.html +++ b/files/fr/web/api/idbkeyrange/upperopen/index.html @@ -28,7 +28,7 @@ translation_of: Web/API/IDBKeyRange/upperOpen

    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() {
    +
    function displayData() {
       var keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
       console.log(keyRangeValue.upperOpen);
     
    @@ -66,7 +66,7 @@ translation_of: Web/API/IDBKeyRange/upperOpen
      
     
     
    -

    Compatibilité avec les navigateurs

    +

    Compatibilité avec les navigateurs

    {{Compat("api.IDBKeyRange.upperOpen")}}

    @@ -79,5 +79,5 @@ translation_of: Web/API/IDBKeyRange/upperOpen
  • {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
  • {{domxref("IDBObjectStore","Accès aux magasins d'objets")}}
  • {{domxref("IDBCursor","Utiliser les curseur")}}
  • -
  • Exemple de référence: To-do Notifications (view example live.)
  • +
  • Exemple de référence: To-do Notifications (view example live.)
  • diff --git a/files/fr/web/api/idbobjectstore/add/index.html b/files/fr/web/api/idbobjectstore/add/index.html index 465c318d74..8aadd297b3 100644 --- a/files/fr/web/api/idbobjectstore/add/index.html +++ b/files/fr/web/api/idbobjectstore/add/index.html @@ -159,5 +159,5 @@ function addData() {
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbobjectstore/autoincrement/index.html b/files/fr/web/api/idbobjectstore/autoincrement/index.html index 834991b34f..58aebe2096 100644 --- a/files/fr/web/api/idbobjectstore/autoincrement/index.html +++ b/files/fr/web/api/idbobjectstore/autoincrement/index.html @@ -7,7 +7,9 @@ translation_of: Web/API/IDBObjectStore/autoIncrement

    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.

    +
    +

    Note : Chaque magasin d'objets à son conteur d’incrémentation automatique.

    +

    {{AvailableInWorkers}}

    @@ -75,7 +77,9 @@ function addData() { };
    -

    Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

    +
    +

    Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

    +

    Spécification

    @@ -94,7 +98,7 @@ function addData() { -

    Compatibilité avec les navigateurs

    +

    Compatibilité avec les navigateurs

    {{Compat("api.IDBObjectStore.autoIncrement")}}

    @@ -107,5 +111,5 @@ function addData() {
  • {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
  • {{domxref("IDBObjectStore","Accès aux magasins d'objets")}}
  • {{domxref("IDBCursor","Utiliser les curseur")}}
  • -
  • Exemple de référence: To-do Notifications (view example live.)
  • +
  • Exemple de référence: To-do Notifications (view example live.)
  • diff --git a/files/fr/web/api/idbobjectstore/clear/index.html b/files/fr/web/api/idbobjectstore/clear/index.html index ad64ef25e0..7a46763b74 100644 --- a/files/fr/web/api/idbobjectstore/clear/index.html +++ b/files/fr/web/api/idbobjectstore/clear/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/IDBObjectStore/clear

    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.

    +

    Note : La méthode clear() ne remet pas à zero le compteur du génerateur de clé s'il y en à un.

    {{AvailableInWorkers}}

    @@ -78,7 +78,9 @@ function clearData() { };
    -

    Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

    +
    +

    Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

    +

    Spécification

    @@ -97,7 +99,7 @@ function clearData() { -

    Compatibilité avec les navigateurs

    +

    Compatibilité avec les navigateurs

    {{Compat("api.IDBObjectStore.clear")}}

    @@ -110,5 +112,5 @@ function clearData() {
  • {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
  • {{domxref("IDBObjectStore","Accès aux magasins d'objets")}}
  • {{domxref("IDBCursor","Utiliser les curseur")}}
  • -
  • Exemple de référence: To-do Notifications (view example live.)
  • +
  • Exemple de référence: To-do Notifications (view example live.)
  • diff --git a/files/fr/web/api/idbobjectstore/count/index.html b/files/fr/web/api/idbobjectstore/count/index.html index a3664d60f1..929daad96b 100644 --- a/files/fr/web/api/idbobjectstore/count/index.html +++ b/files/fr/web/api/idbobjectstore/count/index.html @@ -100,5 +100,5 @@ countRequest.onsuccess = function() {
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbobjectstore/createindex/index.html b/files/fr/web/api/idbobjectstore/createindex/index.html index 4990563c73..64b80ef538 100644 --- a/files/fr/web/api/idbobjectstore/createindex/index.html +++ b/files/fr/web/api/idbobjectstore/createindex/index.html @@ -8,14 +8,14 @@ translation_of: Web/API/IDBObjectStore/createIndex

    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.

    +

    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);
    +
    objectStore.createIndex(nomIndex, nomCle, parametresIndexOptionnel);

    Paramètres

    @@ -47,7 +47,7 @@ translation_of: Web/API/IDBObjectStore/createIndex 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:

    +

    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'.
    • @@ -72,7 +72,7 @@ translation_of: Web/API/IDBObjectStore/createIndex
      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. -

      Dans les versions de Firefox antérieur à 41, une InvalidStateError est levé dans ce cas aussi, ce qui est trompeur. Cela a été corrigé (voir bug 1176165 ).

      + 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.
      @@ -128,7 +128,9 @@ DBOpenRequest.onupgradeneeded = function(event) { }; -

      Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

      +
      +

      Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

      +

      Spécifications

      @@ -147,7 +149,7 @@ DBOpenRequest.onupgradeneeded = function(event) { -

      Compatibilité avec les navigateurs

      +

      Compatibilité avec les navigateurs

      {{Compat("api.IDBObjectStore.createIndex")}}

      @@ -160,5 +162,5 @@ DBOpenRequest.onupgradeneeded = function(event) {
    • {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
    • {{domxref("IDBObjectStore","Accès aux magasins d'objets")}}
    • {{domxref("IDBCursor","Utiliser les curseur")}}
    • -
    • Exemple de référence: To-do Notifications (view example live.)
    • +
    • Exemple de référence: To-do Notifications (view example live.)
    diff --git a/files/fr/web/api/idbobjectstore/delete/index.html b/files/fr/web/api/idbobjectstore/delete/index.html index bf825252f0..66ebf75c18 100644 --- a/files/fr/web/api/idbobjectstore/delete/index.html +++ b/files/fr/web/api/idbobjectstore/delete/index.html @@ -138,5 +138,5 @@ function deleteData() {
  • Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
  • Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
  • Utiliser les curseurs {{domxref("IDBCursor")}}
  • -
  • L'exemple de référence : notifications de trucs à faire (voir la démonstration)
  • +
  • L'exemple de référence : notifications de trucs à faire (voir la démonstration)
  • diff --git a/files/fr/web/api/idbobjectstore/deleteindex/index.html b/files/fr/web/api/idbobjectstore/deleteindex/index.html index 4177b1015b..6c01a8ab42 100644 --- a/files/fr/web/api/idbobjectstore/deleteindex/index.html +++ b/files/fr/web/api/idbobjectstore/deleteindex/index.html @@ -8,7 +8,7 @@ translation_of: Web/API/IDBObjectStore/deleteIndex

    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.

    +

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

    @@ -34,8 +34,8 @@ translation_of: Web/API/IDBObjectStore/deleteIndex
    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. -

    Dans les versions de Firefox antérieur à 41, une InvalidStateError est levée dans ce cas aussi, ce qui est trompeur. Cela a été corrigé (voir bug 1176165).

    +

    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.
    @@ -94,7 +94,9 @@ DBOpenRequest.onupgradeneeded = function(event) { }; -

    Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

    +
    +

    Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

    +

    Spécification

    @@ -113,7 +115,7 @@ DBOpenRequest.onupgradeneeded = function(event) { -

    Compatibilité avec les navigateurs

    +

    Compatibilité avec les navigateurs

    {{Compat("api.IDBObjectStore.deleteIndex")}}

    @@ -126,5 +128,5 @@ DBOpenRequest.onupgradeneeded = function(event) {
  • {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
  • {{domxref("IDBObjectStore","Accès aux magasins d'objets")}}
  • {{domxref("IDBCursor","Utiliser les curseur")}}
  • -
  • Exemple de référence: To-do Notifications (view example live.)
  • +
  • Exemple de référence: To-do Notifications (view example live.)
  • diff --git a/files/fr/web/api/idbobjectstore/get/index.html b/files/fr/web/api/idbobjectstore/get/index.html index b0f3cf48ce..28850ce536 100644 --- a/files/fr/web/api/idbobjectstore/get/index.html +++ b/files/fr/web/api/idbobjectstore/get/index.html @@ -92,7 +92,9 @@ function deleteData() { }; -

    Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

    +
    +

    Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

    +

    Spécifications

    @@ -124,5 +126,5 @@ function deleteData() {
  • {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
  • {{domxref("IDBObjectStore","Accès aux magasins d'objets")}}
  • {{domxref("IDBCursor","Utiliser les curseur")}}
  • -
  • Exemple de référence: To-do Notifications (view example live.)
  • +
  • Exemple de référence: To-do Notifications (view example live.)
  • diff --git a/files/fr/web/api/idbobjectstore/getallkeys/index.html b/files/fr/web/api/idbobjectstore/getallkeys/index.html index 98ab2eb86e..88032f4682 100644 --- a/files/fr/web/api/idbobjectstore/getallkeys/index.html +++ b/files/fr/web/api/idbobjectstore/getallkeys/index.html @@ -36,7 +36,7 @@ var request = objectStore.getAllKeys(query, count);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 à 232-1, sinon une exception {{jsxref("TypeError")}} sera levée.
    +
    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

    @@ -102,5 +102,5 @@ var request = objectStore.getAllKeys(query, count);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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbobjectstore/getkey/index.html b/files/fr/web/api/idbobjectstore/getkey/index.html index 5c8f6ca6ba..84581d2293 100644 --- a/files/fr/web/api/idbobjectstore/getkey/index.html +++ b/files/fr/web/api/idbobjectstore/getkey/index.html @@ -13,7 +13,7 @@ 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é.

    +

    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.

    diff --git a/files/fr/web/api/idbobjectstore/index.html b/files/fr/web/api/idbobjectstore/index.html index 7a83d69130..2f048f7b9e 100644 --- a/files/fr/web/api/idbobjectstore/index.html +++ b/files/fr/web/api/idbobjectstore/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/IDBObjectStore
    {{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é .
    +
    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()")}}
    @@ -35,7 +35,7 @@ translation_of: Web/API/IDBObjectStore
    {{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é.
    +
    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()")}}
    @@ -50,7 +50,7 @@ translation_of: Web/API/IDBObjectStore
    {{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é.
    +
    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}}
    @@ -130,7 +130,9 @@ objectStoreRequest.onsuccess = function(event) { note.innerHTML += '<li>L\'enregistrement à été ajouté au magasin d\'objet.</li>'; } -

    Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

    +
    +

    Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

    +

    Spécifications

    @@ -161,5 +163,5 @@ objectStoreRequest.onsuccess = function(event) {
  • {{domxref("IDBTransaction","Utilisé les transactions")}}
  • {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
  • {{domxref("IDBCursor","Utiliser les curseur")}}
  • -
  • Exemple de référence: To-do Notifications (view example live.)
  • +
  • Exemple de référence: To-do Notifications (view example live.)
  • diff --git a/files/fr/web/api/idbobjectstore/index/index.html b/files/fr/web/api/idbobjectstore/index/index.html index c1e0b9c4f9..f0cef79029 100644 --- a/files/fr/web/api/idbobjectstore/index/index.html +++ b/files/fr/web/api/idbobjectstore/index/index.html @@ -120,5 +120,5 @@ translation_of: Web/API/IDBObjectStore/index
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbobjectstore/indexnames/index.html b/files/fr/web/api/idbobjectstore/indexnames/index.html index 3d8de9359e..96cfe6186a 100644 --- a/files/fr/web/api/idbobjectstore/indexnames/index.html +++ b/files/fr/web/api/idbobjectstore/indexnames/index.html @@ -108,5 +108,5 @@ function addData() {
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbobjectstore/keypath/index.html b/files/fr/web/api/idbobjectstore/keypath/index.html index bff72a916c..cca4866bd8 100644 --- a/files/fr/web/api/idbobjectstore/keypath/index.html +++ b/files/fr/web/api/idbobjectstore/keypath/index.html @@ -110,5 +110,5 @@ function addData() {
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbobjectstore/name/index.html b/files/fr/web/api/idbobjectstore/name/index.html index 1914280158..214f9ce32a 100644 --- a/files/fr/web/api/idbobjectstore/name/index.html +++ b/files/fr/web/api/idbobjectstore/name/index.html @@ -116,5 +116,5 @@ function addData() {
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbobjectstore/opencursor/index.html b/files/fr/web/api/idbobjectstore/opencursor/index.html index c4a99970e1..6e19a926d8 100644 --- a/files/fr/web/api/idbobjectstore/opencursor/index.html +++ b/files/fr/web/api/idbobjectstore/opencursor/index.html @@ -110,5 +110,5 @@ request.onsuccess = function(event) {
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbobjectstore/openkeycursor/index.html b/files/fr/web/api/idbobjectstore/openkeycursor/index.html index 25390421f9..a7270562d0 100644 --- a/files/fr/web/api/idbobjectstore/openkeycursor/index.html +++ b/files/fr/web/api/idbobjectstore/openkeycursor/index.html @@ -107,5 +107,5 @@ request.onsuccess = function(event) {
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbobjectstore/put/index.html b/files/fr/web/api/idbobjectstore/put/index.html index 383a548934..f4c51928b1 100644 --- a/files/fr/web/api/idbobjectstore/put/index.html +++ b/files/fr/web/api/idbobjectstore/put/index.html @@ -146,5 +146,5 @@ objectStoreTitleRequest.onsuccess = function() {
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbobjectstore/transaction/index.html b/files/fr/web/api/idbobjectstore/transaction/index.html index 281ad9afdf..92c8a187db 100644 --- a/files/fr/web/api/idbobjectstore/transaction/index.html +++ b/files/fr/web/api/idbobjectstore/transaction/index.html @@ -68,7 +68,9 @@ function addData() { }; -

    Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

    +
    +

    Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

    +

    Spécifications

    diff --git a/files/fr/web/api/idbopendbrequest/blocked_event/index.html b/files/fr/web/api/idbopendbrequest/blocked_event/index.html index 0c9bdbf588..6789721695 100644 --- a/files/fr/web/api/idbopendbrequest/blocked_event/index.html +++ b/files/fr/web/api/idbopendbrequest/blocked_event/index.html @@ -10,7 +10,7 @@ original_slug: Web/API/IDBRequest/blocked_event
    Spécification
    -
    IndexedDB
    +
    IndexedDB
    Interface
    IDBVersionChangeEvent
    Propagation
    @@ -69,20 +69,20 @@ original_slug: Web/API/IDBRequest/blocked_event

    Exemple

    -
    var req1 = indexedDB.open("addressbook", 3);
    +
    var req1 = indexedDB.open("addressbook", 3);
     
    -req1.onsuccess = function( event ) {
    -  var addressbookDB = event.target.result;
    +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);
    +  // 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)
    -  };
    +  // Dans ce cas, le handler onblocked sera exécuté
    +  req2.onblocked = function( e ) {
    +    console.log(e)
    +  };
     
    -};
    +};

    Evénements liés

    diff --git a/files/fr/web/api/idbopendbrequest/index.html b/files/fr/web/api/idbopendbrequest/index.html index 6ded1bf71a..2cbb5b3c7e 100644 --- a/files/fr/web/api/idbopendbrequest/index.html +++ b/files/fr/web/api/idbopendbrequest/index.html @@ -29,21 +29,20 @@ translation_of: Web/API/IDBOpenDBRequest
    {{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 .
    +
    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")}}.

    -
    +

    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)

    +

    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;
    +
    var db;
     
     // Ouvre la base de données.
     var DBOpenRequest = window.indexedDB.open("toDoList", 4);
    @@ -118,11 +117,11 @@ DBOpenRequest.onupgradeneeded = function(event) {
     

    Voir aussi

    diff --git a/files/fr/web/api/idbrequest/error/index.html b/files/fr/web/api/idbrequest/error/index.html index b669c94cda..1604f594ad 100644 --- a/files/fr/web/api/idbrequest/error/index.html +++ b/files/fr/web/api/idbrequest/error/index.html @@ -130,5 +130,5 @@ objectStoreTitleRequest.onerror = function() {
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbrequest/index.html b/files/fr/web/api/idbrequest/index.html index 87759d881f..dac0d4018c 100644 --- a/files/fr/web/api/idbrequest/index.html +++ b/files/fr/web/api/idbrequest/index.html @@ -64,7 +64,7 @@ translation_of: Web/API/IDBRequest

    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;
    +
    var db;
     
     // Ouvre une base de données.
     var DBOpenRequest = window.indexedDB.open("toDoList", 4);
    @@ -104,7 +104,7 @@ DBOpenRequest.onsuccess = function(event) {
      
     
     
    -

    Compatibilité avec les navigateurs

    +

    Compatibilité avec les navigateurs

    @@ -125,5 +125,5 @@ DBOpenRequest.onsuccess = function(event) {
  • Définir un intervalle de clés: {{domxref("IDBKeyRange")}}
  • Récupérer et modifier vos données: {{domxref("IDBObjectStore")}}
  • utiliser les curseurs: {{domxref("IDBCursor")}}
  • -
  • Exemple de référence: To-do Notifications (view example live.)
  • +
  • Exemple de référence: To-do Notifications (view example live.)
  • diff --git a/files/fr/web/api/idbrequest/onerror/index.html b/files/fr/web/api/idbrequest/onerror/index.html index d7622ff6f6..dc57020d05 100644 --- a/files/fr/web/api/idbrequest/onerror/index.html +++ b/files/fr/web/api/idbrequest/onerror/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/IDBRequest/onerror

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

    +

    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";
     
    @@ -80,5 +80,5 @@ objectStoreTitleRequest.onerror = function() {
      
  • Setting a range of keys: {{domxref("IDBKeyRange")}}
  • Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}
  • Using cursors: {{domxref("IDBCursor")}}
  • -
  • Reference example: To-do Notifications (view example live.)
  • +
  • Reference example: To-do Notifications (view example live.)
  • diff --git a/files/fr/web/api/idbrequest/onsuccess/index.html b/files/fr/web/api/idbrequest/onsuccess/index.html index 38033b6fa6..a13ed4c5e7 100644 --- a/files/fr/web/api/idbrequest/onsuccess/index.html +++ b/files/fr/web/api/idbrequest/onsuccess/index.html @@ -82,5 +82,5 @@ objectStoreTitleRequest.onerror = function() {
  • Setting a range of keys: {{domxref("IDBKeyRange")}}
  • Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}
  • Using cursors: {{domxref("IDBCursor")}}
  • -
  • Reference example: To-do Notifications (view example live.)
  • +
  • Reference example: To-do Notifications (view example live.)
  • diff --git a/files/fr/web/api/idbrequest/result/index.html b/files/fr/web/api/idbrequest/result/index.html index bb19ba4f1d..066ba37fa7 100644 --- a/files/fr/web/api/idbrequest/result/index.html +++ b/files/fr/web/api/idbrequest/result/index.html @@ -8,7 +8,9 @@ browser-compat: api.IDBRequest.result

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

    Note : Cette fonctionnalité est disponible via les Web Workers.

    +

    Syntaxe

    diff --git a/files/fr/web/api/idbrequest/source/index.html b/files/fr/web/api/idbrequest/source/index.html index 7a0337c248..8a03050021 100644 --- a/files/fr/web/api/idbrequest/source/index.html +++ b/files/fr/web/api/idbrequest/source/index.html @@ -30,7 +30,7 @@ var IDBObjectStore = request.source;

    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";
    +
    var title = "Walk dog";
     
     // On ouvre une transaction
     var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
    diff --git a/files/fr/web/api/idbrequest/transaction/index.html b/files/fr/web/api/idbrequest/transaction/index.html
    index 85bfaaa3f0..a81f6d0774 100644
    --- a/files/fr/web/api/idbrequest/transaction/index.html
    +++ b/files/fr/web/api/idbrequest/transaction/index.html
    @@ -7,7 +7,9 @@ translation_of: Web/API/IDBRequest/transaction
     
     

    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.

    -

    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.

    +
    +

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

    @@ -109,5 +111,5 @@ openRequest.onsuccess = function() {
  • Setting a range of keys: {{domxref("IDBKeyRange")}}
  • Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}
  • Using cursors: {{domxref("IDBCursor")}}
  • -
  • Reference example: To-do Notifications (view example live.)
  • +
  • Reference example: To-do Notifications (view example live.)
  • diff --git a/files/fr/web/api/idbtransaction/abort/index.html b/files/fr/web/api/idbtransaction/abort/index.html index 3a8040d959..a7baf8d966 100644 --- a/files/fr/web/api/idbtransaction/abort/index.html +++ b/files/fr/web/api/idbtransaction/abort/index.html @@ -113,5 +113,5 @@ function addData() {
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbtransaction/abort_event/index.html b/files/fr/web/api/idbtransaction/abort_event/index.html index 36d16a63ac..86a1413564 100644 --- a/files/fr/web/api/idbtransaction/abort_event/index.html +++ b/files/fr/web/api/idbtransaction/abort_event/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/IDBTransaction/abort_event
    Spécification
    -
    IndexedDB
    +
    IndexedDB
    Interface
    Event
    Propagation
    diff --git a/files/fr/web/api/idbtransaction/complete_event/index.html b/files/fr/web/api/idbtransaction/complete_event/index.html index 78ced266c7..ed134208b2 100644 --- a/files/fr/web/api/idbtransaction/complete_event/index.html +++ b/files/fr/web/api/idbtransaction/complete_event/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/IDBTransaction/complete_event
    Spécification
    -
    IndexedDB
    +
    IndexedDB
    Interface
    Event
    Propagation
    diff --git a/files/fr/web/api/idbtransaction/db/index.html b/files/fr/web/api/idbtransaction/db/index.html index d81591a87a..a193d733ca 100644 --- a/files/fr/web/api/idbtransaction/db/index.html +++ b/files/fr/web/api/idbtransaction/db/index.html @@ -74,7 +74,9 @@ function addData() { };
    -

    Note : pour un exemple fonctionnel complet, voir notre application To-do (exemple).

    +
    +

    Note : pour un exemple fonctionnel complet, voir notre application To-do (exemple).

    +

    Spécifications

    @@ -106,5 +108,5 @@ function addData() {
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbtransaction/error/index.html b/files/fr/web/api/idbtransaction/error/index.html index aa1012bc7b..ccbd3c3252 100644 --- a/files/fr/web/api/idbtransaction/error/index.html +++ b/files/fr/web/api/idbtransaction/error/index.html @@ -26,7 +26,9 @@ translation_of: Web/API/IDBTransaction/error

    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.

    +
    +

    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

    @@ -77,7 +79,9 @@ function addData() { };
    -

    Note : pour un exemple fonctionnel complet, voir notre application To-do (exemple).

    +
    +

    Note : pour un exemple fonctionnel complet, voir notre application To-do (exemple).

    +

    Spécifications

    @@ -109,5 +113,5 @@ function addData() {
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbtransaction/index.html b/files/fr/web/api/idbtransaction/index.html index f87fc8eb1a..b856029dee 100644 --- a/files/fr/web/api/idbtransaction/index.html +++ b/files/fr/web/api/idbtransaction/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/IDBTransaction

    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 trans1 = db.transaction("toto", "readwrite");
     var trans2 = db.transaction("toto", "readwrite");
     trans2.put("2", "clé");
     trans1.put("1", "clé");
    @@ -184,5 +184,5 @@ function addData() {
      
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbtransaction/mode/index.html b/files/fr/web/api/idbtransaction/mode/index.html index 234a44dd51..2cc9c693bc 100644 --- a/files/fr/web/api/idbtransaction/mode/index.html +++ b/files/fr/web/api/idbtransaction/mode/index.html @@ -130,5 +130,5 @@ function addData() {
  • 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).
  • +
  • Exemple de référence : To-do Notifications (exemple live).
  • diff --git a/files/fr/web/api/idbtransaction/objectstore/index.html b/files/fr/web/api/idbtransaction/objectstore/index.html index 56208fb7ca..61fa2e0d56 100644 --- a/files/fr/web/api/idbtransaction/objectstore/index.html +++ b/files/fr/web/api/idbtransaction/objectstore/index.html @@ -93,7 +93,9 @@ function addData() { };
    -

    Note : Pour un exemple fonctionnel complet, voir notre application To-do Notifications (l'exemple live est disponible ici).

    +
    +

    Note : Pour un exemple fonctionnel complet, voir notre application To-do Notifications (l'exemple live est disponible ici).

    +

    Spécifications

    diff --git a/files/fr/web/api/idbtransaction/onabort/index.html b/files/fr/web/api/idbtransaction/onabort/index.html index 1a4f4d8a0c..22ae924a6f 100644 --- a/files/fr/web/api/idbtransaction/onabort/index.html +++ b/files/fr/web/api/idbtransaction/onabort/index.html @@ -79,7 +79,9 @@ function addData() { transaction.abort(); };
    -

    Note : Pour un exemple fonctionnel complet, voir notre application To-do Notifications (exemple live disponible).

    +
    +

    Note : Pour un exemple fonctionnel complet, voir notre application To-do Notifications (exemple live disponible).

    +

    Spécifications

    diff --git a/files/fr/web/api/idbtransaction/oncomplete/index.html b/files/fr/web/api/idbtransaction/oncomplete/index.html index f243276fda..2c92b816b8 100644 --- a/files/fr/web/api/idbtransaction/oncomplete/index.html +++ b/files/fr/web/api/idbtransaction/oncomplete/index.html @@ -15,7 +15,8 @@ translation_of: Web/API/IDBTransaction/oncomplete

    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.

    -

    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.

    +
    +

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

    @@ -77,7 +78,9 @@ function addData() { };
    -

    Pour un exemple de travail complet, voir notre application To-do Notifications (exemple live disponible).

    +
    +

    Note :Pour un exemple de travail complet, voir notre application To-do Notifications (exemple live disponible).

    +

    Spécifications

    diff --git a/files/fr/web/api/idbtransaction/onerror/index.html b/files/fr/web/api/idbtransaction/onerror/index.html index 9cd2f814d5..d37965f979 100644 --- a/files/fr/web/api/idbtransaction/onerror/index.html +++ b/files/fr/web/api/idbtransaction/onerror/index.html @@ -68,7 +68,9 @@ function addData() { };
    -

    Note : Pour un exemple de travail complet, voir l'application To-do Notifications (exemple live disponible ici).

    +
    +

    Note : Pour un exemple de travail complet, voir l'application To-do Notifications (exemple live disponible ici).

    +

    Spécifications

    diff --git a/files/fr/web/api/imagedata/data/index.html b/files/fr/web/api/imagedata/data/index.html index 6bb88c71bb..93967d5b3a 100644 --- a/files/fr/web/api/imagedata/data/index.html +++ b/files/fr/web/api/imagedata/data/index.html @@ -14,11 +14,11 @@ translation_of: Web/API/ImageData/data

    Exemple

    -
    var imagedata = new ImageData(100, 100);
    +
    var imagedata = new ImageData(100, 100);
     imagedata.data; // Uint8ClampedArray[40000]
     
    -

    Specification

    +

    Specification

    diff --git a/files/fr/web/api/index.html b/files/fr/web/api/index.html index adbd2a33b8..a66d8b6b9f 100644 --- a/files/fr/web/api/index.html +++ b/files/fr/web/api/index.html @@ -10,7 +10,7 @@ tags: - 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.

    +

    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.

    diff --git a/files/fr/web/api/indexeddb/index.html b/files/fr/web/api/indexeddb/index.html index 7d8aaa0ed5..78d82dae7a 100644 --- a/files/fr/web/api/indexeddb/index.html +++ b/files/fr/web/api/indexeddb/index.html @@ -24,7 +24,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/indexedDB

    Exemples

    -
    var db;
    +
    var db;
     function openDB() {
      var DBOpenRequest = window.indexedDB.open('toDoList');
      DBOpenRequest.onsuccess = function(e) {
    @@ -73,5 +73,5 @@ function openDB() {
      
  • 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).
  • +
  • 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 index c01f34e3ef..ced83206f0 100644 --- 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 @@ -14,11 +14,11 @@ original_slug: Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteri
    {{DefaultAPISidebar("IndexedDB")}}
    -

    Il existe un certain nombre de technologies Web qui stockent des données d'un type ou d'un autre du côté client (c'est-à-dire sur le disque local). Le processus par lequel le navigateur calcule l'espace alloué au stockage de données Web et les données à supprimer quand la limite est atteinte n'est pas simple et diffère d'un navigateur à l'autre. Cet article tente d'expliquer comment tout cela fonctionne.

    +

    Note : 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.

    +

    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

    @@ -67,19 +67,19 @@ original_slug: Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteri
    -

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

    +

    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

    @@ -109,7 +109,7 @@ original_slug: Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteri
    -

    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.

    +

    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

    @@ -123,7 +123,7 @@ original_slug: Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteri

    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 :

    @@ -135,6 +135,6 @@ original_slug: Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteri

    Voir aussi

    diff --git a/files/fr/web/api/indexeddb_api/index.html b/files/fr/web/api/indexeddb_api/index.html index 50d5b363b5..01e9cdf503 100644 --- a/files/fr/web/api/indexeddb_api/index.html +++ b/files/fr/web/api/indexeddb_api/index.html @@ -17,21 +17,21 @@ original_slug: Web/API/API_IndexedDB

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

    +

    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.

    +

    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.

    +

    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

    @@ -57,11 +57,10 @@ original_slug: Web/API/API_IndexedDB
    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

    -
    +

    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).
    @@ -115,15 +114,15 @@ original_slug: Web/API/API_IndexedDB
    Version synchrone de {{domxref("IDBCursor")}}.
    -

    Exemples

    +

    Exemples

    -

    Spécifications

    +

    Spécifications

    @@ -148,10 +147,10 @@ original_slug: Web/API/API_IndexedDB

    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
    • +
    • 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 index 081027f6ed..39097580d4 100644 --- a/files/fr/web/api/indexeddb_api/using_indexeddb/index.html +++ b/files/fr/web/api/indexeddb_api/using_indexeddb/index.html @@ -11,15 +11,15 @@ tags: 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. 

    +

    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.

    +

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

    +

    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

    +

    Modèle de base

    Le modèle de base qu'IndexedDB utilise est le suivant :

    @@ -37,9 +37,9 @@ original_slug: Web/API/API_IndexedDB/Using_IndexedDB

    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

    +

    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.

    +

    É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

    @@ -70,12 +70,12 @@ 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.

    +

    La requête "open" n'ouvre pas la base de données ni ne démarre une transaction aussitôt. L'appel de la fonction open() retourne un objet IDBOpenDBRequest avec un résultat  (success) ou une valeur d'erreur qui permet de la gérer comme un évènement. La plupart des autres fonctions asynchrones dans IndexedDB fonctionnent de la même façon ; Elles retournent un objet IDBRequest avec le résultat ou une erreur. Le résultat de la fonction "open" est une instance de IDBDatabase.

    Le second paramètre de la méthode open est la version de la base de données. La version de la base détermine le schéma de celle-ci — Les objets stockés dans la base de données et leur structure. Si la base de données n'existe pas déjà, elle est créée via l'opération open(), puis, un événement onupgradeneeded est déclenché et vous créez le schéma de la base dans le gestionnaire pour cet événement. Si la base de données existe, mais que vous spécifiez un numéro de version plus élevé, un événement onupgradeneeded est déclenché  immédiatement, vous permettant de mettre à jour le schéma dans son gestionnaire – plus d'informations dans Updating the version of the database plus bas et la page référence {{ domxref("IDBFactory.open") }}.

    -

    Important: Le numéro de version est un nombre "unsigned long long" ce qui signifie qu'il peut s'agir d'un entier très grand. Cela veut également dire que vous ne pouvez pas utiliser de réél, sinon, il sera converti au nombre entier le plus proche (inférieur) et la transaction peut ne pas démarrer ou ne pas déclencher l'événement upgradeneeded. Par exemple, n'utilisez pas 2.4 comme un numéro de version :
    +

    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

    @@ -92,7 +92,7 @@ request.onsuccess = function(event) {

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

    +

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

    @@ -122,15 +122,15 @@ request.onsuccess = function(event) {

    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 :

    +

    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;
    +
    // 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" });
    -};
    + // 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.

    @@ -138,11 +138,11 @@ request.onsuccess = function(event) {

    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.

    +

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

    +

    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.

    @@ -184,49 +184,49 @@ request.onsuccess = function(event) {

    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" }
    -];
    +
    // 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;
    +
    const dbName = "the_name";
     
    -  // 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" });
    +var request = indexedDB.open(dbName, 2);
     
    -  // 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]);
    -    }
    -  }
    -};
    +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.
    @@ -236,7 +236,7 @@ request.onupgradeneeded 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.

    +

    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

    @@ -246,24 +246,24 @@ request.onupgradeneeded // Ouverture d'indexedDB. -var request = indexedDB.open(dbName, 3); +
    // Ouverture d'indexedDB.
    +var request = indexedDB.open(dbName, 3);
     
    -request.onupgradeneeded = function (event) {
    +request.onupgradeneeded = function (event) {
     
    -    var db = event.target.result;
    +    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 });
    +    // 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);
    -    }
    -}
    + // 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".

    @@ -276,24 +276,24 @@ request.onupgradeneeded 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")}}.

    +

    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.
    • +
    • 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");
    +
    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);
    +// 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).

    @@ -303,22 +303,22 @@ request.onupgradeneeded // Faire quelque chose lorsque toutes les données sont ajoutées à la base de données. -transaction.oncomplete = function(event) { - alert("All done!"); -}; +
    // 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 !
    -};
    +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;
    -  };
    -}
    +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") }}.
    @@ -328,33 +328,33 @@ transaction.onerror var request = db.transaction(["customers"], "readwrite") - .objectStore("customers") - .delete("444-44-4444"); -request.onsuccess = function(event) { - // c'est supprimé ! -}; +
    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);
    -};
    +
    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);
    -};
    +
    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.
    @@ -363,257 +363,257 @@ request.onsuccess 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.
  • +
  • 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 !
    -   };
    -};
    +
    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.

    +

    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!");
    -  }
    -};
    +
    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);
    -  }
    -};
    +
    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 :

    +

    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);
    -};
    +
    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().

    +

    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.

    +

    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.
    +
    // 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");
    +var index = objectStore.index("name");
     
    -index.get("Donna").onsuccess = function(event) {
    -  alert("Donna's SSN is " + event.target.result.ssn);
    -};
    +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 .

    +

    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 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();
    -  }
    -};
    +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 seulement à "Donna"
    +var singleKeyRange = IDBKeyRange.only("Donna");
    +
     // Correspond à n'importe quoi contenant "Bill", y compris "Bill"
    -var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
    -
    +var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
    +
     // Correspond à n'importe quoi contenant "Bill", mais pas "Bill"
    -var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
    -
    +var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
    +
     // Correspond à n'importe quoi, mais  "Donna" exclus.
    -var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
    -
    +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);
    -
    +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.

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

    +

    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

    +

    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 :

    +

    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. -
    3. Une fois toutes les transactions terminées, la connexion à la base de données est fermée .
    4. -
    5. 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 .
    6. +
    7. 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.
    8. +
    9. Une fois toutes les transactions terminées, la connexion à la base de données est fermée .
    10. +
    11. 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 .
    -

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

    +

    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.

    +

    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.

    +

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

    +

    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.

    +

    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.

    +

    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.

    +

    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 :

    +

    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
    • @@ -622,454 +622,454 @@ openReq.onsuccess 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.

      +

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

      +

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

      +

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

      +

      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

      +

      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>
      +
      <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>
      +    <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">
      +      </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">
      +              </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">
      +              </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>
      + </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;
      -}
      +
      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 });
      -    };
      -  }
      -
      -  /**
      +
      (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);
      -    };
      -  }
      -
      -  /**
      +   */
      +  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");
      -        });
      -      }
      -
      -    });
      -  }
      -
      -  /**
      +   */
      +  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)
      @@ -1077,235 +1077,235 @@ openReq.onsuccess 
      -  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");
      -    //   }
      -    // });
      -  }
      -
      -  /**
      +   */
      +  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);
      -    };
      -  }
      -
      -  /**
      +   */
      +  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);
      -    };
      -  }
      -
      -  /**
      +   */
      +  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)
      + */ + 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") }}

      @@ -1314,25 +1314,25 @@ openReq.onsuccess IndexedDB API Reference -
    • Indexed Database API Specification
    • -
    • Using IndexedDB in chrome
    • -
    • Using JavaScript generators in Firefox
    • -
    • IndexedDB interface files dans le code source de Firefox
    • +
    • IndexedDB API Reference
    • +
    • Indexed Database API Specification
    • +
    • Using IndexedDB in chrome
    • +
    • Using JavaScript generators in Firefox
    • +
    • IndexedDB interface files dans le code source de Firefox

    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.
    • +
    • 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 index 2b73d4d0a9..1f33085e17 100644 --- a/files/fr/web/api/inputevent/index.html +++ b/files/fr/web/api/inputevent/index.html @@ -42,7 +42,7 @@ translation_of: Web/API/InputEvent

    Spécifications

    -
    +
    diff --git a/files/fr/web/api/intersection_observer_api/index.html b/files/fr/web/api/intersection_observer_api/index.html index b314d00515..3343785331 100644 --- a/files/fr/web/api/intersection_observer_api/index.html +++ b/files/fr/web/api/intersection_observer_api/index.html @@ -10,7 +10,7 @@ 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.

    +

    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:

    @@ -118,8 +118,9 @@ observer.observe(target);
  • La dernière boîte a des paliers tous les 25%.
  • - -

    {{EmbedLiveSample("threshold-example", 500, 500)}}

    +

    {{EmbedLiveSample("exemple_de_seuil", 500, 500)}}

    Interfaces

    diff --git a/files/fr/web/api/intersectionobserver/index.html b/files/fr/web/api/intersectionobserver/index.html index 1842bb7f60..cd9eb647cd 100644 --- a/files/fr/web/api/intersectionobserver/index.html +++ b/files/fr/web/api/intersectionobserver/index.html @@ -12,7 +12,7 @@ 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.

    +

    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.

    diff --git a/files/fr/web/api/intersectionobserver/intersectionobserver/index.html b/files/fr/web/api/intersectionobserver/intersectionobserver/index.html index d22916ffd3..4d90eff28d 100644 --- a/files/fr/web/api/intersectionobserver/intersectionobserver/index.html +++ b/files/fr/web/api/intersectionobserver/intersectionobserver/index.html @@ -13,7 +13,7 @@ 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].

    +

    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

    diff --git a/files/fr/web/api/intersectionobserver/observe/index.html b/files/fr/web/api/intersectionobserver/observe/index.html index 1e05c9d038..7fc8411cbb 100644 --- a/files/fr/web/api/intersectionobserver/observe/index.html +++ b/files/fr/web/api/intersectionobserver/observe/index.html @@ -13,7 +13,7 @@ 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().

    +

    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.

    diff --git a/files/fr/web/api/intersectionobserver/root/index.html b/files/fr/web/api/intersectionobserver/root/index.html index 1f15257960..3778b82c7f 100644 --- a/files/fr/web/api/intersectionobserver/root/index.html +++ b/files/fr/web/api/intersectionobserver/root/index.html @@ -13,7 +13,7 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/intersectionobserver/takerecords/index.html b/files/fr/web/api/intersectionobserver/takerecords/index.html index de983e5aed..ceb2a5db1e 100644 --- a/files/fr/web/api/intersectionobserver/takerecords/index.html +++ b/files/fr/web/api/intersectionobserver/takerecords/index.html @@ -14,11 +14,10 @@ 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.

    +

    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.

    +
    +

    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

    diff --git a/files/fr/web/api/intersectionobserver/thresholds/index.html b/files/fr/web/api/intersectionobserver/thresholds/index.html index ec430bdedb..1ecebadf18 100644 --- a/files/fr/web/api/intersectionobserver/thresholds/index.html +++ b/files/fr/web/api/intersectionobserver/thresholds/index.html @@ -28,9 +28,8 @@ translation_of: Web/API/IntersectionObserver/thresholds

    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.

    +
    +

    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

    diff --git a/files/fr/web/api/intersectionobserver/unobserve/index.html b/files/fr/web/api/intersectionobserver/unobserve/index.html index 188cd55d4e..c307d129e3 100644 --- a/files/fr/web/api/intersectionobserver/unobserve/index.html +++ b/files/fr/web/api/intersectionobserver/unobserve/index.html @@ -13,7 +13,7 @@ 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é.

    +

    La méthode unobserve() de l'interface IntersectionObserver indique à l'objet IntersectionObserver courant de cesser d'observer l'élément cible spécifié.

    Syntaxe

    diff --git a/files/fr/web/api/intersectionobserverentry/index.html b/files/fr/web/api/intersectionobserverentry/index.html index 4a03c1ae53..9b5b7a250e 100644 --- a/files/fr/web/api/intersectionobserverentry/index.html +++ b/files/fr/web/api/intersectionobserverentry/index.html @@ -11,7 +11,9 @@ 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()")}}.

    +

    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

    diff --git a/files/fr/web/api/intersectionobserverentry/target/index.html b/files/fr/web/api/intersectionobserverentry/target/index.html index 6b4f871c52..7ac31d8a3c 100644 --- a/files/fr/web/api/intersectionobserverentry/target/index.html +++ b/files/fr/web/api/intersectionobserverentry/target/index.html @@ -11,7 +11,7 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/keyboardevent/charcode/index.html b/files/fr/web/api/keyboardevent/charcode/index.html index 34335deca5..523257e055 100644 --- a/files/fr/web/api/keyboardevent/charcode/index.html +++ b/files/fr/web/api/keyboardevent/charcode/index.html @@ -18,12 +18,10 @@ translation_of: Web/API/KeyboardEvent/charCode

    Pour des constantes équivalant ces codes numériques, voir {{ domxref("KeyboardEvent", "KeyEvent") }}.

    -

    N'utilisez plus cette propriété, elle est dépréciée.

    - -

    Utilisez plutôt {{domxref("KeyboardEvent.key")}}.

    +

    Note : N'utilisez plus cette propriété, elle est dépréciée. Utilisez plutôt {{domxref("KeyboardEvent.key")}}.

    -

    Syntaxe

    +

    Syntaxe

    var value = event.charCode;
     
    @@ -32,7 +30,7 @@ translation_of: Web/API/KeyboardEvent/charCode
  • value est la valeur Unicode du caractère associé à la touche pressée.
  • -

    Exemple

    +

    Exemple

    <html>
       <head>
    @@ -58,21 +56,21 @@ translation_of: Web/API/KeyboardEvent/charCode
     </html>
     
    -

    Notes

    +

    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.

    +

    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.

    +

    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.

    +

    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écifications

    Spécification
    @@ -93,10 +91,4 @@ translation_of: Web/API/KeyboardEvent/charCode

    Compatibilité des navigateurs

    - - -

    {{Compat("api.KeyboardEvent.charCode")}}

    - -
    - -
    +

    {{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 index 04ebfa99e7..d9d70d3e19 100644 --- a/files/fr/web/api/keyboardevent/code/index.html +++ b/files/fr/web/api/keyboardevent/code/index.html @@ -12,7 +12,7 @@ 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.

    +

    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.

    @@ -64,11 +64,9 @@ translation_of: Web/API/KeyboardEvent/code

    {{EmbedLiveSample('Pratiquer_KeyboardEvent', 600, 300) }}

    -

    Gérer les événements de clavier dans un jeu

    +

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

    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

    @@ -138,7 +136,7 @@ let spaceship = document.getElementById("spaceship"); } -

    La fonction refresh() gère l'application de la rotation et de la position à l'aide d'un SVG transform.

    +

    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);
    @@ -149,7 +147,7 @@ let spaceship = document.getElementById("spaceship");
     }
     
    -

    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.

    +

    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) {
    @@ -191,7 +189,7 @@ let spaceship = document.getElementById("spaceship");
     
     

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

    +

    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

    diff --git a/files/fr/web/api/keyboardevent/index.html b/files/fr/web/api/keyboardevent/index.html index fe8ef03ea0..4ce7e9b411 100644 --- a/files/fr/web/api/keyboardevent/index.html +++ b/files/fr/web/api/keyboardevent/index.html @@ -14,7 +14,9 @@ translation_of: Web/API/KeyboardEvent

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

    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

    @@ -44,22 +46,18 @@ translation_of: Web/API/KeyboardEvent
    {{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.
    -
    +

    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.

    -
    -
    -

    Avertissement : cela a été supprimé des DOM Level 3 Events. C'est pris en charge uniquement sur IE9 + et Microsoft Edge.

    +

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

    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.

    -

    Avertissement : cet attribut est obsolète : vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible.

    +

    Attention : cet attribut est obsolète : vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible.

    {{domxref("KeyboardEvent.code")}} {{Readonlyinline}}
    @@ -71,18 +69,18 @@ translation_of: Web/API/KeyboardEvent
    {{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. -
    Avertissement : cet attribut est obsolète. vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible.
    +

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

    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}}
    +
    {{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é.
    @@ -91,8 +89,8 @@ translation_of: Web/API/KeyboardEvent
    {{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. -
    Avertissement : cet attribut est obsolète ; vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible.
    +

    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.

    @@ -111,15 +109,13 @@ translation_of: Web/API/KeyboardEvent

    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.

    -

    Sous Linux, Firefox 12 et les versions antérieures ont également envoyé l'événement keypress pour ces touches.

    +

    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 :

      @@ -165,7 +161,9 @@ translation_of: Web/API/KeyboardEvent
      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.

      +
      +

      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

      diff --git a/files/fr/web/api/keyboardevent/key/index.html b/files/fr/web/api/keyboardevent/key/index.html index cf51e90dc4..bfd9846960 100644 --- a/files/fr/web/api/keyboardevent/key/index.html +++ b/files/fr/web/api/keyboardevent/key/index.html @@ -15,11 +15,9 @@ translation_of: Web/API/KeyboardEvent/key

      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

      -
      +

      Voir une liste complète des valeurs de touches

      • @@ -56,83 +54,83 @@ translation_of: Web/API/KeyboardEvent/key

        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>
        +
        <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;
        -}
        +
        .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');
        +
        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);
        -}
        +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}"`);
        +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;
        -  }
        -});
        + 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

        @@ -164,7 +162,7 @@ btnClearConsole.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).

        +

        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) {
        @@ -218,10 +216,4 @@ btnClearConsole.Compatibilité des navigateurs
         
        -
        -
        -

        {{Compat("api.KeyboardEvent.key")}}

        - -
        - -
        +

        {{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 index a61f42654e..07c8ba499c 100644 --- a/files/fr/web/api/keyboardevent/key/key_values/index.html +++ b/files/fr/web/api/keyboardevent/key/key_values/index.html @@ -5,9 +5,7 @@ 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
        -
        +

        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

        @@ -18,15 +16,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values
    - - - + + + - - - - + + + + @@ -48,15 +46,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values
    KeyboardEvent.key ValeurDescriptionCode clé virtuelKeyboardEvent.key ValeurDescriptionCode clé virtuel
    WindowsMacLinuxAndroidWindowsMacLinuxAndroid
    - - - + + + - - - - + + + + @@ -228,15 +226,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values
    KeyboardEvent.key ValueDescriptionVirtual KeycodeKeyboardEvent.key ValueDescriptionVirtual Keycode
    WindowsMacLinuxAndroidWindowsMacLinuxAndroid
    "Alt" [5]
    - - - + + + - - - - + + + + @@ -290,15 +288,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values
    KeyboardEvent.key ValueDescriptionVirtual KeycodeKeyboardEvent.key ValueDescriptionVirtual Keycode
    WindowsMacLinuxAndroidWindowsMacLinuxAndroid
    - - - + + + - - - - + + + + @@ -392,15 +390,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values
    KeyboardEvent.key ValueDescriptionVirtual KeycodeKeyboardEvent.key ValueDescriptionVirtual Keycode
    WindowsMacLinuxAndroidWindowsMacLinuxAndroid
    - - - + + + - - - - + + + + @@ -526,15 +524,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values
    KeyboardEvent.key ValueDescriptionVirtual KeycodeKeyboardEvent.key ValueDescriptionVirtual Keycode
    WindowsMacLinuxAndroidWindowsMacLinuxAndroid
    - - - + + + - - - - + + + + @@ -625,7 +623,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values @@ -637,7 +635,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values @@ -699,15 +697,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values
    KeyboardEvent.key ValueDescriptionVirtual KeycodeKeyboardEvent.key ValueDescriptionVirtual Keycode
    WindowsMacLinuxAndroidWindowsMacLinuxAndroid
    "Pause" The Pause key. Pauses the current application or state, if applicable. -
    This shouldn't be confused with the "MediaPause" key value, which is used for media controllers, rather than to control applications and processes.
    +

    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)
    "Play" The Play key. Resumes a previously paused application, if applicable. -
    This shouldn't be confused with the "MediaPlay" key value, which is used for media controllers, rather than to control applications and processes.
    +

    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)
    - - - + + + - - - - + + + + @@ -750,7 +748,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values @@ -829,15 +827,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values
    KeyboardEvent.key ValueDescriptionVirtual KeycodeKeyboardEvent.key ValueDescriptionVirtual Keycode
    WindowsMacLinuxAndroidWindowsMacLinuxAndroid
    "Power" The Power button or key, to toggle power on and off. -
    Not all systems pass this key through to to the user agent.
    +

    Note : Not all systems pass this key through to to the user agent.

    - - - + + + - - - - + + + + @@ -1010,15 +1008,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values
    KeyboardEvent.key ValueDescriptionVirtual KeycodeKeyboardEvent.key ValueDescriptionVirtual Keycode
    WindowsMacLinuxAndroidWindowsMacLinuxAndroid
    - - - + + + - - - - + + + + @@ -1059,15 +1057,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values
    KeyboardEvent.key ValueDescriptionVirtual KeycodeKeyboardEvent.key ValueDescriptionVirtual Keycode
    WindowsMacLinuxAndroidWindowsMacLinuxAndroid
    "HangulMode"
    - - - + + + - - - - + + + + @@ -1463,15 +1461,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values
    KeyboardEvent.key ValueDescriptionVirtual KeycodeKeyboardEvent.key ValueDescriptionVirtual Keycode
    WindowsMacLinuxAndroidWindowsMacLinuxAndroid
    "Eisu" [1]
    - - - + + + - - - - + + + + @@ -1699,15 +1697,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values
    KeyboardEvent.key valueDescriptionVirtual KeycodeKeyboardEvent.key valueDescriptionVirtual Keycode
    WindowsMacLinuxAndroidWindowsMacLinuxAndroid
    "F1"
    - - - + + + - - - - + + + + @@ -1817,15 +1815,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values
    KeyboardEvent.key ValueDescriptionVirtual KeycodeKeyboardEvent.key ValueDescriptionVirtual Keycode
    WindowsMacLinuxAndroidWindowsMacLinuxAndroid
    "AppSwitch"
    - - - + + + - - - - + + + + @@ -1940,15 +1938,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values
    KeyboardEvent.key ValueDescriptionVirtual KeycodeKeyboardEvent.key ValueDescriptionVirtual Keycode
    WindowsMacLinuxAndroidWindowsMacLinuxAndroid
    "ChannelDown"
    - - - + + + - - - - + + + + @@ -2121,15 +2119,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values
    KeyboardEvent.key ValueDescriptionVirtual KeycodeKeyboardEvent.key ValueDescriptionVirtual Keycode
    WindowsMacLinuxAndroidWindowsMacLinuxAndroid
    "AudioBalanceLeft"
    - - - + + + - - - - + + + + @@ -2392,21 +2390,21 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values
    -

    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.

    +

    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 KeycodeKeyboardEvent.key ValueDescriptionVirtual Keycode
    WindowsMacLinuxAndroidWindowsMacLinuxAndroid
    "TV" [1]
    - - - + + + - - - - + + + + @@ -3002,15 +3000,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values
    KeyboardEvent.key ValueDescriptionVirtual KeycodeKeyboardEvent.key ValueDescriptionVirtual Keycode
    WindowsMacLinuxAndroidWindowsMacLinuxAndroid
    "AVRInput" [3]
    - - - + + + - - - - + + + + @@ -3042,15 +3040,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values
    KeyboardEvent.key ValueDescriptionVirtual KeycodeKeyboardEvent.key ValueDescriptionVirtual Keycode
    WindowsMacLinuxAndroidWindowsMacLinuxAndroid
    "SpeechCorrectionList" [1]
    - - - + + + - - - - + + + + @@ -3145,15 +3143,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values
    KeyboardEvent.key ValueDescriptionVirtual KeycodeKeyboardEvent.key ValueDescriptionVirtual Keycode
    WindowsMacLinuxAndroidWindowsMacLinuxAndroid
    "Close" [1]
    - - - + + + - - - - + + + + @@ -3441,15 +3439,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values
    KeyboardEvent.key ValueDescriptionVirtual KeycodeKeyboardEvent.key ValueDescriptionVirtual Keycode
    WindowsMacLinuxAndroidWindowsMacLinuxAndroid
    "LaunchCalculator" [5]
    - - - + + + - - - - + + + + @@ -3532,21 +3530,21 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values

    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.

    -

    The 10 key, if present, generates events with the key value of "0".

    +

    Note :The 10 key, if present, generates events with the key value of "0".

    KeyboardEvent.key ValueDescriptionVirtual KeycodeKeyboardEvent.key ValueDescriptionVirtual Keycode
    WindowsMacLinuxAndroidWindowsMacLinuxAndroid
    "BrowserBack"
    - - - + + + - - - - + + + + diff --git a/files/fr/web/api/keyboardevent/keyboardevent/index.html b/files/fr/web/api/keyboardevent/keyboardevent/index.html index 2f63832ae4..f488108a15 100644 --- a/files/fr/web/api/keyboardevent/keyboardevent/index.html +++ b/files/fr/web/api/keyboardevent/keyboardevent/index.html @@ -15,41 +15,37 @@ translation_of: Web/API/KeyboardEvent/KeyboardEvent

    Syntaxe

    -
     event = new KeyboardEvent(typeArg, KeyboardEventInit);
    +
     event = new KeyboardEvent(typeArg, KeyboardEventInit);

    Valeurs

    -
    typeArg
    +
    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 : - +
    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")}}.
    • +
    • "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")}}.
    - -
    -

    Le dictionnaire KeyboardEventInit accepte aussi les champs des dictionnaires  {{domxref("UIEvent.UIEvent", "UIEventInit")}} et {{domxref("Event.Event", "EventInit")}}.

    -
    -

    Spécifications

    +
    +

    Note : Le dictionnaire KeyboardEventInit accepte aussi les champs des dictionnaires {{domxref("UIEvent.UIEvent", "UIEventInit")}} et {{domxref("Event.Event", "EventInit")}}.

    +
    + +

    Spécifications

    KeyboardEvent.key ValueDescriptionVirtual KeycodeKeyboardEvent.key ValueDescriptionVirtual Keycode
    WindowsMacLinuxAndroidWindowsMacLinuxAndroid
    "Decimal" [1] {{obsolete_inline}}
    diff --git a/files/fr/web/api/localfilesystem/index.html b/files/fr/web/api/localfilesystem/index.html index d8d3b0dd9c..9f4ca0c7c3 100644 --- a/files/fr/web/api/localfilesystem/index.html +++ b/files/fr/web/api/localfilesystem/index.html @@ -5,15 +5,15 @@ 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.

    +

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

    +

    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

    @@ -37,13 +37,13 @@ navigator.webkitPersistentStorage.requestQuota (

    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.

    +

    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
    +
    // Gestion des préfixes spécifiques au navigateur
     window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
     
     // Le premier paramètre indique le type de stockage
    @@ -80,7 +80,7 @@ window.requestFileSystem(window.PERSISTENT, 1024*1024,onInitFs,errorHandler);
     
     

    Méthodes

    -

    requestFileSystem()

    +

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

    @@ -91,7 +91,7 @@ window.requestFileSystem(window.PERSISTENT, 1024*1024,onInitFs,errorHandler); in ErrorCallback errorCallback );
    -
    Paramètres
    +

    Paramètres

    type
    @@ -99,7 +99,7 @@ window.requestFileSystem(window.PERSISTENT, 1024*1024,onInitFs,errorHandler);
    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 : +
    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.
    • @@ -109,15 +109,13 @@ window.requestFileSystem(window.PERSISTENT, 1024*1024,onInitFs,errorHandler);
      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
    +

    Valeur de retour

    -
    -
    void
    -
    +

    void

    -
    Exceptions
    +

    Exceptions

    -

    Cette méthode peut lever une exception FileError avec le code suivant :

    +

    Cette méthode peut lever une exception FileError avec le code suivant :

    @@ -127,12 +125,12 @@ window.requestFileSystem(window.PERSISTENT, 1024*1024,onInitFs,errorHandler); - +
    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.L'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()

    +

    resolveLocalFileSystemURL()

    Cette méthode permet de consulter une entrée pour un fichier ou un répertoire avec une URL locale.

    @@ -143,7 +141,7 @@ window.requestFileSystem(window.PERSISTENT, 1024*1024,onInitFs,errorHandler); );
    -
    Paramètres
    +

    Paramètres

    url
    @@ -154,15 +152,13 @@ window.requestFileSystem(window.PERSISTENT, 1024*1024,onInitFs,errorHandler);
    Une fonction de rappel à invoquer en cas d'erreur ou lorsque l'accès est refusé.
    -
    Valeur de retour
    +

    Valeur de retour

    -
    -
    void
    -
    +

    void

    -
    Exceptions
    +

    Exceptions

    -

    Cette méthode peut lever une exception FileError avec l'un des code suivants :

    +

    Cette méthode peut lever une exception FileError avec l'un des code suivants :

    @@ -195,6 +191,6 @@ window.requestFileSystem(window.PERSISTENT, 1024*1024,onInitFs,errorHandler); diff --git a/files/fr/web/api/location/index.html b/files/fr/web/api/location/index.html index 52372c8da1..dc4e6e6a36 100644 --- a/files/fr/web/api/location/index.html +++ b/files/fr/web/api/location/index.html @@ -77,7 +77,7 @@ body {display:table-cell; text-align:center; vertical-align:middle; font-family:
    {{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).
    +
    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}}
    @@ -105,19 +105,19 @@ body {display:table-cell; text-align:center; vertical-align:middle; font-family:

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

    diff --git a/files/fr/web/api/location/reload/index.html b/files/fr/web/api/location/reload/index.html index 891a307902..76d94b1efd 100644 --- a/files/fr/web/api/location/reload/index.html +++ b/files/fr/web/api/location/reload/index.html @@ -6,7 +6,7 @@ browser-compat: api.Location.reload ---
    {{ APIRef("HTML DOM") }}
    -

    La méthode location.reload() recharge l'URL courante, à la façon du bouton « Actualiser ».

    +

    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.

    diff --git a/files/fr/web/api/media_streams_api/index.html b/files/fr/web/api/media_streams_api/index.html index f9792aa3df..b6e04f8156 100644 --- a/files/fr/web/api/media_streams_api/index.html +++ b/files/fr/web/api/media_streams_api/index.html @@ -19,13 +19,12 @@ original_slug: WebRTC/MediaStream_API

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

    +

    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")}}
    • @@ -47,13 +46,11 @@ original_slug: WebRTC/MediaStream_API
    • {{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")}}
    • @@ -63,7 +60,6 @@ original_slug: WebRTC/MediaStream_API
    • {{event("started")}}
    • {{event("unmuted")}}
    -

    Guides et tutorials

    @@ -80,7 +76,7 @@ original_slug: WebRTC/MediaStream_API

    Voir aussi

      -
    • WebRTC - la page d'introduction à l'API
    • +
    • 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 index 716bbfe120..c36f3740bf 100644 --- a/files/fr/web/api/mediadevices/getusermedia/index.html +++ b/files/fr/web/api/mediadevices/getusermedia/index.html @@ -5,15 +5,15 @@ 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.

    +

    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.

    +

    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.

    -

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

    +

    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:

    +

    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 */
    @@ -26,31 +26,31 @@ translation_of: Web/API/MediaDevices/getUserMedia
     
    var promise = navigator.mediaDevices.getUserMedia(constraints);
     
    -

    Paramètres

    +

    Paramètres

    constraints
    -

    Un objet {{domxref("MediaStreamConstraints")}} spécifiant les types de supports à demander, ainsi que toutes les exigences pour chaque type.

    +

    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 .

    +

    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:

    +

    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.

    +

    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:

    +

    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.

    +

    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:

    +

    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,
    @@ -60,9 +60,9 @@ translation_of: Web/API/MediaDevices/getUserMedia
       }
     }
    -

    Si aucune caméra n'existe avec cette résolution ou plus haut, le {{jsxref("Promise")}} retourné sera rejeté avec OverconstrainedError.

    +

    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:

    +

    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,
    @@ -72,9 +72,9 @@ translation_of: Web/API/MediaDevices/getUserMedia
       }
     }
    -

    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.

    +

    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:

    +

    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,
    @@ -84,50 +84,50 @@ translation_of: Web/API/MediaDevices/getUserMedia
       }
     }
    -

    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:

    +

    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:

    +

    Pour exiger la caméra arrière, utilisez:

    { audio: true, video: { facingMode: { exact: "environment" } } }
    -

    Valeur de retour

    +

    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.

    +

    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:

    +

    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.
    +
    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. -
    Les versions plus anciennes de la spécification ont utilisé SecurityError pour cela à la place; SecurityError a pris une nouvelle signification.
    +
    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.
    +
    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.
    +
    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. -
    É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.
    +
    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.
    +
    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 .
    +
    La liste des contraintes spécifiées est vide ou toutes les contraintes sont définies comme false .
    -

    Exemples

    +

    Exemples

    -

    Largeur et hauteur

    +

    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.

    +

    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 } };
    @@ -143,9 +143,9 @@ navigator.mediaDevices.getUserMedia(constraints)
     .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

    +

    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.

    +

    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) {
    @@ -195,14 +195,14 @@ navigator.mediaDevices.getUserMedia({ audio: true, video: true })
     
     

    Taux d'images

    -

    Des cadences inférieures peuvent être souhaitables dans certains cas, comme les transmissions WebRTC avec des restrictions de bande passante.

    +

    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

    +

    Caméra avant et arrière

    -

    Sur les téléphones portables.

    +

    Sur les téléphones portables.

    var front = false;
     document.getElementById('flip-button').onclick = function() { front = !front; };
    @@ -212,7 +212,7 @@ 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:

    +

    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": {
    @@ -223,7 +223,7 @@ var constraints = { video: { facingMode: (front? "user" : "environment") } };
       }
     }
    -

    Voir permission: audio-capture et permission: video-capture pour plus d'informations.

    +

    Voir permission: audio-capture et permission: video-capture pour plus d'informations.

    Specifications

    diff --git a/files/fr/web/api/mediadevices/index.html b/files/fr/web/api/mediadevices/index.html index d0ce9de339..e1743db309 100644 --- a/files/fr/web/api/mediadevices/index.html +++ b/files/fr/web/api/mediadevices/index.html @@ -16,13 +16,13 @@ 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.

    +

    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

    +

    Événéments

    {{domxref("MediaDevices/devicechange_event", "devicechange")}}
    @@ -47,7 +47,7 @@ translation_of: Web/API/MediaDevices

    Exemple

    -
    'use strict';
    +
    'use strict';
     
     // Placez les variables dans la portée globale pour les rendre disponibles à la console du navigateur.
     var video = document.querySelector('video');
    diff --git a/files/fr/web/api/mediasource/index.html b/files/fr/web/api/mediasource/index.html
    index eb6804fac0..b472be76ed 100644
    --- a/files/fr/web/api/mediasource/index.html
    +++ b/files/fr/web/api/mediasource/index.html
    @@ -81,7 +81,7 @@ translation_of: Web/API/MediaSource
     
     

    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 video = document.querySelector('video');
     
     var assetURL = 'frag_bunny.mp4';
     // Need to be specific for Blink regarding codecs
    diff --git a/files/fr/web/api/mediastream/index.html b/files/fr/web/api/mediastream/index.html
    index d9e233a9b3..292cb700e0 100644
    --- a/files/fr/web/api/mediastream/index.html
    +++ b/files/fr/web/api/mediastream/index.html
    @@ -13,18 +13,18 @@ translation_of: Web/API/MediaStream
      
    {{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.
    +
    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é.
    +
    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.
    +
    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é.
    +
    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

    @@ -36,13 +36,13 @@ translation_of: Web/API/MediaStream
    {{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.
    +
    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.
    +
    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.
    +
    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.
    +
    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

    diff --git a/files/fr/web/api/mediastreamaudiosourcenode/index.html b/files/fr/web/api/mediastreamaudiosourcenode/index.html index 4928de8634..d75b8b8f43 100644 --- a/files/fr/web/api/mediastreamaudiosourcenode/index.html +++ b/files/fr/web/api/mediastreamaudiosourcenode/index.html @@ -12,7 +12,7 @@ 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.

    +

    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.

    diff --git a/files/fr/web/api/mediastreamevent/index.html b/files/fr/web/api/mediastreamevent/index.html index 50fcc72397..1f9eeb32ec 100644 --- a/files/fr/web/api/mediastreamevent/index.html +++ b/files/fr/web/api/mediastreamevent/index.html @@ -37,7 +37,7 @@ translation_of: Web/API/MediaStreamEvent

    Exemples

    -
    pc.onaddstream = function( ev ) {
    +
    pc.onaddstream = function( ev ) {
       alert("Un stream (id: '" + ev.stream.id + "') a été ajouté à cette connexion.");
     };
     
    @@ -49,6 +49,6 @@ translation_of: Web/API/MediaStreamEvent

    Voir aussi

      -
    • WebRTC
    • +
    • WebRTC
    • Sa cible habituelle: {{domxref("RTCPeerConnection")}}.
    diff --git a/files/fr/web/api/mouseevent/index.html b/files/fr/web/api/mouseevent/index.html index 69c60a8a7d..521eedf8fd 100644 --- a/files/fr/web/api/mouseevent/index.html +++ b/files/fr/web/api/mouseevent/index.html @@ -11,7 +11,7 @@ tags: - évènements translation_of: Web/API/MouseEvent --- -

    {{APIRef("DOM Events")}}

    +

    {{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")}}.

    @@ -85,7 +85,7 @@ translation_of: Web/API/MouseEvent
    Alias pour {{domxref("MouseEvent.clientY")}}.
    -

    Constantes

    +

    Constantes

    {{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}
    @@ -109,26 +109,26 @@ translation_of: Web/API/MouseEvent

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

    diff --git a/files/fr/web/api/mutationobserver/index.html b/files/fr/web/api/mutationobserver/index.html index a5b0592dcd..2be16d34b7 100644 --- a/files/fr/web/api/mutationobserver/index.html +++ b/files/fr/web/api/mutationobserver/index.html @@ -7,22 +7,22 @@ translation_of: Web/API/MutationObserver

    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

    +

    Constructeur

    -

    MutationObserver()

    +

    MutationObserver()

    Le constructeur permettant d’instancier un nouvel observateur de mutations DOM.

    new MutationObserver( function callback );
    -
    Paramètres
    +

    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

    +

    Méthodes d’instance

    @@ -39,17 +39,17 @@ translation_of: Web/API/MutationObserver
    -

    Note: La cible {{domxref("Node")}} ne doit pas être confondue avec celle de NodeJS.

    +

    Note : La cible {{domxref("Node")}} ne doit pas être confondue avec celle de NodeJS.

    -

    observe()

    +

    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
    +

    Paramètres

    target
    @@ -58,9 +58,11 @@ translation_of: Web/API/MutationObserver
    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é.
    +
    +

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

    +

    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.

    @@ -68,10 +70,10 @@ translation_of: Web/API/MutationObserver
    -

    Note : Selon la spécification, un MutationObserver est supprimé par le garbage collector si l'élément cible est supprimé.

    +

    Note : Selon la spécification, un MutationObserver est supprimé par le garbage collector si l'élément cible est supprimé.

    -

    takeRecords()

    +

    takeRecords()

    Vide la file des mutations enregistrées du MutationObserver et retourne son contenu.

    @@ -83,11 +85,13 @@ translation_of: Web/API/MutationObserver
    Retourne un tableau de {{domxref("MutationRecord")}}.
    -

    MutationObserverInit

    +

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

    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.

    +
    @@ -128,7 +132,7 @@ translation_of: Web/API/MutationObserver

    Exemple d’utilisation

    -

    L’exemple suivant est extrait de ce blog.

    +

    L’exemple suivant est extrait de ce blog.

    // Selectionne le noeud dont les mutations seront observées
     var targetNode = document.getElementById('some-id');
    @@ -157,17 +161,17 @@ observer.observe(targetNode, config);
     // L'observation peut être arrêtée par la suite
     observer.disconnect();
    -

    Autres articles pour en savoir plus (en anglais)

    +

    Autres articles pour en savoir plus (en anglais)

    -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/navigator/battery/index.html b/files/fr/web/api/navigator/battery/index.html index c4edee5e73..3eb09b9ab3 100644 --- a/files/fr/web/api/navigator/battery/index.html +++ b/files/fr/web/api/navigator/battery/index.html @@ -38,7 +38,7 @@ translation_of: Web/API/Navigator/battery

    Exemple

    -

    Voir aussi l'exemple dans la specification.

    +

    Voir aussi l'exemple dans la specification.

    var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
     
    @@ -62,8 +62,8 @@ updateBatteryStatus();
     

    Voir aussi

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

    diff --git a/files/fr/web/api/navigator/cookieenabled/index.html b/files/fr/web/api/navigator/cookieenabled/index.html index eff4726ea4..91d3ae78e0 100644 --- a/files/fr/web/api/navigator/cookieenabled/index.html +++ b/files/fr/web/api/navigator/cookieenabled/index.html @@ -5,7 +5,7 @@ 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.

    +

    navigator.cookieEnabled retourne une valeur booléenne qui indique si les cookies sont activés. Cette propriété est en lecture seule.

    Syntax

    diff --git a/files/fr/web/api/navigator/donottrack/index.html b/files/fr/web/api/navigator/donottrack/index.html index 1f08b96ae3..9acf7c3241 100644 --- a/files/fr/web/api/navigator/donottrack/index.html +++ b/files/fr/web/api/navigator/donottrack/index.html @@ -10,22 +10,22 @@ 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é.

    +

    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

    +

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

    +

    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

    +

    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é)
    +//  é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écifications

    diff --git a/files/fr/web/api/navigator/getgamepads/index.html b/files/fr/web/api/navigator/getgamepads/index.html index d936f8262f..0f7480f238 100644 --- a/files/fr/web/api/navigator/getgamepads/index.html +++ b/files/fr/web/api/navigator/getgamepads/index.html @@ -39,7 +39,7 @@ translation_of: Web/API/Navigator/getGamepads
    -

    Compatibilité des navigateurs

    +

    Compatibilité des navigateurs

    diff --git a/files/fr/web/api/navigator/getusermedia/index.html b/files/fr/web/api/navigator/getusermedia/index.html index 7a1bbbac53..2c2d6edcac 100644 --- a/files/fr/web/api/navigator/getusermedia/index.html +++ b/files/fr/web/api/navigator/getusermedia/index.html @@ -14,10 +14,10 @@ original_slug: NavigatorUserMedia.getUserMedia

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

    +

    Si ce dernier l'autorise, un {{domxref("MediaStream")}} est transmis au callback spécifié, il contient les pistes audio et/ou vidéo des entrées autorisées. Si l'utilisateur refuse l'accès, que le périphérique n'existe pas, ou qu'une erreur quelconque se produit, le callback d'erreur est alors exécuté avec comme paramètre un objet {{domxref("MediaStreamError")}}, il décrit l'erreur qui vient de se produire. Si l'utilisateur ne fait aucun choix, aucun callback n'est exécuté.

    -

    Il s'agit d'une ancienne méthode, veuillez utiliser la méthode {{domxref("MediaDevices.getUserMedia", "navigator.mediaDevices.getUserMedia()")}} à la place. Bien qu'elle ne soit pas techniquement obsolète, l'utilisation de callbacks l'est, les spécifications encouragent fortamment l'utilisation de la nouvelle version avec {{jsxref("promise", "promesses")}}.

    +

    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

    @@ -93,7 +93,7 @@ if (navigator.getUserMedia) { } -

    See permission: audio-capture and permission: video-capture for more information.

    +

    See permission: audio-capture and permission: video-capture for more information.

    Spécifications

    @@ -116,8 +116,8 @@ if (navigator.getUserMedia) {

    Compatibilité des navigateurs

    -
    -

    Le nouveau code doit utiliser {{domxref("Navigator.mediaDevices.getUserMedia()")}} à la place.

    +
    +

    Attention : Le nouveau code doit utiliser {{domxref("Navigator.mediaDevices.getUserMedia()")}} à la place.

    {{Compat("api.Navigator.getUserMedia")}}

    @@ -126,7 +126,7 @@ if (navigator.getUserMedia) {
    • {{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.
    • +
    • 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/mozislocallyavailable/index.html b/files/fr/web/api/navigator/mozislocallyavailable/index.html index cb28647309..839ac2aeb0 100644 --- a/files/fr/web/api/navigator/mozislocallyavailable/index.html +++ b/files/fr/web/api/navigator/mozislocallyavailable/index.html @@ -6,16 +6,16 @@ tags: translation_of: Web/API/Navigator/mozIsLocallyAvailable ---

    {{ ApiRef() }}

    -

    Résumé

    +

    Résumé

    Permet de déterminer si une ressource donnée est disponible.

    -

    Syntaxe

    +

    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

    +

    Exemple

    var disponible = navigator.isLocallyAvailable("my-image-file.png", true);
     if (disponible) {
       /* la ressource hors ligne est présente */
    @@ -23,12 +23,7 @@ if (disponible) {
       alert("Certaines ressources nécessaires ne sont pas disponibles tant que vous ne serez pas connecté au réseau.");
     }
     
    -

    Notes

    +

    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

    -

     

    -

     

    -
    -  
    -

    {{ languages( { "en": "en/DOM/window.navigator.mozIsLocallyAvailable", "ja": "ja/DOM/window.navigator.mozIsLocallyAvailable" } ) }}

    +

    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 index 14aafcd546..9c9f9bdff7 100644 --- a/files/fr/web/api/navigator/registerprotocolhandler/index.html +++ b/files/fr/web/api/navigator/registerprotocolhandler/index.html @@ -7,13 +7,13 @@ translation_of: Web/API/Navigator/registerProtocolHandler ---

    {{ ApiRef() }}

    -

    Résumé

    +

    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

    +

    Syntaxe

    window.navigator.registerProtocolHandler(protocole,uri,titre);
     
    @@ -24,27 +24,23 @@ translation_of: Web/API/Navigator/registerProtocolHandler
  • titre est le titre du gestionnaire présenté à l'utilisateur, sous la forme d'une chaîne.
  • -

    Exemple

    +

    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 :

    +

    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",
    +                                 "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écification

    -

    Spécifié dans le brouillon de travail Web Applications 1.0 du WHATWG.

    +

    Spécifié dans le brouillon de travail Web Applications 1.0 du WHATWG.

    -

    Voir également

    +

    Voir également

    - -
     
    - -

    {{ languages( { "en": "en/DOM/window.navigator.registerProtocolHandler", "es": "es/DOM/window.navigator.registerProtocolHandler", "ja": "ja/DOM/window.navigator.registerProtocolHandler", "ko": "ko/DOM/window.navigator.registerProtocolHandler", "pl": "pl/DOM/window.navigator.registerProtocolHandler" } ) }}

    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 index 45c1406fb7..70b96ec01a 100644 --- 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 @@ -5,7 +5,7 @@ translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_han --- -

    Introduction

    +

    Introduction

    Il est relativement courant de voir des pages web lier des ressources utilisant des protocoles non-http. Prenons par exemple le protocole mailto: :

    @@ -16,9 +16,9 @@ translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_han

    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

    +

    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 :

    +

    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",
    @@ -35,11 +35,11 @@ translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_han
     
     

    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 :

    -

    Image:wph-notification.png

    +

    {{ Note() }}

    -

    Exemple

    +

    Exemple

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
     <html lang="fr">
    @@ -56,13 +56,11 @@ translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_han
     </html>
     
    -

    Activation

    +

    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.

    -

    Image:wph-launch.png

    - -

    Exemple

    +

    Exemple

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
     <html lang="fr">
    @@ -75,7 +73,7 @@ translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_han
     </html>
     
    -

    Traitement

    +

    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 :

    @@ -86,7 +84,7 @@ translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_han

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

    +

    Exemple

    <?php
     $value = "";
    diff --git a/files/fr/web/api/navigator/share/index.html b/files/fr/web/api/navigator/share/index.html
    index 21e57da9cb..041163cac3 100644
    --- a/files/fr/web/api/navigator/share/index.html
    +++ b/files/fr/web/api/navigator/share/index.html
    @@ -7,7 +7,7 @@ translation_of: Web/API/Navigator/share
     
     

    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

    +

    Syntax

    var sharePromise = window.navigator.share(data);
     
    diff --git a/files/fr/web/api/navigator/vibrate/index.html b/files/fr/web/api/navigator/vibrate/index.html index 8902090780..335b8adcf9 100644 --- a/files/fr/web/api/navigator/vibrate/index.html +++ b/files/fr/web/api/navigator/vibrate/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Navigator/vibrate

    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

    +

    Syntaxe

    var successBool = window.navigator.vibrate(motif);
     
    @@ -57,5 +57,5 @@ window.navigator.vibrate([100,30,100,30,100,30,200,30,200,30,200,30,100,30,100,3

    Voir aussi

    diff --git a/files/fr/web/api/node/appendchild/index.html b/files/fr/web/api/node/appendchild/index.html index 5f01da03c8..800be4c3bb 100644 --- a/files/fr/web/api/node/appendchild/index.html +++ b/files/fr/web/api/node/appendchild/index.html @@ -32,21 +32,21 @@ translation_of: Web/API/Node/appendChild

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

    +

    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'));
    +
    var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));

    Définit aBlock pour <b></b> uniquement, ce que vous ne voulez probablement pas.

    -

    Exemple

    +

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

    diff --git a/files/fr/web/api/node/baseuri/index.html b/files/fr/web/api/node/baseuri/index.html index cc52dd42cf..68cf5be1bc 100644 --- a/files/fr/web/api/node/baseuri/index.html +++ b/files/fr/web/api/node/baseuri/index.html @@ -18,11 +18,11 @@ translation_of: Web/API/Node/baseURI

    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.

    +

    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.

    +

    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

    +

    Syntaxe

    var baseURI = node.baseURI;
     
    @@ -33,7 +33,7 @@ translation_of: Web/API/Node/baseURI
  • node.baseURI peut changer avec le temps (voir ci-dessous).
  • -

    Détails

    +

    Détails

    L'URL de base d'un document

    @@ -52,11 +52,11 @@ translation_of: Web/API/Node/baseURI

    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.

    +

    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

    +

    Spécification

    • {{spec("http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-baseURI","DOM Level 3 Core: baseURI","REC")}}
    • @@ -66,6 +66,6 @@ translation_of: Web/API/Node/baseURI
      • l'élément {{HTMLElement("base")}} (HTML)
      • -
      • l'attribut xml:base (documents XML).
      • +
      • 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 index af687c7c99..b9f4630ffc 100644 --- a/files/fr/web/api/node/childnodes/index.html +++ b/files/fr/web/api/node/childnodes/index.html @@ -13,42 +13,42 @@ translation_of: Web/API/Node/childNodes

      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

      +

      Syntaxe

      -
      var collNoeuds = elementDeReference.childNodes;
      +
      var collNoeuds = elementDeReference.childNodes;
       

      Exemples

      Utilisation simple

      -
      // parg est une référence d'objet pour un élément <p>
      +
      // 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;
      +// 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
      -  }
      -}
      + 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);
      +
      // 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

      +

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

      +

      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.

      diff --git a/files/fr/web/api/node/clonenode/index.html b/files/fr/web/api/node/clonenode/index.html index 7e342018f1..fef79935dc 100644 --- a/files/fr/web/api/node/clonenode/index.html +++ b/files/fr/web/api/node/clonenode/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Node/cloneNode

      La méthode Node.cloneNode() renvoie une copie du nœud sur lequel elle a été appelée.

      -

      Syntaxe

      +

      Syntaxe

      var dupNode = node.cloneNode([deep]);
       
      @@ -33,15 +33,15 @@ translation_of: Web/API/Node/cloneNode

      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

    +

    Exemple

    p = document.getElementById("para1");
     p_prime = p.cloneNode(true);
     
    -

    Notes

    +

    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.

    +

    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.

    @@ -58,7 +58,7 @@ p_prime = p.cloneNode(true);

    Pour cloner un noeud à ajouter dans un document différent, utilisez  {{domxref("Document.importNode()")}} à la place.

    -

    Spécification

    +

    Spécification

    diff --git a/files/fr/web/api/node/comparedocumentposition/index.html b/files/fr/web/api/node/comparedocumentposition/index.html index e5b81bcb4b..a40125b5c1 100644 --- a/files/fr/web/api/node/comparedocumentposition/index.html +++ b/files/fr/web/api/node/comparedocumentposition/index.html @@ -51,12 +51,12 @@ translation_of: Web/API/Node/compareDocumentPosition
    -

    Syntaxe

    +

    Syntaxe

    node.compareDocumentPosition( otherNode )
     
    -

    Exemple

    +

    Exemple

    var head = document.getElementsByTagName('head').item(0);
     
    @@ -68,16 +68,16 @@ if (head.compareDocumentPosition(document.body) & Node.DOCUMENT_POSITION_FOL
     
    -

    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 : 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écifications

    - +
    @@ -104,5 +104,5 @@ if (head.compareDocumentPosition(document.body) & Node.DOCUMENT_POSITION_FOL

    Voir aussi

    diff --git a/files/fr/web/api/node/contains/index.html b/files/fr/web/api/node/contains/index.html index 5b7f4c23e5..e5906fbf28 100644 --- a/files/fr/web/api/node/contains/index.html +++ b/files/fr/web/api/node/contains/index.html @@ -18,9 +18,9 @@ translation_of: Web/API/Node/contains
    node.contains( otherNode )
     
    -

    Exemple

    +

    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.

    +

    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);
    diff --git a/files/fr/web/api/node/firstchild/index.html b/files/fr/web/api/node/firstchild/index.html
    index a9392e7650..3c846498af 100644
    --- a/files/fr/web/api/node/firstchild/index.html
    +++ b/files/fr/web/api/node/firstchild/index.html
    @@ -13,11 +13,11 @@ translation_of: Web/API/Node/firstChild
     
     

    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

    +

    Syntaxe

    var childNode = node.firstChild;
    -

    Exemple

    +

    Exemple

    Cet exemple montre l'utilisation de firstChild et la manière dont les nœuds d'espaces peuvent interférer.

    @@ -31,7 +31,7 @@ translation_of: Web/API/Node/firstChild </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.

    +

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

    @@ -85,8 +85,4 @@ translation_of: Web/API/Node/firstChild

    Compatibilité des navigateurs

    - - -

    {{Compat("api.Node.firstChild")}}

    - -
     
    +

    {{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 index 277df08cd3..5a6297d55b 100644 --- a/files/fr/web/api/node/getrootnode/index.html +++ b/files/fr/web/api/node/getrootnode/index.html @@ -36,7 +36,7 @@ translation_of: Web/API/Node/getRootNode

    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();
    +
    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):

    @@ -86,10 +86,4 @@ translation_of: Web/API/Node/getRootNode

    Compatibilité des navigateurs

    -
    - - -

    {{Compat("api.Node.getRootNode")}}

    -
    - -
     
    +

    {{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 index d0af3b4b65..c14ad9836f 100644 --- a/files/fr/web/api/node/haschildnodes/index.html +++ b/files/fr/web/api/node/haschildnodes/index.html @@ -12,7 +12,7 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/node/index.html b/files/fr/web/api/node/index.html index cdd9ff13a3..4c7ddde36b 100644 --- a/files/fr/web/api/node/index.html +++ b/files/fr/web/api/node/index.html @@ -25,13 +25,13 @@ translation_of: Web/API/Node

    Propriétés

    -

    Hérite les propriétés de son parent {{domxref("EventTarget")}}.[1]

    +

    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 /.
    +
    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.
    +
    (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}}
    @@ -111,11 +111,11 @@ translation_of: Web/API/Node
    {{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.
    +
    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.
    +
    Retourne / définit le contenu textuel d'un élément et de tous ses descendants.
    @@ -125,11 +125,11 @@ translation_of: Web/API/Node
    {{DOMxRef("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}
    -
    Retourne un {{domxref("DOMString")}}  représentant la partie locale du nom d'un élément.
    +
    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")}}

    +

    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")}}

    @@ -138,7 +138,7 @@ translation_of: Web/API/Node
    -

    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")}}

    +

    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")}}

    @@ -152,7 +152,7 @@ translation_of: Web/API/Node

    Méthodes

    -

    Hérite des méthodes de son parent {{domxref("EventTarget")}}.[1]

    +

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

    {{DOMxRef("Node.appendChild()", "Node.appendChild(childNode)")}}
    @@ -163,15 +163,15 @@ translation_of: Web/API/Node
    {{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.
    +
    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.
    +
    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.
    +
    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.
    +
    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()")}}
    @@ -196,70 +196,70 @@ translation_of: Web/API/Node
    {{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.
    +
    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.
    +
    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.
    +
    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.
    +
    Permet à un utilisateur d'attacher ou d'enlever  {{domxref("DOMUserData")}} du nœud.

    Exemples

    -

    Parcourir tous les nœuds enfants

    +

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

    +

    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)
    +
    Le nœud parent (Node Object)
    callbackFunction
    -
    La fonction de rappel (Function).
    +
    La fonction de rappel (Function).

    Exemples d'utilisation

    -

    L'exemple suivant envoie à la console.log le contenu texte du corps :

    +

    L'exemple suivant envoie à la console.log le contenu texte du corps :

    -
    function printContent () {
    -  if (this.nodeValue) { console.log(this.nodeValue); }
    -}
    +
    function printContent () {
    +  if (this.nodeValue) { console.log(this.nodeValue); }
    +}
     
    -onload = function () {
    -  DOMComb(document.body, printContent);
    -};
    +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;
    -};
    +
    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();
    +
    /* ... an alternative to document.body.innerHTML = "" ... */
    +document.body.removeAll();

    Spécifications

    @@ -275,7 +275,7 @@ document.bodySupprime les propriétés suivantes : attributes, namespaceURI, prefix, et localName.
    +
    @@ -303,8 +303,4 @@ document.bodyCompatibilité des navigateurs - - -

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

    - -
    +

    {{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 index 780cf3bb18..289539552f 100644 --- a/files/fr/web/api/node/insertbefore/index.html +++ b/files/fr/web/api/node/insertbefore/index.html @@ -12,7 +12,7 @@ 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é.

    +

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

    @@ -94,7 +94,7 @@ 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.

    +

    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 :

    diff --git a/files/fr/web/api/node/isconnected/index.html b/files/fr/web/api/node/isconnected/index.html index 0e2acb7b5b..730afa1beb 100644 --- a/files/fr/web/api/node/isconnected/index.html +++ b/files/fr/web/api/node/isconnected/index.html @@ -20,16 +20,16 @@ translation_of: Web/API/Node/isConnected

    Renvoie la valeur

    -

    Un {{domxref("Boolean")}} (booléen) — true (vrai) si le noeud est connecté à son objet contextuel pertinent et false (faux) sinon.

    +

    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');
    +
    let test = document.createElement('p');
     console.log(test.isConnected); // renvoie false (faux)
    -document.body.appendChild(test);
    -console.log(test.isConnected); // renvoie true (vrai)
    +document.body.appendChild(test);
    +console.log(test.isConnected); // renvoie true (vrai)
     

    Un exemple DOM shadow :

    diff --git a/files/fr/web/api/node/isdefaultnamespace/index.html b/files/fr/web/api/node/isdefaultnamespace/index.html index 67da853471..1ea4b789bf 100644 --- a/files/fr/web/api/node/isdefaultnamespace/index.html +++ b/files/fr/web/api/node/isdefaultnamespace/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Node/isDefaultNamespace

    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

    +

    Syntaxe

    result = node.isDefaultNamespace(namespaceURI)
     
    @@ -24,16 +24,16 @@ translation_of: Web/API/Node/isDefaultNamespace
  • 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

    +

    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

    +

    Spécification

    diff --git a/files/fr/web/api/node/isequalnode/index.html b/files/fr/web/api/node/isequalnode/index.html index b6e3f84009..79bcb16b17 100644 --- a/files/fr/web/api/node/isequalnode/index.html +++ b/files/fr/web/api/node/isequalnode/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Node/isEqualNode

    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

    +

    Syntaxe

    var isEqualNode = node.isEqualNode(otherNode);
     
    @@ -30,37 +30,37 @@ translation_of: Web/API/Node/isEqualNode

    HTML

    -
    <div>This is the first element.</div>
    -<div>This is the second element.</div>
    -<div>This is the first element.</div>
    +
    <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>
    +<p id="output"></p>
    -

    CSS

    +

    CSS

    -
    #output {
    -  width: 440px;
    -  border: 2px solid black;
    -  border-radius: 5px;
    -  padding: 10px;
    -  margin-top: 20px;
    -  display: block;
    -}
    +
    #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");
    +
    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/>";
    +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écifications

    Spécification Supprime les propriétés suivantes : attributes, namespaceURI, prefix, et localName.
    Supprime les méthodes suivantes : isSupported(), hasAttributes(), getFeature(), setUserData(), et getUserData().
    diff --git a/files/fr/web/api/node/issamenode/index.html b/files/fr/web/api/node/issamenode/index.html index 1f3006b4b6..cab5401b56 100644 --- a/files/fr/web/api/node/issamenode/index.html +++ b/files/fr/web/api/node/issamenode/index.html @@ -35,10 +35,7 @@ translation_of: Web/API/Node/isSameNode <p id="output"></p> -

    JavaScript

    diff --git a/files/fr/web/api/node/issupported/index.html b/files/fr/web/api/node/issupported/index.html index 4e1c86bedb..3c241d4656 100644 --- a/files/fr/web/api/node/issupported/index.html +++ b/files/fr/web/api/node/issupported/index.html @@ -12,32 +12,31 @@ translation_of: Web/API/Node/isSupported

    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

    +

    Syntaxe

    boolValue = element.isSupported(feature, version)
    +

    Paramètres

    +
    -
    -

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

    +

    Exemple

    -
    <div id="doc">
    -</div>
    +
    <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>
    +<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écifications

     

    diff --git a/files/fr/web/api/node/lastchild/index.html b/files/fr/web/api/node/lastchild/index.html index 3f31c8f722..37963f8473 100644 --- a/files/fr/web/api/node/lastchild/index.html +++ b/files/fr/web/api/node/lastchild/index.html @@ -13,19 +13,19 @@ translation_of: Web/API/Node/lastChild

    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

    +

    Syntaxe

    var childNode = node.lastChild;
     

     

    -

    Exemple

    +

    Exemple

     

    -
    var tr = document.getElementById("row1");
    -var corner_td = tr.lastChild;
    +
    var tr = document.getElementById("row1");
    +var corner_td = tr.lastChild;

    Spécification

    @@ -63,8 +63,4 @@ translation_of: Web/API/Node/lastChild

    Compatibilité des navigateurs

    - - -

    {{Compat("api.Node.lastChild")}}

    - -
     
    +

    {{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 index 52e72bec1f..1c88e6b8a2 100644 --- a/files/fr/web/api/node/lookupnamespaceuri/index.html +++ b/files/fr/web/api/node/lookupnamespaceuri/index.html @@ -12,12 +12,12 @@ translation_of: Web/API/Node/lookupNamespaceURI

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

    +

    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 index 968deea85e..17cc48c622 100644 --- a/files/fr/web/api/node/lookupprefix/index.html +++ b/files/fr/web/api/node/lookupprefix/index.html @@ -14,10 +14,10 @@ translation_of: Web/API/Node/lookupPrefix

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

    +

    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 index b3e6cf3e7f..2a971a3067 100644 --- a/files/fr/web/api/node/nextsibling/index.html +++ b/files/fr/web/api/node/nextsibling/index.html @@ -12,42 +12,42 @@ translation_of: Web/API/Node/nextSibling

    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

    +

    Syntaxe

    nextNode = node.nextSibling
     
    -

    Notes

    +

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

    +

    Exemple

    -
    <div id="div-01">Here is div-01</div>
    -<div id="div-02">Here is div-02</div>
    +
    <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;
    +<script type="text/javascript">
    +var el = document.getElementById('div-01').nextSibling,
    +    i = 1;
     
    -console.log('Siblings of div-01:');
    +console.log('Siblings of div-01:');
     
    -while (el) {
    -  console.log(i + '. ' + el.nodeName);
    -  el = el.nextSibling;
    -  i++;
    -}
    +while (el) {
    +  console.log(i + '. ' + el.nodeName);
    +  el = el.nextSibling;
    +  i++;
    +}
     
    -</script>
    +</script>
     
     /**************************************************
       Ce qui suit est écrit sur la console pendant le chargement:
    @@ -59,25 +59,25 @@ console.log<
           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

    +

    Spécification

    -

    Compatibilité des navigateurs

    +

    Compatibilité des navigateurs

    {{Compat("api.Node.nextSibling")}}

    -

    Voir aussi

    +

    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 index da778cda15..11c471fff1 100644 --- a/files/fr/web/api/node/nodename/index.html +++ b/files/fr/web/api/node/nodename/index.html @@ -72,7 +72,7 @@ translation_of: Web/API/Node/nodeName
    -

    Syntaxe

    +

    Syntaxe

    var str = node.nodeName;
     
    @@ -92,15 +92,15 @@ 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).

    +

    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

    +

    Spécification

    diff --git a/files/fr/web/api/node/nodetype/index.html b/files/fr/web/api/node/nodetype/index.html index d6f0a4eb2e..2f6cd30d79 100644 --- a/files/fr/web/api/node/nodetype/index.html +++ b/files/fr/web/api/node/nodetype/index.html @@ -17,16 +17,16 @@ translation_of: Web/API/Node/nodeType

    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

    +

    Syntaxe

    -
    Type = node .nodeType
    +
    Type = node .nodeType
     
    -

    Renvoie un entier (integer) qui spécifie le type du noeud ; les valeurs possibles sont listées dans {{anch("Constantes")}}.

    +

    Renvoie un entier (integer) qui spécifie le type du noeud ; les valeurs possibles sont listées dans {{anch("Constantes")}}.

    -

    Constantes

    +

    Constantes

    -

    Constantes de type nœud

    +

    Constantes de type nœud

    @@ -114,9 +114,9 @@ translation_of: Web/API/Node/nodeType
    -

    Exemples

    +

    Exemples

    -

    Différents types de noeuds

    +

    Différents types de noeuds

    document.nodeType === Node.DOCUMENT_NODE; // true (vrai)
     document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // true  (vrai)
    @@ -133,13 +133,13 @@ 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.

    +

    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!");
    +
    var node = document.documentElement.firstChild;
    +if (node.nodeType != Node.COMMENT_NODE)
    +  console.log("You should comment your code well!");
    -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/node/nodevalue/index.html b/files/fr/web/api/node/nodevalue/index.html index 07e228342e..9f3fa1f3b3 100644 --- a/files/fr/web/api/node/nodevalue/index.html +++ b/files/fr/web/api/node/nodevalue/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Node/nodeValue

    La propriété Node.nodeValue renvoie ou définit la valeur du nœud courant.

    -

    Syntaxe

    +

    Syntaxe

    value = node.nodeValue;
     
    @@ -80,10 +80,10 @@ translation_of: Web/API/Node/nodeValue

    Lorsque nodeValue est défini comme étant null, l'assignation n'a aucun effet.

    -

    Spécification

    +

    Spécification

    Compatibilité des navigateurs

    diff --git a/files/fr/web/api/node/normalize/index.html b/files/fr/web/api/node/normalize/index.html index c58ba06945..e7ca55ed31 100644 --- a/files/fr/web/api/node/normalize/index.html +++ b/files/fr/web/api/node/normalize/index.html @@ -5,18 +5,18 @@ translation_of: Web/API/Node/normalize ---

    {{ ApiRef("DOM") }}

    -

    Résumé

    +

    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

    +

    Syntaxe

    élément.normalize();
     
    -

    Exemple

    +

    Exemple

    -
    var conteneur = document.createElement("div");
    +
    var conteneur = document.createElement("div");
     conteneur.appendChild( document.createTextNode("Partie 1 ") );
     conteneu.appendChild( document.createTextNode("Partie 2 ") );
     
    @@ -29,12 +29,12 @@ conteneur.normalize();
     // À présent, conteneur.childNodes.length === 1
     // conteneur.childNodes[0].textContent === "Partie 1 Partie 2 "
    -

    Notes

    +

    Notes

    -

    Spécification

    +

    Spécification

    {{ languages( { "en": "en/DOM/element.normalize", "pl": "pl/DOM/element.normalize" } ) }}

    diff --git a/files/fr/web/api/node/ownerdocument/index.html b/files/fr/web/api/node/ownerdocument/index.html index cc197c1d80..35b5eb6859 100644 --- a/files/fr/web/api/node/ownerdocument/index.html +++ b/files/fr/web/api/node/ownerdocument/index.html @@ -13,16 +13,16 @@ translation_of: Web/API/Node/ownerDocument

    La propriété en lecture seule Node.ownerDocument renvoie l'objet document de niveau supérieur pour ce nœud.

    -

    Syntaxe

    +

    Syntaxe

    document = element.ownerDocument;
     
      -
    • document est l'objet document parent de l'élément courant.
    • +
    • document est l'objet document parent de l'élément courant.
    -

    Exemple

    +

    Exemple

    // étant donné un nœud "p", obtient le premier enfant HTML
     // de l'objet document
    @@ -30,11 +30,11 @@ var d = p.ownerDocument;
     var html = d.documentElement;
     
    -

    Notes

    +

    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écifications

    @@ -63,8 +63,4 @@ var html = d.documentElement;

    Compatibilité des navigateurs

    - - -

    {{Compat("api.Node.ownerDocument")}}

    - -
     
    +

    {{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 index 7da92f2334..673cb3b8b2 100644 --- a/files/fr/web/api/node/parentelement/index.html +++ b/files/fr/web/api/node/parentelement/index.html @@ -14,21 +14,21 @@ 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.
    +
    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

    +

    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.

    +

    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

    +

    Exemple

    -
    if (node.parentElement) {
    -    node.parentElement.style.color = "red";
    -}
    +
    if (node.parentElement) {
    +    node.parentElement.style.color = "red";
    +}

    Compatibilité des navigateurs

    @@ -46,7 +46,7 @@ translation_of: Web/API/Node/parentElement
  • {{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}
  • -

    Voir aussi

    +

    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 index 50123e2cb6..5d2088cbf6 100644 --- a/files/fr/web/api/node/parentnode/index.html +++ b/files/fr/web/api/node/parentnode/index.html @@ -11,47 +11,42 @@ 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 .

      +

      La propriété en lecture seule parentNode renvoie le parent du nœud spécifié dans l'arborescence de DOM .

      -

      Syntaxe

      +

      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 .

      +

      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

      +

      Exemple

      -
      if (node.parentNode) {
      -  // supprime un noeud  de l'arbre, 
      -  // sauf s'il a déjà été supprimé
      -  node.parentNode.removeChild(node);
      -}
      +
      if (node.parentNode) {
      +  // supprime un noeud  de l'arbre, 
      +  // sauf s'il a déjà été supprimé
      +  node.parentNode.removeChild(node);
      +}
      -

      Notes

      +

      Notes

      -

      Les noeuds Document et DocumentFragment ne peuvent jamais avoir de parent, alors  parentNode  retournera toujours null .

      +

      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

      -
      -
      • {{Domxref("Node.firstChild")}}
      • {{Domxref("Node.lastChild")}}
      • @@ -60,8 +55,4 @@ translation_of: Web/API/Node/parentNode
      • {{Domxref("Node.parentElement")}}
      • {{Domxref("Node.previousSibling")}}
      • {{Domxref("Node.removeChild")}}
      • -
      -
      -
      - -
      +
    \ 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 index 2f9f178b1f..31e02f5c7a 100644 --- a/files/fr/web/api/node/previoussibling/index.html +++ b/files/fr/web/api/node/previoussibling/index.html @@ -12,45 +12,45 @@ translation_of: Web/API/Node/previousSibling

    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

    +

    Syntaxe

    previousNode = node.previousSibling;
     

    Exemple

    -
    // <a><b1 id="b1"/><b2 id="b2"/></a>
    +
    // <a><b1 id="b1"/><b2 id="b2"/></a>
     
    -alert(document.getElementById("b1").previousSibling); // null
    -alert(document.getElementById("b2").previousSibling.id); // "b1"
    +alert(document.getElementById("b1").previousSibling); // null +alert(document.getElementById("b2").previousSibling.id); // "b1"
    -

    Notes

    +

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

    +

    L'opération inverse Node.nextSibling permet de rechercher l'élément suivant.

    -

    Spécifications

    +

    Spécifications

    -

    Compatibilité des navigateurs

    +

    Compatibilité des navigateurs

    {{Compat("api.Node.previousSibling")}}

    -

    Voir aussi

    +

    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 index cff831cdef..051a65c4e6 100644 --- a/files/fr/web/api/node/removechild/index.html +++ b/files/fr/web/api/node/removechild/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Node/removeChild

    La méthode Node.removeChild() retire un nœud enfant de l'arbre DOM et retourne le nœud retiré.

    -

    Syntaxe

    +

    Syntaxe

    var oldChild = node.removeChild(child);
     OR
    @@ -23,20 +23,20 @@ translation_of: Web/API/Node/removeChild
     
     
    • child est le nœud enfant à retirer du DOM.
    • -
    • node est le nœud parent de child.
    • +
    • node est le nœud parent de child.
    • oldchild conserve une référence au nœud enfant retiré. oldchild === 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.

    +

    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 :​​
      +
    2. 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.
    3. 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'.
    4. @@ -44,62 +44,62 @@ translation_of: Web/API/Node/removeChild

      Exemples

      -
      <!--Sample HTML code-->
      -<div id="top" align="center"> </div>
      +
      <!--Sample HTML code-->
      +<div id="top" align="center"> </div>
       
      -<script type="text/javascript">
      -      var top = document.getElementById("top");
      -      var nested = document.getElementById("nested");
      +<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)
      +      var garbage = top.removeChild(nested);    //Cas test 2: la méthode lance l'exception (2)
       
      -</script>
      +</script>
       
      -<!--Sample HTML code-->
      -<div id="top" align="center">
      - <div id="nested"></div>
      -</div>
      +<!--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");
      +<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
      +      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)
      +      // ......
      +      garbage = top.removeChild(nested);   // Cas test 1 : la méthode dans le second appel ici, lance l'exception (1)
       
      -</script>
      +</script>
      -
      <!--Sample HTML code-->
      +
      <!--Sample HTML code-->
       
      -<div id="top" align="center">
      -  <div id="nested"></div>
      -</div>
      +<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é 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 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);
      -}
      +
      +// Supprime tous les enfant d'un élément
      +var element = document.getElementById("top");
      +while (element.firstChild) {
      +  element.removeChild(element.firstChild);
      +}
      -

      Spécifications

      +

      Spécifications

      diff --git a/files/fr/web/api/node/replacechild/index.html b/files/fr/web/api/node/replacechild/index.html index 3fb6b0e8df..3cdf5aa950 100644 --- a/files/fr/web/api/node/replacechild/index.html +++ b/files/fr/web/api/node/replacechild/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Node/replaceChild

      La méthode Node.replaceChild() remplace un nœud enfant du noeud spécifié par un autre nœud.

      -

      Syntaxe

      +

      Syntaxe

      replacedNode = parentNode.replaceChild(newChild, oldChild);
       
      diff --git a/files/fr/web/api/node/textcontent/index.html b/files/fr/web/api/node/textcontent/index.html index aa5b90cf7a..63e892d5b6 100644 --- a/files/fr/web/api/node/textcontent/index.html +++ b/files/fr/web/api/node/textcontent/index.html @@ -12,17 +12,17 @@ translation_of: Web/API/Node/textContent

      La propriété Node.textContent  représente le contenu textuel d'un nœud et de ses descendants.

      -

      Syntaxe

      +

      Syntaxe

      var text = element.textContent;
       element.textContent = "ceci est un simple exemple de texte";
       
      -

      Description

      +

      Description

        -
      • textContent renvoie null si l'élément est un document, un type de document (doctype) ou une notation. Pour saisir toutes les données textuelles et CDATA pour l'ensemble du document, on peut utiliser document.documentElement.textContent .
      • -
      • Si le nœud est une section CDATA, un commentaire, une instruction de traitement ou un nœud texte, textContent renvoie le texte à l'intérieur du nœud (la valeur nodeValue).
      • +
      • textContent renvoie null si l'élément est un document, un type de document (doctype) ou une notation. Pour saisir toutes les données textuelles et CDATA pour l'ensemble du document, on peut utiliser document.documentElement.textContent .
      • +
      • Si le nœud est une section CDATA, un commentaire, une instruction de traitement ou un nœud texte, textContent renvoie le texte à l'intérieur du nœud (la valeur nodeValue).
      • Pour les autres types de nœuds, textContent renvoie la concaténation des valeurs de propriété textContent de chaque nœud enfant, à l'exception des commentaires et nœuds d'instructions de traitement. Si le nœud n'a pas d'enfants, il s'agira d'une chaîne vide.
      • En définissant cette propriété sur un nœud, on enlève tous ses enfants et ceux-ci sont remplacés par un seul nœud texte avec la valeur donnée.
      @@ -42,7 +42,7 @@ element.textContent = "ceci est un simple exemple de texte";

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

      +

      Exemple

      // Étant donné le fragment de HTML suivant :
       //   <div id="divA">Ceci est un <span>exemple de</span> texte</div>
      @@ -58,27 +58,27 @@ document.getElementById("divA").textContent = "Ceci est un exemple de texte";
       
       

      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);
      -       }
      -     }
      -   );
      -  })();
      -}
      +
      // 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);
      +       }
      +     }
      +   );
      +  })();
      +}
      @@ -89,9 +89,9 @@ document.getElementById("divA").textContent = "Ceci est un exemple de texte";

      {{Compat("api.Node.textContent")}}

      -

      Spécifications

      +

      Spécifications

      -
    +
    diff --git a/files/fr/web/api/nodefilter/acceptnode/index.html b/files/fr/web/api/nodefilter/acceptnode/index.html index a10a9b5657..58a61e0e11 100644 --- a/files/fr/web/api/nodefilter/acceptnode/index.html +++ b/files/fr/web/api/nodefilter/acceptnode/index.html @@ -37,7 +37,7 @@ translation_of: Web/API/NodeFilter/acceptNode

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

    +

    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

    @@ -81,7 +81,7 @@ while ((node = iterator.nextNode())) { } -

    Spécifications

    +

    Spécifications

    Spécification
    @@ -113,8 +113,4 @@ while ((node = iterator.nextNode())) {
    • L'interface à laquelle elle appartient : {{domxref("NodeFilter")}}.
    • -
    - -
    -
     
    -
    + \ No newline at end of file diff --git a/files/fr/web/api/nodefilter/index.html b/files/fr/web/api/nodefilter/index.html index 7850b44bf7..17bab28ee1 100644 --- a/files/fr/web/api/nodefilter/index.html +++ b/files/fr/web/api/nodefilter/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/NodeFilter

    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.

    -

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

    +

    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

    @@ -84,7 +84,7 @@ while ((node = nodeIterator.nextNode())) { } -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/nodeiterator/detach/index.html b/files/fr/web/api/nodeiterator/detach/index.html index 5330650ab5..ee558b083b 100644 --- a/files/fr/web/api/nodeiterator/detach/index.html +++ b/files/fr/web/api/nodeiterator/detach/index.html @@ -16,12 +16,12 @@ translation_of: Web/API/NodeIterator/detach

    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

    +

    Syntaxe

    nodeIterator.detach();
     
    -

    Exemple

    +

    Exemple

    var nodeIterator = document.createNodeIterator(
         document.body,
    @@ -34,7 +34,7 @@ nodeIterator.detach(); // détache l'itérateur
     nodeIterator.nextNode(); // lance une exception INVALID_STATE_ERR
     
    -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/nodeiterator/expandentityreferences/index.html b/files/fr/web/api/nodeiterator/expandentityreferences/index.html index bf1f66e25a..32c3294fc0 100644 --- a/files/fr/web/api/nodeiterator/expandentityreferences/index.html +++ b/files/fr/web/api/nodeiterator/expandentityreferences/index.html @@ -16,12 +16,12 @@ translation_of: Web/API/NodeIterator/expandEntityReferences

    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

    +

    Syntaxe

    expand = nodeIterator.expandEntityReferences;
     
    -

    Exemple

    +

    Exemple

    var nodeIterator = document.createNodeIterator(
         document.body,
    @@ -31,7 +31,7 @@ translation_of: Web/API/NodeIterator/expandEntityReferences
     );
     expand = nodeIterator.expandEntityReferences;
    -

    Spécifications

    +

    Spécifications

    @@ -55,13 +55,9 @@ expand = nodeIterator.expandEntityReferences;

    Compatibilité des navigateurs

    -
    - -

    {{Compat("api.NodeIterator.expandEntityReferences")}}

    Voir aussi

    -
    • L'interface à laquelle cette propriété appartient : {{domxref("NodeIterator")}}.
    • diff --git a/files/fr/web/api/nodeiterator/filter/index.html b/files/fr/web/api/nodeiterator/filter/index.html index d33a997c5a..57cbd54740 100644 --- a/files/fr/web/api/nodeiterator/filter/index.html +++ b/files/fr/web/api/nodeiterator/filter/index.html @@ -16,12 +16,12 @@ translation_of: Web/API/NodeIterator/filter

      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

      +

      Syntaxe

      nodeFilter = nodeIterator.filter;
       
      -

      Exemple

      +

      Exemple

      var nodeIterator = document.createNodeIterator(
           document.body,
      diff --git a/files/fr/web/api/nodeiterator/index.html b/files/fr/web/api/nodeiterator/index.html
      index ec58943384..d45bd86f1f 100644
      --- a/files/fr/web/api/nodeiterator/index.html
      +++ b/files/fr/web/api/nodeiterator/index.html
      @@ -16,7 +16,7 @@ translation_of: Web/API/NodeIterator
       
       
      var nodeIterator = document.createNodeIterator(root, whatToShow, filter);
      -

      Propriétés

      +

      Propriétés

      L'interface n'hérite d'aucune propriété.

      @@ -110,7 +110,7 @@ translation_of: Web/API/NodeIterator
      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

      +

      Méthodes

      Cette interface n'hérite d'aucune méthode.

      @@ -123,7 +123,7 @@ translation_of: Web/API/NodeIterator
      Renvoie le noeud {{domxref("Node")}} suivant dans le  document ou null s'il n'y en a aucun.
      -

      Spécifications

      +

      Spécifications

    diff --git a/files/fr/web/api/nodeiterator/nextnode/index.html b/files/fr/web/api/nodeiterator/nextnode/index.html index 8c9b61982a..517cc65cef 100644 --- a/files/fr/web/api/nodeiterator/nextnode/index.html +++ b/files/fr/web/api/nodeiterator/nextnode/index.html @@ -18,12 +18,12 @@ translation_of: Web/API/NodeIterator/nextNode

    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

    +

    Syntaxe

    node = nodeIterator.nextNode();
     
    -

    Exemple

    +

    Exemple

    var nodeIterator = document.createNodeIterator(
         document.body,
    @@ -34,7 +34,7 @@ translation_of: Web/API/NodeIterator/nextNode
     currentNode = nodeIterator.nextNode(); // renvoie le noeud suivant.
     
    -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/nodeiterator/pointerbeforereferencenode/index.html b/files/fr/web/api/nodeiterator/pointerbeforereferencenode/index.html index 439bfe8df6..a2d6507e4f 100644 --- a/files/fr/web/api/nodeiterator/pointerbeforereferencenode/index.html +++ b/files/fr/web/api/nodeiterator/pointerbeforereferencenode/index.html @@ -14,12 +14,12 @@ translation_of: Web/API/NodeIterator/pointerBeforeReferenceNode

    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

    +

    Syntaxe

    flag = nodeIterator.pointerBeforeReferenceNode;
     
    -

    Exemple

    +

    Exemple

    var nodeIterator = document.createNodeIterator(
         document.body,
    @@ -29,7 +29,7 @@ translation_of: Web/API/NodeIterator/pointerBeforeReferenceNode
     );
     flag = nodeIterator.pointerBeforeReferenceNode;
    -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/nodeiterator/previousnode/index.html b/files/fr/web/api/nodeiterator/previousnode/index.html index d0bfa021f4..e6c19c0c07 100644 --- a/files/fr/web/api/nodeiterator/previousnode/index.html +++ b/files/fr/web/api/nodeiterator/previousnode/index.html @@ -17,12 +17,12 @@ translation_of: Web/API/NodeIterator/previousNode

    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

    +

    Syntaxe

    node = nodeIterator.previousNode();
     
    -

    Exemple

    +

    Exemple

    var nodeIterator = document.createNodeIterator(
         document.body,
    @@ -34,7 +34,7 @@ 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écifications

    diff --git a/files/fr/web/api/nodeiterator/referencenode/index.html b/files/fr/web/api/nodeiterator/referencenode/index.html index b138a52723..b706873866 100644 --- a/files/fr/web/api/nodeiterator/referencenode/index.html +++ b/files/fr/web/api/nodeiterator/referencenode/index.html @@ -14,12 +14,12 @@ translation_of: Web/API/NodeIterator/referenceNode

    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

    +

    Syntaxe

    node = nodeIterator.referenceNode;
     
    -

    Exemple

    +

    Exemple

    var nodeIterator = document.createNodeIterator(
         document.body,
    @@ -30,7 +30,7 @@ translation_of: Web/API/NodeIterator/referenceNode
     node = nodeIterator.referenceNode;
     
    -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/nodeiterator/root/index.html b/files/fr/web/api/nodeiterator/root/index.html index b5d6aeead3..c3fcbf3a8b 100644 --- a/files/fr/web/api/nodeiterator/root/index.html +++ b/files/fr/web/api/nodeiterator/root/index.html @@ -14,12 +14,12 @@ translation_of: Web/API/NodeIterator/root

    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

    +

    Syntaxe

    root = nodeIterator.root;
     
    -

    Exemple

    +

    Exemple

    var nodeIterator = document.createNodeIterator(
         document.body,
    @@ -30,7 +30,7 @@ translation_of: Web/API/NodeIterator/root
     root = nodeIterator.root; // document.body dans ce cas
     
    -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/nodeiterator/whattoshow/index.html b/files/fr/web/api/nodeiterator/whattoshow/index.html index a36dbc4527..216eee5ac5 100644 --- a/files/fr/web/api/nodeiterator/whattoshow/index.html +++ b/files/fr/web/api/nodeiterator/whattoshow/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/NodeIterator/whatToShow

    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

    +

    Syntaxe

    var nodeTypes = nodeIterator.whatToShow;
     
    @@ -96,7 +96,7 @@ translation_of: Web/API/NodeIterator/whatToShow
    -

    Exemple

    +

    Exemple

    var nodeIterator = document.createNodeIterator(
         document.body,
    @@ -110,7 +110,7 @@ if( (nodeIterator.whatToShow == NodeFilter.SHOW_ALL) ||
     }
     
    -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/nodelist/entries/index.html b/files/fr/web/api/nodelist/entries/index.html index 7888945118..55a048203d 100644 --- a/files/fr/web/api/nodelist/entries/index.html +++ b/files/fr/web/api/nodelist/entries/index.html @@ -26,7 +26,7 @@ translation_of: Web/API/NodeList/entries

    Exemple

    -
    var node = document.createElement("div");
    +
    var node = document.createElement("div");
     var kid1 = document.createElement("p");
     var kid2 = document.createTextNode("hey");
     var kid3 = document.createElement("span");
    diff --git a/files/fr/web/api/nodelist/foreach/index.html b/files/fr/web/api/nodelist/foreach/index.html
    index 7ab1ed297b..0a0eb9f1a8 100644
    --- a/files/fr/web/api/nodelist/foreach/index.html
    +++ b/files/fr/web/api/nodelist/foreach/index.html
    @@ -46,7 +46,7 @@ translation_of: Web/API/NodeList/forEach
     
     

    Exemple

    -
    var node = document.createElement("div");
    +
    var node = document.createElement("div");
     var kid1 = document.createElement("p");
     var kid2 = document.createTextNode("hey");
     var kid3 = document.createElement("span");
    diff --git a/files/fr/web/api/nodelist/index.html b/files/fr/web/api/nodelist/index.html
    index a6b5649708..38e9a6121e 100644
    --- a/files/fr/web/api/nodelist/index.html
    +++ b/files/fr/web/api/nodelist/index.html
    @@ -9,23 +9,23 @@ tags:
       - Noeuds
     translation_of: Web/API/NodeList
     ---
    -

    {{APIRef("DOM")}}

    +

    {{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()")}}.

    -

    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()")}}.

    +

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

    @@ -35,9 +35,6 @@ console.log<
    {{domxref("NodeList.length")}}
    -
    - -
    Le nombre de nœuds dans la NodeList.
    @@ -65,23 +62,23 @@ console.log< }
    -

    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.

    +

    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 :

    +

    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()")}}.

    +

    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;
    -});
    +
    var list = document.querySelectorAll( 'input[type=checkbox]' );
    +Array.prototype.forEach.call(list, function (item) {
    +  item.checked = true;
    +});

    Spécifications

    diff --git a/files/fr/web/api/nodelist/item/index.html b/files/fr/web/api/nodelist/item/index.html index e4d65fc86d..8cee3e9216 100644 --- a/files/fr/web/api/nodelist/item/index.html +++ b/files/fr/web/api/nodelist/item/index.html @@ -11,7 +11,7 @@ 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.

    +

    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

    @@ -19,7 +19,7 @@ translation_of: Web/API/NodeList/item
      -
    • nodeList est une NodeList. Elle est généralement obtenue à partir d'une autre propriété ou méthode DOM, telle que childNodes.
    • +
    • nodeList est une NodeList. Elle est généralement obtenue à partir d'une autre propriété ou méthode DOM, telle que childNodes.
    • index est l'index du noeud à chercher. L'index commence à zéro.
    • nodeItem est le numéro d'index du noeud dans la nodeList retourné par la méthode item.
    @@ -39,9 +39,9 @@ var firstTable = tables.item(1); // ou simplement tables[1] - renvoie le Spécification -

    DOM Level 1 Core: NodeList.item()

    +

    DOM Level 1 Core: NodeList.item()

    -

    DOM Level 2 Core: NodeList.item()

    +

    DOM Level 2 Core: NodeList.item()

    Compatibilité des navigateurs

    diff --git a/files/fr/web/api/nodelist/keys/index.html b/files/fr/web/api/nodelist/keys/index.html index 6f4f693c1a..79da27b5b6 100644 --- a/files/fr/web/api/nodelist/keys/index.html +++ b/files/fr/web/api/nodelist/keys/index.html @@ -23,7 +23,7 @@ translation_of: Web/API/NodeList/keys

    Exemple

    -
    var node = document.createElement("div");
    +
    var node = document.createElement("div");
     var kid1 = document.createElement("p");
     var kid2 = document.createTextNode("hey");
     var kid3 = document.createElement("span");
    diff --git a/files/fr/web/api/nodelist/length/index.html b/files/fr/web/api/nodelist/length/index.html
    index b68db9816b..0bc3206cd6 100644
    --- a/files/fr/web/api/nodelist/length/index.html
    +++ b/files/fr/web/api/nodelist/length/index.html
    @@ -15,7 +15,7 @@ translation_of: Web/API/NodeList/length
     
     

    length renvoie le nombre d'éléments dans une NodeList.

    -

    Syntaxe

    +

    Syntaxe

    numItems =nodeList.length
     
    @@ -24,7 +24,7 @@ translation_of: Web/API/NodeList/length
  • numItems est un entier (integer), valeur représentant le nombre d'éléments dans une NodeList.
  • -

    Exemple

    +

    Exemple

    // tous les paragraphes dans le document
     var items = document.getElementsByTagName("p");
    @@ -37,15 +37,15 @@ for (var i = 0; i < items.length; i++) {
     // gross est maintenant tout le HTML pour les paragraphes
     
    -

    Notes

    +

    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

    +

    Spécification

    -

    length

    +

    length

    Compatibilité des navigateurs

    diff --git a/files/fr/web/api/nodelist/values/index.html b/files/fr/web/api/nodelist/values/index.html index 4abe62ad34..74cf0f4ad5 100644 --- a/files/fr/web/api/nodelist/values/index.html +++ b/files/fr/web/api/nodelist/values/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/NodeList/values

    Exemple

    -
    var node = document.createElement("div");
    +
    var node = document.createElement("div");
     var kid1 = document.createElement("p");
     var kid2 = document.createTextNode("hey");
     var kid3 = document.createElement("span");
    diff --git a/files/fr/web/api/notification/actions/index.html b/files/fr/web/api/notification/actions/index.html
    index 3f484723f7..e65543b120 100644
    --- a/files/fr/web/api/notification/actions/index.html
    +++ b/files/fr/web/api/notification/actions/index.html
    @@ -13,17 +13,19 @@ 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.

    +

    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

    +

    Syntaxe

    -
    Notification.actions
    +
    Notification.actions
    -

    Valeur

    +

    Valeur

    Un tableau en lecture seule d'objets {{domxref ("NotificationAction")}}, chacun décrivant une action unique que l'utilisateur peut choisir dans une notification.

    diff --git a/files/fr/web/api/notification/badge/index.html b/files/fr/web/api/notification/badge/index.html index 7afe7c725f..319ba58bb9 100644 --- a/files/fr/web/api/notification/badge/index.html +++ b/files/fr/web/api/notification/badge/index.html @@ -12,11 +12,11 @@ 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.

    +

    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
    +
    const url = Notification.badge

    Valeur

    @@ -34,7 +34,7 @@ translation_of: Web/API/Notification/badge
    - +
    {{SpecName('Web Notifications','#dom-notification-badge','badge')}} {{Spec2('Web Notifications')}}Définition initiale.Définition initiale.
    diff --git a/files/fr/web/api/notification/body/index.html b/files/fr/web/api/notification/body/index.html index d89bd55769..e19c579157 100644 --- a/files/fr/web/api/notification/body/index.html +++ b/files/fr/web/api/notification/body/index.html @@ -13,11 +13,11 @@ 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()" )}}.

    +

    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
    +
    Notification.body
     

    Valeur

    diff --git a/files/fr/web/api/notification/close/index.html b/files/fr/web/api/notification/close/index.html index 37f7f929b6..359bf36dda 100644 --- a/files/fr/web/api/notification/close/index.html +++ b/files/fr/web/api/notification/close/index.html @@ -14,7 +14,7 @@ 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.

    +

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

    @@ -22,7 +22,7 @@ translation_of: Web/API/Notification/close

    Syntaxe

    -
    Notification.close()
    +
    Notification.close()

    Paramètres

    @@ -36,7 +36,7 @@ translation_of: Web/API/Notification/close

    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) {
    +
    function spawnNotification(theBody, theIcon, theTitle) {
       const options = {
         body: theBody,
         icon: theIcon
    diff --git a/files/fr/web/api/notification/data/index.html b/files/fr/web/api/notification/data/index.html
    index e6e29516f2..22b3b01747 100644
    --- a/files/fr/web/api/notification/data/index.html
    +++ b/files/fr/web/api/notification/data/index.html
    @@ -13,13 +13,13 @@ 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() ")}}.

    +

    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
    +
    Notification.data
     

    Valeur

    diff --git a/files/fr/web/api/notification/dir/index.html b/files/fr/web/api/notification/dir/index.html index 6e694e6d14..7fed8f84dd 100644 --- a/files/fr/web/api/notification/dir/index.html +++ b/files/fr/web/api/notification/dir/index.html @@ -13,14 +13,14 @@ 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()" )}}.

    +

    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

    +

    Syntaxe

    -
    Notification.dir
    +
    Notification.dir
     
    -

    Valeur

    +

    Valeur

    Une {{domxref ("DOMString")}} spécifiant la direction du texte. Les valeurs possibles sont:

    @@ -31,7 +31,7 @@ translation_of: Web/API/Notification/dir
    -

    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.

    +

    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

    diff --git a/files/fr/web/api/notification/icon/index.html b/files/fr/web/api/notification/icon/index.html index 19eac0702c..8b25811ea0 100644 --- a/files/fr/web/api/notification/icon/index.html +++ b/files/fr/web/api/notification/icon/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/Notification/icon

    Syntaxe

    -
    Notification.icon
    +
    Notification.icon
     

    Valeur

    diff --git a/files/fr/web/api/notification/image/index.html b/files/fr/web/api/notification/image/index.html index 0ad86d51a3..fa57345f6e 100644 --- a/files/fr/web/api/notification/image/index.html +++ b/files/fr/web/api/notification/image/index.html @@ -15,11 +15,11 @@ translation_of: Web/API/Notification/image

    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

    +

    Syntaxe

    -
    Notification.image
    +
    Notification.image
    -

    Valeur

    +

    Valeur

    Une {{domxref("USVString")}}.

    diff --git a/files/fr/web/api/notification/index.html b/files/fr/web/api/notification/index.html index 207ba16762..f732fae408 100644 --- a/files/fr/web/api/notification/index.html +++ b/files/fr/web/api/notification/index.html @@ -11,7 +11,7 @@ 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.

    +

    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

    @@ -28,7 +28,7 @@ translation_of: Web/API/Notification
    {{domxref("Notification.permission")}} {{readonlyinline}}
    -
    Une chaîne représentant l'autorisation actuelle d'afficher les notifications. Les valeurs possibles sont: +

    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.
    • @@ -36,6 +36,7 @@ translation_of: Web/API/Notification
    {{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

    @@ -112,11 +113,11 @@ translation_of: Web/API/Notification

    Supposons ce HTML de base:

    -
    <button onclick="notifyMe()">Notifie moi !</button>
    +
    <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() {
    +
    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')
    @@ -145,8 +146,8 @@ translation_of: Web/API/Notification
     
     

    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.

    +
    +

    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

    diff --git a/files/fr/web/api/notification/lang/index.html b/files/fr/web/api/notification/lang/index.html index 91134377e5..3a409d72ff 100644 --- a/files/fr/web/api/notification/lang/index.html +++ b/files/fr/web/api/notification/lang/index.html @@ -12,13 +12,13 @@ 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 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
    +
    Notification.lang
     

    Valeur

    diff --git a/files/fr/web/api/notification/maxactions/index.html b/files/fr/web/api/notification/maxactions/index.html index f780fc27a1..df61031657 100644 --- a/files/fr/web/api/notification/maxactions/index.html +++ b/files/fr/web/api/notification/maxactions/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/Notification/maxActions

    Syntaxe

    -
    Notification.maxActions
    +
    Notification.maxActions
     

    Valeur

    @@ -28,7 +28,7 @@ translation_of: Web/API/Notification/maxActions

    L'extrait de code suivant enregistre le nombre maximal d'actions prises en charge.

    -
    const { maxActions } = Notification
    +
    const { maxActions } = Notification
     console.log(`This device can display at most ${maxActions} actions on each notification.`);
     
    diff --git a/files/fr/web/api/notification/notification/index.html b/files/fr/web/api/notification/notification/index.html index 48578eb688..0e9a988e55 100644 --- a/files/fr/web/api/notification/notification/index.html +++ b/files/fr/web/api/notification/notification/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/Notification/Notification

    Syntaxe

    -
    const myNotification = new Notification(title, options)
    +
    const myNotification = new Notification(title, options)

    Paramètres

    @@ -48,7 +48,7 @@ translation_of: Web/API/Notification/Notification

    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) {
    +
    function spawnNotification(body, icon, title) {
       const options = {
         body: body,
         icon: icon
    diff --git a/files/fr/web/api/notification/onclick/index.html b/files/fr/web/api/notification/onclick/index.html
    index 209d7c519f..b1561a4fe9 100644
    --- a/files/fr/web/api/notification/onclick/index.html
    +++ b/files/fr/web/api/notification/onclick/index.html
    @@ -14,7 +14,7 @@ translation_of: Web/API/Notification/onclick
     
     

    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

    +

    Syntaxe

    Notification.onclick = function(event) { ... };
     
    diff --git a/files/fr/web/api/notification/onclose/index.html b/files/fr/web/api/notification/onclose/index.html index 5d5edbde16..5dddd078f3 100644 --- a/files/fr/web/api/notification/onclose/index.html +++ b/files/fr/web/api/notification/onclose/index.html @@ -13,11 +13,11 @@ 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.

    +

    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 = function(event) { ... }
     Notification.onclose = (event) => { ... }
     
    diff --git a/files/fr/web/api/notification/onerror/index.html b/files/fr/web/api/notification/onerror/index.html index 476e5cb9d7..af9115de5b 100644 --- a/files/fr/web/api/notification/onerror/index.html +++ b/files/fr/web/api/notification/onerror/index.html @@ -13,11 +13,11 @@ 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.)

    +

    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

    +

    Syntaxe

    -
    Notification.onerror = function(event) { ... }
    +
    Notification.onerror = function(event) { ... }
     Notification.onerror = (even) => { ... }
     
    diff --git a/files/fr/web/api/notification/onshow/index.html b/files/fr/web/api/notification/onshow/index.html index bdb0953b6f..a0a38caf41 100644 --- a/files/fr/web/api/notification/onshow/index.html +++ b/files/fr/web/api/notification/onshow/index.html @@ -13,11 +13,11 @@ 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é.

    +

    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 = function() { ... }
     Notification.onshow = () => { ... }
     
    diff --git a/files/fr/web/api/notification/permission/index.html b/files/fr/web/api/notification/permission/index.html index 55405894aa..603a7cdb3c 100644 --- a/files/fr/web/api/notification/permission/index.html +++ b/files/fr/web/api/notification/permission/index.html @@ -12,13 +12,13 @@ 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.

    +

    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

    +

    Syntaxe

    -
    Notification.permission
    +
    Notification.permission
    -

    Valeur

    +

    Valeur

    Une {{domxref("DOMString")}} représentant l'autorisation actuelle. La valeur peut être:

    @@ -32,7 +32,7 @@ translation_of: Web/API/Notification/permission

    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() {
    +
    function notifyMe() {
       // Let's check if the browser supports notifications
       if (!('Notification' in window)) {
         console.log('This browser does not support desktop notification')
    diff --git a/files/fr/web/api/notification/renotify/index.html b/files/fr/web/api/notification/renotify/index.html
    index a79c385380..ebd7bb4492 100644
    --- a/files/fr/web/api/notification/renotify/index.html
    +++ b/files/fr/web/api/notification/renotify/index.html
    @@ -15,11 +15,11 @@ 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()")}}.

    +

    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
    +
    Notification.renotify
     

    Valeur

    diff --git a/files/fr/web/api/notification/requestpermission/index.html b/files/fr/web/api/notification/requestpermission/index.html index b5b1222762..e8d71e4a90 100644 --- a/files/fr/web/api/notification/requestpermission/index.html +++ b/files/fr/web/api/notification/requestpermission/index.html @@ -16,11 +16,11 @@ translation_of: Web/API/Notification/requestPermission

    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.

    +
    +

    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.

    +

    La méthode requestPermission() de l'interface {{domxref ("Notification")}} demande l'autorisation à l'utilisateur pour l'origine actuelle d'afficher des notifications.

    Syntaxe

    @@ -54,11 +54,11 @@ translation_of: Web/API/Notification/requestPermission

    Supposons ce HTML de base:

    -
    <button onclick="notifyMe()">Notifie moi !</button>
    +
    <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() {
    +
    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')
    @@ -87,8 +87,8 @@ translation_of: Web/API/Notification/requestPermission
     
     

    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.

    +
    +

    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

    diff --git a/files/fr/web/api/notification/requireinteraction/index.html b/files/fr/web/api/notification/requireinteraction/index.html index d598a97269..80eacf5f84 100644 --- a/files/fr/web/api/notification/requireinteraction/index.html +++ b/files/fr/web/api/notification/requireinteraction/index.html @@ -16,11 +16,11 @@ translation_of: Web/API/Notification/requireInteraction

    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

    +

    Syntaxe

    -
    Notification.requireInteraction
    +
    Notification.requireInteraction
    -

    Valeur

    +

    Valeur

    Un {{jsxref("Boolean")}}.

    diff --git a/files/fr/web/api/notification/silent/index.html b/files/fr/web/api/notification/silent/index.html index 5452c77398..d97cde7bd4 100644 --- a/files/fr/web/api/notification/silent/index.html +++ b/files/fr/web/api/notification/silent/index.html @@ -15,11 +15,11 @@ 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()")}}.

    +

    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
    +
    Notification.silent
     

    Valeur

    diff --git a/files/fr/web/api/notification/tag/index.html b/files/fr/web/api/notification/tag/index.html index 7794c70e61..7c5196d714 100644 --- a/files/fr/web/api/notification/tag/index.html +++ b/files/fr/web/api/notification/tag/index.html @@ -20,7 +20,7 @@ translation_of: Web/API/Notification/tag

    Syntaxe

    -
    Notification.tag
    +
    Notification.tag
     

    Valeur

    diff --git a/files/fr/web/api/notification/timestamp/index.html b/files/fr/web/api/notification/timestamp/index.html index ca54bf330c..8218d858d6 100644 --- a/files/fr/web/api/notification/timestamp/index.html +++ b/files/fr/web/api/notification/timestamp/index.html @@ -14,15 +14,15 @@ 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()")}}.

    +

    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

    +

    Syntaxe

    -
    Notification.timestamp
    +
    Notification.timestamp
    -

    Valeur

    +

    Valeur

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

    diff --git a/files/fr/web/api/notification/title/index.html b/files/fr/web/api/notification/title/index.html index 40edbb0790..ba07a05630 100644 --- a/files/fr/web/api/notification/title/index.html +++ b/files/fr/web/api/notification/title/index.html @@ -14,11 +14,11 @@ 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.

    +

    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
    +
    Notification.title

    Valeur

    diff --git a/files/fr/web/api/notification/vibrate/index.html b/files/fr/web/api/notification/vibrate/index.html index f9945d7c8a..d9bae90120 100644 --- a/files/fr/web/api/notification/vibrate/index.html +++ b/files/fr/web/api/notification/vibrate/index.html @@ -15,14 +15,14 @@ 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 ()")}}.

    +

    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

    +

    Syntaxe

    -
    Notification.vibrate
    +
    Notification.vibrate
     
    -

    Valeur

    +

    Valeur

    Un modèle de vibration, tel que spécifié dans la spécification de l'{{domxref ("Vibration_API", "Api de Vibration")}}.

    diff --git a/files/fr/web/api/notifications_api/index.html b/files/fr/web/api/notifications_api/index.html index 1a5dc8eb8e..6d8129b9d8 100644 --- a/files/fr/web/api/notifications_api/index.html +++ b/files/fr/web/api/notifications_api/index.html @@ -10,29 +10,29 @@ 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.

    +

    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', () => {
    +
    btn.addEventListener('click', () => {
       let promise = Notification.requestPermission()
       // wait for permission
     })
    -
    -

    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.

    +
    +

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

    +

    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.

    @@ -40,7 +40,7 @@ translation_of: Web/API/Notifications_API

    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.

    +

    Note : Pour en savoir plus sur l'utilisation des notifications dans votre propre application, lisez Utilisation de l'API Notifications.

    Les interfaces de Notifications

    diff --git a/files/fr/web/api/notifyaudioavailableevent/index.html b/files/fr/web/api/notifyaudioavailableevent/index.html index 2b388ba495..ad2b4365e2 100644 --- a/files/fr/web/api/notifyaudioavailableevent/index.html +++ b/files/fr/web/api/notifyaudioavailableevent/index.html @@ -12,7 +12,7 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/offlineaudiocontext/complete_event/index.html b/files/fr/web/api/offlineaudiocontext/complete_event/index.html index 048267b45a..80b1b067f5 100644 --- a/files/fr/web/api/offlineaudiocontext/complete_event/index.html +++ b/files/fr/web/api/offlineaudiocontext/complete_event/index.html @@ -88,5 +88,5 @@ original_slug: Web/Events/complete

    Voir aussi

    diff --git a/files/fr/web/api/offscreencanvas/index.html b/files/fr/web/api/offscreencanvas/index.html index f5565c502c..fa540f07d4 100644 --- a/files/fr/web/api/offscreencanvas/index.html +++ b/files/fr/web/api/offscreencanvas/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/OffscreenCanvas

    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.

    +

    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

    diff --git a/files/fr/web/api/oscillatornode/index.html b/files/fr/web/api/oscillatornode/index.html index 0c28e27ee9..c4293946c4 100644 --- a/files/fr/web/api/oscillatornode/index.html +++ b/files/fr/web/api/oscillatornode/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/OscillatorNode

    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 :

    +

    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 :

    • Nombre d'entrées : 0
    • diff --git a/files/fr/web/api/page_visibility_api/index.html b/files/fr/web/api/page_visibility_api/index.html index 01ae056bdf..0443a0061a 100644 --- a/files/fr/web/api/page_visibility_api/index.html +++ b/files/fr/web/api/page_visibility_api/index.html @@ -5,7 +5,9 @@ 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’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.

      @@ -106,25 +108,16 @@ if (typeof document.addEventListener === "undefined" || typeof document.hidden =

      Propriétés

      -
      -

      {{domxref("document.hidden")}} Read only

      -
      -
      -

      Retourne true si la page est dans un état considéré comme masqué à l’utilisateur, et false dans le cas contraire.

      -
      -
      -

      {{domxref("document.visibilityState")}} Read only

      -
      -
      -

      Une string représentant l’état de visibilité du document. Valeurs possibles :

      - +
      {{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) {
      @@ -133,16 +126,10 @@ function handleVisibilityChange() {
           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.

      -
      +
    +
    {{domxref("document.onvisibilitychange")}}
    +
    Un {{event("Event_handlers", "event handler")}} représentant le code à appeler quand l’évènement {{event("visibilitychange")}} est émis.

    Spécifications

    @@ -171,6 +158,6 @@ document.addEventListener("visibilitychange", handleVisibilityChange, false);

    Voir aussi

    diff --git a/files/fr/web/api/pagetransitionevent/index.html b/files/fr/web/api/pagetransitionevent/index.html index 88e918b253..b679c056dd 100644 --- a/files/fr/web/api/pagetransitionevent/index.html +++ b/files/fr/web/api/pagetransitionevent/index.html @@ -48,7 +48,7 @@ translation_of: Web/API/PageTransitionEvent

    L’objet PageTransitionEvent possède les propriétés suivantes :

    - +
    diff --git a/files/fr/web/api/payment_request_api/index.html b/files/fr/web/api/payment_request_api/index.html index 78434d825c..5712ce4c57 100644 --- a/files/fr/web/api/payment_request_api/index.html +++ b/files/fr/web/api/payment_request_api/index.html @@ -5,7 +5,7 @@ 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.

    +

    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

    @@ -26,7 +26,7 @@ translation_of: Web/API/Payment_Request_API

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

    +

    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

    diff --git a/files/fr/web/api/performance/clearmarks/index.html b/files/fr/web/api/performance/clearmarks/index.html index 31634399f9..81571fb42e 100644 --- a/files/fr/web/api/performance/clearmarks/index.html +++ b/files/fr/web/api/performance/clearmarks/index.html @@ -11,7 +11,7 @@ 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.

    +

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

    diff --git a/files/fr/web/api/performance/clearmeasures/index.html b/files/fr/web/api/performance/clearmeasures/index.html index c63eff637d..0748baa2b2 100644 --- a/files/fr/web/api/performance/clearmeasures/index.html +++ b/files/fr/web/api/performance/clearmeasures/index.html @@ -11,7 +11,7 @@ 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.

    +

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

    diff --git a/files/fr/web/api/performance/clearresourcetimings/index.html b/files/fr/web/api/performance/clearresourcetimings/index.html index a6da2caf50..b7a87a662a 100644 --- a/files/fr/web/api/performance/clearresourcetimings/index.html +++ b/files/fr/web/api/performance/clearresourcetimings/index.html @@ -11,7 +11,7 @@ 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()")}}.

    +

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

    diff --git a/files/fr/web/api/performance/getentries/index.html b/files/fr/web/api/performance/getentries/index.html index 2cebfda905..1cf2fd1832 100644 --- a/files/fr/web/api/performance/getentries/index.html +++ b/files/fr/web/api/performance/getentries/index.html @@ -11,7 +11,7 @@ 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()")}}.

    +

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

    diff --git a/files/fr/web/api/performance/getentriesbyname/index.html b/files/fr/web/api/performance/getentriesbyname/index.html index c01ee9b633..ac125fe6be 100644 --- a/files/fr/web/api/performance/getentriesbyname/index.html +++ b/files/fr/web/api/performance/getentriesbyname/index.html @@ -11,7 +11,7 @@ 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.

    +

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

    diff --git a/files/fr/web/api/performance/getentriesbytype/index.html b/files/fr/web/api/performance/getentriesbytype/index.html index 4f06729f3c..3644cd0f60 100644 --- a/files/fr/web/api/performance/getentriesbytype/index.html +++ b/files/fr/web/api/performance/getentriesbytype/index.html @@ -11,7 +11,7 @@ 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.

    +

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

    diff --git a/files/fr/web/api/performance/index.html b/files/fr/web/api/performance/index.html index 46d8e44241..3de85d05ed 100644 --- a/files/fr/web/api/performance/index.html +++ b/files/fr/web/api/performance/index.html @@ -11,11 +11,11 @@ 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.

    +

    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.

    @@ -29,8 +29,8 @@ translation_of: Web/API/Performance
    {{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… -
    -

    Indisponible dans les Web Workers.

    +
    +

    Note : Indisponible dans les Web Workers.

    @@ -38,8 +38,8 @@ translation_of: Web/API/Performance
    {{domxref("PerformanceTiming")}} est un objet contenant des informations de performance liées à la latence. -
    -

    Indisponible dans les Web Workers.

    +
    +

    Note : Indisponible dans les Web Workers.

    diff --git a/files/fr/web/api/performance/mark/index.html b/files/fr/web/api/performance/mark/index.html index cdf21108b8..c33a169606 100644 --- a/files/fr/web/api/performance/mark/index.html +++ b/files/fr/web/api/performance/mark/index.html @@ -11,7 +11,7 @@ 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.

    +

    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()")}}).

    diff --git a/files/fr/web/api/performance/measure/index.html b/files/fr/web/api/performance/measure/index.html index 5809124222..74ab333134 100644 --- a/files/fr/web/api/performance/measure/index.html +++ b/files/fr/web/api/performance/measure/index.html @@ -12,7 +12,7 @@ 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 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()")}}.

    diff --git a/files/fr/web/api/performance/navigation/index.html b/files/fr/web/api/performance/navigation/index.html index be37b1487a..b3487091fd 100644 --- a/files/fr/web/api/performance/navigation/index.html +++ b/files/fr/web/api/performance/navigation/index.html @@ -17,11 +17,11 @@ translation_of: Web/API/Performance/navigation ---

    {{Deprecated_Header}}{{APIRef("Navigation Timing")}}

    -
    -

    Cette propriété est dépréciée dans la spécification Navigation Timing Level 2 specification.

    +
    +

    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.

    +

    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.")}} diff --git a/files/fr/web/api/performance/now/index.html b/files/fr/web/api/performance/now/index.html index ae539c7f07..0505c4a6cd 100644 --- a/files/fr/web/api/performance/now/index.html +++ b/files/fr/web/api/performance/now/index.html @@ -12,7 +12,7 @@ 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).

    +

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

    diff --git a/files/fr/web/api/performance/onresourcetimingbufferfull/index.html b/files/fr/web/api/performance/onresourcetimingbufferfull/index.html index 8a8d8bc117..c45a75f39a 100644 --- a/files/fr/web/api/performance/onresourcetimingbufferfull/index.html +++ b/files/fr/web/api/performance/onresourcetimingbufferfull/index.html @@ -11,7 +11,7 @@ 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.

    +

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

    diff --git a/files/fr/web/api/performance/resourcetimingbufferfull_event/index.html b/files/fr/web/api/performance/resourcetimingbufferfull_event/index.html index 08c648e36d..d23ab10aaf 100644 --- a/files/fr/web/api/performance/resourcetimingbufferfull_event/index.html +++ b/files/fr/web/api/performance/resourcetimingbufferfull_event/index.html @@ -13,7 +13,7 @@ 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.

    +

    L'événement resourcetimingbufferfull se déclenche lorsque la mémoire tampon de synchronisation des ressources du navigateur est pleine.

    Propriété
    diff --git a/files/fr/web/api/performance/setresourcetimingbuffersize/index.html b/files/fr/web/api/performance/setresourcetimingbuffersize/index.html index 2f5d479c31..ba6d23eebe 100644 --- a/files/fr/web/api/performance/setresourcetimingbuffersize/index.html +++ b/files/fr/web/api/performance/setresourcetimingbuffersize/index.html @@ -11,7 +11,7 @@ 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 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")}}.

    diff --git a/files/fr/web/api/performance/timeorigin/index.html b/files/fr/web/api/performance/timeorigin/index.html index 77ab71c3b6..014045da71 100644 --- a/files/fr/web/api/performance/timeorigin/index.html +++ b/files/fr/web/api/performance/timeorigin/index.html @@ -14,7 +14,7 @@ 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.

    +

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

    diff --git a/files/fr/web/api/performance/timing/index.html b/files/fr/web/api/performance/timing/index.html index cc26164e41..583aecd811 100644 --- a/files/fr/web/api/performance/timing/index.html +++ b/files/fr/web/api/performance/timing/index.html @@ -16,11 +16,11 @@ translation_of: Web/API/Performance/timing ---

    {{deprecated_header}}{{APIRef("Navigation Timing")}}

    -
    -

    Cette propriété est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface {{domxref("PerformanceNavigationTiming")}} à la place.

    +
    +

    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.

    +

    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.")}} diff --git a/files/fr/web/api/performance/tojson/index.html b/files/fr/web/api/performance/tojson/index.html index 6cf32a8077..3136d2d867 100644 --- a/files/fr/web/api/performance/tojson/index.html +++ b/files/fr/web/api/performance/tojson/index.html @@ -11,7 +11,7 @@ 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.

    +

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

    diff --git a/files/fr/web/api/performance_api/index.html b/files/fr/web/api/performance_api/index.html index adcb3ced5c..261219a03b 100644 --- a/files/fr/web/api/performance_api/index.html +++ b/files/fr/web/api/performance_api/index.html @@ -11,7 +11,9 @@ 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).

    +

    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()")}}.

    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 index 7386e4081a..19924b66cc 100644 --- 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 @@ -11,7 +11,9 @@ 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().

    +

    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.

    diff --git a/files/fr/web/api/performance_timeline/index.html b/files/fr/web/api/performance_timeline/index.html index 0d6975484b..db39bbf9bd 100644 --- a/files/fr/web/api/performance_timeline/index.html +++ b/files/fr/web/api/performance_timeline/index.html @@ -13,7 +13,9 @@ 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.

    +

    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.

    @@ -59,7 +61,9 @@ translation_of: Web/API/Performance_Timeline

    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.

    -

    Les observateurs de performance ont été ajoutés au Niveau 2 de la norme et n'ont pas été implémentés à grande échelle.

    +
    +

    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

    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 index d765a543c8..c3554f1927 100644 --- a/files/fr/web/api/performance_timeline/using_performance_timeline/index.html +++ b/files/fr/web/api/performance_timeline/using_performance_timeline/index.html @@ -10,7 +10,9 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/performanceelementtiming/element/index.html b/files/fr/web/api/performanceelementtiming/element/index.html index fc8b8119f5..1a40658ff7 100644 --- a/files/fr/web/api/performanceelementtiming/element/index.html +++ b/files/fr/web/api/performanceelementtiming/element/index.html @@ -12,7 +12,7 @@ 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é.

    +

    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

    @@ -36,7 +36,9 @@ translation_of: Web/API/PerformanceElementTiming/element }); observer.observe({ entryTypes: ["element"] }); -

    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.

    +
    +

    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

    diff --git a/files/fr/web/api/performanceelementtiming/id/index.html b/files/fr/web/api/performanceelementtiming/id/index.html index 36e2a07b92..f3083cd256 100644 --- a/files/fr/web/api/performanceelementtiming/id/index.html +++ b/files/fr/web/api/performanceelementtiming/id/index.html @@ -12,7 +12,7 @@ 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é.

    +

    La propriété en lecture seule id de l'interface PerformanceElementTiming renvoie l'id de l'élément associé.

    Syntaxe

    @@ -36,7 +36,9 @@ let entries = list.getEntries().forEach(function (entry) { }); observer.observe({ entryTypes: ["element"] }); -

    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.

    +
    +

    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

    diff --git a/files/fr/web/api/performanceelementtiming/identifier/index.html b/files/fr/web/api/performanceelementtiming/identifier/index.html index 9c07117bb3..1fb524cf4f 100644 --- a/files/fr/web/api/performanceelementtiming/identifier/index.html +++ b/files/fr/web/api/performanceelementtiming/identifier/index.html @@ -12,7 +12,7 @@ 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.

    +

    La propriété en lecture seule identifier de l'interface PerformanceElementTiming renvoie la valeur de l'attribut elementtiming sur l'élément.

    Syntaxe

    @@ -36,7 +36,9 @@ translation_of: Web/API/PerformanceElementTiming/identifier }); observer.observe({ entryTypes: ["element"] }); -

    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.

    +
    +

    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

    diff --git a/files/fr/web/api/performanceelementtiming/index.html b/files/fr/web/api/performanceelementtiming/index.html index 03a76a40a5..3a591036d7 100644 --- a/files/fr/web/api/performanceelementtiming/index.html +++ b/files/fr/web/api/performanceelementtiming/index.html @@ -10,7 +10,7 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/performanceelementtiming/intersectionrect/index.html b/files/fr/web/api/performanceelementtiming/intersectionrect/index.html index b37c4e77ea..4954876475 100644 --- a/files/fr/web/api/performanceelementtiming/intersectionrect/index.html +++ b/files/fr/web/api/performanceelementtiming/intersectionrect/index.html @@ -12,7 +12,7 @@ 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).

    +

    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

    @@ -38,7 +38,9 @@ translation_of: Web/API/PerformanceElementTiming/intersectionRect }); observer.observe({ entryTypes: ["element"] }); -

    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.

    +
    +

    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

    diff --git a/files/fr/web/api/performanceelementtiming/loadtime/index.html b/files/fr/web/api/performanceelementtiming/loadtime/index.html index 797edea2d3..28e33d6384 100644 --- a/files/fr/web/api/performanceelementtiming/loadtime/index.html +++ b/files/fr/web/api/performanceelementtiming/loadtime/index.html @@ -12,7 +12,7 @@ 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.

    +

    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

    @@ -36,7 +36,9 @@ translation_of: Web/API/PerformanceElementTiming/loadTime }); observer.observe({ entryTypes: ["element"] }); -

    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.

    +
    +

    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

    diff --git a/files/fr/web/api/performanceelementtiming/naturalheight/index.html b/files/fr/web/api/performanceelementtiming/naturalheight/index.html index ac66fb44ae..204efdc562 100644 --- a/files/fr/web/api/performanceelementtiming/naturalheight/index.html +++ b/files/fr/web/api/performanceelementtiming/naturalheight/index.html @@ -12,7 +12,7 @@ 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.

    +

    La propriété en lecture seule naturalHeight de l'interface PerformanceElementTiming renvoie la hauteur intrinsèque de l'élément image.

    Syntaxe

    @@ -36,7 +36,9 @@ translation_of: Web/API/PerformanceElementTiming/naturalHeight }); observer.observe({ entryTypes: ["element"] }); -

    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.

    +
    +

    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

    diff --git a/files/fr/web/api/performanceelementtiming/naturalwidth/index.html b/files/fr/web/api/performanceelementtiming/naturalwidth/index.html index e284faba40..3e254d3289 100644 --- a/files/fr/web/api/performanceelementtiming/naturalwidth/index.html +++ b/files/fr/web/api/performanceelementtiming/naturalwidth/index.html @@ -12,7 +12,7 @@ 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.

    +

    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;
    @@ -35,7 +35,9 @@ translation_of: Web/API/PerformanceElementTiming/naturalWidth }); observer.observe({ entryTypes: ["element"] }); -

    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.

    +
    +

    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

    diff --git a/files/fr/web/api/performanceelementtiming/rendertime/index.html b/files/fr/web/api/performanceelementtiming/rendertime/index.html index 5e7d247e5a..b541771563 100644 --- a/files/fr/web/api/performanceelementtiming/rendertime/index.html +++ b/files/fr/web/api/performanceelementtiming/rendertime/index.html @@ -12,7 +12,7 @@ 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é.

    +

    La propriété en lecture seule renderTime de l'interface PerformanceElementTiming renvoie le temps écoulé pour le rendu de l'élément associé.

    Syntaxe

    @@ -40,7 +40,9 @@ translation_of: Web/API/PerformanceElementTiming/renderTime }); observer.observe({ entryTypes: ["element"] }); -

    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.

    +
    +

    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

    diff --git a/files/fr/web/api/performanceelementtiming/tojson/index.html b/files/fr/web/api/performanceelementtiming/tojson/index.html index 6d0ff16b06..b0dd7affae 100644 --- a/files/fr/web/api/performanceelementtiming/tojson/index.html +++ b/files/fr/web/api/performanceelementtiming/tojson/index.html @@ -12,7 +12,7 @@ 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.

    +

    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

    @@ -40,7 +40,9 @@ translation_of: Web/API/PerformanceElementTiming/toJSON }); observer.observe({ entryTypes: ["element"] }); -

    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.

    +
    +

    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

    diff --git a/files/fr/web/api/performanceelementtiming/url/index.html b/files/fr/web/api/performanceelementtiming/url/index.html index ed02583ec0..6828122328 100644 --- a/files/fr/web/api/performanceelementtiming/url/index.html +++ b/files/fr/web/api/performanceelementtiming/url/index.html @@ -12,7 +12,7 @@ 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.

    +

    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

    @@ -36,7 +36,9 @@ translation_of: Web/API/PerformanceElementTiming/url }); observer.observe({ entryTypes: ["element"] }); -

    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.

    +
    +

    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

    diff --git a/files/fr/web/api/performanceentry/duration/index.html b/files/fr/web/api/performanceentry/duration/index.html index 14b9f3e4e7..8fa0aa4edf 100644 --- a/files/fr/web/api/performanceentry/duration/index.html +++ b/files/fr/web/api/performanceentry/duration/index.html @@ -12,7 +12,7 @@ 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.

    +

    La propriété duration renvoie un timestamp qui correspond à la durée de l'entrée de performance.

    {{AvailableInWorkers}}

    diff --git a/files/fr/web/api/performanceentry/entrytype/index.html b/files/fr/web/api/performanceentry/entrytype/index.html index f2223e82cd..63ed9dc6c7 100644 --- a/files/fr/web/api/performanceentry/entrytype/index.html +++ b/files/fr/web/api/performanceentry/entrytype/index.html @@ -13,7 +13,7 @@ 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.

    +

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

    diff --git a/files/fr/web/api/performanceentry/index.html b/files/fr/web/api/performanceentry/index.html index 1e7ef376ea..32e388a73b 100644 --- a/files/fr/web/api/performanceentry/index.html +++ b/files/fr/web/api/performanceentry/index.html @@ -12,7 +12,7 @@ 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).

    +

    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 :

    diff --git a/files/fr/web/api/performanceentry/name/index.html b/files/fr/web/api/performanceentry/name/index.html index 1683f51f51..6e8c05fe4e 100644 --- a/files/fr/web/api/performanceentry/name/index.html +++ b/files/fr/web/api/performanceentry/name/index.html @@ -13,7 +13,7 @@ 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.

    +

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

    diff --git a/files/fr/web/api/performanceentry/starttime/index.html b/files/fr/web/api/performanceentry/starttime/index.html index 864d4ac068..e8f625d52f 100644 --- a/files/fr/web/api/performanceentry/starttime/index.html +++ b/files/fr/web/api/performanceentry/starttime/index.html @@ -13,7 +13,7 @@ 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.

    +

    La propriété startTime renvoie le premier timestamp enregistré pour l'entrée de performance.

    {{AvailableInWorkers}}

    diff --git a/files/fr/web/api/performanceentry/tojson/index.html b/files/fr/web/api/performanceentry/tojson/index.html index 13a8c3bb5e..9450e8f3f0 100644 --- a/files/fr/web/api/performanceentry/tojson/index.html +++ b/files/fr/web/api/performanceentry/tojson/index.html @@ -13,7 +13,7 @@ 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.

    +

    La méthode toJSON() permet de sérialiser l'objet PerformanceEntry courant et renvoie une représentation JSON de l'objet.

    {{AvailableInWorkers}}

    diff --git a/files/fr/web/api/performanceeventtiming/index.html b/files/fr/web/api/performanceeventtiming/index.html index 083b200b42..117fefc656 100644 --- a/files/fr/web/api/performanceeventtiming/index.html +++ b/files/fr/web/api/performanceeventtiming/index.html @@ -13,10 +13,9 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/performanceframetiming/index.html b/files/fr/web/api/performanceframetiming/index.html index 118c7296ff..e1c86e7c39 100644 --- a/files/fr/web/api/performanceframetiming/index.html +++ b/files/fr/web/api/performanceframetiming/index.html @@ -13,7 +13,7 @@ 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.

    +

    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.

    diff --git a/files/fr/web/api/performancemark/index.html b/files/fr/web/api/performancemark/index.html index d258deec2b..c8f1c80399 100644 --- a/files/fr/web/api/performancemark/index.html +++ b/files/fr/web/api/performancemark/index.html @@ -11,7 +11,7 @@ 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.

    +

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

    diff --git a/files/fr/web/api/performancemeasure/index.html b/files/fr/web/api/performancemeasure/index.html index 4881a14b70..22c05d1a9a 100644 --- a/files/fr/web/api/performancemeasure/index.html +++ b/files/fr/web/api/performancemeasure/index.html @@ -11,7 +11,7 @@ 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.

    +

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

    diff --git a/files/fr/web/api/performancenavigation/index.html b/files/fr/web/api/performancenavigation/index.html index afb5a5d7d9..ced6eff643 100644 --- a/files/fr/web/api/performancenavigation/index.html +++ b/files/fr/web/api/performancenavigation/index.html @@ -17,7 +17,7 @@ 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.

    diff --git a/files/fr/web/api/performancenavigation/redirectcount/index.html b/files/fr/web/api/performancenavigation/redirectcount/index.html index 8316baaf34..42d9006675 100644 --- a/files/fr/web/api/performancenavigation/redirectcount/index.html +++ b/files/fr/web/api/performancenavigation/redirectcount/index.html @@ -17,7 +17,7 @@ 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.

    diff --git a/files/fr/web/api/performancenavigation/type/index.html b/files/fr/web/api/performancenavigation/type/index.html index 14fc86b915..d203b51da0 100644 --- a/files/fr/web/api/performancenavigation/type/index.html +++ b/files/fr/web/api/performancenavigation/type/index.html @@ -16,7 +16,7 @@ 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.

    diff --git a/files/fr/web/api/performancenavigationtiming/domcomplete/index.html b/files/fr/web/api/performancenavigationtiming/domcomplete/index.html index 4a6d70c7ca..39a3b6d2ec 100644 --- a/files/fr/web/api/performancenavigationtiming/domcomplete/index.html +++ b/files/fr/web/api/performancenavigationtiming/domcomplete/index.html @@ -12,7 +12,7 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/performancenavigationtiming/index.html b/files/fr/web/api/performancenavigationtiming/index.html index bb1fdb48d1..95faf846f3 100644 --- a/files/fr/web/api/performancenavigationtiming/index.html +++ b/files/fr/web/api/performancenavigationtiming/index.html @@ -12,7 +12,7 @@ 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.

    +

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

    @@ -54,8 +54,7 @@ translation_of: Web/API/PerformanceNavigationTiming
    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.
    +
    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}}
    diff --git a/files/fr/web/api/performanceobserver/index.html b/files/fr/web/api/performanceobserver/index.html index 2b52bba127..27831bb210 100644 --- a/files/fr/web/api/performanceobserver/index.html +++ b/files/fr/web/api/performanceobserver/index.html @@ -13,7 +13,7 @@ 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.

    +

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

    diff --git a/files/fr/web/api/performanceobserver/observe/index.html b/files/fr/web/api/performanceobserver/observe/index.html index 60366f066a..b8fdf46703 100644 --- a/files/fr/web/api/performanceobserver/observe/index.html +++ b/files/fr/web/api/performanceobserver/observe/index.html @@ -13,7 +13,7 @@ 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.

    +

    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.

    @@ -31,7 +31,9 @@ translation_of: Web/API/PerformanceObserver/observe
  • 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 ».
  • -

    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.

    +
    +

    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.

    +
    diff --git a/files/fr/web/api/performanceobserver/performanceobserver/index.html b/files/fr/web/api/performanceobserver/performanceobserver/index.html index f0388d0689..41ffd9d82b 100644 --- a/files/fr/web/api/performanceobserver/performanceobserver/index.html +++ b/files/fr/web/api/performanceobserver/performanceobserver/index.html @@ -12,7 +12,7 @@ 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().

    +

    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

    diff --git a/files/fr/web/api/performanceobserverentrylist/getentries/index.html b/files/fr/web/api/performanceobserverentrylist/getentries/index.html index 4d24a1550a..6e86d57d99 100644 --- a/files/fr/web/api/performanceobserverentrylist/getentries/index.html +++ b/files/fr/web/api/performanceobserverentrylist/getentries/index.html @@ -12,10 +12,10 @@ 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).

    +

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

    -
    -

    Remarque : Cette interface est exposée à Window et Worker.

    +
    +

    Note : Cette interface est exposée à Window et Worker.

    Syntaxe

    diff --git a/files/fr/web/api/performanceobserverentrylist/getentriesbyname/index.html b/files/fr/web/api/performanceobserverentrylist/getentriesbyname/index.html index f1a517d93a..b92be9f1a5 100644 --- a/files/fr/web/api/performanceobserverentrylist/getentriesbyname/index.html +++ b/files/fr/web/api/performanceobserverentrylist/getentriesbyname/index.html @@ -12,10 +12,10 @@ 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).

    +

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

    -
    -

    Remarque : Cette interface est exposée à Window et Worker.

    +
    +

    Note : Cette interface est exposée à Window et Worker.

    Syntaxe

    diff --git a/files/fr/web/api/performanceobserverentrylist/getentriesbytype/index.html b/files/fr/web/api/performanceobserverentrylist/getentriesbytype/index.html index cf8e62a58e..8d692a3092 100644 --- a/files/fr/web/api/performanceobserverentrylist/getentriesbytype/index.html +++ b/files/fr/web/api/performanceobserverentrylist/getentriesbytype/index.html @@ -12,10 +12,10 @@ 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).

    +

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

    -
    -

    Remarque : Cette interface est exposée à Window et Worker.

    +
    +

    Note : Cette interface est exposée à Window et Worker.

    Syntaxe

    diff --git a/files/fr/web/api/performanceobserverentrylist/index.html b/files/fr/web/api/performanceobserverentrylist/index.html index 7b1ad9d5cb..14cfeaea9e 100644 --- a/files/fr/web/api/performanceobserverentrylist/index.html +++ b/files/fr/web/api/performanceobserverentrylist/index.html @@ -10,10 +10,10 @@ 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().

    +

    L'interface PerformanceObserverEntryList est une liste d'événements de performance qui ont été explicitement observés via la méthode observe().

    -
    -

    Remarque : Cette interface est exposée à Window et Worker.

    +
    +

    Note : Cette interface est exposée à Window et Worker.

    Méthodes

    diff --git a/files/fr/web/api/performancepainttiming/index.html b/files/fr/web/api/performancepainttiming/index.html index 6fc7c6c392..01214c61c1 100644 --- a/files/fr/web/api/performancepainttiming/index.html +++ b/files/fr/web/api/performancepainttiming/index.html @@ -13,7 +13,7 @@ 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.

    +

    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.

    diff --git a/files/fr/web/api/performanceresourcetiming/connectend/index.html b/files/fr/web/api/performanceresourcetiming/connectend/index.html index a7b5dcf04c..c5c10a2ec5 100644 --- a/files/fr/web/api/performanceresourcetiming/connectend/index.html +++ b/files/fr/web/api/performanceresourcetiming/connectend/index.html @@ -13,7 +13,7 @@ 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.

    +

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

    diff --git a/files/fr/web/api/performanceresourcetiming/connectstart/index.html b/files/fr/web/api/performanceresourcetiming/connectstart/index.html index 198a11274c..31d6fbf5da 100644 --- a/files/fr/web/api/performanceresourcetiming/connectstart/index.html +++ b/files/fr/web/api/performanceresourcetiming/connectstart/index.html @@ -13,7 +13,7 @@ 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.

    +

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

    diff --git a/files/fr/web/api/performanceresourcetiming/decodedbodysize/index.html b/files/fr/web/api/performanceresourcetiming/decodedbodysize/index.html index d7a23cd166..9f83cb80c7 100644 --- a/files/fr/web/api/performanceresourcetiming/decodedbodysize/index.html +++ b/files/fr/web/api/performanceresourcetiming/decodedbodysize/index.html @@ -13,7 +13,7 @@ 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.

    +

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

    diff --git a/files/fr/web/api/performanceresourcetiming/domainlookupend/index.html b/files/fr/web/api/performanceresourcetiming/domainlookupend/index.html index b2c3c38520..be289e3896 100644 --- a/files/fr/web/api/performanceresourcetiming/domainlookupend/index.html +++ b/files/fr/web/api/performanceresourcetiming/domainlookupend/index.html @@ -13,7 +13,7 @@ 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.

    +

    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.

    diff --git a/files/fr/web/api/performanceresourcetiming/domainlookupstart/index.html b/files/fr/web/api/performanceresourcetiming/domainlookupstart/index.html index 34f33fb6c9..0e4ed58d1e 100644 --- a/files/fr/web/api/performanceresourcetiming/domainlookupstart/index.html +++ b/files/fr/web/api/performanceresourcetiming/domainlookupstart/index.html @@ -13,7 +13,7 @@ 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.

    +

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

    diff --git a/files/fr/web/api/performanceresourcetiming/encodedbodysize/index.html b/files/fr/web/api/performanceresourcetiming/encodedbodysize/index.html index ea3c0d6705..567134f104 100644 --- a/files/fr/web/api/performanceresourcetiming/encodedbodysize/index.html +++ b/files/fr/web/api/performanceresourcetiming/encodedbodysize/index.html @@ -13,7 +13,7 @@ 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é.

    +

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

    diff --git a/files/fr/web/api/performanceresourcetiming/fetchstart/index.html b/files/fr/web/api/performanceresourcetiming/fetchstart/index.html index 2deb1ba0e9..9acdd0756b 100644 --- a/files/fr/web/api/performanceresourcetiming/fetchstart/index.html +++ b/files/fr/web/api/performanceresourcetiming/fetchstart/index.html @@ -13,7 +13,7 @@ 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.

    +

    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.

    diff --git a/files/fr/web/api/performanceresourcetiming/index.html b/files/fr/web/api/performanceresourcetiming/index.html index 07f6f67147..708701fc43 100644 --- a/files/fr/web/api/performanceresourcetiming/index.html +++ b/files/fr/web/api/performanceresourcetiming/index.html @@ -12,7 +12,7 @@ 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.

    +

    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.

    diff --git a/files/fr/web/api/performanceresourcetiming/initiatortype/index.html b/files/fr/web/api/performanceresourcetiming/initiatortype/index.html index b63192a685..1d8ed0a780 100644 --- a/files/fr/web/api/performanceresourcetiming/initiatortype/index.html +++ b/files/fr/web/api/performanceresourcetiming/initiatortype/index.html @@ -13,7 +13,7 @@ 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 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:

    diff --git a/files/fr/web/api/performanceresourcetiming/nexthopprotocol/index.html b/files/fr/web/api/performanceresourcetiming/nexthopprotocol/index.html index e08dab0889..dff0c7e8fd 100644 --- a/files/fr/web/api/performanceresourcetiming/nexthopprotocol/index.html +++ b/files/fr/web/api/performanceresourcetiming/nexthopprotocol/index.html @@ -13,7 +13,7 @@ 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).

    +

    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.

    diff --git a/files/fr/web/api/performanceresourcetiming/redirectend/index.html b/files/fr/web/api/performanceresourcetiming/redirectend/index.html index e5474b37b9..15002c1b46 100644 --- a/files/fr/web/api/performanceresourcetiming/redirectend/index.html +++ b/files/fr/web/api/performanceresourcetiming/redirectend/index.html @@ -13,7 +13,7 @@ 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.

    +

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

    diff --git a/files/fr/web/api/performanceresourcetiming/redirectstart/index.html b/files/fr/web/api/performanceresourcetiming/redirectstart/index.html index 626038c80b..106c2de0d3 100644 --- a/files/fr/web/api/performanceresourcetiming/redirectstart/index.html +++ b/files/fr/web/api/performanceresourcetiming/redirectstart/index.html @@ -13,7 +13,7 @@ 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.

    +

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

    diff --git a/files/fr/web/api/performanceresourcetiming/requeststart/index.html b/files/fr/web/api/performanceresourcetiming/requeststart/index.html index de0bec6a29..27e8c19f0d 100644 --- a/files/fr/web/api/performanceresourcetiming/requeststart/index.html +++ b/files/fr/web/api/performanceresourcetiming/requeststart/index.html @@ -13,7 +13,7 @@ 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.

    +

    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.

    diff --git a/files/fr/web/api/performanceresourcetiming/responseend/index.html b/files/fr/web/api/performanceresourcetiming/responseend/index.html index a87722b213..71b45f97b1 100644 --- a/files/fr/web/api/performanceresourcetiming/responseend/index.html +++ b/files/fr/web/api/performanceresourcetiming/responseend/index.html @@ -13,7 +13,7 @@ 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.

    +

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

    diff --git a/files/fr/web/api/performanceresourcetiming/responsestart/index.html b/files/fr/web/api/performanceresourcetiming/responsestart/index.html index bf531b5c93..4279d42446 100644 --- a/files/fr/web/api/performanceresourcetiming/responsestart/index.html +++ b/files/fr/web/api/performanceresourcetiming/responsestart/index.html @@ -13,7 +13,7 @@ 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.

    +

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

    diff --git a/files/fr/web/api/performanceresourcetiming/secureconnectionstart/index.html b/files/fr/web/api/performanceresourcetiming/secureconnectionstart/index.html index 605fa47e55..1b5487516a 100644 --- a/files/fr/web/api/performanceresourcetiming/secureconnectionstart/index.html +++ b/files/fr/web/api/performanceresourcetiming/secureconnectionstart/index.html @@ -13,7 +13,7 @@ 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.

    +

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

    diff --git a/files/fr/web/api/performanceresourcetiming/servertiming/index.html b/files/fr/web/api/performanceresourcetiming/servertiming/index.html index 7ff22aa4fa..0a1b96fc82 100644 --- a/files/fr/web/api/performanceresourcetiming/servertiming/index.html +++ b/files/fr/web/api/performanceresourcetiming/servertiming/index.html @@ -14,7 +14,7 @@ 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.

    +

    La propriété en lecture seule serverTiming retourne un tableau d'entrées PerformanceServerTiming contenant des mesures de synchronisation du serveur.

    Syntaxe

    diff --git a/files/fr/web/api/performanceresourcetiming/tojson/index.html b/files/fr/web/api/performanceresourcetiming/tojson/index.html index 224bf123bc..8385dcbafa 100644 --- a/files/fr/web/api/performanceresourcetiming/tojson/index.html +++ b/files/fr/web/api/performanceresourcetiming/tojson/index.html @@ -13,7 +13,7 @@ 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.

    +

    La méthode toJSON() est un sérialiseur qui retourne une représentation JSON de l'objet PerformanceResourceTiming.

    Syntaxe

    diff --git a/files/fr/web/api/performanceresourcetiming/transfersize/index.html b/files/fr/web/api/performanceresourcetiming/transfersize/index.html index 87dfa3535e..bd19c4db5f 100644 --- a/files/fr/web/api/performanceresourcetiming/transfersize/index.html +++ b/files/fr/web/api/performanceresourcetiming/transfersize/index.html @@ -13,7 +13,7 @@ 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).

    +

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

    diff --git a/files/fr/web/api/performanceresourcetiming/workerstart/index.html b/files/fr/web/api/performanceresourcetiming/workerstart/index.html index 086f82b9b7..8a6c2cbede 100644 --- a/files/fr/web/api/performanceresourcetiming/workerstart/index.html +++ b/files/fr/web/api/performanceresourcetiming/workerstart/index.html @@ -13,7 +13,7 @@ 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.

    +

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

    diff --git a/files/fr/web/api/performanceservertiming/description/index.html b/files/fr/web/api/performanceservertiming/description/index.html index 15919ceccd..68062d8a27 100644 --- a/files/fr/web/api/performanceservertiming/description/index.html +++ b/files/fr/web/api/performanceservertiming/description/index.html @@ -13,7 +13,7 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/performanceservertiming/duration/index.html b/files/fr/web/api/performanceservertiming/duration/index.html index dc61670775..7fc0241d4b 100644 --- a/files/fr/web/api/performanceservertiming/duration/index.html +++ b/files/fr/web/api/performanceservertiming/duration/index.html @@ -13,7 +13,7 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/performanceservertiming/index.html b/files/fr/web/api/performanceservertiming/index.html index 6f9bbd6e6f..25e1d58e01 100644 --- a/files/fr/web/api/performanceservertiming/index.html +++ b/files/fr/web/api/performanceservertiming/index.html @@ -11,7 +11,7 @@ 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.

    +

    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.

    diff --git a/files/fr/web/api/performanceservertiming/name/index.html b/files/fr/web/api/performanceservertiming/name/index.html index 4b8ec5b587..f4834fdcaa 100644 --- a/files/fr/web/api/performanceservertiming/name/index.html +++ b/files/fr/web/api/performanceservertiming/name/index.html @@ -13,7 +13,7 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/performanceservertiming/tojson/index.html b/files/fr/web/api/performanceservertiming/tojson/index.html index 0b7773e322..4c0822c293 100644 --- a/files/fr/web/api/performanceservertiming/tojson/index.html +++ b/files/fr/web/api/performanceservertiming/tojson/index.html @@ -13,7 +13,7 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/performancetiming/connectend/index.html b/files/fr/web/api/performancetiming/connectend/index.html index 6ac529c501..036aec20a5 100644 --- a/files/fr/web/api/performancetiming/connectend/index.html +++ b/files/fr/web/api/performancetiming/connectend/index.html @@ -16,11 +16,11 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/performancetiming/connectstart/index.html b/files/fr/web/api/performancetiming/connectstart/index.html index bd8848d20a..f4b1f27534 100644 --- a/files/fr/web/api/performancetiming/connectstart/index.html +++ b/files/fr/web/api/performancetiming/connectstart/index.html @@ -16,11 +16,11 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/performancetiming/domainlookupend/index.html b/files/fr/web/api/performancetiming/domainlookupend/index.html index 6bddef76dd..20a26c397b 100644 --- a/files/fr/web/api/performancetiming/domainlookupend/index.html +++ b/files/fr/web/api/performancetiming/domainlookupend/index.html @@ -16,11 +16,11 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/performancetiming/domainlookupstart/index.html b/files/fr/web/api/performancetiming/domainlookupstart/index.html index d35d4eac99..45020fe7b6 100644 --- a/files/fr/web/api/performancetiming/domainlookupstart/index.html +++ b/files/fr/web/api/performancetiming/domainlookupstart/index.html @@ -16,11 +16,11 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/performancetiming/domcomplete/index.html b/files/fr/web/api/performancetiming/domcomplete/index.html index a8b3d0b028..27e1c9484b 100644 --- a/files/fr/web/api/performancetiming/domcomplete/index.html +++ b/files/fr/web/api/performancetiming/domcomplete/index.html @@ -16,11 +16,11 @@ 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é.

    +

    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

    diff --git a/files/fr/web/api/performancetiming/domcontentloadedeventend/index.html b/files/fr/web/api/performancetiming/domcontentloadedeventend/index.html index d09d8e22c6..a593001111 100644 --- a/files/fr/web/api/performancetiming/domcontentloadedeventend/index.html +++ b/files/fr/web/api/performancetiming/domcontentloadedeventend/index.html @@ -16,11 +16,11 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/performancetiming/domcontentloadedeventstart/index.html b/files/fr/web/api/performancetiming/domcontentloadedeventstart/index.html index e19dca26ee..fe2f9588ae 100644 --- a/files/fr/web/api/performancetiming/domcontentloadedeventstart/index.html +++ b/files/fr/web/api/performancetiming/domcontentloadedeventstart/index.html @@ -16,11 +16,11 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/performancetiming/dominteractive/index.html b/files/fr/web/api/performancetiming/dominteractive/index.html index 87e2648a84..6d96a184da 100644 --- a/files/fr/web/api/performancetiming/dominteractive/index.html +++ b/files/fr/web/api/performancetiming/dominteractive/index.html @@ -16,11 +16,11 @@ 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é.

    +

    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.

    diff --git a/files/fr/web/api/performancetiming/domloading/index.html b/files/fr/web/api/performancetiming/domloading/index.html index 7e252ffe86..c8ebdceeea 100644 --- a/files/fr/web/api/performancetiming/domloading/index.html +++ b/files/fr/web/api/performancetiming/domloading/index.html @@ -16,11 +16,11 @@ 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é.

    +

    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

    diff --git a/files/fr/web/api/performancetiming/fetchstart/index.html b/files/fr/web/api/performancetiming/fetchstart/index.html index 5b8193e731..78701f3386 100644 --- a/files/fr/web/api/performancetiming/fetchstart/index.html +++ b/files/fr/web/api/performancetiming/fetchstart/index.html @@ -16,11 +16,11 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/performancetiming/index.html b/files/fr/web/api/performancetiming/index.html index a743e13d51..7da667936a 100644 --- a/files/fr/web/api/performancetiming/index.html +++ b/files/fr/web/api/performancetiming/index.html @@ -17,11 +17,11 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/performancetiming/loadeventend/index.html b/files/fr/web/api/performancetiming/loadeventend/index.html index 46df8ff041..e7ee2a6989 100644 --- a/files/fr/web/api/performancetiming/loadeventend/index.html +++ b/files/fr/web/api/performancetiming/loadeventend/index.html @@ -16,11 +16,11 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/performancetiming/loadeventstart/index.html b/files/fr/web/api/performancetiming/loadeventstart/index.html index 037c50dbe1..ca6d2dd5c7 100644 --- a/files/fr/web/api/performancetiming/loadeventstart/index.html +++ b/files/fr/web/api/performancetiming/loadeventstart/index.html @@ -16,11 +16,11 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/performancetiming/navigationstart/index.html b/files/fr/web/api/performancetiming/navigationstart/index.html index 1ce9e75b82..76fce74f7b 100644 --- a/files/fr/web/api/performancetiming/navigationstart/index.html +++ b/files/fr/web/api/performancetiming/navigationstart/index.html @@ -16,11 +16,11 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/performancetiming/redirectend/index.html b/files/fr/web/api/performancetiming/redirectend/index.html index 84cea2911a..fe8213d131 100644 --- a/files/fr/web/api/performancetiming/redirectend/index.html +++ b/files/fr/web/api/performancetiming/redirectend/index.html @@ -16,11 +16,11 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/performancetiming/redirectstart/index.html b/files/fr/web/api/performancetiming/redirectstart/index.html index 35bdf3f8db..fcea481323 100644 --- a/files/fr/web/api/performancetiming/redirectstart/index.html +++ b/files/fr/web/api/performancetiming/redirectstart/index.html @@ -16,11 +16,11 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/performancetiming/requeststart/index.html b/files/fr/web/api/performancetiming/requeststart/index.html index 96ce2e454a..653f3b8feb 100644 --- a/files/fr/web/api/performancetiming/requeststart/index.html +++ b/files/fr/web/api/performancetiming/requeststart/index.html @@ -16,11 +16,11 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/performancetiming/responseend/index.html b/files/fr/web/api/performancetiming/responseend/index.html index b4b1d436d3..ea05b6efd3 100644 --- a/files/fr/web/api/performancetiming/responseend/index.html +++ b/files/fr/web/api/performancetiming/responseend/index.html @@ -16,11 +16,11 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/performancetiming/responsestart/index.html b/files/fr/web/api/performancetiming/responsestart/index.html index e5130ffc08..67ac9329ea 100644 --- a/files/fr/web/api/performancetiming/responsestart/index.html +++ b/files/fr/web/api/performancetiming/responsestart/index.html @@ -16,11 +16,11 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/performancetiming/secureconnectionstart/index.html b/files/fr/web/api/performancetiming/secureconnectionstart/index.html index c23334901d..8031002a2a 100644 --- a/files/fr/web/api/performancetiming/secureconnectionstart/index.html +++ b/files/fr/web/api/performancetiming/secureconnectionstart/index.html @@ -16,11 +16,11 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/performancetiming/unloadeventend/index.html b/files/fr/web/api/performancetiming/unloadeventend/index.html index 6ecbcdfe0e..03a0cbe390 100644 --- a/files/fr/web/api/performancetiming/unloadeventend/index.html +++ b/files/fr/web/api/performancetiming/unloadeventend/index.html @@ -16,11 +16,11 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/performancetiming/unloadeventstart/index.html b/files/fr/web/api/performancetiming/unloadeventstart/index.html index 432ccc7870..c97032703f 100644 --- a/files/fr/web/api/performancetiming/unloadeventstart/index.html +++ b/files/fr/web/api/performancetiming/unloadeventstart/index.html @@ -16,11 +16,11 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/plugin/index.html b/files/fr/web/api/plugin/index.html index 78cb5c4e9a..cfb0919f6d 100644 --- a/files/fr/web/api/plugin/index.html +++ b/files/fr/web/api/plugin/index.html @@ -15,10 +15,10 @@ translation_of: Web/API/Plugin

    L'interface Plugin fournit des informations à propos d'un plugin du navigateur.

    -

    Remarque: Les propriétés propres des objets Plugin ne sont plus énumérables dans les dernières versions des navigateurs.

    +

    Note : Les propriétés propres des objets Plugin ne sont plus énumérables dans les dernières versions des navigateurs.

    -

    Propriétés

    +

    Propriétés

    {{domxref("Plugin.description")}} {{readonlyinline}}
    @@ -31,7 +31,7 @@ translation_of: Web/API/Plugin
    Le numéro de version du plugin, en chaîne de caractères.
    -

    Méthodes

    +

    Méthodes

    {{domxref("Plugin.item")}}
    diff --git a/files/fr/web/api/pointer_events/index.html b/files/fr/web/api/pointer_events/index.html index b8f5de1c8b..0e26e4cbda 100644 --- a/files/fr/web/api/pointer_events/index.html +++ b/files/fr/web/api/pointer_events/index.html @@ -23,16 +23,16 @@ translation_of: Web/API/Pointer_events
    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)
    +
    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
    +
    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
    +
    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.
    +
    événement de pointeur
    +
    Un {{domxref("PointerEvent","événement")}} DOM déclenché pour un pointeur.

    Interfaces

    @@ -141,7 +141,7 @@ translation_of: Web/API/Pointer_events

    This example registers a handler for every event type for the given element.

    -
    <html>
    +
    <html>
     <script>
     function over_handler(event) { }
     function enter_handler(event) { }
    @@ -179,7 +179,7 @@ function init() {
     
     

    This example illustrates accessing all of a touch event's properties.

    -
    <html>
    +
    <html>
     <script>
     var id = -1;
     
    @@ -310,7 +310,7 @@ function init() {
     
     

    The following example shows pointer capture being set on an element.

    -
    <html>
    +
    <html>
     <script>
     function downHandler(ev) {
      var el=document.getElementById("target");
    @@ -330,7 +330,7 @@ function init() {
     
     

    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>
    +
    <html>
     <script>
     function downHandler(ev) {
      var el=document.getElementById("target");
    @@ -363,7 +363,7 @@ function init() {
     
     

    In the following example, the browser's default touch behavior is disabled for the div element.

    -
    <html>
    +
    <html>
     <body>
      <div style="touch-action:none;">Can't touch this ... </div>
     </body>
    @@ -372,14 +372,14 @@ function init() {
     
     

    In the following example, default touch behavior is disabled for some button elements.

    -
    button#tiny {
    +
    button#tiny {
       touch-action: none;
     }
     

    In the following example, when the target element is touched, it will only pan in the horizontal direction.

    -
    #target {
    +
    #target {
       touch-action: pan-x;
     }
     
    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 index deccfa13ca..70a6466883 100644 --- a/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.html +++ b/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.html @@ -15,7 +15,7 @@ original_slug: Web/API/Pointer_events/gestes_pincer_zoom

    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.

    +

    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

    @@ -151,7 +151,9 @@ var prevDiff = -1;

    Cette application utilise un élément {{HTMLElement("div")}} comme zone de toucher et fournit des boutons pour activer et nettoyer les logs.

    -

    Pour empêcher que le comportement par défaut du navigateur au toucher surcharge le gestionnaire de l'application, la propriété {{cssxref("touch-action")}} est appliquée à l'élément {{HTMLElement("body")}}.

    +
    +

    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/>
    diff --git a/files/fr/web/api/pointer_lock_api/index.html b/files/fr/web/api/pointer_lock_api/index.html
    index 4e72873553..d5921f5b20 100644
    --- a/files/fr/web/api/pointer_lock_api/index.html
    +++ b/files/fr/web/api/pointer_lock_api/index.html
    @@ -19,9 +19,9 @@ original_slug: WebAPI/Pointer_Lock
      
    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

    +

    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 :

    +

    Pointer Lock partage des similtudes avec la capture de souris. La capture de souris offre un flot ininterrompu d'évènements sur un élément cible quand la souris glisse mais s'arrête quand le bouton est relaché. Pour cette raison, Pointer lock diffère de la capture de souris sur les points suivants :

    • Persistance. Pointer lock ne libère pas la souris tant qu'un appel explicite à l'API n'a pas été effectué ou que l'utilisateur n'a pas fait un mouvement spécifique.
    • @@ -30,7 +30,7 @@ original_slug: WebAPI/Pointer_Lock
    • Cache le curseur.
    -

    Vue d'ensemble des méthodes/propriétées

    +

    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.

    @@ -79,7 +79,7 @@ if (document.pointerLockElement === someElement) { document.exitPointerLock();
    -

    Événement pointerlockchange

    +

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

    @@ -100,7 +100,7 @@ document.addEventListener('mozpointerlockchange', pointerLockChange, false); document.addEventListener('webkitpointerlockchange', pointerLockChange, false);
    -

    Événement pointerlockerror

    +

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

    @@ -113,27 +113,29 @@ function lockError(e) { }
    -
    Note: Jusqu'à Firefox 50, les événements ci-dessus étaient préfixés avec moz.
    +
    +

    Note : Jusqu'à Firefox 50, les événements ci-dessus étaient préfixés avec moz.

    +
    -

    Extensions aux événements de souris

    +

    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é

    +

    É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é

    +

    É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

    +

    Simple exemple pas à pas

    Nous avons écrit une démo de verrouillage de pointer pour vous montrer comment l'utiliser pour mettre en place un système de contrôle simple (voir le code source). La démo ressemble à ça:

    -

    A red circle on top of a black background.

    +

    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.

    diff --git a/files/fr/web/api/pointerevent/index.html b/files/fr/web/api/pointerevent/index.html index 3ca9b1d943..b17aaefffb 100644 --- a/files/fr/web/api/pointerevent/index.html +++ b/files/fr/web/api/pointerevent/index.html @@ -56,7 +56,9 @@ translation_of: Web/API/PointerEvent

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

    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')}}
    diff --git a/files/fr/web/api/positionoptions/maximumage/index.html b/files/fr/web/api/positionoptions/maximumage/index.html index 42abffa48a..72314738ca 100644 --- a/files/fr/web/api/positionoptions/maximumage/index.html +++ b/files/fr/web/api/positionoptions/maximumage/index.html @@ -5,7 +5,7 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/positionoptions/timeout/index.html b/files/fr/web/api/positionoptions/timeout/index.html index e0f9e323dd..4454f93754 100644 --- a/files/fr/web/api/positionoptions/timeout/index.html +++ b/files/fr/web/api/positionoptions/timeout/index.html @@ -5,7 +5,7 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/processinginstruction/index.html b/files/fr/web/api/processinginstruction/index.html index a3f73f97c0..3db3784969 100644 --- a/files/fr/web/api/processinginstruction/index.html +++ b/files/fr/web/api/processinginstruction/index.html @@ -19,25 +19,25 @@ translation_of: Web/API/ProcessingInstruction

    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.

    +

    Les instructions de traitement héritent des méthodes et propriétés de Node.

    {{InheritanceDiagram(700,70)}}

    -

    Attributs

    +

    Attributs

      -
    • target (cible) (DOMString) (chaîne de caractères) - après le <? et avant un whitespace (espace) le séparant des data (données)
    • +
    • target (cible) (DOMString) (chaîne de caractères) - après le <? et avant un whitespace (espace) le séparant des data (données)
    • data (données) (DOMString) (chaîne de caractères) - premier caractère non espace après target et avant ?>
    -

    Spécification

    +

    Spécification

    -

    Voir aussi

    +

    Voir aussi

    diff --git a/files/fr/web/api/push_api/index.html b/files/fr/web/api/push_api/index.html index 58f02a4931..cb167263e3 100644 --- a/files/fr/web/api/push_api/index.html +++ b/files/fr/web/api/push_api/index.html @@ -16,17 +16,17 @@ translation_of: Web/API/Push_API

    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.

    +

    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

    -

    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 :

    +

    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 :

    @@ -36,16 +36,16 @@ translation_of: Web/API/Push_API

    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.

    +

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

    +

    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

    @@ -105,7 +105,7 @@ translation_of: Web/API/Push_API diff --git a/files/fr/web/api/pushevent/index.html b/files/fr/web/api/pushevent/index.html index 6b3f68af8e..58b2e0e31f 100644 --- a/files/fr/web/api/pushevent/index.html +++ b/files/fr/web/api/pushevent/index.html @@ -30,10 +30,10 @@ translation_of: Web/API/PushEvent
    {{domxref("PushEvent.data")}} {{readonlyinline}}
    -
    Retourne une référence à un objet {{domxref("PushMessageData")}} contenant les données transmises au {{domxref("PushSubscription")}}.
    +
    Retourne une référence à un objet {{domxref("PushMessageData")}} contenant les données transmises au {{domxref("PushSubscription")}}.
    -

    Méthodes

    +

    Méthodes

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

    diff --git a/files/fr/web/api/queuemicrotask/index.html b/files/fr/web/api/queuemicrotask/index.html index cced10b9e4..043382a45d 100644 --- a/files/fr/web/api/queuemicrotask/index.html +++ b/files/fr/web/api/queuemicrotask/index.html @@ -25,7 +25,9 @@ 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.

    +

    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.

    diff --git a/files/fr/web/api/range/createcontextualfragment/index.html b/files/fr/web/api/range/createcontextualfragment/index.html index 90209b4a20..6f9342d87d 100644 --- a/files/fr/web/api/range/createcontextualfragment/index.html +++ b/files/fr/web/api/range/createcontextualfragment/index.html @@ -5,19 +5,19 @@ 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

    +

    Syntaxe

    documentFragment = range.createContextualFragment( chaineHTML )
     
    -

    Paramètres

    +

    Paramètres

    chaineHTML
    Une chaîne contenant du texte et des balises à convertir en un fragment de document.
    -

    Exemple

    +

    Exemple

    var chaineHTML = "<div>Je suis un nœud div<div>";
     var range = document.createRange();
    diff --git a/files/fr/web/api/range/extractcontents/index.html b/files/fr/web/api/range/extractcontents/index.html
    index 3c2dc3377a..dd0d7a672d 100644
    --- a/files/fr/web/api/range/extractcontents/index.html
    +++ b/files/fr/web/api/range/extractcontents/index.html
    @@ -11,7 +11,7 @@ translation_of: Web/API/Range/extractContents
     
     

    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

    +

    Syntaxe

    documentFragment = range.extractContents();
     
    diff --git a/files/fr/web/api/range/index.html b/files/fr/web/api/range/index.html index c42a83b4ea..a17b45d829 100644 --- a/files/fr/web/api/range/index.html +++ b/files/fr/web/api/range/index.html @@ -5,13 +5,13 @@ translation_of: Web/API/Range ---

    {{ ApiRef() }}

    -

    Introduction

    +

    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

    +

    Propriétés

    collapsed
    @@ -28,9 +28,9 @@ translation_of: Web/API/Range
    Renvoie un nombre représentant l'endroit où le segment débute dans startContainer.
    -

    Méthodes

    +

    Méthodes

    -

    Méthodes de positionnement

    +

    Méthodes de positionnement

    Ces méthodes permettent de définir le début et la fin d'un segment.

    @@ -55,7 +55,7 @@ translation_of: Web/API/Range
    Replie le segment sur l'un de ses points frontières.
    -

    Méthodes de modification

    +

    Méthodes de modification

    Ces méthodes recupèrent les nœuds d'un segment et modifient le contenu d'un segment.

    @@ -72,7 +72,7 @@ translation_of: Web/API/Range
    Déplace le contenu d'un segment dans un nouveau nœud.
    -

    Autres méthodes

    +

    Autres méthodes

    compareBoundaryPoints
    @@ -85,7 +85,7 @@ translation_of: Web/API/Range
    Renvoie le texte du segment.
    -

    Les méthodes Gecko

    +

    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.

    @@ -100,12 +100,4 @@ translation_of: Web/API/Range
    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.
    - - -

    Liens Interwikis

    - -

     

    - -
     
    - -

    {{ languages( { "en": "en/DOM/range", "es": "es/DOM/range", "ja": "ja/DOM/range", "pl": "pl/DOM/range" } ) }}

    + \ No newline at end of file diff --git a/files/fr/web/api/range/selectnode/index.html b/files/fr/web/api/range/selectnode/index.html index 2cbc7f7624..25e418cc4d 100644 --- a/files/fr/web/api/range/selectnode/index.html +++ b/files/fr/web/api/range/selectnode/index.html @@ -12,26 +12,26 @@ translation_of: Web/API/Range/selectNode

    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

    +

    Syntaxe

    range.selectNode(noeudDeReference);
     
    -

    Paramètres

    +

    Paramètres

    noeudDeReference
    Le {{domxref("Node")}} à choisir à l'intérieur d'un {domxref("Range")}}.
    -

    Exemple

    +

    Exemple

    var range = document.createRange();
     var noeudDeReference = document.getElementsByTagName("div").item(0);
     
     range.selectNode(noeudDeReference);
    -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/range/setstart/index.html b/files/fr/web/api/range/setstart/index.html index 1ae3662b22..019a481c37 100644 --- a/files/fr/web/api/range/setstart/index.html +++ b/files/fr/web/api/range/setstart/index.html @@ -14,23 +14,23 @@ translation_of: Web/API/Range/setStart

    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.

    +

    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

    +

    Syntaxe

    range.setStart(startNode, startOffset);
     
    -

    Paramètres

    +

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

    +

    Example

    var range = document.createRange();
     var startNode = document.getElementsByTagName("p").item(2);
    diff --git a/files/fr/web/api/range/surroundcontents/index.html b/files/fr/web/api/range/surroundcontents/index.html
    index 86a49e1398..4b8b6fa87e 100644
    --- a/files/fr/web/api/range/surroundcontents/index.html
    +++ b/files/fr/web/api/range/surroundcontents/index.html
    @@ -16,7 +16,7 @@ range.insertNode(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

    +

    Syntaxe

    range.surroundContents(newNode);
     
    @@ -28,7 +28,7 @@ range.insertNode(newNode)
    Un {{ domxref("Node") }} à insérer à l’emplacement du range.
    -

    Exemple

    +

    Exemple

    var range = document.createRange();
     var newNode = document.createElement("p");
    @@ -37,7 +37,7 @@ range.selectNode(document.getElementsByTagName("div").item(0));
     range.surroundContents(newNode);
     
    -

    Spécifications

    +

    Spécifications

    @@ -66,5 +66,5 @@ range.surroundContents(newNode);

    Voir aussi

    diff --git a/files/fr/web/api/request/index.html b/files/fr/web/api/request/index.html index 3a2f14df82..cc9160f5c2 100644 --- a/files/fr/web/api/request/index.html +++ b/files/fr/web/api/request/index.html @@ -86,14 +86,14 @@ translation_of: Web/API/Request
    -

    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.

    +

    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 request = new Request('https://www.mozilla.org/favicon.ico');
     
     const URL = request.url;
     const method = request.method;
    @@ -102,7 +102,7 @@ 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)
    +
    fetch(request)
       .then(response => response.blob())
       .then(blob => {
         image.src = URL.createObjectURL(blob);
    @@ -110,7 +110,7 @@ const credentials = request.credentials;
     
     

    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 request = new Request('https://example.com', {method: 'POST', body: '{"foo": "bar"}'});
     
     const URL = request.url;
     const method = request.method;
    @@ -124,7 +124,7 @@ const bodyUsed = request.bodyUsed;
     
     

    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)
    +
    fetch(request)
       .then(response => {
         if (response.status === 200) {
           return response.json();
    diff --git a/files/fr/web/api/request/mode/index.html b/files/fr/web/api/request/mode/index.html
    index 1e1c82d317..d051e937d6 100644
    --- a/files/fr/web/api/request/mode/index.html
    +++ b/files/fr/web/api/request/mode/index.html
    @@ -10,7 +10,7 @@ translation_of: Web/API/Request/mode
     
    • same-origin — Avec ce mode défini, si la requête est faite vers une autre origine, le résultat sera une erreur. Vous pouvez utiliser ceci afin de vous assurer que la requête sera toujours faites vers votre origine.
    • no-cors — Prévient la méthode d’une utilisation autre que HEAD, GET ou POST. Si un ServiceWorkers interceptait ces requêtes, il ne pourrait pas ajouter ou réécrire ces en-têtes excepté pour ceci. De plus, JavaScript ne peut accéder à aucune propriété de la {{domxref("Response")}}. Cela vous assure que les ServiceWorkers n’affecteront pas la sémantique du Web et prévient pour des raisons de sécurité et de confidentialité pouvant mener à la fuite de données à travers les domaines.
    • -
    • cors — Permet les requêtes cross-origin pour, par exemple, accéder à diverses APIs fournies par de tierces parties. Ces derniers sont censés adhérer au protocole CORS. Seul un jeu limité d’en-têtes est exposé dans la {{domxref("Response")}}, mais le corps (body) est lisible.
    • +
    • cors — Permet les requêtes cross-origin pour, par exemple, accéder à diverses APIs fournies par de tierces parties. Ces derniers sont censés adhérer au protocole CORS. Seul un jeu limité d’en-têtes est exposé dans la {{domxref("Response")}}, mais le corps (body) est lisible.
    • navigate — Un mode pour supporter la navigation. La valeur navigate est destinée à être utilisée seulement par la navigation HTML. Une requête navigate est créée seulement lorsqu’on navigue entre des documents.
    diff --git a/files/fr/web/api/request/request/index.html b/files/fr/web/api/request/request/index.html index 1eca86dcda..bea6114c46 100644 --- a/files/fr/web/api/request/request/index.html +++ b/files/fr/web/api/request/request/index.html @@ -121,13 +121,11 @@ 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);
    +
    var copie = new Request(maRequete);
     
    -
    -

    Note : Cette dernière utilisation n'est probablement utile que dans ServiceWorkers.

    +

    Note : Cette dernière utilisation n'est probablement utile que dans ServiceWorkers.

    Spécifications

    diff --git a/files/fr/web/api/resize_observer_api/index.html b/files/fr/web/api/resize_observer_api/index.html index e7dc99f213..7a52b0c837 100644 --- a/files/fr/web/api/resize_observer_api/index.html +++ b/files/fr/web/api/resize_observer_api/index.html @@ -51,7 +51,7 @@ translation_of: Web/API/Resize_Observer_API

    Le code suivra usuellement ce genre de modèle (tiré de resize-observer-border-radius.html):

    -
    const resizeObserver = new ResizeObserver(entries => {
    +
    const resizeObserver = new ResizeObserver(entries => {
       for (let entry of entries) {
         if(entry.contentBoxSize) {
           entry.target.style.borderRadius = Math.min(100, (entry.contentBoxSize.inlineSize/10) +
    diff --git a/files/fr/web/api/rtciceserver/index.html b/files/fr/web/api/rtciceserver/index.html
    index b5965fc34b..8974d49f65 100644
    --- a/files/fr/web/api/rtciceserver/index.html
    +++ b/files/fr/web/api/rtciceserver/index.html
    @@ -25,7 +25,7 @@ translation_of: Web/API/RTCIceServer
     

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

    -

    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.

    +

    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

    diff --git a/files/fr/web/api/rtcpeerconnection/setconfiguration/index.html b/files/fr/web/api/rtcpeerconnection/setconfiguration/index.html index dc85b1039a..152e67aa86 100644 --- a/files/fr/web/api/rtcpeerconnection/setconfiguration/index.html +++ b/files/fr/web/api/rtcpeerconnection/setconfiguration/index.html @@ -28,7 +28,7 @@ translation_of: Web/API/RTCPeerConnection/setConfiguration
    RTCPeerConnection.setConfiguration(configuration);
    -

    Paramètres

    +

    Paramètres

    configuration
    diff --git a/files/fr/web/api/screen_capture_api/index.html b/files/fr/web/api/screen_capture_api/index.html index 6ba5ed0468..3bfc553102 100644 --- a/files/fr/web/api/screen_capture_api/index.html +++ b/files/fr/web/api/screen_capture_api/index.html @@ -19,7 +19,7 @@ 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.

    +

    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

    @@ -31,7 +31,7 @@ translation_of: Web/API/Screen_Capture_API

    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.

    +

    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

    diff --git a/files/fr/web/api/scriptprocessornode/audioprocess_event/index.html b/files/fr/web/api/scriptprocessornode/audioprocess_event/index.html index 7cea375a1b..266207b731 100644 --- a/files/fr/web/api/scriptprocessornode/audioprocess_event/index.html +++ b/files/fr/web/api/scriptprocessornode/audioprocess_event/index.html @@ -102,5 +102,5 @@ original_slug: Web/Events/audioprocess

    Voir aussi

    diff --git a/files/fr/web/api/selection/index.html b/files/fr/web/api/selection/index.html index b6dc3d0940..d01facda6d 100644 --- a/files/fr/web/api/selection/index.html +++ b/files/fr/web/api/selection/index.html @@ -5,11 +5,11 @@ translation_of: Web/API/Selection ---

    {{ ApiRef() }}

    -

    Résumé

    +

    Résumé

    -

    La classe de l'objet retourné par window.getSelection(), document.getSelection() et d'autres méthodes.

    +

    La classe de l'objet retourné par window.getSelection(), document.getSelection() et d'autres méthodes.

    -

    Description

    +

    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 :

    @@ -22,7 +22,7 @@ translation_of: Web/API/Selection window.alert(selObj);
    -

    Glossaire

    +

    Glossaire

    Autres mots clés utilisés dans cette section.

    @@ -35,7 +35,7 @@ window.alert(selObj);
    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

    +

    Propriétés

    anchorNode
    @@ -52,7 +52,7 @@ window.alert(selObj);
    Renvoie le nombre de « plages » dans la sélection.
    -

    Méthodes

    +

    Méthodes

    getRangeAt
    @@ -83,24 +83,18 @@ window.alert(selObj);
    Indique si un nœud donné appartient à la sélection.
    -

    Compatibilité des navigateurs

    +

    Compatibilité des navigateurs

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

    -

    Voir aussi

    +

    Voir aussi

    -

    window.getSelectiondocument.getSelection(),Range

    +

    window.getSelectiondocument.getSelection(),Range

    -

    Liens externes

    +

    Liens externes

    - -

     

    - -
     
    - -

    {{ languages( { "en": "en/DOM/Selection", "es": "es/DOM/Selection", "it": "it/DOM/Selection", "ja": "ja/DOM/selection", "pl": "pl/DOM/Selection" } ) }}

    +
  • Définition IDL dans Mozilla cross-reference
  • + \ 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 index 760100faa5..c0e4836d47 100644 --- a/files/fr/web/api/selection/tostring/index.html +++ b/files/fr/web/api/selection/tostring/index.html @@ -6,26 +6,23 @@ tags: translation_of: Web/API/Selection/toString ---

    {{ ApiRef() }}

    -

    Résumé

    +

    Résumé

    Renvoie une chaîne de caractères représentant l'actuel objet selection, i.e. le texte sélectionné.

    -

    Syntaxe

    +

    Syntaxe

    string =sel.toString()
     
    • string est la représentation sous la forme d'une chaîne de caractères de la sélection.
    -

    Paramètres

    +

    Paramètres

    Aucun.

    -

    Description

    +

    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

    +

    Voir aussi

    -
    -  
    -

    {{ languages( { "en": "en/DOM/Selection/toString", "es": "es/DOM/Selection/toString", "it": "it/DOM/Selection/toString", "pl": "pl/DOM/Selection/toString" } ) }}

    + \ No newline at end of file diff --git a/files/fr/web/api/server-sent_events/index.html b/files/fr/web/api/server-sent_events/index.html index 83f6130c35..8bbfc6079e 100644 --- a/files/fr/web/api/server-sent_events/index.html +++ b/files/fr/web/api/server-sent_events/index.html @@ -8,49 +8,39 @@ 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

    - - - - - - -
    +

    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 index bb817baf5a..0d6c1aa33a 100644 --- 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 @@ -51,8 +51,8 @@ translation_of: Web/API/Server-sent_events/Using_server-sent_events

    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.

    -
    -

    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.

    +
    +

    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

    @@ -99,7 +99,7 @@ while (true) {

    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.

    +

    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

    @@ -122,7 +122,7 @@ while (true) {

    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.

    +

    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.

    @@ -145,7 +145,7 @@ while (true) {

    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.

    +

    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

    diff --git a/files/fr/web/api/service_worker_api/index.html b/files/fr/web/api/service_worker_api/index.html index 0ef299c60c..76f29f0ca6 100644 --- a/files/fr/web/api/service_worker_api/index.html +++ b/files/fr/web/api/service_worker_api/index.html @@ -14,23 +14,23 @@ translation_of: Web/API/Service_Worker_API

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

    +

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

    -

    Remarque : 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 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.

    -

    Remarque : 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.

    +

    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

    @@ -64,7 +64,7 @@ translation_of: Web/API/Service_Worker_API

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

    -

    Remarque : 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.

    +

    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.

    @@ -86,7 +86,7 @@ translation_of: Web/API/Service_Worker_API

    À 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 :

      -
    • Synchronisation en arrière-plan : démarrer un service worker même lorsqu'aucun utilisateur est sur le site, afin de mettre à jour les caches, etc.
    • +
    • Synchronisation en arrière-plan : démarrer un service worker même lorsqu'aucun utilisateur est sur le site, afin de mettre à jour les caches, etc.
    • Réagir à des messages de push : démarrer un service worker pour envoyer aux utilisateurs un message leur signalant qu'un nouveau contenu est disponible.
    • Réagir à une date particulière
    • Enregistrer une géo-localisation
    • @@ -165,10 +165,10 @@ translation_of: Web/API/Service_Worker_API

      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 index 8225067a3b..1af137c1f5 100644 --- 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 @@ -13,9 +13,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers

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

      @@ -24,7 +22,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers 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.

      -

      Remarque : à 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")}}.)

      +

      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.

      @@ -43,8 +41,6 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers

      Architecture de base

      -

      -

      Avec les service workers, les étapes suivantes sont généralement observées pour une configuration simple :

        @@ -57,6 +53,8 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers
      1. 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.
      +

      +

      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.
      @@ -67,7 +65,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers

      sync

      -
      try {
      +
      try {
         var value = myFunction();
         console.log(value);
       } catch(err) {
      @@ -76,7 +74,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers
       
       

      async

      -
      myFunction().then(function(value) {
      +
      myFunction().then(function(value) {
         console.log(value);
         }).catch(function(err) {
         console.log(err);
      @@ -89,10 +87,10 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers
        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.)

      -

      Remarque : 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.

      +

      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) {
      +
      function imgLoad(url) {
         return new Promise(function(resolve, reject) {
           var request = new XMLHttpRequest();
           request.open('GET', url);
      @@ -118,7 +116,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers
       
       

      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 body = document.querySelector('body');
       var myImage = new Image();
       
       imgLoad('myLittleVader.jpg').then(function(response) {
      @@ -134,22 +132,21 @@ imgLoad('myLittleVader.jpg').then(function(response) {
       

      Le tout se déroule de manière asynchrone.

      -

      Remarque : il est possible d'assembler des appels de promesse, par exemple:
      +

      Note : il est possible d'assembler des appels de promesse, par exemple:
      myPromise().then(success, failure).then(success).catch(failure);

      -

      Remarque : pour en savoir plus sur les promesses, consulter l'excellent article de Jake Archibald JavaScript Promises: there and back again.

      +

      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 :

      +

      + +

      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. @@ -165,7 +162,7 @@ imgLoad('myLittleVader.jpg').then(function(response) {

        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) {
        +
        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);
        @@ -188,11 +185,11 @@ imgLoad('myLittleVader.jpg').then(function(response) {
          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.

        -

        Remarque : 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 : 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.

        -

        Remarque : 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.

        +

        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 ?

        @@ -212,12 +209,12 @@ imgLoad('myLittleVader.jpg').then(function(response) { 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.

        -

        Remarque : 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.

        +

        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) {
        +
        this.addEventListener('install', function(event) {
           event.waitUntil(
             caches.open('v1').then(function(cache) {
               return cache.addAll([
        @@ -244,11 +241,11 @@ imgLoad('myLittleVader.jpg').then(function(response) {
         
      -

      Remarque : 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 : 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.

      -

      Remarque : IndexedDB peut être utilisé dans un service worker pour le stockage des donnés si nécessaire.

      +

      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

      @@ -259,7 +256,7 @@ imgLoad('myLittleVader.jpg').then(function(response) {

      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) {
      +
      this.addEventListener('fetch', function(event) {
         event.respondWith(
           // la magie opère ici
         );
      @@ -267,7 +264,7 @@ imgLoad('myLittleVader.jpg').then(function(response) {
       
       

      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) {
      +
      this.addEventListener('fetch', function(event) {
         event.respondWith(
           caches.match(event.request)
         );
      @@ -281,29 +278,29 @@ imgLoad('myLittleVader.jpg').then(function(response) {
        
    • 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!');
      +
      new Response('Hello from your friendly neighbourhood service worker!');
    • 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>', {
      +  
      new Response('<p>Hello from your friendly neighbourhood service worker!</p>', {
         headers: { 'Content-Type': 'text/html' }
       })
    • 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)
      +
      fetch(event.request)
    • 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');
      +
      caches.match('/fallback.html');
    • 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.url
       event.request.method
       event.request.headers
       event.request.body
      @@ -316,7 +313,7 @@ event.request.body

      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) {
      +
      this.addEventListener('fetch', function(event) {
         event.respondWith(
           caches.match(event.request).catch(function() {
             return fetch(event.request);
      @@ -328,7 +325,7 @@ event.request.body

      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) {
      +
      this.addEventListener('fetch', function(event) {
         event.respondWith(
           caches.match(event.request).catch(function() {
             return fetch(event.request).then(function(response) {
      @@ -347,7 +344,7 @@ event.request.body

      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) {
      +
      this.addEventListener('fetch', function(event) {
         event.respondWith(
           caches.match(event.request).catch(function() {
             return fetch(event.request).then(function(response) {
      @@ -368,7 +365,7 @@ event.request.body

      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) {
      +
      this.addEventListener('fetch', function(event) {
         var response;
         event.respondWith(caches.match(event.request).catch(function() {
           return fetch(event.request);
      @@ -383,13 +380,13 @@ event.request.body
        })); });
      -

      Mettre à jour le service worker

      +

      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) {
      +
      this.addEventListener('install', function(event) {
         event.waitUntil(
           caches.open('v2').then(function(cache) {
             return cache.addAll([
      @@ -417,7 +414,7 @@ event.request.body

      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) {
      +
      this.addEventListener('activate', function(event) {
         var cacheWhitelist = ['v2'];
       
         event.waitUntil(
      @@ -438,7 +435,7 @@ event.request.body

      Firefox a aussi commencé à implanter quelques outils utiles concernant les service workers :

        -
      • Consulter about:serviceworkers pour voir quels SWs sont enregistrés et les mettre à jour ou les supprimer.
      • +
      • Consulter about:serviceworkers pour voir quels SWs sont enregistrés et les mettre à jour ou les supprimer.
      • Lors de tests, il est possible de contourner la restriction HTTPS en cochant l'option "Activer les Service Workers via HTTP (lorsque la boîte à outils est ouverte)" dans les options des outils de développement de Firefox (la roue dentée dans le menu.)
      diff --git a/files/fr/web/api/serviceworker/index.html b/files/fr/web/api/serviceworker/index.html index ebd6289046..97c6688183 100644 --- a/files/fr/web/api/serviceworker/index.html +++ b/files/fr/web/api/serviceworker/index.html @@ -13,11 +13,11 @@ 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.

      +

      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.

      +

      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

      @@ -45,7 +45,7 @@ translation_of: Web/API/ServiceWorker

      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) {
      +
      if ('serviceWorker' in navigator) {
         navigator.serviceWorker
           .register('service-worker.js', {
             scope: './'
      diff --git a/files/fr/web/api/serviceworkercontainer/getregistration/index.html b/files/fr/web/api/serviceworkercontainer/getregistration/index.html
      index 131b781087..d18712f2ff 100644
      --- a/files/fr/web/api/serviceworkercontainer/getregistration/index.html
      +++ b/files/fr/web/api/serviceworkercontainer/getregistration/index.html
      @@ -9,7 +9,7 @@ translation_of: Web/API/ServiceWorkerContainer/getRegistration
       
       

      Syntaxe

      -
      serviceWorkerContainer.getRegistration(scope).then(function(serviceWorkerRegistration) { ... });
      +
      serviceWorkerContainer.getRegistration(scope).then(function(serviceWorkerRegistration) { ... });

      Paramètres

      @@ -24,7 +24,7 @@ translation_of: Web/API/ServiceWorkerContainer/getRegistration

      Exemple

      -
      navigator.serviceWorker.getRegistration('/app').then(function(registration) {
      +
      navigator.serviceWorker.getRegistration('/app').then(function(registration) {
         if(registration){
           document.querySelector('#status').textContent = 'ServiceWorkerRegistration found.';
         }
      diff --git a/files/fr/web/api/serviceworkercontainer/index.html b/files/fr/web/api/serviceworkercontainer/index.html
      index 885de0d20d..9201074b47 100644
      --- a/files/fr/web/api/serviceworkercontainer/index.html
      +++ b/files/fr/web/api/serviceworkercontainer/index.html
      @@ -13,7 +13,7 @@ translation_of: Web/API/ServiceWorkerContainer
       
       
      {{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.
      +
      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.
      @@ -38,9 +38,9 @@ translation_of: Web/API/ServiceWorkerContainer
      {{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
      +
      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
      +
      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

      @@ -89,9 +89,9 @@ translation_of: Web/API/ServiceWorkerContainer

      Voir aussi

      diff --git a/files/fr/web/api/serviceworkercontainer/register/index.html b/files/fr/web/api/serviceworkercontainer/register/index.html index 6ddc659fd9..ebb85bd058 100644 --- a/files/fr/web/api/serviceworkercontainer/register/index.html +++ b/files/fr/web/api/serviceworkercontainer/register/index.html @@ -14,15 +14,15 @@ 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.

      +

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

      +

      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)
      +
      serviceWorkerContainer.register(scriptURL, options)
         .then(function(serviceWorkerRegistration) { ... })

      Paramètres

      @@ -31,9 +31,9 @@ translation_of: Web/API/ServiceWorkerContainer/register
      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: +
      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.
      • +
      • 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".
      @@ -42,7 +42,7 @@ translation_of: Web/API/ServiceWorkerContainer/register

      Valeur de retour

      -

      Une {{jsxref("Promise")}} qui se résout avec un objet {{domxref("ServiceWorkerRegistration")}}.

      +

      Une {{jsxref("Promise")}} qui se résout avec un objet {{domxref("ServiceWorkerRegistration")}}.

      Exemples

      @@ -50,7 +50,7 @@ translation_of: Web/API/ServiceWorkerContainer/register

      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) {
      +
      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(
      @@ -69,7 +69,7 @@ translation_of: Web/API/ServiceWorkerContainer/register
       
       

      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) {
      +
      if ('serviceWorker' in navigator) {
         // declaring scope manually
         navigator.serviceWorker.register('/sw.js', { scope: './' }).then(
           (registration) => {
      @@ -88,7 +88,7 @@ translation_of: Web/API/ServiceWorkerContainer/register
       
       

      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) {
      +
      if ('serviceWorker' in navigator) {
         // declaring scope manually
         navigator.serviceWorker.register('/sw.js', { scope: '/product/' }).then(
           (registration) => {
      @@ -102,7 +102,7 @@ translation_of: Web/API/ServiceWorkerContainer/register
         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.

      +

      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

      diff --git a/files/fr/web/api/serviceworkerglobalscope/index.html b/files/fr/web/api/serviceworkerglobalscope/index.html index a114ee3ee4..49afb28427 100644 --- a/files/fr/web/api/serviceworkerglobalscope/index.html +++ b/files/fr/web/api/serviceworkerglobalscope/index.html @@ -92,7 +92,7 @@ translation_of: Web/API/ServiceWorkerGlobalScope

      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) {
      +
      self.addEventListener('fetch', function(event) {
         console.log('Handling fetch event for', event.request.url);
       
         event.respondWith(
      @@ -146,7 +146,7 @@ translation_of: Web/API/ServiceWorkerGlobalScope
       
       
      diff --git a/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.html b/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.html
      index fea0aee57c..a3dedb93af 100644
      --- a/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.html
      +++ b/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.html
      @@ -13,23 +13,23 @@ 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()")}}.

      +

      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.

      +

      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

      +

      Syntaxe

      -
      ServiceWorkerGlobalScope.onnotificationclick = function(NotificationEvent) { ... }
      +
      ServiceWorkerGlobalScope.onnotificationclick = function(NotificationEvent) { ... }
       ServiceWorkerGlobalScope.onnotificationclick = (NotificationEvent) => { ... }
       

      Exemple

      -
      self.onnotificationclick = (event) => {
      +
      self.onnotificationclick = (event) => {
         console.log('On notification click: ', event.notification.tag)
         event.notification.close()
       
      @@ -56,7 +56,7 @@ ServiceWorkerGlobalScope.onnotificationclick = (NotificationEvent) => { ... }
       
      -   
      +   
      diff --git a/files/fr/web/api/serviceworkerregistration/active/index.html b/files/fr/web/api/serviceworkerregistration/active/index.html
      index 72ef793946..257fc3eb90 100644
      --- a/files/fr/web/api/serviceworkerregistration/active/index.html
      +++ b/files/fr/web/api/serviceworkerregistration/active/index.html
      @@ -5,33 +5,33 @@ 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.

      +

      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.

      +

      Note : Cette fonctionnalité est disponible dans les Web Workers.

      -

      Syntaxe

      +

      Syntaxe

      -
      sw = ServiceWorker.active
      +
      sw = ServiceWorker.active
       

      Valeur

      Un objet {{domxref("ServiceWorker")}}, si le worker est actuellement dans un état activating ou activated.

      -

      Spécifications

      +

      Spécifications

       
      SpécificationSpécification État Commentaire
      - - - + + + diff --git a/files/fr/web/api/serviceworkerregistration/getnotifications/index.html b/files/fr/web/api/serviceworkerregistration/getnotifications/index.html index da50d1745a..23379e7520 100644 --- a/files/fr/web/api/serviceworkerregistration/getnotifications/index.html +++ b/files/fr/web/api/serviceworkerregistration/getnotifications/index.html @@ -15,11 +15,11 @@ 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.

      +

      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)
      +
      s​erviceWorkerRegistration.getNotifications(options)
       .then(function(notificationsList) { ... })

      Paramétres

      @@ -39,7 +39,7 @@ translation_of: Web/API/ServiceWorkerRegistration/getNotifications

      Exemple

      -
      navigator.serviceWorker.register('sw.js')
      +
      navigator.serviceWorker.register('sw.js')
       
       const options = { tag: 'user_alerts' }
       
      diff --git a/files/fr/web/api/serviceworkerregistration/index.html b/files/fr/web/api/serviceworkerregistration/index.html
      index 15606c9603..7412dfa554 100644
      --- a/files/fr/web/api/serviceworkerregistration/index.html
      +++ b/files/fr/web/api/serviceworkerregistration/index.html
      @@ -18,12 +18,12 @@ 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 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.

      +

      Note : This feature is available in Web Workers.

      Properties

      @@ -33,17 +33,17 @@ translation_of: Web/API/ServiceWorkerRegistration
      {{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}}
      +
      {{domxref("ServiceWorkerRegistration.installing")}}{{readonlyinline}}
      Returns a service worker whose state is installing. This is initially set to null.
      -
      {{domxref("ServiceWorkerRegistration.waiting")}} {{readonlyinline}}
      +
      {{domxref("ServiceWorkerRegistration.waiting")}}{{readonlyinline}}
      Returns a service worker whose state is waiting. This is initially set to null.
      -
      {{domxref("ServiceWorkerRegistration.active")}} {{readonlyinline}}
      +
      {{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}} 
      +
      {{domxref("ServiceWorkerRegistration.sync")}} {{non-standard_inline}} {{readonlyinline}} 
      Returns a reference to the {{domxref("SyncManager")}} interface, which manages background synchronization processes.
      @@ -58,7 +58,7 @@ translation_of: Web/API/ServiceWorkerRegistration
      {{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.
      +
      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

      diff --git a/files/fr/web/api/serviceworkerregistration/scope/index.html b/files/fr/web/api/serviceworkerregistration/scope/index.html index 63627cbb8a..19ef530db5 100644 --- a/files/fr/web/api/serviceworkerregistration/scope/index.html +++ b/files/fr/web/api/serviceworkerregistration/scope/index.html @@ -13,15 +13,15 @@ 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")}}.

      +

      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.

      +

      Note : Cette fonctionnalité est disponible dans Web Workers.

      -

      Syntaxe

      +

      Syntaxe

      -
      serviceWorkerRegistration.scope
      +
      serviceWorkerRegistration.scope

      Spécifications

      diff --git a/files/fr/web/api/serviceworkerregistration/shownotification/index.html b/files/fr/web/api/serviceworkerregistration/shownotification/index.html index d65ab4a999..fa1c3dfab1 100644 --- a/files/fr/web/api/serviceworkerregistration/shownotification/index.html +++ b/files/fr/web/api/serviceworkerregistration/shownotification/index.html @@ -14,10 +14,10 @@ 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.

      +

      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.

      +

      Note : Cette fonctionnalité est disponible dans les Web Workers.

      Syntaxe

      diff --git a/files/fr/web/api/settimeout/index.html b/files/fr/web/api/settimeout/index.html index 351b32953b..c487fcc22f 100644 --- a/files/fr/web/api/settimeout/index.html +++ b/files/fr/web/api/settimeout/index.html @@ -34,7 +34,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/setTimeout
      -

      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.

      +

      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

      @@ -85,7 +85,7 @@ function clearAlert() {

      Note : Voir aussi les exemples pour clearTimeout().

      -

      Prothèse d'émulation (polyfill)

      +

      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 :

      @@ -217,7 +217,9 @@ setTimeout.call(monTableau, monTableau.maMéthode, 2500, 2);

      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.

      +
      +

      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 :

      @@ -254,7 +256,7 @@ 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

      +

      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.

      @@ -262,30 +264,30 @@ window.setTimeout("console.log('Coucou monde !');", 500);

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

      +

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

      +

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

      diff --git a/files/fr/web/api/shadowroot/delegatesfocus/index.html b/files/fr/web/api/shadowroot/delegatesfocus/index.html index 033fbf323e..a42192a6a2 100644 --- a/files/fr/web/api/shadowroot/delegatesfocus/index.html +++ b/files/fr/web/api/shadowroot/delegatesfocus/index.html @@ -13,8 +13,8 @@ translation_of: Web/API/ShadowRoot/delegatesFocus

      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.

      +
      +

      Attention : Cette fonctionnalité est expérimentale, non-standard et uniquement disponible dans Chrome.

      Syntaxe

      diff --git a/files/fr/web/api/sharedworker/index.html b/files/fr/web/api/sharedworker/index.html index 8aaece5361..1e5e6b0351 100644 --- a/files/fr/web/api/sharedworker/index.html +++ b/files/fr/web/api/sharedworker/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/SharedWorker

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

      -

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

      +

      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

      @@ -45,45 +45,45 @@ translation_of: Web/API/SharedWorker

      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.

      +

      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");
      +
      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();
      +
      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');
      -  }
      +
      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');
      -  }
      +  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');
      -  }
      + 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];
      +
      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.onmessage = function(e) {
      +      var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
      +      port.postMessage(workerResult);
      +    }
       
      -    port.start();
      -}
      + port.start(); +}

      Spécifications

      @@ -102,7 +102,7 @@ translation_of: Web/API/SharedWorker
      SpécificationStatutCommentaireSpécificationStatutCommentaire
      {{SpecName('Service Workers', '#service-worker-registration-active-attribute', 'ServiceWorkerRegistration.active')}}
      -

      Compatibilité des navigateurs

      +

      Compatibilité des navigateurs

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

      @@ -110,5 +110,5 @@ translation_of: Web/API/SharedWorker diff --git a/files/fr/web/api/sharedworker/port/index.html b/files/fr/web/api/sharedworker/port/index.html index 80605091d8..22bd830ee7 100644 --- a/files/fr/web/api/sharedworker/port/index.html +++ b/files/fr/web/api/sharedworker/port/index.html @@ -22,7 +22,7 @@ translation_of: Web/API/SharedWorker/port
      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é.)

      +

      Pour un exemple complet, voir (en) Exemple basique de worker partagé ((en) démonstration d'un worker partagé.)

      Spécifications

      diff --git a/files/fr/web/api/sharedworker/sharedworker/index.html b/files/fr/web/api/sharedworker/sharedworker/index.html index fb98ecbe33..c4c35fb16d 100644 --- a/files/fr/web/api/sharedworker/sharedworker/index.html +++ b/files/fr/web/api/sharedworker/sharedworker/index.html @@ -8,7 +8,7 @@ translation_of: Web/API/SharedWorker/SharedWorker

      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.

      -

      Remarque: 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.

      +

      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

      @@ -68,7 +68,7 @@ myWorker.port.onmessage = function(e) { console.log('Message received from worker'); }
      -

      Pour l'exemple en complet, voir Basic shared worker example (run shared worker.)

      +

      Pour l'exemple en complet, voir Basic shared worker example (run shared worker.)

      Spécifications

      diff --git a/files/fr/web/api/sharedworkerglobalscope/applicationcache/index.html b/files/fr/web/api/sharedworkerglobalscope/applicationcache/index.html index 1d2fde68f1..7440932b75 100644 --- a/files/fr/web/api/sharedworkerglobalscope/applicationcache/index.html +++ b/files/fr/web/api/sharedworkerglobalscope/applicationcache/index.html @@ -6,7 +6,7 @@ translation_of: Web/API/SharedWorkerGlobalScope/applicationCache
      {{APIRef("Web Workers API")}}
      -

      Important: 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.

      +

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

      @@ -25,7 +25,7 @@ translation_of: Web/API/SharedWorkerGlobalScope/applicationCache
      self.applicationCache
      -

      Compatibilité des navigateurs

      +

      Compatibilité des navigateurs

      diff --git a/files/fr/web/api/sharedworkerglobalscope/onconnect/index.html b/files/fr/web/api/sharedworkerglobalscope/onconnect/index.html index 1609e094ba..88b05cd2d7 100644 --- a/files/fr/web/api/sharedworkerglobalscope/onconnect/index.html +++ b/files/fr/web/api/sharedworkerglobalscope/onconnect/index.html @@ -28,10 +28,10 @@ translation_of: Web/API/SharedWorkerGlobalScope/onconnect port.start(); }
      -

      Pour l'exemple complet en fonctionnement, voir Basic shared worker example (run shared worker.)

      +

      Pour l'exemple complet en fonctionnement, voir Basic shared worker example (run shared worker.)

      -
      -

      Remarque: 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)}}).

      +
      +

      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

      @@ -51,7 +51,7 @@ translation_of: Web/API/SharedWorkerGlobalScope/onconnect -

      Compatibilité des navigateurs

      +

      Compatibilité des navigateurs

      diff --git a/files/fr/web/api/speechrecognition/index.html b/files/fr/web/api/speechrecognition/index.html index cfb56e343e..60b7ce9ab6 100644 --- a/files/fr/web/api/speechrecognition/index.html +++ b/files/fr/web/api/speechrecognition/index.html @@ -5,7 +5,7 @@ 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.

      +

      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

      diff --git a/files/fr/web/api/storage/clear/index.html b/files/fr/web/api/storage/clear/index.html index 8d9d33100a..c177f94657 100644 --- a/files/fr/web/api/storage/clear/index.html +++ b/files/fr/web/api/storage/clear/index.html @@ -34,7 +34,7 @@ translation_of: Web/API/Storage/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.

      +

      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

      @@ -63,5 +63,5 @@ translation_of: Web/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 index a81ccb0ccf..1e3f950436 100644 --- a/files/fr/web/api/storage/getitem/index.html +++ b/files/fr/web/api/storage/getitem/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Storage/getItem

      Syntax

      -
      var aValue = storage.getItem(keyName);
      +
      var aValue = storage.getItem(keyName);
       

      Paramètre

      @@ -31,7 +31,7 @@ translation_of: Web/API/Storage/getItem

      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() {
      +
      function setStyles() {
         var currentColor = localStorage.getItem('bgcolor');
         var currentFont = localStorage.getItem('font');
         var currentImage = localStorage.getItem('image');
      @@ -46,7 +46,7 @@ translation_of: Web/API/Storage/getItem
       }
      -

      Note: Pour voir cette fonction utilisée dans un exemple réel, dirigez-vous vers notre Demo de Stockage Web (en).

      +

      Note : Pour voir cette fonction utilisée dans un exemple réel, dirigez-vous vers notre Demo de Stockage Web (en).

      Spécifications

      @@ -74,4 +74,4 @@ translation_of: Web/API/Storage/getItem

      Voir aussi

      -

      Utilisation de l'API de stockage web

      +

      Utilisation de l'API de stockage web

      diff --git a/files/fr/web/api/storage/key/index.html b/files/fr/web/api/storage/key/index.html index 50cbfaaabe..97e9160b4c 100644 --- a/files/fr/web/api/storage/key/index.html +++ b/files/fr/web/api/storage/key/index.html @@ -40,7 +40,7 @@ translation_of: Web/API/Storage/key }
      -

      Note: Pour un exemple plus poussé, consultez la Web Storage Demo.

      +

      Note : Pour un exemple plus poussé, consultez la Web Storage Demo.

      Autre exemple

      diff --git a/files/fr/web/api/storage/length/index.html b/files/fr/web/api/storage/length/index.html index 09ccc26c76..b8479be8fa 100644 --- a/files/fr/web/api/storage/length/index.html +++ b/files/fr/web/api/storage/length/index.html @@ -34,7 +34,7 @@ translation_of: Web/API/Storage/length }
      -

      Note : Pour voir ceci utilisé dans un exemple concret, regardez notre Web Storage Demo.

      +

      Note : Pour voir ceci utilisé dans un exemple concret, regardez notre Web Storage Demo.

      Spécifications

      diff --git a/files/fr/web/api/storage/removeitem/index.html b/files/fr/web/api/storage/removeitem/index.html index f978fceb95..40a61a48e0 100644 --- a/files/fr/web/api/storage/removeitem/index.html +++ b/files/fr/web/api/storage/removeitem/index.html @@ -16,12 +16,12 @@ translation_of: Web/API/Storage/removeItem

      Syntaxe

      -
      storage.removeItem(nomCle);
      +
      storage.removeItem(nomCle);

      Paramètres

      -
      nomCle
      +
      nomCle
      Un {{domxref("DOMString")}} contenant le nom de la clé que vous voulez supprimer.
      @@ -33,7 +33,7 @@ translation_of: Web/API/Storage/removeItem

      La fonction suivante crée trois données dans le stockage local, puis va supprimer la donnée image.

      -
      function populateStorage() {
      +
      function populateStorage() {
         localStorage.setItem('bgcolor', 'red');
         localStorage.setItem('font', 'Helvetica');
         localStorage.setItem('image', 'myCat.png');
      @@ -43,7 +43,7 @@ translation_of: Web/API/Storage/removeItem
       
       

      Nous pouvons également faire ceci avec le stockage de session.

      -
      function populateStorage() {
      +
      function populateStorage() {
         sessionStorage.setItem('bgcolor', 'red');
         sessionStorage.setItem('font', 'Helvetica');
         sessionStorage.setItem('image', 'myCat.png');
      @@ -52,7 +52,7 @@ translation_of: Web/API/Storage/removeItem
       }
      -

      Note: Pour voir ce code en fonctionnement, voir Web Storage Demo.

      +

      Note : Pour voir ce code en fonctionnement, voir Web Storage Demo.

      Spécifications

      @@ -80,4 +80,4 @@ translation_of: Web/API/Storage/removeItem

      Voir aussi

      -

      Utilisation de l'API de stockage Web

      +

      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 index 88bc71a4d1..ce945681ff 100644 --- a/files/fr/web/api/storage/setitem/index.html +++ b/files/fr/web/api/storage/setitem/index.html @@ -45,7 +45,7 @@ translation_of: Web/API/Storage/setItem }
      -

      Note : Pour voir ceci utilisé dans un exemple concret, regardez notre Web Storage Demo.

      +

      Note : Pour voir ceci utilisé dans un exemple concret, regardez notre Web Storage Demo.

      Spécifications

      diff --git a/files/fr/web/api/storage_api/index.html b/files/fr/web/api/storage_api/index.html index 69ea4358b3..fe7135c1d3 100644 --- a/files/fr/web/api/storage_api/index.html +++ b/files/fr/web/api/storage_api/index.html @@ -26,7 +26,7 @@ translation_of: Web/API/Storage_API

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

      -

      A diagram showing how the site storage pool consists of multiple storage units that contain data from various APIs as well as possible unused space left before the quota is reached.

      +

      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.

      • L’origine 1 a des données Web Storage ainsi que des données IndexedDB, mais a également un peu d’espace libre restant ; son utilisation actuelle n’a pas encore atteint son quota.
      • @@ -54,7 +54,7 @@ translation_of: Web/API/Storage_API

        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.

        +

        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.

        diff --git a/files/fr/web/api/storagemanager/estimate/index.html b/files/fr/web/api/storagemanager/estimate/index.html index 3b069c91ba..c94942b615 100644 --- a/files/fr/web/api/storagemanager/estimate/index.html +++ b/files/fr/web/api/storagemanager/estimate/index.html @@ -21,7 +21,7 @@ translation_of: Web/API/StorageManager/estimate

        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

        +

        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.

        diff --git a/files/fr/web/api/storagemanager/persist/index.html b/files/fr/web/api/storagemanager/persist/index.html index 7509749363..8a8c15f76f 100644 --- a/files/fr/web/api/storagemanager/persist/index.html +++ b/files/fr/web/api/storagemanager/persist/index.html @@ -5,7 +5,7 @@ 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.

        +

        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

        diff --git a/files/fr/web/api/storagemanager/persisted/index.html b/files/fr/web/api/storagemanager/persisted/index.html index 10e6503ecb..35fcfa12c2 100644 --- a/files/fr/web/api/storagemanager/persisted/index.html +++ b/files/fr/web/api/storagemanager/persisted/index.html @@ -5,7 +5,7 @@ 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.

        +

        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

        diff --git a/files/fr/web/api/streams_api/index.html b/files/fr/web/api/streams_api/index.html index 83771cdb3f..3bce14616c 100644 --- a/files/fr/web/api/streams_api/index.html +++ b/files/fr/web/api/streams_api/index.html @@ -5,7 +5,7 @@ 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.

        +

        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

        @@ -15,7 +15,7 @@ translation_of: Web/API/Streams_API

        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.

        @@ -26,7 +26,7 @@ translation_of: Web/API/Streams_API

        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.

        +

        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

        @@ -74,7 +74,7 @@ translation_of: Web/API/Streams_API

        Interfaces liées aux flux d'octets

        -

        Important: 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.

        +

        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.

        @@ -96,7 +96,7 @@ translation_of: Web/API/Streams_API
      • Simple random stream: This example shows how to use a custom stream to generate random strings, enqueue them as chunks, and then read them back out again.
      • Simple tee example: This example extends the Simple random stream example, showing how a stream can be teed and both resulting streams can be read independently.
      • Simple writer: This example shows how to to write to a writable stream, then decode the stream and write the contents to the UI.
      • -
      • Unpack chunks of a PNG: This example shows how pipeThrough() can be used to transform a ReadableStream into a stream of other data types by transforming a data of a PNG file into a stream of PNG chunks.
      • +
      • Unpack chunks of a PNG: This example shows how pipeThrough() can be used to transform a ReadableStream into a stream of other data types by transforming a data of a PNG file into a stream of PNG chunks.

      Examples from other developers:

      diff --git a/files/fr/web/api/stylesheet/disabled/index.html b/files/fr/web/api/stylesheet/disabled/index.html index d338299bf1..681c2c6795 100644 --- a/files/fr/web/api/stylesheet/disabled/index.html +++ b/files/fr/web/api/stylesheet/disabled/index.html @@ -3,23 +3,23 @@ title: StyleSheet.disabled slug: Web/API/StyleSheet/disabled translation_of: Web/API/StyleSheet/disabled --- -
      {{APIRef("CSSOM")}}
      +
      {{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).

      +

      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

      +

      Syntaxe

      -
      bool = stylesheet.disabled
      -
      +
      bool = stylesheet.disabled
      +
      -

      Exemple

      +

      Exemple

      -
      // si la feuille de style est désactivé ... 
      -si (stylesheet.disabled) {
      -   // appliquer le style en ligne 
      +
      // si la feuille de style est désactivé ... 
      +si (stylesheet.disabled) {
      +   // appliquer le style en ligne 
       }
       
      -

      spécification

      +

      spécification

      -

      désactivée

      +

      désactivée

      diff --git a/files/fr/web/api/stylesheet/href/index.html b/files/fr/web/api/stylesheet/href/index.html index f1ff1da5ea..730d459303 100644 --- a/files/fr/web/api/stylesheet/href/index.html +++ b/files/fr/web/api/stylesheet/href/index.html @@ -3,49 +3,47 @@ title: Stylesheet.href slug: Web/API/StyleSheet/href translation_of: Web/API/StyleSheet/href --- -
      {{APIRef ("CSSOM")}}
      +
      {{APIRef ("CSSOM")}}
      -

      Résumé

      +

      Renvoie l'emplacement de la feuille de style.

      -

      Renvoie l'emplacement de la feuille de style.

      +

      Syntaxe

      -

      Syntaxe

      - -
      Uri = stylesheet.href
      -
      +
      Uri = stylesheet.href
      +
      -

      Paramètres

      +

      Paramètres

        -
      • uri Est une chaîne contenant l'URI de la feuille de style.
      • +
      • uri Est une chaîne contenant l'URI de la feuille de style.
      -

      Exemple

      - -
       // sur une machine locale: 
      - <Html> 
      -  <Tête> 
      -   <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
      +

      Exemple

      + +
       // sur une machine locale: 
      + <Html> 
      +  <Tête> 
      +   <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

      +

      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.

      +

      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.

      +

      Cette propriété est en lecture seule sur Firefox, Opera, Google Chrome et Safari, et elle est lue / écrite dans Internet Explorer.

      -

      spécification

      +

      spécification

      -

      Href

      +

      Href

      diff --git a/files/fr/web/api/stylesheet/index.html b/files/fr/web/api/stylesheet/index.html index 6a2a414946..6732be552d 100644 --- a/files/fr/web/api/stylesheet/index.html +++ b/files/fr/web/api/stylesheet/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/StyleSheet

      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

      +

      Propriétés

      {{domxref("StyleSheet.disabled")}}
      @@ -32,7 +32,7 @@ translation_of: Web/API/StyleSheet
      Une chaîne de caractères {{domxref("DOMString")}} indiquant le langage de représentation pour cette feuille de style.
      -

      Spécifications

      +

      Spécifications

      diff --git a/files/fr/web/api/stylesheet/media/index.html b/files/fr/web/api/stylesheet/media/index.html index 89c03f7438..5d750c2e9c 100644 --- a/files/fr/web/api/stylesheet/media/index.html +++ b/files/fr/web/api/stylesheet/media/index.html @@ -3,33 +3,31 @@ title: StyleSheet.media slug: Web/API/StyleSheet/media translation_of: Web/API/StyleSheet/media --- -
      {{APIRef ("CSSOM")}}
      +
      {{APIRef ("CSSOM")}}
      -

      Résumé

      +

      Media spécifie le support de destination prévu pour les informations de style.

      -

      Media spécifie le support de destination prévu pour les informations de style.

      +

      Syntaxe

      -

      Syntaxe

      - -
      Medium = stylesheet.media
      -Stylesheet.media = medium
      +
      Medium = stylesheet.media
      +Stylesheet.media = medium
       
      -

      Paramètres

      +

      Paramètres

        -
      • medium Est une chaîne décrivant un seul moyen ou une liste séparée par des virgules.
      • +
      • medium Est une chaîne décrivant un seul moyen ou une liste séparée par des virgules.
      -

      Exemple

      +

      Exemple

      -
      <Link rel = "StyleSheet" href = "document.css" type = "text / css" media = "screen" />
      -
      +
      <Link rel = "StyleSheet" href = "document.css" type = "text / css" media = "screen" />
      +
      -

      Remarques

      +

      Remarques

      -

      La valeur par défaut pour les médias est "écran".

      +

      La valeur par défaut pour les médias est "écran".

      -

      spécification

      +

      spécification

      -

      DOM Styles de niveau 2 - FEUILLE DE STYLES

      +

      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 index b1f3d9c1e3..d736810190 100644 --- a/files/fr/web/api/stylesheet/ownernode/index.html +++ b/files/fr/web/api/stylesheet/ownernode/index.html @@ -3,39 +3,37 @@ title: StyleSheet.ownerNode slug: Web/API/StyleSheet/ownerNode translation_of: Web/API/StyleSheet/ownerNode --- -
      {{APIRef ("CSSOM")}}
      +
      {{APIRef ("CSSOM")}}
      -

      Résumé

      +

      OwnerNode renvoie le noeud qui associe cette feuille de style au document.

      -

      OwnerNode renvoie le noeud qui associe cette feuille de style au document.

      +

      Syntaxe

      -

      Syntaxe

      - -
      ObjRef = stylesheet.ownerNode
      -
      - -

      Exemple

      +
      ObjRef = stylesheet.ownerNode
      +
      -
      <Html>
      - <Tête>
      -  <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"
      +

      Exemple

      + +
      <Html>
      + <Tête>
      +  <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

      +

      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.

      +

      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

      +

      spécification

      -

      DOM Styles de niveau 2 - FEUILLE DE STYLES

      +

      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 index 8db8ffbff9..1f0d852edf 100644 --- a/files/fr/web/api/stylesheet/parentstylesheet/index.html +++ b/files/fr/web/api/stylesheet/parentstylesheet/index.html @@ -4,33 +4,31 @@ slug: Web/API/StyleSheet/parentStyleSheet translation_of: Web/API/StyleSheet/parentStyleSheet ---
      -
      {{APIRef ("CSSOM")}}
      +
      {{APIRef ("CSSOM")}}
      -

      Résumé

      +

      Renvoie la feuille de style qui inclut celle-ci, le cas échéant.

      -

      Renvoie la feuille de style qui inclut celle-ci, le cas échéant.

      +

      Syntaxe

      -

      Syntaxe

      +
      ObjRef = stylesheet.parentStyleSheet
      +
      -
      ObjRef = stylesheet.parentStyleSheet
      -
      +

      Exemple

      -

      Exemple

      +
      // trouve la feuille de style de niveau supérieur
      +If (stylesheet.parentStyleSheet) {
      +    Feuille = stylesheet.parentStyleSheet;
      +} autre {
      +    Feuille = feuille de style;
      +}
      -
      // trouve la feuille de style de niveau supérieur
      -If (stylesheet.parentStyleSheet) {
      -    Feuille = stylesheet.parentStyleSheet;
      -} autre {
      -    Feuille = feuille de style;
      -}
      +

      Remarques

      -

      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.

      -

      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

      +

      spécification

      diff --git a/files/fr/web/api/stylesheet/title/index.html b/files/fr/web/api/stylesheet/title/index.html index a33fd45920..2892d25b2f 100644 --- a/files/fr/web/api/stylesheet/title/index.html +++ b/files/fr/web/api/stylesheet/title/index.html @@ -4,19 +4,17 @@ slug: Web/API/StyleSheet/title translation_of: Web/API/StyleSheet/title ---
      -
      {{APIRef ("CSSOM")}}
      +
      {{APIRef ("CSSOM")}}
      -

      Résumé

      +

      title Renvoie le titre de conseil de la feuille de style actuelle.

      -

      title Renvoie le titre de conseil de la feuille de style actuelle.

      +

      Remarques

      -

      Remarques

      +

      Le titre est souvent spécifié dans {{domxref ("StyleSheet / OwnerNode", "ownerNode")}}.

      -

      Le titre est souvent spécifié dans {{domxref ("StyleSheet / OwnerNode", "ownerNode")}}.

      - -

      spécification

      +

      spécification

      diff --git a/files/fr/web/api/stylesheet/type/index.html b/files/fr/web/api/stylesheet/type/index.html index eb315e2871..3b2ce12fe1 100644 --- a/files/fr/web/api/stylesheet/type/index.html +++ b/files/fr/web/api/stylesheet/type/index.html @@ -3,22 +3,20 @@ title: StyleSheet.type slug: Web/API/StyleSheet/type translation_of: Web/API/StyleSheet/type --- -
      {{APIRef ("CSSOM")}}
      +
      {{APIRef ("CSSOM")}}
      -

      Résumé

      +

      Type spécifie la langue de la feuille de style pour cette feuille de style.

      -

      Type spécifie la langue de la feuille de style pour cette feuille de style.

      +

      Syntaxe

      -

      Syntaxe

      +
      String = stylesheet.type
      +
      -
      String = stylesheet.type
      -
      +

      Exemple

      -

      Exemple

      +
       Ss.type = "text / css";
      +
      -
       Ss.type = "text / css";
      -
      +

      spécification

      -

      spécification

      - -

      type

      +

      type

      diff --git a/files/fr/web/api/stylesheetlist/index.html b/files/fr/web/api/stylesheetlist/index.html index 37436f0469..18336eada2 100644 --- a/files/fr/web/api/stylesheetlist/index.html +++ b/files/fr/web/api/stylesheetlist/index.html @@ -10,11 +10,11 @@ translation_of: Web/API/StyleSheetList ---

      {{APIRef("CSSOM")}}

      -

      L'interface StyleSheetList représente une liste de {{domxref("StyleSheet")}}.

      +

      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

      +

      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)
      diff --git a/files/fr/web/api/subtlecrypto/digest/index.html b/files/fr/web/api/subtlecrypto/digest/index.html
      index 091a59de28..eee3e4668d 100644
      --- a/files/fr/web/api/subtlecrypto/digest/index.html
      +++ b/files/fr/web/api/subtlecrypto/digest/index.html
      @@ -11,7 +11,7 @@ translation_of: Web/API/SubtleCrypto/digest
       
       

      Syntaxe

      -
      const digest = crypto.subtle.digest(algorithm, data);
      +
      const digest = crypto.subtle.digest(algorithm, data);
       

      Paramètres

      @@ -43,8 +43,8 @@ translation_of: Web/API/SubtleCrypto/digest

      Cet algorithme est spécifié dans FIPS 180-4, section 6.1, et produit un résultat de 160 bits de long.

      -
      -

      Avertissement: Cet algorithme est maintenant considérer comme vulnérable et ne doit pas être utilisé pour des applications cryptographiques.

      +
      +

      Attention : Cet algorithme est maintenant considérer comme vulnérable et ne doit pas être utilisé pour des applications cryptographiques.

      SHA-256

      @@ -59,8 +59,8 @@ translation_of: Web/API/SubtleCrypto/digest

      Cet algorithme est spécifié dans FIPS 180-4, section 6.4, et produit un résultat de 512 bits de long.

      -
      -

      Indice: Si vous cherchez à créer un condensé pour authentifié un message (HMAC), vous aurez plutôt besoin de SubtleCrypto.sign().

      +
      +

      Note : Si vous cherchez à créer un condensé pour authentifié un message (HMAC), vous aurez plutôt besoin de SubtleCrypto.sign().

      Exemples

      @@ -69,7 +69,7 @@ translation_of: Web/API/SubtleCrypto/digest

      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.';
      +
      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();
      @@ -86,7 +86,7 @@ console.log(digestBuffer.byteLength);
       
       

      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.';
      +
      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
      @@ -119,12 +119,10 @@ console.log(digestHex);
       
       

      Compatibilité des navigateurs

      - -

      {{Compat("api.SubtleCrypto.digest")}}

      -
      -

       Dans Chrome 60, une fonctionnalité a été ajoutée qui désactive crypto.subtle pour les connexions non TLS.

      +
      +

      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 index 6788ee5bdb..b9cca851e9 100644 --- a/files/fr/web/api/subtlecrypto/index.html +++ b/files/fr/web/api/subtlecrypto/index.html @@ -16,7 +16,7 @@ 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")}}.

      +

      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.

      diff --git a/files/fr/web/api/svgaelement/index.html b/files/fr/web/api/svgaelement/index.html index 13cb5b982d..90e403be20 100644 --- a/files/fr/web/api/svgaelement/index.html +++ b/files/fr/web/api/svgaelement/index.html @@ -32,7 +32,7 @@ translation_of: Web/API/SVGAElement
      - +
      Document NormativeSVG 1.1 (2nd Edition)SVG 1.1 (2nd Edition)
      diff --git a/files/fr/web/api/svgelement/index.html b/files/fr/web/api/svgelement/index.html index 4203624187..031175c330 100644 --- a/files/fr/web/api/svgelement/index.html +++ b/files/fr/web/api/svgelement/index.html @@ -31,7 +31,7 @@ translation_of: Web/API/SVGElement Normative document - SVG 1.1 (2nd Edition) + SVG 1.1 (2nd Edition) diff --git a/files/fr/web/api/svgmatrix/index.html b/files/fr/web/api/svgmatrix/index.html index 5566ebf569..374dd11c20 100644 --- a/files/fr/web/api/svgmatrix/index.html +++ b/files/fr/web/api/svgmatrix/index.html @@ -38,7 +38,7 @@ translation_of: Web/API/SVGMatrix
    • {{ 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") }} 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()
    • @@ -63,7 +63,7 @@ translation_of: Web/API/SVGMatrix Document normatif - SVG 1.1 (2nd Edition) + SVG 1.1 (2nd Edition) @@ -92,7 +92,7 @@ translation_of: Web/API/SVGMatrix c float - Le composant c de la matrice. + Le composant c de la matrice. d @@ -238,6 +238,6 @@ translation_of: Web/API/SVGMatrix -

      Compatibilité des navigateurs

      +

      Compatibilité des navigateurs

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

      diff --git a/files/fr/web/api/svgrect/index.html b/files/fr/web/api/svgrect/index.html index b080a3d2e2..96251b83cf 100644 --- a/files/fr/web/api/svgrect/index.html +++ b/files/fr/web/api/svgrect/index.html @@ -36,7 +36,7 @@ translation_of: Web/API/SVGRect Document normatif - SVG 1.1 (2nd Edition) + SVG 1.1 (2nd Edition) diff --git a/files/fr/web/api/svgtitleelement/index.html b/files/fr/web/api/svgtitleelement/index.html index 922a3d3d68..1a29aaefd1 100644 --- a/files/fr/web/api/svgtitleelement/index.html +++ b/files/fr/web/api/svgtitleelement/index.html @@ -32,7 +32,7 @@ translation_of: Web/API/SVGTitleElement Norme - SVG 1.1 (2nd Edition) + SVG 1.1 (2nd Edition) diff --git a/files/fr/web/api/syncmanager/index.html b/files/fr/web/api/syncmanager/index.html index 42819bb886..494d730c82 100644 --- a/files/fr/web/api/syncmanager/index.html +++ b/files/fr/web/api/syncmanager/index.html @@ -37,7 +37,7 @@ translation_of: Web/API/SyncManager -

      Browser compatibility

      +

      Browser compatibility

      diff --git a/files/fr/web/api/text/index.html b/files/fr/web/api/text/index.html index 17d8a077cf..37dfffb61a 100644 --- a/files/fr/web/api/text/index.html +++ b/files/fr/web/api/text/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Text

      {{InheritanceDiagram}}

      -

      Constructeur

      +

      Constructeur

      {{domxref("Text.Text", "Text()")}} {{experimental_inline}}
      @@ -49,7 +49,7 @@ translation_of: Web/API/Text
      -
      {{domxref("Text.splitText")}}
      +
      {{domxref("Text.splitText")}}
      Fractionne le noeud en deux noeuds selon un décalage spécifié.
      @@ -96,5 +96,5 @@ translation_of: Web/API/Text

      Voir aussi

      diff --git a/files/fr/web/api/textencoder/index.html b/files/fr/web/api/textencoder/index.html index 34f0803a9b..7fb51d5498 100644 --- a/files/fr/web/api/textencoder/index.html +++ b/files/fr/web/api/textencoder/index.html @@ -12,14 +12,14 @@ 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.

      +

      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-16iso-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 : Firefox, Chrome et Opera ont pour habitude de supporter les types d'encodage autres que utf-8 (tels que utf-16iso-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.

      +
      +

      Note : Il y a une prothèse d'émulation d'implantation pour supporter tous les encodages hérités dans GitHub.

      Constructeur

      @@ -47,7 +47,7 @@ translation_of: Web/API/TextEncoder
      {{DOMxRef("TextEncoder.encode()")}}
      -
      Retourne un Uint8Array conternant un texte encodé en utf-8.
      +
      Retourne un Uint8Array conternant un texte encodé en utf-8.

      Prothèse d'émulation

      @@ -143,7 +143,7 @@ translation_of: Web/API/TextEncoder
      • The {{DOMxRef("TextDecoder")}} interface describing the inverse operation.
      • -
      • StringView – a C-like representation of strings based on typed arrays
      • -
      • A shim allowing to use this interface in browsers that don't support it.
      • +
      • StringView – a C-like representation of strings based on typed arrays
      • +
      • A shim allowing to use this interface in browsers that don't support it.
      • Components.utils.importGlobalProperties
      diff --git a/files/fr/web/api/textencoder/textencoder/index.html b/files/fr/web/api/textencoder/textencoder/index.html index 3c00dcf5c5..739e661142 100644 --- a/files/fr/web/api/textencoder/textencoder/index.html +++ b/files/fr/web/api/textencoder/textencoder/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/TextEncoder/TextEncoder

      Syntaxe

      -
      encoder = new TextEncoder();
      +
      encoder = new TextEncoder();
       

      Paramètre

      @@ -18,8 +18,8 @@ translation_of: Web/API/TextEncoder/TextEncoder
    • TextEncoder() ne prend plus de paramètre depuis Firefox 48 et Chrome 53.
    -
    -

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

    +
    +

    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

    @@ -28,8 +28,8 @@ translation_of: Web/API/TextEncoder/TextEncoder
  • TextEncoder() ne lève plus d’exception depuis Firefox 48 et Chrome 53
  • -
    -

    Note: Avant Firefox 48 et Chrome 53, une exception était levée pour les types d'encodage inconnu.

    +
    +

    Note : Avant Firefox 48 et Chrome 53, une exception était levée pour les types d'encodage inconnu.

    Spécification

    diff --git a/files/fr/web/api/textmetrics/width/index.html b/files/fr/web/api/textmetrics/width/index.html index d59603163c..69436e4cb2 100644 --- a/files/fr/web/api/textmetrics/width/index.html +++ b/files/fr/web/api/textmetrics/width/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/TextMetrics/width

    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

    +

    Syntaxe

    readonly metrics.width;
    @@ -26,7 +26,7 @@ translation_of: Web/API/TextMetrics/width

    vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant :

    -
    var canvas = document.getElementById("canevas");
    +
    var canvas = document.getElementById("canevas");
     var ctx = canvas.getContext("2d");
     
     var texte = ctx.measureText("foo"); // objet TextMetrics
    diff --git a/files/fr/web/api/timeranges/index.html b/files/fr/web/api/timeranges/index.html
    index 2b215c1234..e2b8b214c4 100644
    --- a/files/fr/web/api/timeranges/index.html
    +++ b/files/fr/web/api/timeranges/index.html
    @@ -21,9 +21,9 @@ translation_of: Web/API/TimeRanges
     
     

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

    +

    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

    +

    Propriétés

    @@ -34,7 +34,7 @@ translation_of: Web/API/TimeRanges - + @@ -46,7 +46,7 @@ translation_of: Web/API/TimeRanges
    Disponibilité
    TimeRanges.lengthTimeRanges.length

    Le nombre de plages de temps contenues dans l'objet TimeRanges. Lecture seule.

    -

    Méthodes

    +

    Méthodes

    {{ domxref("TimeRanges.start") }}
    @@ -58,5 +58,5 @@ translation_of: Web/API/TimeRanges

    Spécification

    diff --git a/files/fr/web/api/touch_events/index.html b/files/fr/web/api/touch_events/index.html index 5ffb0c1e95..5853459757 100644 --- a/files/fr/web/api/touch_events/index.html +++ b/files/fr/web/api/touch_events/index.html @@ -16,10 +16,7 @@ original_slug: Web/Guide/DOM/Events/Touch_events
    Surface
    La surface tactile. Cela peut être un écran ou un trackpad.
    -
    - -
    -
    Point de toucher (Touch point)
    +
    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).
    @@ -40,7 +37,9 @@ original_slug: Web/Guide/DOM/Events/Touch_events

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

    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

    @@ -112,7 +111,7 @@ original_slug: Web/Guide/DOM/Events/Touch_events

    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.

    +

    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

    @@ -139,7 +138,7 @@ original_slug: Web/Guide/DOM/Events/Touch_events }
    -

    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.

    +

    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

    @@ -205,7 +204,7 @@ original_slug: Web/Guide/DOM/Events/Touch_events if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0)) return; - var newEvt = document.createEvent("MouseEvents"); + var newEvt = document.createEvent("MouseEvents"); var type = null; var touch = null; switch (event.type) { @@ -213,10 +212,10 @@ original_slug: Web/Guide/DOM/Events/Touch_events 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, + 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); + event.originalTarget.dispatchEvent(newEvt); }
    @@ -231,16 +230,14 @@ original_slug: Web/Guide/DOM/Events/Touch_events

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

    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/transferable/index.html b/files/fr/web/api/transferable/index.html index 2b900b05cb..564d4e4b7f 100644 --- a/files/fr/web/api/transferable/index.html +++ b/files/fr/web/api/transferable/index.html @@ -13,8 +13,8 @@ translation_of: Web/API/Transferable

    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()")}}.

    -
    -

    Remarque: 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")}})

    +
    +

    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.

    diff --git a/files/fr/web/api/transitionevent/index.html b/files/fr/web/api/transitionevent/index.html index 8a156255f3..72c99a9f6b 100644 --- a/files/fr/web/api/transitionevent/index.html +++ b/files/fr/web/api/transitionevent/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/TransitionEvent ---

    {{APIRef("CSSOM")}} {{SeeCompatTable}}

    -

    L' TransitionEventinterface représente des événements fournissant des informations relatives aux transitions .

    +

    L' TransitionEventinterface représente des événements fournissant des informations relatives aux transitions .

    Propriétés

    @@ -17,7 +17,7 @@ translation_of: Web/API/TransitionEvent
    {{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:''.
    +
    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

    @@ -57,118 +57,7 @@ translation_of: Web/API/TransitionEvent

    Compatibilité du navigateur

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
    Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoDesktop("2.0") }}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
    Constructor{{CompatVersionUnknown}}{{CompatNo}}{{ CompatGeckoDesktop("23.0") }}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
    initTransitionEvent() {{non-standard_inline}}{{deprecated_inline}}{{CompatNo}}[1]{{CompatVersionUnknown}}{{ CompatGeckoDesktop("6.0") }}
    - Removed in {{ CompatGeckoDesktop("23.0") }}
    10.0{{CompatNo}}[1]{{CompatVersionUnknown}}
    pseudoelement{{CompatVersionUnknown}}{{CompatNo}}{{ CompatGeckoDesktop("23.0") }}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
    -
    - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
    Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoMobile("2.0") }}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
    Constructor{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{ CompatGeckoMobile("23.0") }}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
    initTransitionEvent() {{non-standard_inline}}{{deprecated_inline}}{{CompatNo}}[1]{{CompatNo}}[1]{{CompatVersionUnknown}}{{ CompatGeckoMobile("6.0") }}
    - Removed in {{ CompatGeckoMobile("23.0") }}
    10.0{{CompatNo}}[1]{{CompatVersionUnknown}}
    pseudoelement{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{ CompatGeckoMobile("23.0") }}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
    -
    - -

    [1] Removal version unknown.

    +

    {{Compat}}

    Voir également

    diff --git a/files/fr/web/api/treewalker/currentnode/index.html b/files/fr/web/api/treewalker/currentnode/index.html index 4a57bb944d..3af4a1f311 100644 --- a/files/fr/web/api/treewalker/currentnode/index.html +++ b/files/fr/web/api/treewalker/currentnode/index.html @@ -13,13 +13,13 @@ translation_of: Web/API/TreeWalker/currentNode

    La propriété TreeWalker.currentNode représente le {{domxref("Node")}} (noeud) sur lequel le {{domxref("TreeWalker")}} est actuellement pointé.

    -

    Syntaxe

    +

    Syntaxe

    node = treeWalker.currentNode;
     treeWalker.currentNode = node;
     
    -

    Exemple

    +

    Exemple

    var treeWalker = document.createTreeWalker(
         document.body,
    @@ -30,7 +30,7 @@ translation_of: Web/API/TreeWalker/currentNode
     root = treeWalker.currentNode; // l'élément racine car c'est le premier élément!
     
    -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/treewalker/expandentityreferences/index.html b/files/fr/web/api/treewalker/expandentityreferences/index.html index 18001450cc..ee9090b598 100644 --- a/files/fr/web/api/treewalker/expandentityreferences/index.html +++ b/files/fr/web/api/treewalker/expandentityreferences/index.html @@ -15,12 +15,12 @@ translation_of: Web/API/TreeWalker/expandEntityReferences

    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

    +

    Syntaxe

    expand = treeWalker.expandEntityReferences;
     
    -

    Exemple

    +

    Exemple

    var treeWalker = document.createTreeWalker(
         document.body,
    @@ -30,7 +30,7 @@ translation_of: Web/API/TreeWalker/expandEntityReferences
     );
     expand = treeWalker.expandEntityReferences;
    -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/treewalker/filter/index.html b/files/fr/web/api/treewalker/filter/index.html index 1872033d47..e9e2904840 100644 --- a/files/fr/web/api/treewalker/filter/index.html +++ b/files/fr/web/api/treewalker/filter/index.html @@ -15,12 +15,12 @@ translation_of: Web/API/TreeWalker/filter

    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

    +

    Syntaxe

    nodeFilter = treeWalker.filter;
     
    -

    Exemple

    +

    Exemple

    var treeWalker = document.createTreeWalker(
         document.body,
    @@ -31,7 +31,7 @@ translation_of: Web/API/TreeWalker/filter
     nodeFilter = treeWalker.filter; // document.body dans ce cas
     
    -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/treewalker/firstchild/index.html b/files/fr/web/api/treewalker/firstchild/index.html index 8485e85827..25d5749df2 100644 --- a/files/fr/web/api/treewalker/firstchild/index.html +++ b/files/fr/web/api/treewalker/firstchild/index.html @@ -13,11 +13,11 @@ translation_of: Web/API/TreeWalker/firstChild

    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

    +

    Syntaxe

    node = treeWalker.firstChild;
    -

    Exemple

    +

    Exemple

    var treeWalker = document.createTreeWalker(
         document.body,
    @@ -29,7 +29,7 @@ var node = treeWalker.firstChild(); // renvoie le premier enfant de l'élément
     
     
    -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/treewalker/index.html b/files/fr/web/api/treewalker/index.html index 7815815f77..f5ac68fb17 100644 --- a/files/fr/web/api/treewalker/index.html +++ b/files/fr/web/api/treewalker/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/TreeWalker

    Un TreeWalker peut être créé en utilisant la méthode {{domxref("Document.createTreeWalker()")}}.

    -

    Propriétés

    +

    Propriétés

    Cette interface n'hérite d'aucune propriété.

    @@ -109,12 +109,12 @@ translation_of: Web/API/TreeWalker
    est le {{domxref("Node")}} sur lequel le TreeWalker pointe actuellement.
    -

    Méthodes

    +

    Méthodes

    Cette interface n'hérite d'aucune méthode.

    -

    Notez que le TreeWalker considère uniquement les nœuds DOM visibles..

    +

    Note : Le TreeWalker considère uniquement les nœuds DOM visibles.

    @@ -134,7 +134,7 @@ translation_of: Web/API/TreeWalker
    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écifications

    diff --git a/files/fr/web/api/treewalker/lastchild/index.html b/files/fr/web/api/treewalker/lastchild/index.html index fdd2a862b9..c61ad55a6a 100644 --- a/files/fr/web/api/treewalker/lastchild/index.html +++ b/files/fr/web/api/treewalker/lastchild/index.html @@ -13,12 +13,12 @@ translation_of: Web/API/TreeWalker/lastChild

    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

    +

    Syntaxe

    node = treeWalker.lastChild();
     
    -

    Exemple

    +

    Exemple

    var treeWalker = document.createTreeWalker(
         document.body,
    @@ -29,7 +29,7 @@ translation_of: Web/API/TreeWalker/lastChild
     var node = treeWalker.lastChild(); // renvoie le dernier enfant visible de l'élément racine
     
    -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/treewalker/nextnode/index.html b/files/fr/web/api/treewalker/nextnode/index.html index 3507fea553..19b3d6e972 100644 --- a/files/fr/web/api/treewalker/nextnode/index.html +++ b/files/fr/web/api/treewalker/nextnode/index.html @@ -13,12 +13,12 @@ translation_of: Web/API/TreeWalker/nextNode

    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

    +

    Syntaxe

    node = treeWalker.nextNode();
     
    -

    Exemple

    +

    Exemple

    var treeWalker = document.createTreeWalker(
         document.body,
    @@ -30,7 +30,7 @@ var node = treeWalker.nextNode(); // renvoie le premier enfant de la racine, car
     
     
    -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/treewalker/nextsibling/index.html b/files/fr/web/api/treewalker/nextsibling/index.html index c13a152a47..ebf87930af 100644 --- a/files/fr/web/api/treewalker/nextsibling/index.html +++ b/files/fr/web/api/treewalker/nextsibling/index.html @@ -13,12 +13,12 @@ translation_of: Web/API/TreeWalker/nextSibling

    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

    +

    Syntaxe

    node = treeWalker.nextSibling();
     
    -

    Exemple

    +

    Exemple

    var treeWalker = document.createTreeWalker(
         document.body,
    @@ -31,7 +31,7 @@ var node = treeWalker.nextSibling(); // renvoie null si le premier enfant de l'
     
     
    -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/treewalker/parentnode/index.html b/files/fr/web/api/treewalker/parentnode/index.html index 81bb1b885a..a80948ea84 100644 --- a/files/fr/web/api/treewalker/parentnode/index.html +++ b/files/fr/web/api/treewalker/parentnode/index.html @@ -13,12 +13,12 @@ translation_of: Web/API/TreeWalker/parentNode

    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

    +

    Syntaxe

    node = treeWalker.parentNode();
     
    -

    Exemple

    +

    Exemple

    var treeWalker = document.createTreeWalker(
         document.body,
    @@ -30,7 +30,7 @@ var node = treeWalker.parentNode(); // returns null as there is no parent
     
     
    -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/treewalker/previousnode/index.html b/files/fr/web/api/treewalker/previousnode/index.html index 5bc701e21c..05471ace25 100644 --- a/files/fr/web/api/treewalker/previousnode/index.html +++ b/files/fr/web/api/treewalker/previousnode/index.html @@ -13,12 +13,12 @@ translation_of: Web/API/TreeWalker/previousNode

    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

    +

    Syntaxe

    node = treeWalker.previousNode();
     
    -

    Exemple

    +

    Exemple

    var treeWalker = document.createTreeWalker(
         document.body,
    @@ -30,7 +30,7 @@ var node = treeWalker.previousNode(); // renvoie null car il n'y a pas de parent
     
     
    -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/treewalker/previoussibling/index.html b/files/fr/web/api/treewalker/previoussibling/index.html index 150ccd3db9..49db9c03ad 100644 --- a/files/fr/web/api/treewalker/previoussibling/index.html +++ b/files/fr/web/api/treewalker/previoussibling/index.html @@ -13,12 +13,12 @@ translation_of: Web/API/TreeWalker/previousSibling

    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

    +

    Syntaxe

    node = treeWalker.previousSibling();
     
    -

    Exemple

    +

    Exemple

    var treeWalker = document.createTreeWalker(
         document.body,
    @@ -30,7 +30,7 @@ var node = treeWalker.previousSibling(); // renvoie null car il n'y a pas de fr
     
     
    -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/treewalker/root/index.html b/files/fr/web/api/treewalker/root/index.html index fe89e8d850..bfa2d38c2b 100644 --- a/files/fr/web/api/treewalker/root/index.html +++ b/files/fr/web/api/treewalker/root/index.html @@ -13,11 +13,11 @@ translation_of: Web/API/TreeWalker/root

    La propriété en lecture seule TreeWalker.root renvoie le noeud qui est la racine de ce que TreeWalker doit traverser.

    -

    Syntaxe

    +

    Syntaxe

    root = TreeWalker.root;
    -

    Exemple

    +

    Exemple

    var treeWalker = document.createTreeWalker(
         document.body,
    @@ -28,7 +28,7 @@ translation_of: Web/API/TreeWalker/root
     root = treeWalker.root; // document.body dans ce cas
     
    -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/treewalker/whattoshow/index.html b/files/fr/web/api/treewalker/whattoshow/index.html index d0d559adbf..4e63064707 100644 --- a/files/fr/web/api/treewalker/whattoshow/index.html +++ b/files/fr/web/api/treewalker/whattoshow/index.html @@ -93,7 +93,7 @@ translation_of: Web/API/TreeWalker/whatToShow
    nodeTypes = treeWalker.whatToShow;
    -

    Exemples

    +

    Exemples

    var treeWalker = document.createTreeWalker(
         document.body,
    diff --git a/files/fr/web/api/uievent/index.html b/files/fr/web/api/uievent/index.html
    index 342b6ae2e3..0bf32d28b4 100644
    --- a/files/fr/web/api/uievent/index.html
    +++ b/files/fr/web/api/uievent/index.html
    @@ -13,7 +13,7 @@ translation_of: Web/API/UIEvent
     ---
     

    {{APIRef("DOM Events")}}

    -

    L'interface UIEvent représente des évènements simples de l'interface utilisateur.

    +

    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()")}}.

    @@ -62,7 +62,7 @@ translation_of: Web/API/UIEvent
    {{domxref("UIEvent.initUIEvent()")}} {{deprecated_inline}}
    -
    Initialise un objet UIEvent. Si l'évènement a déjà été envoyé, cette méthode ne fait rien.
    +
    Initialise un objet UIEvent. Si l'évènement a déjà été envoyé, cette méthode ne fait rien.

    Spécifications

    @@ -101,9 +101,9 @@ translation_of: Web/API/UIEvent

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

    -

    Voir aussi

    +

    Voir aussi

    diff --git a/files/fr/web/api/uievent/layerx/index.html b/files/fr/web/api/uievent/layerx/index.html index 649458c30d..c4ea6de756 100644 --- a/files/fr/web/api/uievent/layerx/index.html +++ b/files/fr/web/api/uievent/layerx/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/UIEvent/layerX

    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

    +

    Syntaxe

    var posx = event.layerX
    @@ -24,7 +24,7 @@ translation_of: Web/API/UIEvent/layerX
  • posx est une valeur entière en pixels pour la coordonnée x du pointeur de la souris, lorsque l'évènement souris est déclenché.
  • -

    Exemples

    +

    Exemples

    <html>
     <head>
    diff --git a/files/fr/web/api/url/createobjecturl/index.html b/files/fr/web/api/url/createobjecturl/index.html
    index 4d63b56b27..faca6b81b9 100644
    --- a/files/fr/web/api/url/createobjecturl/index.html
    +++ b/files/fr/web/api/url/createobjecturl/index.html
    @@ -3,7 +3,6 @@ title: URL.createObjectURL
     slug: Web/API/URL/createObjectURL
     translation_of: Web/API/URL/createObjectURL
     ---
    -

    Résumé

    {{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é.

    @@ -12,11 +11,11 @@ translation_of: Web/API/URL/createObjectURL

    {{AvailableInWorkers}}

    -
    -

    Note : Cette fonctionnalité n'est pas disponible dans les Service Workers à cause de possible fuite mémoire.

    +
    +

    Note : Cette fonctionnalité n'est pas disponible dans les Service Workers à cause de possible fuite mémoire.

    -

    Syntaxe

    +

    Syntaxe

    objectURL = URL.createObjectURL(object);
     
    @@ -30,15 +29,13 @@ translation_of: Web/API/URL/createObjectURL

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

    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

    +

    Exemple

    -

    Voir Utilisation de l’objet URLs pour afficher des images.

    +

    Voir Utilisation de l’objet URLs pour afficher des images.

    -

    Notes d’utilisation

    +

    Notes d’utilisation

    Gestion de la mémoire

    @@ -51,10 +48,10 @@ translation_of: Web/API/URL/createObjectURL

    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.

    -

    Important : 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.

    +

    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écifications

    @@ -83,11 +80,11 @@ translation_of: Web/API/URL/createObjectURL

    {{Compat("api.URL.createObjectURL")}}

    -

    Voir aussi

    +

    Voir aussi

      -
    • Utiliser des fichiers à partir d’applications web
    • -
    • Utilisation de l’objet URLs pour afficher des images
    • +
    • Utiliser des fichiers à partir d’applications web
    • +
    • Utilisation de l’objet URLs pour afficher des images
    • {{domxref("URL.revokeObjectURL()")}}
    • {{domxref("HTMLMediaElement.srcObject")}}
    • {{domxref("FileReader.readAsDataURL()")}}
    • diff --git a/files/fr/web/api/url/hash/index.html b/files/fr/web/api/url/hash/index.html index df993c4a2f..f89d838eb1 100644 --- a/files/fr/web/api/url/hash/index.html +++ b/files/fr/web/api/url/hash/index.html @@ -11,7 +11,7 @@ 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.

      +

      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 — "".

      diff --git a/files/fr/web/api/url/index.html b/files/fr/web/api/url/index.html index 98ce833c1b..917fa44e1a 100644 --- a/files/fr/web/api/url/index.html +++ b/files/fr/web/api/url/index.html @@ -11,39 +11,39 @@ translation_of: Web/API/URL

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

      +

      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 :

      +

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

      +

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

      +

      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'));
      +
      const response = await fetch(new URL('http://www.example.com/démonstration.html'));

      Constructeur

      @@ -56,7 +56,7 @@ console.log<
      {{domxref("URL.hash")}}
      -
      Est une {{domxref("DOMString")}} (chaîne de caractères) contenant un '#' suivi de l'identifiant du fragment de l'URL.
      +
      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")}}
      @@ -67,7 +67,7 @@ console.log<
      {{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 .
      +
      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 .
      @@ -91,19 +91,19 @@ console.log<
      {{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.
      +
      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.
      +
      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")}}.

      +

      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()")}} [disponible depuis FireFox v54]
      +
      {{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 .
      @@ -111,9 +111,9 @@ console.log<
      {{ 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.
      +
      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 ()")}}.
      +
      Révoque un objet URL précédemment créé avec {{domxref ("URL.createObjectURL ()")}}.

      Spécifications

      diff --git a/files/fr/web/api/url/revokeobjecturl/index.html b/files/fr/web/api/url/revokeobjecturl/index.html index cf838f7b8e..5785e39c30 100644 --- a/files/fr/web/api/url/revokeobjecturl/index.html +++ b/files/fr/web/api/url/revokeobjecturl/index.html @@ -5,7 +5,7 @@ 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.

      +

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

      diff --git a/files/fr/web/api/url/tojson/index.html b/files/fr/web/api/url/tojson/index.html index 8c34a37e42..3b594c32cd 100644 --- a/files/fr/web/api/url/tojson/index.html +++ b/files/fr/web/api/url/tojson/index.html @@ -29,8 +29,8 @@ translation_of: Web/API/URL/toJSON

      Exemples

      -
      const url = new URL("https://developer.mozilla.org/en-US/docs/Web/API/URL/toString");
      -url.toJSON()
      +
      const url = new URL("https://developer.mozilla.org/en-US/docs/Web/API/URL/toString");
      +url.toJSON()
       

      Spécifications

      diff --git a/files/fr/web/api/url/tostring/index.html b/files/fr/web/api/url/tostring/index.html index 6c20fada36..f3733e2678 100644 --- a/files/fr/web/api/url/tostring/index.html +++ b/files/fr/web/api/url/tostring/index.html @@ -29,8 +29,8 @@ translation_of: Web/API/URL/toString

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

      diff --git a/files/fr/web/api/url/url/index.html b/files/fr/web/api/url/url/index.html index c50003de75..c0ff1cb049 100644 --- a/files/fr/web/api/url/url/index.html +++ b/files/fr/web/api/url/url/index.html @@ -11,9 +11,9 @@ 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.
      +

      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.

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

      @@ -26,17 +26,13 @@ translation_of: Web/API/URL/URL
      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.
      -
      -
      +
      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 à ''.
      +
      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 à ''.
      -

      Remarque : Vous pouvez toujours utiliser un objet {{domxref ("URL")}} existant pour la base, qui se stringifie en attribut {{domxref ("DOMString.href", "href")}} de l'objet.

      +

      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

      @@ -51,29 +47,29 @@ translation_of: Web/API/URL/URL
    - +
    TypeErrorurl (dans le cas d'URL absolues) ou base + URL (dans le cas d'URL relatives) n'est pas une URL valide.url (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 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
    +                                                       // 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/'
    +                                                       // 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écification

    @@ -97,5 +93,5 @@ var l = new URL('http://www.example.com', b); // À voir également
      -
    • L'interface à laquelle il appartient : {{domxref("URL")}}.
    • +
    • L'interface à laquelle il appartient : {{domxref("URL")}}.
    diff --git a/files/fr/web/api/urlsearchparams/entries/index.html b/files/fr/web/api/urlsearchparams/entries/index.html index af1a117d18..4f10b1bb12 100644 --- a/files/fr/web/api/urlsearchparams/entries/index.html +++ b/files/fr/web/api/urlsearchparams/entries/index.html @@ -8,7 +8,7 @@ translation_of: Web/API/URLSearchParams/entries

    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.

    +

    Note : This method is available in Web Workers.

    Syntax

    @@ -21,7 +21,7 @@ translation_of: Web/API/URLSearchParams/entries

    Example

    -
    // Create a test URLSearchParams object
    +
    // Create a test URLSearchParams object
     var searchParams = new URLSearchParams("key1=value1&key2=value2");
     
     // Display the key/value pairs
    diff --git a/files/fr/web/api/usvstring/index.html b/files/fr/web/api/usvstring/index.html
    index 9fb2f745bd..fc7d4ab42a 100644
    --- a/files/fr/web/api/usvstring/index.html
    +++ b/files/fr/web/api/usvstring/index.html
    @@ -13,7 +13,7 @@ translation_of: Web/API/USVString
     
     

    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écifications

    diff --git a/files/fr/web/api/videotrack/id/index.html b/files/fr/web/api/videotrack/id/index.html index 27a83048d8..6cd67b7732 100644 --- a/files/fr/web/api/videotrack/id/index.html +++ b/files/fr/web/api/videotrack/id/index.html @@ -5,7 +5,7 @@ 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.

    +

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

    diff --git a/files/fr/web/api/videotrack/index.html b/files/fr/web/api/videotrack/index.html index 851d86e40e..07ed277113 100644 --- a/files/fr/web/api/videotrack/index.html +++ b/files/fr/web/api/videotrack/index.html @@ -15,7 +15,7 @@ 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")}}.

    +

    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

    @@ -38,7 +38,7 @@ translation_of: Web/API/VideoTrack

    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 el = document.querySelector("video");
     var tracks = el.videoTracks;
     
    @@ -46,11 +46,11 @@ var tracks = el.videoTracks;

    Ce premier exemple obtient la première piste vidéo sur le média:

    -
    var firstTrack = tracks[0];
    +
    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++) {
    +
    for (var i = 0; i < tracks.length; i++) {
       if (tracks[i].language === userLanguage) {
         tracks[i].selected = true;
         break;
    diff --git a/files/fr/web/api/web_animations_api/index.html b/files/fr/web/api/web_animations_api/index.html
    index 0b64fa7a75..2e2a8a8435 100644
    --- a/files/fr/web/api/web_animations_api/index.html
    +++ b/files/fr/web/api/web_animations_api/index.html
    @@ -44,9 +44,11 @@ translation_of: Web/API/Web_Animations_API
      
    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

    -
    + + +

    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()")}}
    diff --git a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/audionodes.svg b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/audionodes.svg new file mode 100644 index 0000000000..088bb1442c --- /dev/null +++ b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/audionodes.svg @@ -0,0 +1,5 @@ +LRSLSRCLFE + Chaque entrée / sortie est + composée de plusieurs canaux. + Ici on voit une configuration  5.1 + Noeud audioNoeud audioNoeud audioSourcesDestination \ No newline at end of file diff --git a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/fttaudiodata.svg b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/fttaudiodata.svg new file mode 100644 index 0000000000..6f020d5b37 --- /dev/null +++ b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/fttaudiodata.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + t + 0 1 2 3 4 + + + + + + + + t + 0 1 2 3 4 + + + + + + + AnalyserNode + + FFT + + + + + sortie inchangée + + données de fréquence + + \ No newline at end of file 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 index bf0a5112b8..6e5c9cae01 100644 --- 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 @@ -3,9 +3,8 @@ 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.

    -
    + +

    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

    @@ -21,11 +20,11 @@ translation_of: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API
  • Connection des sources aux effets, et des effets à la sortie.
  • -

    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.

    +

    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.

    +

    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 :

    @@ -33,12 +32,12 @@ translation_of: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API
  • générées directement en JavaScript avec un noeud audio (tel qu'un oscillateur)
  • créées à partir de données PCM brutes (le contexte audio a des méthodes pour décoder les formats audio supportés)
  • fournies par une balise HTML media (telle que {{HTMLElement("video")}} ou {{HTMLElement("audio")}})
  • -
  • récupérées directement avec WebRTC {{domxref("MediaStream")}} (une webcam ou un microphone)
  • +
  • récupérées directement avec WebRTC {{domxref("MediaStream")}} (une webcam ou un microphone)
  • 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.

    +

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

    @@ -57,12 +56,12 @@ translation_of: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API
  • le stéréo aura 88200 échantillons, et 44100 trames. Sa propriété length vaudra aussi 44100, puisqu'elle correspond au nombre de trames.
  • -

    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.

    +

    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.

    +

    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:

    @@ -71,11 +70,11 @@ translation_of: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API var memoireTampon = contexte.createBuffer(2, 22050, 44100);
    -

    Note44,100 Hz (que l'on peut aussi écrire 44.1 kHz) est un taux d'échantillonage couramment utilisé. Pourquoi 44.1kHz ?
    +

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

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

    @@ -86,7 +85,7 @@ 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).

    +

    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

    @@ -290,7 +289,7 @@ var memoireTampon = context.createBuffer(1, 22050, 22050);

    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

    +

    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:

    @@ -312,7 +311,7 @@ var memoireTampon = context.createBuffer(1, 22050, 22050);
    -

    Note: Pour plus d'informations, voir notre article Visualizations with Web Audio API.

    +

    Note : Pour plus d'informations, voir notre article Visualizations with Web Audio API.

    Spatialisations

    @@ -323,24 +322,24 @@ var memoireTampon = context.createBuffer(1, 22050, 22050);

    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é

    +

    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°

    +

    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.

    +

    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/listener.svg b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/listener.svg new file mode 100644 index 0000000000..a223c765e0 --- /dev/null +++ b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/listener.svg @@ -0,0 +1 @@ +0Vecteur de direction hautLes deux vecteurs forment un angle droit (90°)Vecteur de direction faceVecteur de positionnement plaçant la source dans l’espace \ No newline at end of file diff --git a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/pannernode.svg b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/pannernode.svg new file mode 100644 index 0000000000..1c2da226ff --- /dev/null +++ b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/pannernode.svg @@ -0,0 +1 @@ +0Vecteur de velocité indique comment la source se déplaceCone dans lequel on peut écouter le sonVecteur indiquant la direction vers laquelle pointe le PannerNodeVecteur de positionnement plaçant la source dans l’espace \ No newline at end of file diff --git a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/sampleframe.svg b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/sampleframe.svg new file mode 100644 index 0000000000..72f6671a53 --- /dev/null +++ b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/sampleframe.svg @@ -0,0 +1,133 @@ + + + + + + + + trame + échantillon + échantillon + + + + trame + échantillon + échantillon + + + + trame + échantillon + échantillon + + + + trame + échantillon + échantillon + + + + trame + échantillon + échantillon + + + + trame + échantillon + échantillon + + + + trame + échantillon + échantillon + + + + trame + échantillon + échantillon + + + + trame + échantillon + échantillon + + + + trame + échantillon + échantillon + + + + trame + échantillon + échantillon + + + + trame + échantillon + échantillon + + + + trame + échantillon + échantillon + + + + trame + échantillon + échantillon + + + + trame + échantillon + échantillon + + + + trame + échantillon + échantillon + + + + trame + échantillon + échantillon + + + + trame + échantillon + échantillon + + + + trame + échantillon + échantillon + + + + trame + échantillon + échantillon + + canal gauche -> + canal droit -> + + + + + + \ No newline at end of file diff --git a/files/fr/web/api/web_audio_api/index.html b/files/fr/web/api/web_audio_api/index.html index 22c996965b..087d05a380 100644 --- a/files/fr/web/api/web_audio_api/index.html +++ b/files/fr/web/api/web_audio_api/index.html @@ -4,35 +4,35 @@ 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.

    +

    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.

    +

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

    -
      +
      • Création d'un contexte audio
      • Dans ce contexte, création des sources — comme <audio>, oscillator, stream
      • Création de noeuds d'effets, comme la réverbération, les filtres biquad, la balance, le compresseur
      • Choix de la sortie audio (appelée destination), par exemple les enceintes du système
      • Connection des sources aux effets, et des effets à la destination
      • -
    + -

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

    +

    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.

    +

    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

    @@ -58,7 +58,7 @@ translation_of: Web/API/Web_Audio_API
    {{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.
    +
    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")}}
    @@ -66,7 +66,7 @@ translation_of: Web/API/Web_Audio_API
    {{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.
    +
    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

    @@ -96,7 +96,7 @@ translation_of: Web/API/Web_Audio_API
    {{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.
    +
    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

    @@ -127,7 +127,7 @@ translation_of: Web/API/Web_Audio_API

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

    +

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

    @@ -152,7 +152,7 @@ translation_of: Web/API/Web_Audio_API
    The OfflineAudioCompletionEvent est envoyé aux fonctions de callback qui écoutent l'évènement {{event("complete")}} event implements this interface.
    -

    Audio Workers

    +

    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.

    @@ -165,7 +165,7 @@ translation_of: Web/API/Web_Audio_API
    UN objet Event est transmis aux objets {{domxref("AudioWorkerGlobalScope")}} pour effectuer un traitement audio.
    -

    Objets obsolètes

    +

    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.

    @@ -176,13 +176,13 @@ translation_of: Web/API/Web_Audio_API
    Utilisé pour définir une forme d'onde périodique. Cet objet est obsolète, et a été remplacé par {{domxref("PeriodicWave")}}.
    -

    Exemple

    +

    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
    +
    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
    @@ -370,36 +370,32 @@ function muterVoix() { // allumer / éteindre le son
      
  • Voice-change-O-matic example
  • Violent Theremin example
  • Web audio spatialisation basics
  • -
  • Mixing Positional Audio and WebGL
  • -
  • Developing Game Audio with the Web Audio API
  • -
  • Porting webkitAudioContext code to standards based AudioContext
  • +
  • Mixing Positional Audio and WebGL
  • +
  • Developing Game Audio with the Web Audio API
  • +
  • Porting webkitAudioContext code to standards based AudioContext
  • Tones: a simple library for playing specific tones/notes using the Web Audio API.
  • howler.js: a JS audio library that defaults to Web Audio API and falls back to HTML5 Audio, as well as providing other useful features.
  • Mooog: jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more.
  • - + + 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 index f32d382574..26ea00da32 100644 --- 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 @@ -3,9 +3,8 @@ 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 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.

    @@ -19,16 +18,12 @@ translation_of: Web/API/Web_Audio_API/Using_Web_Audio_API

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

    -

    A UI with a sound wave being shown, and options for choosing voice effects and visualizations.

    - -

    Un autre exemple pour illustrer la Web Audio API est le Violent Theremin, une application simple qui permet de changer le pitch et le volume d'un son en fonction du déplacement de la souris. Elle génère également des animations psychédéliques (see Violent Theremin source code).

    - -

    A page full of rainbow colours, with two buttons labeled Clear screen and mute.

    +

    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.

    +

    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.

    @@ -51,7 +46,7 @@ translation_of: Web/API/Web_Audio_API/Using_Web_Audio_API
    -

    Note: On peut créer plusieurs contextes audio dans le même document, bien que ce soit probablement superflu dans la plupart des cas.

    +

    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 :

    @@ -60,7 +55,7 @@ translation_of: Web/API/Web_Audio_API/Using_Web_Audio_API
    -

    NoteSafari risque de planter si l'objet window n'est pas explicitement mentionné lors de la création d'un contexte audio

    +

    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

    @@ -71,7 +66,7 @@ translation_of: Web/API/Web_Audio_API/Using_Web_Audio_API
  • générées en JavaScript par un noeud audio tel qu'un oscillateur. Pour créer un {{domxref("OscillatorNode")}} on utilise la méthode {{domxref("AudioContext.createOscillator")}}.
  • créées à partir de données PCM brutes: le contexte audio a des méthodes pour décoder lesformats supportés; voir {{ domxref("AudioContext.createBuffer()") }}, {{domxref("AudioContext.createBufferSource()")}}, et {{domxref("AudioContext.decodeAudioData()")}}.
  • récupérées dans des élements HTML tels que {{HTMLElement("video")}} ou {{HTMLElement("audio")}}: voir {{domxref("AudioContext.createMediaElementSource()")}}.
  • -
  • prises dans un WebRTC {{domxref("MediaStream")}} comme une webcam ou un microphone. Voir {{ domxref("AudioContext.createMediaStreamSource()") }}.
  • +
  • prises dans un WebRTC {{domxref("MediaStream")}} comme une webcam ou un microphone. Voir {{ domxref("AudioContext.createMediaStreamSource()") }}.
  • 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:

    @@ -81,11 +76,11 @@ 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 : 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.

    +

    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

    @@ -111,10 +106,12 @@ noeudGain.connect(contexteAudio.destination);

    Ce code créerait le graphe audio suivant :

    -

    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.

    +

    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.

    +

    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

    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 index 14da8cbd47..8a128b4d81 100644 --- 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 @@ -3,12 +3,10 @@ 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.

    +

    Note : Vous pouvez trouver des exemples de tous les extraits de the code dans notre démo Voice-change-O-matic.

    Concepts de base

    @@ -26,13 +24,13 @@ 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.

    +

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

    +

    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.

    @@ -122,7 +120,7 @@ var tableauDonnees = new Uint8Array(tailleMemoireTampon);

    Ce qui nous donne un affichage de forme d'onde, actualisé plusieurs fois par seconde :

    -

    a black oscilloscope line, showing the waveform of an audio signal

    +

    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

    @@ -175,10 +173,8 @@ var tableauDonnees = new Uint8Array(tailleMemoireTampon);

    Ce code donne le résultat suivant:

    -

    a series of red bars in a bar graph, showing intensity of different frequencies in an audio signal

    +

    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.

    -
    - -

     

    +

    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 index 3c90e6ecc5..d0de8755ec 100644 --- 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 @@ -3,9 +3,7 @@ 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.

    -
    +

    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.

    @@ -18,14 +16,10 @@ translation_of: Web/API/Web_Audio_API/Web_audio_spatialization_basics
  • 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).
  • -

    Vous devez créer et paramétrer ces deux objects, et le navigateur fait le reste er génère le rendu audio. Le diagramme ci-dessous montre les différentes choses qui peuvent être contrôlés pour un {{ domxref("PannerNode") }}.

    - -

    The PannerNode brings a spatial position and velocity and a directionality for a given signal.

    -

    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.

    +

    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 :

    @@ -38,12 +32,10 @@ translation_of: Web/API/Web_Audio_API/Web_audio_spatialization_basics

    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.
    -
    - a minimal UI with a portable stereo in the center of it, and buttons marked play, stop, left arrow, right arrow, zoom in and zoom out. It says Room of Metal at the top.

    +

    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.

    +

    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.

    @@ -262,12 +254,8 @@ zoomOutButton.onmouseup = function () { window.cancelAnimationFrame(zoomOutLoop); } -

    Summary

    -

    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.

    -
    - -

     

    +

    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 index 5216db8c3f..f659e9f550 100644 --- a/files/fr/web/api/web_speech_api/index.html +++ b/files/fr/web/api/web_speech_api/index.html @@ -11,20 +11,18 @@ 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).

    -
    +

    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 :

    +

    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 :

      -
    • La reconnaissance vocale (Speech recognition) est accessible via l'interface {{domxref("SpeechRecognition")}} qui fournit la capacité de reconnaitre la voix dans une source audio (normalement grâce à l'outil par défaut de reconnaissance vocale de l'appareil) et de réagir de façon pertinente. En général, on utilisera le constructeur de l'interface pour créer un nouvel objet {{domxref("SpeechRecognition")}} qui a un nombre de gestionnaires d'événements disponibles pour détecter lorsque de la parole arrive dans le micro de l'appareil. L'interface {{domxref("SpeechGrammar")}} représente un conteneur pour une série de règles de grammaire que votre application devrait reconnaître. La grammaire est définie en utilisant JSpeech Grammar Format (JSGF).
    • -
    • La synthèse vocale (Speech synthesis) est disponible via l'interface {{domxref("SpeechSynthesis")}}, un composant qui permet aux programmes de vocaliser leur contenu textuel (normalement grâce au synthétiseur vocal par défaut de l'appareil). Differents types de voix sont disponibles dans les objets {{domxref("SpeechSynthesisVoice")}}, et les différentes parties de texte à vocaliser sont interprétés par les objets {{domxref("SpeechSynthesisUtterance")}}. On peut les faire vocaliser en les passant à la méthode {{domxref("SpeechSynthesis.speak()")}}.
    • +
    • La reconnaissance vocale (Speech recognition) est accessible via l'interface {{domxref("SpeechRecognition")}} qui fournit la capacité de reconnaitre la voix dans une source audio (normalement grâce à l'outil par défaut de reconnaissance vocale de l'appareil) et de réagir de façon pertinente. En général, on utilisera le constructeur de l'interface pour créer un nouvel objet {{domxref("SpeechRecognition")}} qui a un nombre de gestionnaires d'événements disponibles pour détecter lorsque de la parole arrive dans le micro de l'appareil. L'interface {{domxref("SpeechGrammar")}} représente un conteneur pour une série de règles de grammaire que votre application devrait reconnaître. La grammaire est définie en utilisant JSpeech Grammar Format (JSGF).
    • +
    • La synthèse vocale (Speech synthesis) est disponible via l'interface {{domxref("SpeechSynthesis")}}, un composant qui permet aux programmes de vocaliser leur contenu textuel (normalement grâce au synthétiseur vocal par défaut de l'appareil). Differents types de voix sont disponibles dans les objets {{domxref("SpeechSynthesisVoice")}}, et les différentes parties de texte à vocaliser sont interprétés par les objets {{domxref("SpeechSynthesisUtterance")}}. On peut les faire vocaliser en les passant à la méthode {{domxref("SpeechSynthesis.speak()")}}.
    -

    Pour plus de détails concernant ces fonctionnalités, voir Using the Web Speech API.

    +

    Pour plus de détails concernant ces fonctionnalités, voir Using the Web Speech API.

    Les interfaces de l'API Web Speech

    @@ -92,18 +90,18 @@ translation_of: Web/API/Web_Speech_API

    Compatibilité des navigateurs

    -

    SpeechRecognition

    +

    SpeechRecognition

    {{Compat("api.SpeechRecognition", 0)}}

    -

    SpeechSynthesis

    +

    SpeechSynthesis

    {{Compat("api.SpeechSynthesis", 0)}}

    Voir aussi

      -
    • Using the Web Speech API
    • +
    • Using the Web Speech API
    • Article sur le site SitePoint
    • Article HTML5Rocks
    • Demo [aurelio.audero.it]
    • 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 index ffaa924aa3..e826557e2a 100644 --- 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 @@ -12,7 +12,7 @@ tags: - 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.

      +

      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

      @@ -21,15 +21,13 @@ translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API

      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.

      +

      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.

      -

      The UI of an app titled Speech Color changer. It invites the user to tap the screen and say a color, and then it turns the background of the app that colour. In this case it has turned the background red.

      -

      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

      @@ -40,7 +38,7 @@ translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API

      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>
      +
      <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>
      @@ -56,7 +54,7 @@ translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API
       
       

      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 SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
       var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList
       var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent
      @@ -64,10 +62,10 @@ var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEv

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

      +

      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:

      • The lines are separated by semi-colons, just like in JavaScript.
      • @@ -80,12 +78,12 @@ var grammar = '#JSGF V1.0; grammar colors; public <color> = ' + colors.joi

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

        @@ -96,7 +94,7 @@ var speechRecognitionList = new SpeechGrammarList();
      • {{domxref("SpeechRecognition.maxAlternatives")}}: Sets the number of alternative potential matches that should be returned per result. This can sometimes be useful, say if a result is not completely clear and you want to display a list if alternatives for the user to choose the correct one from. But it is not needed for this simple demo, so we are just specifying one (which is actually the default anyway.)
      -
      recognition.grammars = speechRecognitionList;
      +
      recognition.grammars = speechRecognitionList;
       recognition.continuous = false;
       recognition.lang = 'en-US';
       recognition.interimResults = false;
      @@ -106,7 +104,7 @@ recognition.maxAlternatives = 1;

      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 diagnostic = document.querySelector('.output');
       var bg = document.querySelector('html');
       var hints = document.querySelector('.hints');
       
      @@ -124,9 +122,9 @@ document.body.onclick = function() {
       
       

      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:

      +

      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) {
      +
      recognition.onresult = function(event) {
         var color = event.results[0][0].transcript;
         diagnostic.textContent = 'Result received: ' + color + '.';
         bg.style.backgroundColor = color;
      @@ -137,7 +135,7 @@ document.body.onclick = function() {
       
       

      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.onspeechend = function() {
         recognition.stop();
       }
      @@ -145,13 +143,13 @@ document.body.onclick = function() {

      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) {
      +
      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) {
      +
      recognition.onerror = function(event) {
         diagnostic.textContent = 'Error occurred in recognition: ' + event.error;
       }
      @@ -165,8 +163,6 @@ document.body.onclick = function() {

      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.

      -

      UI of an app called speak easy synthesis. It has an input field in which to input text to be synthesised, slider controls to change the rate and pitch of the speech, and a drop down menu to choose between different voices.

      -

      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

      @@ -189,7 +185,7 @@ document.body.onclick = function() {

      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>
      +
      <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>
       
      @@ -218,7 +214,7 @@ document.body.onclick = function() {
       
       

      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 synth = window.speechSynthesis;
       
       var inputForm = document.querySelector('form');
       var inputTxt = document.querySelector('.txt');
      @@ -238,7 +234,7 @@ var voices = [];
       
       

      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() {
      +
      function populateVoiceList() {
         voices = synth.getVoices();
       
         for(i = 0; i < voices.length ; i++) {
      @@ -257,7 +253,7 @@ var voices = [];
       
       

      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();
      +
      populateVoiceList();
       if (speechSynthesis.onvoiceschanged !== undefined) {
         speechSynthesis.onvoiceschanged = populateVoiceList;
       }
      @@ -270,7 +266,7 @@ if (speechSynthesis.onvoiceschanged !== undefined) {

      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) {
      +
      inputForm.onsubmit = function(event) {
         event.preventDefault();
       
         var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
      @@ -286,7 +282,7 @@ if (speechSynthesis.onvoiceschanged !== undefined) {
       
       

      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) {
      +
         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 + '".');
      @@ -294,14 +290,14 @@ if (speechSynthesis.onvoiceschanged !== undefined) {
       
       

      Finally, we call blur() on the text input. This is mainly to hide the keyboard on Firefox OS.

      -
        inputTxt.blur();
      +
        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() {
      +
      pitch.onchange = function() {
         pitchValue.textContent = pitch.value;
       }
       
      diff --git a/files/fr/web/api/web_storage_api/index.html b/files/fr/web/api/web_storage_api/index.html
      index d90c9bfd37..bae54c054c 100644
      --- a/files/fr/web/api/web_storage_api/index.html
      +++ b/files/fr/web/api/web_storage_api/index.html
      @@ -26,15 +26,15 @@ translation_of: Web/API/Web_Storage_API
       

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

      +

      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

      @@ -45,7 +45,7 @@ translation_of: Web/API/Web_Storage_API
      {{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.
      +
      L'événement storage est déclenché sur l'objet Window du document en cas de changement dans un espace de stockage.

      Exemples

      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 index 69a8a500b6..96ce992c18 100644 --- 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 @@ -9,9 +9,7 @@ tags: - 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

      @@ -23,7 +21,7 @@ localStorage.setItem('colorSetting', '#a4509b');
      -

      Note: Il est recommandé d'utiliser l'API "Web Storage" (setItemgetItemremoveItemkeylength) pour prévenir les embûches associées à l'utilisation d'objets capable de stocker des couples clé-valeur.

      +

      Note : Il est recommandé d'utiliser l'API "Web Storage" (setItemgetItemremoveItemkeylength) 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 :

      @@ -82,25 +80,27 @@ else {

      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.

      +

      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:

      +

      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.

      +

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

      +

      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.

      +

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

      +

      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();
      @@ -158,7 +158,7 @@ imageForm.onchange = populateStorage;

      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 :

      +

      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;
      @@ -206,10 +206,10 @@ imageForm.onchange = populateStorage;

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

      +

      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.

      +

      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 index f43d902d87..bcd5c59b3c 100644 --- 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 @@ -134,12 +134,12 @@ original_slug: Web/API/Worker/Functions_and_classes_available_to_workers
    - + - @@ -236,6 +236,6 @@ original_slug: Web/API/Worker/Functions_and_classes_available_to_workers

    Voir aussi

    diff --git a/files/fr/web/api/web_workers_api/index.html b/files/fr/web/api/web_workers_api/index.html index e218058f53..57afda034b 100644 --- a/files/fr/web/api/web_workers_api/index.html +++ b/files/fr/web/api/web_workers_api/index.html @@ -6,9 +6,7 @@ tags: - DOM translation_of: Web/API/Web_Workers_API --- -
    -
    {{DefaultAPISidebar("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.

    @@ -20,7 +18,7 @@ translation_of: Web/API/Web_Workers_API

    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.

    +

    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 :

    @@ -31,8 +29,8 @@ translation_of: Web/API/Web_Workers_API
  • Les Audio Workers donne la possibilité d'effectuer directement dans le contexte d'un worker web un traitement audio scripté.
  • -
    -

    Remarque: 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.

    +
    +

    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

    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 index 1fc2be25c8..ff872b99ad 100644 --- 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 @@ -4,7 +4,7 @@ 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 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.

    @@ -13,7 +13,7 @@ original_slug: Web/API/Web_Workers_API/algorithme_clonage_structure

    Il y a quelques avantages notables à utiliser l’algorithme de clonage structuré plutôt que JSON :

      -
    • Le clonage structuré peut copier des objets RegExp.
    • +
    • Le clonage structuré peut copier des objets RegExp.
    • Le clonage structuré peut copier des objets {{ domxref("Blob") }}, {{ domxref("File") }} et {{ domxref("FileList") }}.
    • Le clonage structuré peut copier des objets {{ domxref("ImageData") }}. Les dimensions du {{ domxref("CanvasPixelArray") }} du clone correspondront à celles de l’original, et il recevra une copie des mêmes données de pixels.
    • Le clonage structuré copie correctement les objets contenant des graphes de références cycliques.
    • @@ -22,11 +22,11 @@ original_slug: Web/API/Web_Workers_API/algorithme_clonage_structure

      Ce qui ne marche pas avec le clonage structuré

        -
      • Les objets Error et Function ne peuvent pas être copiés par l’algorithme de clonage structuré ; toute tentative de le faire émettra une exception DATA_CLONE_ERR.
      • +
      • Les objets Error et Function ne peuvent pas être copiés par l’algorithme de clonage structuré ; toute tentative de le faire émettra une exception DATA_CLONE_ERR.
      • De la même manière, toute tentative de cloner des nœuds DOM émettra une exception DATA_CLONE_ERR.
      • Certains paramètres d’objets ne sont pas préservés :
          -
        • Le champ lastIndex des objets RegExp n’est pas préservé.
        • +
        • Le champ lastIndex des objets RegExp n’est pas préservé.
        • Les descripteurs de propriétés, accesseurs et mutateurs (ainsi que les fonctionnalités de métadonnées similaires) ne sont pas copiés. Par exemple, si un objet est marqué en lecture seule via un descripteur de propriété, il sera en lecture et écriture dans le clone, car c’est la condition par défaut.
        • La chaîne de prototypes n’est ni parcourue, ni copiée.
        @@ -141,12 +141,14 @@ original_slug: Web/API/Web_Workers_API/algorithme_clonage_structure } -
          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.
        +
        +

        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

          -
        • Spécification HTML5 : Passage sécurisé de données structurées
        • +
        • Spécification HTML5 : Passage sécurisé de données structurées
        • {{ domxref("window.history") }}
        • {{ domxref("window.postMessage()") }}
        • Web Workers
        • 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 index f6eb904fd1..dd63df8aa4 100644 --- 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 @@ -11,7 +11,7 @@ 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.

          +

          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

          @@ -20,14 +20,14 @@ original_slug: Web/API/Web_Workers_API/Utilisation_des_web_workers

          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.

          +

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

          @@ -47,10 +47,9 @@ original_slug: Web/API/Web_Workers_API/Utilisation_des_web_workers

          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

          @@ -88,9 +87,13 @@ deuxiemeNombre.onchange = function() {

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

          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

          @@ -104,7 +107,7 @@ deuxiemeNombre.onchange = function() {

          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.

          +

          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 :

          @@ -132,7 +135,9 @@ importScripts('//example.com/hello.js'); /* importe un script d'une autre origin

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

          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

          @@ -215,9 +220,7 @@ Pour appliquer une règle de sécurité au worker, il faudra fournir un
          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

    +

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

    diff --git a/files/fr/web/api/webgl2renderingcontext/index.html b/files/fr/web/api/webgl2renderingcontext/index.html index d9e2e4959e..f1233fd66f 100644 --- a/files/fr/web/api/webgl2renderingcontext/index.html +++ b/files/fr/web/api/webgl2renderingcontext/index.html @@ -20,7 +20,7 @@ var gl = canevas.getContext('webgl2');
    -

    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.

    +

    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.

    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 index 8a3bee2e08..2fa7a52da1 100644 --- 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 @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Appliquer_des_découpes_simples

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

    +

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

    @@ -52,7 +52,7 @@ canvas { } -
    window.addEventListener("load", function setupWebGL (evt) {
    +
    window.addEventListener("load", function setupWebGL (evt) {
       "use strict"
       window.removeEventListener(evt.type, setupWebGL, false);
       var paragraph = document.querySelector("p");
    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
    index 134457e0fe..406d868fbd 100644
    --- 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
    @@ -14,7 +14,7 @@ original_slug: Web/API/WebGL_API/By_example/Modèle_1
     
     

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

    +

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

    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 index 9cb1d89359..99c382c0ac 100644 --- 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 @@ -16,7 +16,7 @@ original_slug: Web/API/WebGL_API/By_example/Tailles_de_canvas_et_WebGL

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

    +

    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

    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 index eaf21ce19a..91c858dcec 100644 --- 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 @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Appliquer_une_couleur_à_la_souris

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

    +

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

    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 index c5a6013ed9..fd92c8ce1c 100644 --- 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 @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Appliquer_des_couleurs

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

    +

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

    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 index 250b7927a5..f5ef6779ef 100644 --- 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 @@ -15,14 +15,10 @@ original_slug: Web/API/WebGL_API/By_example/Masque_de_couleur

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

    @@ -34,9 +30,7 @@ original_slug: Web/API/WebGL_API/By_example/Masque_de_couleur

    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>
    @@ -77,7 +71,7 @@ button {
     }
     
    -
    window.addEventListener("load", function setupAnimation (evt) {
    +
    window.addEventListener("load", function setupAnimation (evt) {
       "use strict"
       window.removeEventListener(evt.type, setupAnimation, false);
     
    @@ -131,7 +125,5 @@ button {
     

    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 index 449d08fa57..b3083ba274 100644 --- 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 @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Détecter_WebGL
    {{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.

    +

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

    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 index b26df25f0f..c30e81f2f3 100644 --- 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 @@ -14,7 +14,7 @@ translation_of: Web/API/WebGL_API/By_example/Hello_GLSL

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

    +

    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.

    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 index c829a9b4f9..f00e3a7ea1 100644 --- 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 @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Introduction_aux_attributs_vertex

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

    +

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

    diff --git a/files/fr/web/api/webgl_api/by_example/index.html b/files/fr/web/api/webgl_api/by_example/index.html index b7741c417f..037ed0d183 100644 --- a/files/fr/web/api/webgl_api/by_example/index.html +++ b/files/fr/web/api/webgl_api/by_example/index.html @@ -12,9 +12,7 @@ translation_of: Web/API/WebGL_API/By_example

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

    -
    +

    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

    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 index 15fae85fc7..de42151f5c 100644 --- 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 @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Une_pluie_de_rectangle

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

    +

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

    @@ -59,7 +59,7 @@ button { -
    "use strict"
    +
    "use strict"
     window.addEventListener("load", setupAnimation, false);
     var gl,
       timer,
    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
    index 76dfac1def..e151ad4c95 100644
    --- 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
    @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Créer_une_animation_avec_découpe_e
     
     

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

    +

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

    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 index cf2677db28..03897206ae 100644 --- 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 @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Créer_une_animation_colorée

    {{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")}}.

    +

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

    @@ -56,7 +56,7 @@ canvas { }
    -
    window.addEventListener("load", function setupAnimation (evt) {
    +
    window.addEventListener("load", function setupAnimation (evt) {
       "use strict"
       window.removeEventListener(evt.type, setupAnimation, false);
     
    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
    index 82d47f2008..f88812a7d3 100644
    --- 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
    @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Générer_des_textures_avec_du_code
     
     

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

    +

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

    @@ -153,13 +153,9 @@ if (program) gl.clear(gl.COLOR_BUFFER_BIT); return gl; } +})();
    - -

    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 index 00f4feda91..9f5c93f1f9 100644 --- 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 @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Les_textures_vidéos

    {{Previous("Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}

    -

    Cet exemple illustre comment utiliser des fichiers vidéos comme textures.

    +

    Cet exemple illustre comment utiliser des fichiers vidéos comme textures.

    Des textures à partir de vidéos

    diff --git a/files/fr/web/api/webgl_api/index.html b/files/fr/web/api/webgl_api/index.html index 8117eff285..cd73e5b62b 100644 --- a/files/fr/web/api/webgl_api/index.html +++ b/files/fr/web/api/webgl_api/index.html @@ -14,19 +14,16 @@ 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.

    -
    +

    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.

    +

    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.

    +

    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

    -
    • {{domxref("WebGLRenderingContext")}}
    • {{domxref("WebGL2RenderingContext")}} {{experimental_inline}}
    • @@ -46,11 +43,9 @@ translation_of: Web/API/WebGL_API
    • {{domxref("WebGLUniformLocation")}}
    • {{domxref("WebGLVertexArrayObject")}} {{experimental_inline}}
    -

    Extensions

    -
    • {{domxref("ANGLE_instanced_arrays")}}
    • {{domxref("EXT_blend_minmax")}}
    • @@ -82,7 +77,6 @@ translation_of: Web/API/WebGL_API
    • {{domxref("WEBGL_draw_buffers")}}
    • {{domxref("WEBGL_lose_context")}}
    -

    Evènements

    @@ -95,8 +89,8 @@ translation_of: Web/API/WebGL_API

    Constantes et types

    WebGL 2

    @@ -104,13 +98,13 @@ translation_of: Web/API/WebGL_API

    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.

    @@ -122,34 +116,34 @@ translation_of: Web/API/WebGL_API

    Guides

    -
    Données en WebGL
    +
    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
    +
    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
    +
    Utilisation des extensions
    Un guide pour l'utilisation des extensions WebGL.

    Tutoriels

    -
    Tutoriel WebGL
    +
    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
    +
    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
    +
    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
    +
    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.
    @@ -218,7 +212,7 @@ translation_of: Web/API/WebGL_API

    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.

    +

    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

    @@ -236,6 +230,6 @@ translation_of: Web/API/WebGL_API

    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 index 7c731ca050..2369abb5e4 100644 --- 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 @@ -17,7 +17,7 @@ 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.

    +

    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

    @@ -25,7 +25,7 @@ original_slug: Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL

    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.

    +

    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.

    @@ -196,8 +196,8 @@ function loadShader(gl, type, source) {

    Une fois que les shaders sont définis, que les emplacements sont retrouvés, et que les positions des sommets du carré 2D sont stockées dans le tampon, nous pouvons faire effectivement le rendu de la scène. Puisque nous n'animons rien dans cet exemple, notre fonction drawScene() est très simple. Elle utilise quelques routines utilitaires que nous décrirons sous peu.

    -
    -

    Vous pourriez obtenir une erreur JavaScript indiquant "mat4 n'est pas défini". Cela signifie qu'il existe une dépendance à glmatrix. Vous pouvez inclure gl-matrix.js pour résoudre ce problème, comme suggéré ici.

    +
    +

    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) {
    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
    index dcf9a4285f..df7fcb4658 100644
    --- 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
    @@ -139,7 +139,7 @@ function configurerVideo(url) {
     

    Voir aussi

    {{Previous("Web/API/WebGL_API/Tutorial/Lighting_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 index 20d4223182..10adde485e 100644 --- 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 @@ -7,23 +7,22 @@ tags: 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.

    +

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

    +

    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>
    +
    <body>
       <canvas id="glCanvas" width="640" height="480"></canvas>
    -</body>
    +</body>
     
    -
    -

    Préparation du contexte WebGL

    +

    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.

    @@ -52,7 +51,7 @@ function main() {

    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.

    +

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

    @@ -70,5 +69,4 @@ function main() {
  • An intro to modern OpenGL : une série de bons articles sur OpenGL écrits par Joe Groff, fournissant une introduction claire à OpenGL, depuis son histoire jusqu'au concept important de pipeline de graphismes, qui comprend aussi quelques exemples montrant comment OpenGL fonctionne. Si vous n'avez aucune idée de ce qu'est OpenGL, c'est un bon endroit pour commencer.
  • -

    {{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}

    -
    +

    {{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 index 28c6e1c8b3..671b448a9d 100644 --- a/files/fr/web/api/webgl_api/tutorial/index.html +++ b/files/fr/web/api/webgl_api/tutorial/index.html @@ -10,15 +10,13 @@ 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.

    -
    +

    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.

    +

    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.

    +

    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

    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 index 37d48469cd..0bd4a47c5d 100644 --- 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 @@ -9,7 +9,7 @@ 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.

    +

    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

    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 index c28419742e..002be155c6 100644 --- 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 @@ -15,7 +15,9 @@ original_slug: Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_WebGL

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

    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 : 

    @@ -258,7 +260,7 @@ function drawScene(gl, programInfo, buffers, texture, deltaTime) {

    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.

    +

    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.

    diff --git a/files/fr/web/api/webglrenderingcontext/enable/index.html b/files/fr/web/api/webglrenderingcontext/enable/index.html index 9c2d5149ca..3a4a7633b1 100644 --- a/files/fr/web/api/webglrenderingcontext/enable/index.html +++ b/files/fr/web/api/webglrenderingcontext/enable/index.html @@ -23,8 +23,7 @@ original_slug: Web/API/WebGLRenderingContext/activer
    fon
    -
    Un {{domxref("GLenum")}} indiquant quelle fonctionnalité WebGL activer. Valeurs possibles :
    -
    +

    Un {{domxref("GLenum")}} indiquant quelle fonctionnalité WebGL activer. Valeurs possibles :

    Cré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}} 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 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}}
    @@ -71,8 +70,7 @@ original_slug: Web/API/WebGLRenderingContext/activer
    - Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles : - +

    Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles :

    diff --git a/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.html b/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.html index 7107acc1c5..a573a50f6c 100644 --- a/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.html +++ b/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.html @@ -22,7 +22,7 @@ translation_of: Web/API/WebGLRenderingContext/enableVertexAttribArray

    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.

    -

    Vous pouvez désactiver le tableau d'attributs en appelant {{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}}.

    +

    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.

    @@ -58,7 +58,7 @@ translation_of: Web/API/WebGLRenderingContext/enableVertexAttribArray

    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);
    +
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
     
     aVertexPosition =
         gl.getAttribLocation(programmeShader, "aVertexPosition");
    @@ -69,9 +69,9 @@ gl.vertexAttribPointer(aVertexPosition, vertexNumComponents,
     
     gl.drawArrays(gl.TRIANGLES, 0, vertexCount);
    -
    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.
    - -

     

    +
    +

    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()")}}.

    @@ -81,8 +81,6 @@ gl.drawArrays(gl.TRIANGLES, 0, vertexCount);

    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

    diff --git a/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.html b/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.html index ee31458f04..89393bd4f7 100644 --- a/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.html +++ b/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.html @@ -25,18 +25,18 @@ translation_of: Web/API/WebGLRenderingContext/getUniformLocation
     
    -
    {{domxref ("WebGLRenderingContext.getUniform", "getUniform()")}}
    -
    Retourne la valeur de l'uniform à l'emplacement indiqué.
    +
    {{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.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.
    + {{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.

    + L'uniform lui-même est déclaré dans le programme shader en utilisant GLSL.

    Syntaxe

    @@ -59,7 +59,7 @@ translation_of: Web/API/WebGLRenderingContext/getUniformLocation

    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.

    -

    Le type WebGLUniformLocation est compatible avec le type GLint pour indiquer l'indice ou l'emplacement d'un attribut uniform.

    +

    Note : Le type WebGLUniformLocation est compatible avec le type GLint pour indiquer l'indice ou l'emplacement d'un attribut uniform.

    Erreurs

    @@ -77,7 +77,7 @@ translation_of: Web/API/WebGLRenderingContext/getUniformLocation

    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);
    +
    gl.useProgram(programmeShader);
     
     uScalingFactor =
         gl.getUniformLocation(programmeShader, "uScalingFactor");
    @@ -90,7 +90,9 @@ gl.uniform2fv(uScalingFactor, currentScale);
     gl.uniform2fv(uRotationVector, currentRotation);
     gl.uniform4fv(uGlobalColor, [0.1, 0.7, 0.2, 1.0]);
    -
    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.
    +
    +

    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.

    diff --git a/files/fr/web/api/webglrenderingcontext/index.html b/files/fr/web/api/webglrenderingcontext/index.html index 25ba243a43..437dbe6f19 100644 --- a/files/fr/web/api/webglrenderingcontext/index.html +++ b/files/fr/web/api/webglrenderingcontext/index.html @@ -22,7 +22,7 @@ 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.

    +

    Le tutoriel WebGL contient plus d'informations, d'exemples, et de ressources sur comment débuter en WebGL.

    Constants

    diff --git a/files/fr/web/api/webglrenderingcontext/teximage2d/index.html b/files/fr/web/api/webglrenderingcontext/teximage2d/index.html index 75ac660bbf..af95e8f3c8 100644 --- a/files/fr/web/api/webglrenderingcontext/teximage2d/index.html +++ b/files/fr/web/api/webglrenderingcontext/teximage2d/index.html @@ -38,7 +38,7 @@ void gl.texImage2D(cible, niveau, formatinterne
    cible
    -
    Un {{domxref ("GLenum")}} indiquant le point de liaison (cible) de la texture active. Valeurs possibles : +

    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 ;
    • @@ -49,13 +49,10 @@ void gl.texImage2D(cible, niveau, formatinterne
    • 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 : +

    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 ;
    • @@ -115,7 +112,7 @@ void gl.texImage2D(cible, niveau, formatinterne
      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 : +

      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 ;
      • @@ -157,7 +154,7 @@ void gl.texImage2D(cible, niveau, formatinterne
      pixels
      -
      L'un des objets suivants peut être utilisé comme source de pixels pour la texture : +

      L'un des objets suivants peut être utilisé comme source de pixels pour la texture :

      • {{domxref("ArrayBufferView")}},
          @@ -176,10 +173,6 @@ void gl.texImage2D(cible, niveau, formatinterne
      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

    diff --git a/files/fr/web/api/webglrenderingcontext/uniform/index.html b/files/fr/web/api/webglrenderingcontext/uniform/index.html index c2247c102f..cb27eaeb2c 100644 --- a/files/fr/web/api/webglrenderingcontext/uniform/index.html +++ b/files/fr/web/api/webglrenderingcontext/uniform/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/WebGLRenderingContext/uniform

    Les méthodes WebGLRenderingContext.uniform[1234][fi][v]() de l'API WebGL indiquent les valeurs des variables uniform.

    -

    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]()")}}.

    +

    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

    diff --git a/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.html b/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.html index b40c03e607..93961c4fda 100644 --- a/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.html +++ b/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.html @@ -11,7 +11,7 @@ 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.

    +

    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

    @@ -124,18 +124,18 @@ translation_of: Web/API/WebGLRenderingContext/vertexAttribPointer

    sera stocké dans le tampon des tableaux comme suit :

    -
    +
    - - - - - - - - - + + + + + + + + +
    00 00 80 3F00 00 00 4000 00 0C 3F7F0000007F FF3F FF00 00 80 3F00 00 00 4000 00 0C 3F7F0000007F FF3F FF
    @@ -182,7 +182,7 @@ 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 :
    +
    // Décrire la disposition du tampon :
     //1. position, non normalisé
     gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 20, 0);
     gl.enableVertexAttribArray(0);
    @@ -204,7 +204,7 @@ 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');
    +
    const positionLoc = gl.getAttribLocation(shaderProgram, 'position');
     gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 20, 0);
     gl.enableVertexAttribArray(positionLoc);
     
    diff --git a/files/fr/web/api/webrtc_api/connectivity/index.html b/files/fr/web/api/webrtc_api/connectivity/index.html
    index 661cafcb1f..119cf898ff 100644
    --- a/files/fr/web/api/webrtc_api/connectivity/index.html
    +++ b/files/fr/web/api/webrtc_api/connectivity/index.html
    @@ -6,7 +6,7 @@ tags:
     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.

    +

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

    @@ -18,8 +18,6 @@ original_slug: Web/Guide/API/WebRTC/WebRTC_architecture

    Le client enverra une demande à un serveur STUN sur internet qui répondra avec l'adresse du client public et informera si le client est accessible derrière un routeur NAT.

    -

    An interaction between two users of a WebRTC application involving a STUN server.

    -

    Qu’est-ce que NAT?

    Network Address Translation (NAT) est utilisé pour donner à votre appareil une adresse IP publique. Un routeur aura une adresse IP publique et chaque périphérique connecté au routeur aura une adresse IP privée. Les demandes seront traduites de l'adresse IP privée de l'appareil vers l'IP publique du routeur avec un port unique. De cette façon, vous n'avez pas besoin d’avoir une adresse IP publique unique pour chaque périphérique, mais pouvez encore être découvert sur internet.

    @@ -32,8 +30,6 @@ original_slug: Web/Guide/API/WebRTC/WebRTC_architecture

    Traversal Using Relays around NAT (TURN) Doit contourner la restriction de NAT Symétrique en ouvrant une connexion avec un serveur TURN et retransmettre toutes les informations par le biais de ce serveur. Vous devrez créer une connexion avec un serveur TURN et dire à tous les pairs d'envoyer des paquets au serveur qui vous seront alors expédiés. Cela vient évidemment avec une certaine surcharge et n'est donc utilisé que s'il n'y a pas d'autres alternatives.

    -

    Une interaction entre deux utilisateurs d'une application WebRTC impliquant des serveurs STUN et TURN.

    -

    Qu’est-ce que SDP?

    Session Description Protocol (SDP) est une norme décrivant le contenu multimédia de la connexion comprenant la résolution, les formats, les codecs, le cryptage, etc., afin que les deux pairs puissent se comprendre une fois le transfert des données en cours. Ce n'est pas le média lui-même, mais plus les métadonnées.

    @@ -52,4 +48,4 @@ original_slug: Web/Guide/API/WebRTC/WebRTC_architecture

    L'échange entier dans un diagramme compliqué

    -

    Un schéma architectural complet montrant l'ensemble du processus WebRTC.

    +

    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 index a03e5682bc..3409541610 100644 --- a/files/fr/web/api/webrtc_api/index.html +++ b/files/fr/web/api/webrtc_api/index.html @@ -16,7 +16,8 @@ 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 (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 parvenri. 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.

    @@ -70,12 +71,12 @@ translation_of: Web/API/WebRTC_API
    {{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.
    +
    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.
    +
    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é

    @@ -143,24 +144,24 @@ translation_of: Web/API/WebRTC_API

    Protocoles propres au WebRTC

    Protocoles de support associés

    Spécifications

    @@ -194,7 +195,7 @@ translation_of: Web/API/WebRTC_API

    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

    • {{domxref("MediaDevices")}}
    • diff --git a/files/fr/web/api/webrtc_api/session_lifetime/index.html b/files/fr/web/api/webrtc_api/session_lifetime/index.html index 72f7cfcdb6..7bc9c98dab 100644 --- a/files/fr/web/api/webrtc_api/session_lifetime/index.html +++ b/files/fr/web/api/webrtc_api/session_lifetime/index.html @@ -5,18 +5,27 @@ translation_of: Web/API/WebRTC_API/Session_lifetime original_slug: WebRTC/Introduction ---
      -

      WebRTC vous permet de faire de la communication pair-à-pair dans une application du navigateur.

      +

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

      + +

      Le support WebRTC dans Firefox est caché derrière une préférence. Allez à about:config et positionnez 'media.navigator.enabled' à 'true'.

      +
      -

      Il y a des fichiers de tests dans les sources pour vous donner une idée sur ce qui fonctionne. Voir: dom/media/tests/local_video_test.html. Essayez aussi la demo de service d'appel, sa page source, et son serveur source.

      +

      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 index 65bba15124..a4b67ab853 100644 --- 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 @@ -7,9 +7,7 @@ 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

      -
      +

      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

      @@ -94,7 +92,7 @@ pc.setRemoteDescription(new RTCSessionDescription(offer), function() { }, error)

      Tout ce qui est en dessous de ce point est potentiellement obsolète. Il est toujours là en attente d'examen et d'intégration possible dans d'autres parties de la documentation où il serait encore valides.

      -

      Ne pas utiliser les examples de cette page. Voir l'article signalisation et appel vidéo ,pour des example mis a jour sur l'utilisation des medias WebRTC.

      +

      Note : 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

      @@ -109,7 +107,7 @@ pc.setRemoteDescription(new RTCSessionDescription(offer), function() { }, error)

      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 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;
      @@ -118,13 +116,13 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||

      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);
      +
      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 = {
      +
      var configuration = {
           iceServers: [
               {url: "stun:23.21.150.121"},
               {url: "stun:stun.l.google.com:19302"},
      @@ -138,7 +136,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||
       
       

      Selon le type de connexion, vous devez passer des options.

      -
      var options = {
      +
      var options = {
           optional: [
               {DtlsSrtpKeyAgreement: true},
               {RtpDataChannels: true}
      @@ -153,7 +151,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||
       
       

      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) {
      +
      pc.onicecandidate = function (e) {
           // candidate exists in e.candidate
           if (e.candidate == null) { return }
           send("icecandidate", JSON.stringify(e.candidate));
      @@ -172,7 +170,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||
       
       

      La structure de la base de données ressemble à ceci :

      -
      {
      +
      {
           "": {
               "candidate:": …
               "offer": …
      @@ -188,7 +186,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||
       
       

      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.createOffer(function (offer) {
           pc.setLocalDescription(offer);
       
           send("offer", JSON.stringify(offer));
      @@ -198,7 +196,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||
       
       

      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) {
      +
      var errorHandler = function (err) {
           console.error(err);
       };
      @@ -206,7 +204,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||

      Options pour l'offre SDP.

      -
      var constraints = {
      +
      var constraints = {
           mandatory: {
               OfferToReceiveAudio: true,
               OfferToReceiveVideo: true
      @@ -221,7 +219,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||
       
       

      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) {
      +
      recv("offer", function (offer) {
           offer = new SessionDescription(JSON.parse(offer))
           pc.setRemoteDescription(offer);
       
      @@ -238,7 +236,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||
       
       

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

      @@ -248,7 +246,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||

      channelOptions

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

      @@ -262,13 +260,13 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||

      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) {
      +
      channel.onerror = function (err) {
           console.error("Channel Error:", err);
       };

      onmessage

      -
      channel.onmessage = function (e) {
      +
      channel.onmessage = function (e) {
           console.log("Got message:", e.data);
       }
      @@ -282,7 +280,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||

      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) {
      +
      pc.ondatachannel = function (e) {
           e.channel.onmessage = function () { … };
       };
      @@ -290,7 +288,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||

      send()

      -
      channel.send("Hi Peer!");
      +
      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.

      @@ -304,7 +302,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||

      Obtenir les médias de l'utilisateur

      -
      <video id="preview" autoplay></video>
      +
      <video id="preview" autoplay></video>
       
       var video = document.getElementById("preview");
       navigator.getUserMedia(mediaOptions, function (stream) {
      @@ -315,7 +313,7 @@ navigator.getUserMedia(mediaOptions, function (stream) {
       
       

      Les contraintes sur les types de médias que vous souhaitez renvoyer de l'utilisateur.

      -
      var mediaOptions = {
      +
      var mediaOptions = {
           video: true,
           audio: true
       };
      @@ -332,11 +330,11 @@ navigator.getUserMedia(mediaOptions, function (stream) {

      Ajoute le flux de getUserMedia au PeerConnection.

      -
      pc.addStream(stream);
      +
      pc.addStream(stream);

      onaddstream

      -
      <video id="otherPeer" autoplay></video>
      +
      <video id="otherPeer" autoplay></video>
       
       var otherPeer = document.getElementById("otherPeer");
       pc.onaddstream = function (e) {
      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
      index 2cb9e54c38..26e4bde58c 100644
      --- a/files/fr/web/api/webrtc_api/taking_still_photos/index.html
      +++ b/files/fr/web/api/webrtc_api/taking_still_photos/index.html
      @@ -10,7 +10,7 @@ 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.

      +

      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>
      @@ -95,7 +95,7 @@ original_slug: WebRTC/Prendre_des_photos_avec_la_webcam
             height = 0;

      Afin d'éviter les variables globales, on encapsule le script dans une fonction anonyme. Nous capturons les éléments du HTML dont nous avons besoin et nous définissons une largeur de vidéo à 320 et une hauteur à 0. La hauteur appropriée sera calculée plus tard.

      -

      À l'heure actuelle, il y a une différence dans les tailles de vidéo offertes par getUserMedia. Firefox Nightly utilise une résolution de 352x288 alors que Opera et Chrome utilisent une résolution de 640x400. Celà changera dans le futur, mais redimensionner avec le rapport comme nous le faisons nous épargnera des mauvaises surprises.

      +

      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:

      diff --git a/files/fr/web/api/websocket/index.html b/files/fr/web/api/websocket/index.html index 45acf344a3..2ae740ebe7 100644 --- a/files/fr/web/api/websocket/index.html +++ b/files/fr/web/api/websocket/index.html @@ -82,7 +82,6 @@ translation_of: Web/API/WebSocket

      Évènements

      -

      Vous pouvez é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.

      close
      diff --git a/files/fr/web/api/websocket/websocket/index.html b/files/fr/web/api/websocket/websocket/index.html index 955611fa20..94ff66e828 100644 --- a/files/fr/web/api/websocket/websocket/index.html +++ b/files/fr/web/api/websocket/websocket/index.html @@ -19,9 +19,7 @@ var aWebSocket = new WebSocket(url [, protocols]);
      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 : [].
      +
      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

      diff --git a/files/fr/web/api/websockets_api/index.html b/files/fr/web/api/websockets_api/index.html index 7ba0b6b22b..3a1f82be97 100644 --- a/files/fr/web/api/websockets_api/index.html +++ b/files/fr/web/api/websockets_api/index.html @@ -19,14 +19,14 @@ translation_of: Web/API/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.

      +
      +

      Note : Bien que les connexions WebSocket soient fonctionnellement similaires aux sockets standard de type Unix, elles ne sont pas liées.

      Interfaces  

      -
      WebSocket
      +
      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.
      @@ -45,29 +45,27 @@ translation_of: Web/API/WebSockets_API

      Outils

      -
        -
      •  HumbleNet :Bibliothèque de réseau multiplateforme qui fonctionne dans un navigateur. Il s'agit bibliothèque écrite en C qui enveloppe WebSockets et WebRTC. Elle gomme toutes les différences qui existent entre les navigateurs et les logiciels, ce qui facilite la création d'une fonctionnalité de réseau multi-joueurs pour les jeux, par exemple,  et autres applications.
      • +
      •  HumbleNet :Bibliothèque de réseau multiplateforme qui fonctionne dans un navigateur. Il s'agit bibliothèque écrite en C qui enveloppe WebSockets et WebRTC. Elle gomme toutes les différences qui existent entre les navigateurs et les logiciels, ce qui facilite la création d'une fonctionnalité de réseau multi-joueurs pour les jeux, par exemple,  et autres applications.
      • µWebSockets: Déclinaison plus légère et plus performante de WebSocket et écrite en C++11 et en Node.js.
      • ClusteWS: Framework léger, rapide et puissant qui permet de construire des application en Node.js.
      • -
      • Socket.IO: API WebSocket puissante et multiplateformes en Node.js.
      • -
      • SocketCluster: Framework open source en temps réel en Node.js. Il prend en charge à la fois la communication directe client-serveur et la communication de groupe via les pub/sub canaux. Il est conçu pour s'adapter facilement à n'importe quel nombre de processus/hôtes et est idéal pour construire de chat de discution.
      • -
      • WebSocket-Node: API WebSocket coté serveur en Node.js.
      • -
      • Total.js: FrameWork pour web application en Node.js.
      • -
      • Faye: Combine WebSocket(bidirectionnelle) et EventSource(unidirectionnelle) , côté serveur et côté client en Node.js.
      • +
      • Socket.IO: API WebSocket puissante et multiplateformes en Node.js.
      • +
      • SocketCluster: Framework open source en temps réel en Node.js. Il prend en charge à la fois la communication directe client-serveur et la communication de groupe via les pub/sub canaux. Il est conçu pour s'adapter facilement à n'importe quel nombre de processus/hôtes et est idéal pour construire de chat de discution.
      • +
      • Node.js.
      • +
      • Total.js: FrameWork pour web application en Node.js.
      • +
      • Faye: Combine WebSocket(bidirectionnelle) et EventSource(unidirectionnelle) , côté serveur et côté client en Node.js.
      • SignalR: SignalR est une nouvelle bibliothèque pour les développeurs ASP.NET. Elle simplifie l'ajout des WebSockets dans les applications. SignalR utilise les canaux  de WebSockets lorsqu'elles sont disponibles,  dans le cas contraire elle utilise d'autres technos, sans modifier votre application.
      • Caddy: Serveur web capable de créer des WebSockets serveur/proxy(stdin/stdout, echo, cat, ...).
      • -
      • ws: La plus populaire des WebSockets pour client & serveur en Node.js.
      • +
      • ws: La plus populaire des WebSockets pour client & serveur en Node.js.
      • jsonrpc-bidirectional: Asynchronous RPC which, on a single connection, may have functions exported on the server and, and the same time, on the client (client may call server, server may also call client).
      • cowboy: Cowboy est un petit serveur HTTP rapide et moderne pour Erlang/OTP basé sur WebSocket.
      -

      Ressources liées

      Spécifications

      @@ -89,13 +87,13 @@ translation_of: Web/API/WebSockets_API WebSockets -

      Candidat au statut de Recommendation

      +

      Candidat au statut de Recommendation

      {{RFC(6455, "The WebSocket Protocol")}} - IETF RFC + IETF RFC @@ -110,7 +108,7 @@ translation_of: Web/API/WebSockets_API

      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 index c8cb6ccca9..bf8ac63d44 100644 --- 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 @@ -9,21 +9,21 @@ translation_of: Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java

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

      +

      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.

      +

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

      +

      Voici comment implémenter ce que nous venons d'apprendre :

      import java.net.ServerSocket;
       import java.net.Socket;
      @@ -45,9 +45,9 @@ public class Server{
       

      Méthodes :

      @@ -63,7 +63,7 @@ public class Server{

      Méthodes :

      -
      read(byte[] b, int off, int len)
      +
      read(byte[] b, int off, int len)

      Reads up to len bytes of data from the input stream into an array of bytes.

      @@ -180,7 +180,7 @@ if (get.find()) {

      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

      + Opcode 0x1 signifie que ceci est un texte. Liste exhaustive des Opcodes

      - 134:

      @@ -189,7 +189,7 @@ if (get.find()) {

      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.

      -

      Je peux prendre 128 car le premier bit est toujours 1.

      +

      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.

      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 index 9e16a43e45..d2cf5fccbf 100644 --- 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 @@ -5,13 +5,15 @@ 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.
      +
      +

      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.

      +

      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 :

      @@ -45,13 +47,13 @@ WebSocket WebSocket(

      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.

      +

      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.

      +

      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.

      +

      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");
       
      @@ -65,15 +67,17 @@ WebSocket WebSocket(

      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.

      +

      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 :

      +

      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.

      +

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

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

      @@ -84,7 +88,7 @@ WebSocket WebSocket(

      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:

      +

      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() {
      @@ -165,7 +169,7 @@ function sendText() {
       };
       
      -

      Ici nous utilisons JSON.parse() pour convertir l'objet JSON en l'objet original, avant de l'examiner et le traiter.

      +

      Ici nous utilisons JSON.parse() pour convertir l'objet JSON en l'objet original, avant de l'examiner et le traiter.

      Encodage du texte

      @@ -175,7 +179,7 @@ function sendText() {

      Fermeture de la connexion

      -

      Quand on n'a plus besoin de la connexion WebSocket, on appelle la méthode close() de l'objet WebSocket:

      +

      Quand on n'a plus besoin de la connexion WebSocket, on appelle la méthode close() de l'objet WebSocket:

      exampleSocket.close();
       
      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 index d3797e4f46..5cc97ce8b0 100644 --- a/files/fr/web/api/websockets_api/writing_websocket_servers/index.html +++ b/files/fr/web/api/websockets_api/writing_websocket_servers/index.html @@ -7,20 +7,20 @@ translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers

      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.

      +

      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.

      -

      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. 

      +

      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

      +

      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. 

      +

      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. 

      @@ -40,18 +40,18 @@ 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.

      +

      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.

      -

      Astuce:  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 : 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. 

      -

      Astuce: 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 : 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. 

      +

      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 

      @@ -65,16 +65,16 @@ Connection: Upgrade
      -

      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

      +

      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

      -

      Pour information / pour mémoire : 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). 

      +

      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 ! 

      +

      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 ! 

      -

      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. 

      +

      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 

      @@ -88,12 +88,12 @@ Connection: Upgrade

      Format

      -

      Note du traducteur : 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. 

      +

      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
        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    |
      @@ -146,10 +146,10 @@ Connection: Upgrade
       
      var DECODED = "";
       for (var i = 0; i < ENCODED.length; i++) {
           DECODED[i] = ENCODED[i] ^ MASK[i % 4];
      -}
      +}
      -

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

      +

      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 

      @@ -158,7 +158,7 @@ for (var i = 0; i < ENCODED.length; i++) {

      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"
      +
      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)
      @@ -177,35 +177,31 @@ for (var i = 0; i < ENCODED.length; i++) {
       

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

      -

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

      +

      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

      +

      Diverses informations utiles

      -

      L'ensemble des codes, extensions et sous-protocoles liés aux WebSocket sont enregistrés dans le (registre) IANA WebSocket Protocol Registry.

      +

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

      -

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

      +

      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

      -
      -

      Cette section mériterait d'être étendue et complétée. Merci de le faire si vous disposez des moyens pour le faire. 

      -
      -

      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. 

      -

      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. 

      +

      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 

      @@ -213,7 +209,7 @@ for (var i = 0; i < ENCODED.length; i++) {

      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. 

      -

      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. 

      +

      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 : 

      @@ -236,19 +232,19 @@ Sec-WebSocket-Protocol: wamp
      -

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

      +

      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. 

      +

      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. 

      -

      Astuce: 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. 

      +

      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 index 148a80907d..4d41a433a3 100644 --- a/files/fr/web/api/webvr_api/index.html +++ b/files/fr/web/api/webvr_api/index.html @@ -5,7 +5,7 @@ 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.

      +

      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

      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 index 309fd3ff58..ac6babdad9 100644 --- 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 @@ -6,7 +6,7 @@ original_slug: Web/API/WebVR_API/Utiliser_des_contrôleurs_de_realite_virtuelle_ ---
      {{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.

      +

      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

      @@ -244,8 +244,6 @@ if(gp) { } }
      -

      Summary

      -

      This article has given you a very basic idea of how to use the Gamepad Extensions to use VR controllers inside WebVR apps. In a real app you'd probably have a much more complex control system in effect, with controls assigned to the buttons on the VR controllers, and the display being affected by both the display pose and the controller poses simultaneously. Here however, we just wanted to isolate the pure Gamepad Extensions parts of that.

      See also

      diff --git a/files/fr/web/api/webvtt_api/index.html b/files/fr/web/api/webvtt_api/index.html index e450f04863..eaca4fd78c 100644 --- a/files/fr/web/api/webvtt_api/index.html +++ b/files/fr/web/api/webvtt_api/index.html @@ -5,7 +5,9 @@ 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.

      +

      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

      @@ -44,16 +46,16 @@ Ne jamais boire de l'azote liquide.
      Exemple 1 - Plus petit fichier WebVTT
      -
      WEBVTT
      +
      WEBVTT
       
      Exemple 2 - Simple fichier WebVTT contenant un entête
      -
      WEBVTT - Ce fichier ne possède pas de réplique.
      +
      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.
      +
      WEBVTT - Ce fichier possède des répliques.
       
       14
       00:01:14.815 --> 00:01:18.114
      @@ -115,11 +117,11 @@ NOTE Cette ligne est la dernière ligne du fichier
       
       
      Exemple 4 - Simple commentaire WebVTT
      -
      NOTE Ceci est un simple commentaire
      +
      NOTE Ceci est un simple commentaire
      Exemple 5 - Multi-line comment
      -
      NOTE
      +
      NOTE
       Un autre commentaire qui est
       coupé sur plusieurs lignes.
       
      @@ -129,7 +131,7 @@ sur plusieurs lignes de cette façon.
       
       
      Exemple 6 - Usage commun des commentaires
      -
      WEBVTT - Traduction de ce film que j'aime
      +
      WEBVTT - Traduction de ce film que j'aime
       
       NOTE
       Cette traduction a été faite par Kyle pour que
      @@ -158,7 +160,7 @@ NOTE Cette dernière ligne n'est pas forcément bien traduite.
       
       

      Avec du CSS

      -
      video::cue {
      +
      video::cue {
         background-image: linear-gradient(to bottom, dimgray, lightgray);
         color: papayawhip;
       }
      @@ -172,16 +174,16 @@ video::cue(b) {
       
       

      The HTML snippet below actually handles displaying the media itself.

      -
      <video controls autoplay src="video.webm">
      +
      <video controls autoplay src="video.webm">
        <track default src="track.vtt">
       </video>
       
      -

      Dans le fichier WebVTT

      +

      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
      +
      WEBVTT
       
       STYLE
       ::cue {
      @@ -204,7 +206,7 @@ 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
      +
      WEBVTT
       
       1
       00:00.000 --> 00:02.000
      @@ -215,12 +217,12 @@ crédit de transcription
       Transcrit par Célestes™
       
      -
      ::cue(#\31) { color: lime; }
      +
      ::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
      +
      WEBVTT
       
       00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35%
       Where did he go?
      @@ -231,7 +233,7 @@ 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?
      -

      Les répliques WebVTT

      +

      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:

      @@ -239,13 +241,13 @@ What are you waiting for?
    • An optional cue identifier followed by a newline.
    • Cue timings.
    • Optional cue settings with at least one space before the first and between each setting.
    • -
    • One or more newlines.
    • +
    • A single newline.
    • The cue payload text.
    -
    Exemple 7 - Exemple de réplique
    +
    Example 7 - Example of a cue
    -
    1 - Title Crawl
    +
    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....
    @@ -255,11 +257,11 @@ Some time ago in a place rather distant....
    Example 8 - Cue identifier from Example 7
    -
    1 - Title Crawl
    +
    1 - Title Crawl
    Example 9 - Common usage of identifiers
    -
    WEBVTT
    +
    WEBVTT
     
     1
     00:00:22.230 --> 00:00:24.606
    @@ -321,7 +323,7 @@ Third
        
  • Must be between 00 and 59 inclusive.
  • -
  • ttt is miliseconds. +
  • ttt is milliseconds.
    • Must be between 000 and 999 inclusive.
    @@ -330,20 +332,20 @@ Third
    Example 10 - Basic cue timing examples
    -
    00:22.230 --> 00:24.606
    -00:30.739 --> 00:00:34.074
    -00:00:34.159 --> 00:35.743
    +
    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: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: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
    @@ -534,7 +536,7 @@ Third top - align:middle + align:center centred horizontally centred vertically centred vertically @@ -554,7 +556,7 @@ Third

    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
     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
    @@ -562,7 +564,7 @@ Third
     
     

    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.

    +

    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.

    @@ -607,7 +609,7 @@ Third Non-breaking space -   + &nbsp; @@ -621,13 +623,13 @@ Third
  • Timestamp tag
      -
    • The timestamp must be greater that the cue's start timestamp, greater than any previous timestamp in the cue payload, and less than the cue's end timestamp. The active text is the text between the timestamp and the next timestamp or to the end of the payload if there is not another timestamp in the payload. Any text before the active text in the payload is previous text . Any text beyond the active text is future text . This enables karaoke style captions.
    • +
    • The timestamp must be greater that the cue's start timestamp, greater than any previous timestamp in the cue payload, and less than the cue's end timestamp. The active text is the text between the timestamp and the next timestamp or to the end of the payload if there is not another timestamp in the payload. Any text before the active text in the payload is previous text . Any text beyond the active text is future text . This enables karaoke style captions.
    Example 12 - Karaoke style text
    -
    1
    +  
    1
     00:16.500 --> 00:18.500
     When the moon <00:17.500>hits your eye
     
    @@ -643,7 +645,7 @@ That's <00:00:21.000>amore
      
  • -

    The following tags are the HTML tags allowed in a cue and require opening and closing tags (e.g., <b>text</b>).

    +

    The following tags are the HTML tags allowed in a cue and require opening and closing tags (e.g., <b>text</b>).

    • Class tag (<c></c>) @@ -655,7 +657,7 @@ That's <00:00:21.000>amore
      Example 14 - Class tag
      -
      <c.classname>text</c>
      +
      <c.classname>text</c>
    • Italics tag (<i></i>) @@ -666,7 +668,7 @@ That's <00:00:21.000>amore
      Example 15 - Italics tag
      -
      <i>text</i>
      +
      <i>text</i>
    • Bold tag (<b></b>) @@ -677,7 +679,7 @@ That's <00:00:21.000>amore
      Example 16 - Bold tag
      -
      <b>text</b>
      +
      <b>text</b>
    • Underline tag (<u></u>) @@ -688,29 +690,29 @@ That's <00:00:21.000>amore
      Example 17 - Underline tag
      -
      <u>text</u>
      +
      <u>text</u>
    • Ruby tag (<ruby></ruby>)
        -
      • Used with ruby text tags to display ruby characters (i.e., small annotative characters above other characters).
      • +
      • Used with ruby text tags to display ruby characters (i.e., small annotative characters above other characters).
      Example 18 - Ruby tag
      -
      <ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby>
      +
      <ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby>
    • Ruby text tag (<rt></rt>)
        -
      • Used with ruby tags to display ruby characters (i.e., small annotative characters above other characters).
      • +
      • Used with ruby tags to display ruby characters (i.e., small annotative characters above other characters).
      Example 19 - Ruby text tag
      -
      <ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby>
      +
      <ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby>
    • Voice tag (<v></v>) @@ -721,70 +723,22 @@ That's <00:00:21.000>amore
      Example 20 - Voice tag
      -
      <v Bob>text</v>
      +
      <v Bob>text</v>
    -

    Interfaces

    - -

    There are two interfaces or APIs used in WebVTT which are:

    - -

    VTTCue interface

    - -

    It is used for providing an interface in Document Object Model API, where different attributes supported by it can be used to prepare and alter the cues in number of ways.

    - -

    Constructor is the first point for starting the Cue which is defined using the default constructor VTTCue(startTime, endTime, text) where starting time, ending time and text for cue can be adjusted. After that we can set the region for that particular cue to which this cue belongs using cue.region. Vertical, horizontal, line, lineAlign, Position, positionAlign, text, size and Align can be used to alter the cue and its formation, just like we can alter the objects form, shape and visibility in HTML using CSS. But the VTTCue interface is within the WebVTT provides the vast range of adjustment variables which can be used directly to alter the Cue. Following interface can be used to expose WebVTT cues in DOM API:

    - -
    enum AutoKeyword { "auto" };
    -enum DirectionSetting { "" /* horizontal */, "rl", "lr" };
    -enum LineAlignSetting { "start", "center", "end" };
    -enum PositionAlignSetting { "line-left", "center", "line-right", "auto" };
    -enum AlignSetting { "start", "center", "end", "left", "right" };
    -[Constructor(double startTime, double endTime, DOMString text)]
    -interface VTTCue : TextTrackCue {
    -  attribute VTTRegion? region;
    -  attribute DirectionSetting vertical;
    -  attribute boolean snapToLines;
    -  attribute (double or AutoKeyword) line;
    -  attribute LineAlignSetting lineAlign;
    -  attribute (double or AutoKeyword) position;
    -  attribute PositionAlignSetting positionAlign;
    -  attribute double size;
    -  attribute AlignSetting align;
    -  attribute DOMString text;
    -  DocumentFragment getCueAsHTML();
    -};
    - -

    VTTRegion interface

    - -

    This is the second interface in WebVTT API.

    - -

    The new keyword can be used for defining a new VTTRegion object which can then be used for containing the multiple cues. There are several properties of VTTRegion which are width, lines, regionAnchorX, RegionAnchorY, viewportAnchorX, viewportAnchorY and scroll that can be used to specify the look and feel of this VTT region. The interface code is given below which can be used to expose the WebVTT regions in DOM API:

    - -
    enum ScrollSetting { "" /* none */, "up" };
    -[Constructor]
    -interface VTTRegion {
    -  attribute double width;
    -  attribute long lines;
    -  attribute double regionAnchorX;
    -  attribute double regionAnchorY;
    -  attribute double viewportAnchorX;
    -  attribute double viewportAnchorY;
    -  attribute ScrollSetting scroll;
    -};
    -

    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:

    -
      +
      • VTTCue

        • The methods which are available in this interface are: -
            +
            • GetCueAsHTML to get the HTML of that Cue.
            • VTT Constructor for creating new objects of Cues.
            • Autokeyword.
            • @@ -800,7 +754,7 @@ interface VTTRegion {
              • The methods used for region are listed below along with description of their functionality: -
                  +
                  • ScrollSetting: For adjusting the scrolling setting of all nodes present in given region.
                  • VTT Region Constructor: for construction of new VTT Regions.
                  @@ -815,17 +769,17 @@ interface VTTRegion {
                  1. Open a notepad.
                  2. -
                  3. The first line of WebVTT is standardized similar in the way some other languages require you to put headers as the file starts to indicate the file type. One the very first line you have to write.
                  4. +
                  5. 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:
                  -
                  WEBVTT
                  +
                  WEBVTT
                  -

                        3. 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:

                  +

                  3. 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
                  +
                  00:01.000 --> 00:05.000
                    -
                  1. On the next line you can write the caption for this cue which will run from 1st second to the 5th second, inclusive.
                  2. +
                  3. On the next line you can write the caption for this cue which will run from the first second to the fifth second, inclusive.
                  4. Following the similar steps, a complete WebVTT file for specific video or audio file can be made.
                  @@ -835,7 +789,7 @@ interface VTTRegion {

                  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
                  +
                  WEBVTT
                   
                   04:02.500 --> 04:05.000
                   J’ai commencé le basket à l'âge de 13, 14 ans
                  @@ -856,24 +810,20 @@ Sur les <i.foreignphrase><lang en>playground</lang></i>,
                   
                   

                  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.

                  -

                  Spécifications

                  +

                  Specifications

                  - +
                  - - - - - +
                  SpecificationStatusComment
                  {{SpecName("WebVTT")}}{{Spec2("WebVTT")}}Définition initialesWebVTT: The Web Video Text Tracks Format
                  -

                  Compatibilité des navigateurs

                  +

                  Browser compatibility

                  VTTCue interface

                  diff --git a/files/fr/web/api/webxr_device_api/index.html b/files/fr/web/api/webxr_device_api/index.html index ee041f0429..86781da1b7 100644 --- a/files/fr/web/api/webxr_device_api/index.html +++ b/files/fr/web/api/webxr_device_api/index.html @@ -13,7 +13,9 @@ 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.

                  +

                  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.

                  @@ -30,10 +32,6 @@ translation_of: Web/API/WebXR_Device_API

                  Les concepts et l'utilisation des périphériques WebXR

                  -
                  -
                  Exemple de configuration matérielle WebXR
                  -Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labeled "Position sensor"
                  -

                  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.

                  @@ -94,7 +92,7 @@ translation_of: Web/API/WebXR_Device_API
                  {{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 
                  +
                  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

                  diff --git a/files/fr/web/api/wheelevent/deltax/index.html b/files/fr/web/api/wheelevent/deltax/index.html index f98967d589..05a9e41e39 100644 --- a/files/fr/web/api/wheelevent/deltax/index.html +++ b/files/fr/web/api/wheelevent/deltax/index.html @@ -17,11 +17,11 @@ translation_of: Web/API/WheelEvent/deltaX

                  Syntaxe

                  -
                  var dX = event.deltaX;
                  +
                  var dX = event.deltaX;

                  Exemple

                  -
                  var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaX": 4, "deltaMode": 0});
                  +
                  var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaX": 4, "deltaMode": 0});
                   
                   console.log(syntheticEvent.deltaX);
                   
                  diff --git a/files/fr/web/api/wheelevent/deltay/index.html b/files/fr/web/api/wheelevent/deltay/index.html index f1a0508f25..49eeb736f5 100644 --- a/files/fr/web/api/wheelevent/deltay/index.html +++ b/files/fr/web/api/wheelevent/deltay/index.html @@ -17,11 +17,11 @@ translation_of: Web/API/WheelEvent/deltaY

                  Syntaxe

                  -
                  var dY = event.deltaY;
                  +
                  var dY = event.deltaY;

                  Exemple

                  -
                  var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaY": 4, "deltaMode": 0});
                  +
                  var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaY": 4, "deltaMode": 0});
                   
                   console.log(syntheticEvent.deltaY);
                   
                  diff --git a/files/fr/web/api/wheelevent/deltaz/index.html b/files/fr/web/api/wheelevent/deltaz/index.html index 608cc4349b..8ab33605b0 100644 --- a/files/fr/web/api/wheelevent/deltaz/index.html +++ b/files/fr/web/api/wheelevent/deltaz/index.html @@ -18,11 +18,11 @@ translation_of: Web/API/WheelEvent/deltaZ

                  Syntaxe

                  -
                  var dZ = event.deltaZ;
                  +
                  var dZ = event.deltaZ;

                  Exemple

                  -
                  var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaZ": 4, "deltaMode": 0});
                  +
                  var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaZ": 4, "deltaMode": 0});
                   
                   console.log(syntheticEvent.deltaZ);
                   
                  diff --git a/files/fr/web/api/wheelevent/index.html b/files/fr/web/api/wheelevent/index.html index ef8e0f5c4c..fcd871b623 100644 --- a/files/fr/web/api/wheelevent/index.html +++ b/files/fr/web/api/wheelevent/index.html @@ -13,12 +13,12 @@ translation_of: Web/API/WheelEvent

                  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.

                  -
                  -

                  Important: 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.

                  +
                  +

                  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.

                  -
                  -

                  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.

                  +
                  +

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

                  @@ -34,7 +34,7 @@ translation_of: Web/API/WheelEvent

                  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}}
                  diff --git a/files/fr/web/api/window/afterprint_event/index.html b/files/fr/web/api/window/afterprint_event/index.html index 2346683665..c63ed6bc56 100644 --- a/files/fr/web/api/window/afterprint_event/index.html +++ b/files/fr/web/api/window/afterprint_event/index.html @@ -10,7 +10,7 @@ original_slug: Web/Events/afterprint
                  Spécification
                  -
                  HTML5
                  +
                  HTML5
                  Interface
                  Event
                  Propagation
                  @@ -60,5 +60,5 @@ original_slug: Web/Events/afterprint

                  Evénements liés

                  diff --git a/files/fr/web/api/window/alert/index.html b/files/fr/web/api/window/alert/index.html index cacd0d33db..4583f71d4e 100644 --- a/files/fr/web/api/window/alert/index.html +++ b/files/fr/web/api/window/alert/index.html @@ -8,30 +8,29 @@ tags: translation_of: Web/API/Window/alert ---

                  {{ ApiRef() }}

                  -

                  Résumé

                  +

                  Résumé

                  Affiche un dialogue d'alerte contenant le texte spécifié.

                  -

                  Syntaxe

                  +

                  Syntaxe

                  window.alert(message);
                   
                  • message est une chaîne contenant le texte à afficher dans le dialogue d'alerte.
                  -

                  Exemple

                  +

                  Exemple

                  window.alert("Bonjour !");
                   

                  produira :

                  -

                  Image:AlertHelloWorld.png

                  -

                  Notes

                  + +

                  + +

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

                  +

                  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

                  +

                  Spécification

                  {{ DOM0() }}

                  -

                  Voir aussi

                  +

                  Voir aussi

                  -
                  -  
                  -

                  {{ languages( { "en": "en/DOM/window.alert", "ja": "ja/DOM/window.alert", "pl": "pl/DOM/window.alert" } ) }}

                  +
                • confirm
                • +
                • prompt
                • +
                \ 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 index 1999a31f7f..7518fb40ed 100644 --- a/files/fr/web/api/window/applicationcache/index.html +++ b/files/fr/web/api/window/applicationcache/index.html @@ -3,28 +3,26 @@ title: Window.applicationCache slug: Web/API/Window/applicationCache translation_of: Web/API/Window/applicationCache --- -
                -

                Important: 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.

                +
                +

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

                -

                Sommaire

                -

                Retourne une référence à l'objet du cache d'application pour la fenêtre.

                -

                Syntaxe

                +

                Syntaxe

                cache = window.applicationCache
                 
                -

                Paramètres

                +

                Paramètres

                • cache est une référence objet pour un {{domxref("OfflineResourceList")}}.
                -

                Spécification

                +

                Spécification

                • {{spec("http://www.w3.org/TR/2008/WD-html5-20080122/#appcache","HTML 5","WD")}}
                • diff --git a/files/fr/web/api/window/back/index.html b/files/fr/web/api/window/back/index.html index 653d5b9d61..9743d49f37 100644 --- a/files/fr/web/api/window/back/index.html +++ b/files/fr/web/api/window/back/index.html @@ -21,9 +21,9 @@ translation_of: Web/API/Window/back

                  Note: Utilisez plutôt la méthode standard {{domxref("history.back")}}.

                -

                Syntaxe

                +

                Syntaxe

                -
                window.back();
                +
                window.back();

                Paramètres

                @@ -37,7 +37,7 @@ translation_of: Web/API/Window/back

                Cet exemple simple gère un clic sur un bouton "Retour" en rappelant back().

                -
                function boutonRetour() {
                +
                function boutonRetour() {
                   if (peutRevenirEnArriere) {
                     window.back();
                   }
                diff --git a/files/fr/web/api/window/beforeprint_event/index.html b/files/fr/web/api/window/beforeprint_event/index.html
                index 0694a05c8a..b0e96ca975 100644
                --- a/files/fr/web/api/window/beforeprint_event/index.html
                +++ b/files/fr/web/api/window/beforeprint_event/index.html
                @@ -13,7 +13,7 @@ original_slug: Web/Events/beforeprint
                 
                 
                Spécification
                -
                HTML5
                +
                HTML5
                Interface
                Event
                Propagation
                @@ -71,5 +71,5 @@ original_slug: Web/Events/beforeprint

                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 index 290525686e..249644f9e3 100644 --- a/files/fr/web/api/window/beforeunload_event/index.html +++ b/files/fr/web/api/window/beforeunload_event/index.html @@ -13,7 +13,7 @@ original_slug: Web/Events/beforeunload
  • -

     Attacher un gestionnaire d'événement beforeunload à window ou à document empêche les navigateurs d'utiliser leur mémoire cache ; consulter Utilisation du cache de Firefox 1.5 ou WebKit's Page Cache (en anglais).

    +

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

    @@ -102,7 +102,7 @@ window.addEventListener("beforeunload", function (event) {

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

    +

    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

    @@ -135,6 +135,6 @@ window.addEventListener("beforeunload", function (event) {
  • {{Event("readystatechange")}}
  • {{Event("load")}}
  • {{Event("unload")}}
  • -
  • Unloading Documents — Prompt to unload a document
  • +
  • Unloading Documents — Prompt to unload a document
  • Enlever les messages personnalisés dans les boîtes de dialogues onbeforeload après Chrome 51
  • diff --git a/files/fr/web/api/window/blur/index.html b/files/fr/web/api/window/blur/index.html index f1fa3be67e..aaad6b9ec1 100644 --- a/files/fr/web/api/window/blur/index.html +++ b/files/fr/web/api/window/blur/index.html @@ -12,21 +12,21 @@ translation_of: Web/API/Window/blur

    Éloigne la mise au point de la fenêtre.

    -

    Syntaxe

    +

    Syntaxe

    -
    window.blur()
    +
    window.blur()
    -

    Exemple

    +

    Exemple

    -
    window.blur();
    +
    window.blur();
    -

    Notes

    +

    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écification

    -
    +
    diff --git a/files/fr/web/api/window/cancelanimationframe/index.html b/files/fr/web/api/window/cancelanimationframe/index.html index d418ffb4fe..a0c27fc7eb 100644 --- a/files/fr/web/api/window/cancelanimationframe/index.html +++ b/files/fr/web/api/window/cancelanimationframe/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/Window/cancelAnimationFrame

    Syntaxe

    -
    window.cancelAnimationFrame(requestID);
    +
    window.cancelAnimationFrame(requestID);

    Paramètres

    diff --git a/files/fr/web/api/window/cancelidlecallback/index.html b/files/fr/web/api/window/cancelidlecallback/index.html index e3bc8b94fd..39c94deb9a 100644 --- a/files/fr/web/api/window/cancelidlecallback/index.html +++ b/files/fr/web/api/window/cancelidlecallback/index.html @@ -5,22 +5,20 @@ translation_of: Web/API/Window/cancelIdleCallback ---
    {{APIRef}}{{SeeCompatTable}}
    -

    Résumé

    -

    La méthode window.cancelIdleCallback() annule une fonction précedemment planifiée via {{domxref("window.requestIdleCallback()")}}.

    -

    Syntaxe

    +

    Syntaxe

    window.cancelIdleCallback(idleCallbackId);
    -

    Paramètres

    +

    Paramètres

    -
    idleCallbackId
    +
    idleCallbackId
    L'entier long non-signé retourné par {{domxref("window.requestIdleCallback()")}}.
    -

    Spécifications

    +

    Spécifications

    Spécification
    diff --git a/files/fr/web/api/window/captureevents/index.html b/files/fr/web/api/window/captureevents/index.html index 20774b49a8..cac350b130 100644 --- a/files/fr/web/api/window/captureevents/index.html +++ b/files/fr/web/api/window/captureevents/index.html @@ -15,14 +15,14 @@ translation_of: Web/API/Window/captureEvents

    Syntaxe

    -
    window.captureEvents(eventType)
    +
    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>
    +
    <!DOCTYPE html>
     <html lang="fr">
     <head>
     <!-- ... -->
    diff --git a/files/fr/web/api/window/clearimmediate/index.html b/files/fr/web/api/window/clearimmediate/index.html
    index 011e267239..886d10eb4f 100644
    --- a/files/fr/web/api/window/clearimmediate/index.html
    +++ b/files/fr/web/api/window/clearimmediate/index.html
    @@ -12,20 +12,20 @@ translation_of: Web/API/Window/clearImmediate
     
     

    Cette méthode efface l'action spécifiée par {{DOMxRef("window.setImmediate")}}.

    -
    -

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

    +
    +

    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 )
    +
    window.clearImmediate( immediateID )
     

    où immediateID est un ID retourné par {{DOMxRef("window.setImmediate")}}.

    Exemples

    -
    let immediateID = setImmediate(() => {
    +
    let immediateID = setImmediate(() => {
       // Exécute du code
     }
     
    @@ -47,9 +47,8 @@ document.getElementById("bouton")
      
      
    - - + + diff --git a/files/fr/web/api/window/close/index.html b/files/fr/web/api/window/close/index.html index 7ed74d3242..b137990883 100644 --- a/files/fr/web/api/window/close/index.html +++ b/files/fr/web/api/window/close/index.html @@ -6,16 +6,16 @@ tags: translation_of: Web/API/Window/close ---

    {{ ApiRef() }}

    -

    Résumé

    +

    Résumé

    Ferme la fenêtre référencée.

    -

    Syntaxe

    +

    Syntaxe

    window.close();
     
    -

    Description

    +

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

    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;
    @@ -30,7 +30,7 @@ function fermerFenetreOuverte()
     }
     </script>
     
    -
    Fermeture de la fenêtre courante
    +
    Fermeture de la fenêtre courante
    <script type="text/javascript">
     function fermerFenetreCourante()
     {
    @@ -38,12 +38,9 @@ function fermerFenetreCourante()
     }
     </script>
     
    -

    Spécification

    +

    Spécification

    DOM Level 0. window.close() ne fait partie d'aucune spécification ni recommandation technique du W3C.

    -

    Référence additionnelle

    +

    Référence additionnelle

    -
    -  
    -

    {{ languages( { "en": "en/DOM/window.close", "ja": "ja/DOM/window.close" } ) }}

    +
  • window.close() sur MSDN
  • + \ 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 index 62038b80ae..e01f35054b 100644 --- a/files/fr/web/api/window/closed/index.html +++ b/files/fr/web/api/window/closed/index.html @@ -6,13 +6,13 @@ tags: translation_of: Web/API/Window/closed ---

    {{ ApiRef() }}

    -

    Résumé

    +

    Résumé

    Cette propriété indique si la fenêtre référencée est fermée ou non.

    -

    Syntaxe

    +

    Syntaxe

    isClosed = window.closed;
     

    Cette propriété est en lecture seule.

    -

    Valeur renvoyée

    +

    Valeur renvoyée

    isClosed
    @@ -23,8 +23,8 @@ translation_of: Web/API/Window/closed
  • false : La fenêtre est ouverte.
  • true : La fenêtre a été fermée.
  • -

    Exemples

    -

    Chargement d'une page dans la fenêtre principale depuis un popup

    +

    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à,
    @@ -32,7 +32,7 @@ translation_of: Web/API/Window/closed
       window.opener.location.href = newURL;
     }
     
    -

    Appel d'une fonction dans un popup ouvert précédemment

    +

    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;
     
    @@ -47,13 +47,9 @@ function refreshPopupWindow() {
       }
     }
     
    -

    Spécification

    +

    Spécification

    DOM Level 0. window.closed ne fait partie d'aucune spécification ou recommandation technique du W3C.

    -

    Référence supplémentaire

    +

    Référence supplémentaire

    -

     

    -
    -  
    -

    {{ languages( { "en": "en/DOM/window.closed", "ja": "ja/DOM/window.closed", "pl": "pl/DOM/window.closed" } ) }}

    +
  • window.closed sur MSDN
  • + \ 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 index 099cfdaac8..2f49bf5c4c 100644 --- a/files/fr/web/api/window/confirm/index.html +++ b/files/fr/web/api/window/confirm/index.html @@ -8,11 +8,11 @@ translation_of: Web/API/Window/confirm ---

    {{ApiRef("Window")}}

    -

    Résumé

    +

    Résumé

    Affiche un dialogue modal avec un message et deux boutons, OK et Annuler.

    -

    Syntaxe

    +

    Syntaxe

    resultat = window.confirm(message);
     
    @@ -22,30 +22,26 @@ translation_of: Web/API/Window/confirm
  • resultat est une valeur booléenne indiquant si OK ou Annuler a été sélectionné (true signifie OK).
  • -

    Exemple

    +

    Exemple

    if (window.confirm("Une nouvelle fenêtre va s'ouvrir.")) {
         window.open("fenetre.html", "Nouvelle fenêtre", "");
     }
     
    -

    Notes

    +

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

    +

    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

    +

    Spécification

    {{ DOM0() }}

    -

    Voir aussi

    +

    Voir aussi

    - -
     
    - -

    {{ languages( { "en": "en/DOM/window.confirm", "ja": "ja/DOM/window.confirm" } ) }}

    +
  • alert
  • +
  • prompt
  • + \ 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 index 6d0bc951dd..cbb2e643a9 100644 --- a/files/fr/web/api/window/console/index.html +++ b/files/fr/web/api/window/console/index.html @@ -14,12 +14,12 @@ translation_of: Web/API/Window/console

    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

    +

    Syntaxe

    var consoleObj = window.console;
     
    -

    Exemples

    +

    Exemples

    Afficher dans la console

    @@ -52,5 +52,5 @@ translation_of: Web/API/Window/console
    Efficient Script Yielding
    - The definition of 'setImmediate' in that specification.
    Editor's DraftEfficient Script Yielding La définition de setImmediate dans cette spécification.Editor's Draft Initial definition.
    -

    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.

    +

    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 index befde3636a..ef73a10622 100644 --- a/files/fr/web/api/window/content/index.html +++ b/files/fr/web/api/window/content/index.html @@ -6,24 +6,21 @@ tags: translation_of: Web/API/Window/content ---

    {{ ApiRef() }}

    -

    Résumé

    +

    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

    +

    Syntaxe

    var windowObject = window.content;
     
    -

    Exemple

    +

    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

    +

    Spécification

    Ne fait partie d'aucune spécification du W3C.

    -

    Voir aussi

    +

    Voir aussi

    -
    -  
    -

    {{ languages( { "en": "en/DOM/window.content", "ja": "ja/DOM/window.content", "pl": "pl/DOM/window.content" } ) }}

    + \ 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 index 1b91ba0937..9f96ce9c98 100644 --- a/files/fr/web/api/window/controllers/index.html +++ b/files/fr/web/api/window/controllers/index.html @@ -14,11 +14,9 @@ translation_of: Web/API/Window/controllers ---
    {{APIRef}}{{non-standard_header}}
    -

    Résumé

    -

    Retourne les contrôleurs XUL de la fenêtre chrome.

    -

    Syntaxe

    +

    Syntaxe

    controleurs = window.controllers
     
    @@ -27,20 +25,16 @@ translation_of: Web/API/Window/controllers
  • controleurs est un objet de type XULControllers (nsIControllers).
  • -

    Spécification

    +

    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!
    -
    +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 index 013eed8155..bde3e7a47c 100644 --- a/files/fr/web/api/window/copy_event/index.html +++ b/files/fr/web/api/window/copy_event/index.html @@ -14,7 +14,7 @@ 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.

    +

    L'événement copy se déclenche lorsque l'utilisateur lance une action de copie via l'interface utilisateur du nagivateur.

    @@ -41,7 +41,7 @@ translation_of: Web/API/Window/copy_event

    Exemples

    -
    window.addEventListener('copy', (event) => {
    +
    window.addEventListener('copy', (event) => {
         console.log('action de copie lancée')
     });
    diff --git a/files/fr/web/api/window/customelements/index.html b/files/fr/web/api/window/customelements/index.html index e0180ddd65..7d7d57c203 100644 --- a/files/fr/web/api/window/customelements/index.html +++ b/files/fr/web/api/window/customelements/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Window/customElements

    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

    +

    Syntaxe

    let registreElementsPersonnalises = window.customElements;
    @@ -23,7 +23,7 @@ translation_of: Web/API/Window/customElements

    Une instance d'objet {{domxref("CustomElementRegistry")}} représentant le registre des éléments personnalisés pour la fenêtre en cours.

    -

    Exemples

    +

    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 :

    @@ -46,7 +46,7 @@ registreElementsPersonnalises.define('mon-element-personnalise', MonElementPerso

    Voir notre repo web-components-examples pour davantage d'exemples d'utilisation.

    -

    Spécification

    +

    Spécification

    diff --git a/files/fr/web/api/window/cut_event/index.html b/files/fr/web/api/window/cut_event/index.html index 259c67c79a..ad3a5de15d 100644 --- a/files/fr/web/api/window/cut_event/index.html +++ b/files/fr/web/api/window/cut_event/index.html @@ -13,7 +13,7 @@ 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.

    +

    L'événement cut est déclenché lorsque l'utilisateur a lancé une action de "cut" via l'interface utilisateur du navigateur.

    @@ -40,7 +40,7 @@ translation_of: Web/API/Window/cut_event

    Exemples

    -
    window.addEventListener('cut', (event) => {
    +
    window.addEventListener('cut', (event) => {
         console.log('cut action initiated')
     });
    diff --git a/files/fr/web/api/window/defaultstatus/index.html b/files/fr/web/api/window/defaultstatus/index.html index 9a991ac4fb..125688eca6 100644 --- a/files/fr/web/api/window/defaultstatus/index.html +++ b/files/fr/web/api/window/defaultstatus/index.html @@ -18,23 +18,21 @@ translation_of: Web/API/Window/defaultStatus

    {{ APIRef() }}

    -

    Résumé

    -

    Obtient / définit le texte de la barre d'état pour la fenêtre donnée.

    -

    Syntaxe

    +

    Syntaxe

    -
    var sMsg = window.defaultStatus;
    +
    var sMsg = window.defaultStatus;
     window.defaultStatus = sMsg;
     
    -

    Paramètres

    +

    Paramètres

    • sMsg est une chaîne contenant le texte à afficher par défaut dans la barre d'état.
    -

    Exemple

    +

    Exemple

    <html>
      <body onload="window.defaultStatus='salut!';"/>
    @@ -43,10 +41,10 @@ window.defaultStatus = sMsg;
     </html>
     
    -

    Notes

    +

    Notes

    Pour définir le statut une fois la fenêtre ouverte, utilisez {{domxref("window.status")}}.

    -

    Spécification

    +

    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 index 3d4d2fd951..aa77418513 100644 --- a/files/fr/web/api/window/devicemotion_event/index.html +++ b/files/fr/web/api/window/devicemotion_event/index.html @@ -10,7 +10,7 @@ original_slug: FUEL/Window/devicemotion_event
    Spécification
    -
    DeviceOrientation Event
    +
    DeviceOrientation Event
    Interface
    DeviceMotionEvent
    Propagation
    @@ -35,43 +35,43 @@ original_slug: FUEL/Window/devicemotion_event
    - - + + - - + + - - + + - - + + - - + + - - + + - + - - + + diff --git a/files/fr/web/api/window/devicepixelratio/index.html b/files/fr/web/api/window/devicepixelratio/index.html index 0b4750d74a..f7a9d3a7bf 100644 --- a/files/fr/web/api/window/devicepixelratio/index.html +++ b/files/fr/web/api/window/devicepixelratio/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Window/devicePixelRatio

    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

    +

    Syntaxe

    valeur = window.devicePixelRatio;
     
    diff --git a/files/fr/web/api/window/dialogarguments/index.html b/files/fr/web/api/window/dialogarguments/index.html index dd78944ac0..1bd4d4ece5 100644 --- a/files/fr/web/api/window/dialogarguments/index.html +++ b/files/fr/web/api/window/dialogarguments/index.html @@ -15,11 +15,11 @@ 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.

    +

    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;
    +
    valeur = window.dialogArguments;

    Compatibilité des navigateurs

    diff --git a/files/fr/web/api/window/directories/index.html b/files/fr/web/api/window/directories/index.html index a4ea62e3a8..bac28b3489 100644 --- a/files/fr/web/api/window/directories/index.html +++ b/files/fr/web/api/window/directories/index.html @@ -18,20 +18,18 @@ translation_of: Web/API/Window/directories

    {{ APIRef() }}

    -

    Résumé

    -

    Retourne l'objet de la barre d'outils de la barre personnelle de la fenêtre. Utilisez plutôt {{ domxref("window.personalbar") }}.

    -

    Syntaxe

    +

    Syntaxe

    -
    var dirBar = window.directories;
    +
    var dirBar = window.directories;
     
    -

    Paramètres

    +

    Paramètres

    dirBar est un objet du type BarProp.

    -

    Exemple

    +

    Exemple

    <script>
      function dirs() {
    @@ -40,6 +38,6 @@ translation_of: Web/API/Window/directories
     </script>
     
    -

    Spécification

    +

    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 index 1fc02df5ad..70769ed0b9 100644 --- a/files/fr/web/api/window/document/index.html +++ b/files/fr/web/api/window/document/index.html @@ -11,11 +11,11 @@ translation_of: Web/API/Window/document ---
    {{APIRef}}
    -

    window.document renvoie une référence au document contenu dans la fenêtre.

    +

    window.document renvoie une référence au document contenu dans la fenêtre.

    Exemple

    -
    console.log(window.document.title);
    +
    console.log(window.document.title);
     

    Spécifications

    diff --git a/files/fr/web/api/window/domcontentloaded_event/index.html b/files/fr/web/api/window/domcontentloaded_event/index.html index d7c00d95b1..a2e989049d 100644 --- a/files/fr/web/api/window/domcontentloaded_event/index.html +++ b/files/fr/web/api/window/domcontentloaded_event/index.html @@ -31,19 +31,19 @@ original_slug: Web/Events/DOMContentLoaded

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

    +

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

    +
    +

    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.

    +

    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

    diff --git a/files/fr/web/api/window/dump/index.html b/files/fr/web/api/window/dump/index.html index c1821d4daa..aa1ba730e6 100644 --- a/files/fr/web/api/window/dump/index.html +++ b/files/fr/web/api/window/dump/index.html @@ -8,19 +8,19 @@ tags: translation_of: Web/API/Window/dump ---

    {{ ApiRef() }}

    -

    Résumé

    +

    Résumé

    Affiche des messages dans la console (native).

    -

    Syntaxe

    +

    Syntaxe

    dump(message);
     
    • message est le message texte à afficher.
    -

    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.

    +

    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

    +

    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() }}

    {{ languages( { "en": "en/DOM/window.dump", "ja": "ja/DOM/window.dump", "pl": "pl/DOM/window.dump" } ) }}

    diff --git a/files/fr/web/api/window/event/index.html b/files/fr/web/api/window/event/index.html index 8697634ad7..9876f88745 100644 --- a/files/fr/web/api/window/event/index.html +++ b/files/fr/web/api/window/event/index.html @@ -38,7 +38,7 @@ translation_of: Web/API/Window/event
    target Lecture seule EventTargettarget Lecture seule EventTarget The event target (the topmost target in the DOM tree).
    type Lecture seule DOMStringtype Lecture seule DOMString The type of event.
    bubbles Lecture seule Booleanbubbles Lecture seule Boolean Whether the event normally bubbles or not
    cancelable Lecture seule Booleancancelable Lecture seule Boolean Whether the event is cancellable or not?
    acceleration Lecture seule DeviceAccelerationacceleration Lecture seule DeviceAcceleration The 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 DeviceAccelerationaccelerationIncludingGravity Lecture seule DeviceAcceleration The 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 interval Lecture seule double The interval, in milliseconds, at which the DeviceMotionEvent is fired. The next event will be fired in approximately this amount of time.
    rotationRate Lecture seule DeviceRotationRaterotationRate Lecture seule DeviceRotationRate The rates of rotation of the device about all three axes.
    -

    Compatibilité des navigateurs

    +

    Compatibilité des navigateurs

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

    diff --git a/files/fr/web/api/window/find/index.html b/files/fr/web/api/window/find/index.html index 9ce279fc62..b9743102e6 100644 --- a/files/fr/web/api/window/find/index.html +++ b/files/fr/web/api/window/find/index.html @@ -23,7 +23,7 @@ translation_of: Web/API/Window/find

    Syntaxe

    -
    window.find(aString, aCaseSensitive, aBackwards, aWrapAround,
    +
    window.find(aString, aCaseSensitive, aBackwards, aWrapAround,
                 aWholeWord, aSearchInFrames, aShowDialog);
    @@ -49,13 +49,13 @@ translation_of: Web/API/Window/find

    JavaScript

    -
    findString = function findText(text) {
    +
    findString = function findText(text) {
       alert("String \x22" + text + "\x22 found? " + window.find(text));
     }

    HTML

    -
    <p>Apples, Bananas, and Oranges.</p>
    +
    <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>
    @@ -71,7 +71,7 @@ translation_of: Web/API/Window/find
     
     

    Spécification

    -

    Cela ne fait partie d'aucune spécification.

    +

    Cela ne fait partie d'aucune spécification.

    Compatibilité des navigateurs

    diff --git a/files/fr/web/api/window/focus/index.html b/files/fr/web/api/window/focus/index.html index 51d55e804a..b07ab44b65 100644 --- a/files/fr/web/api/window/focus/index.html +++ b/files/fr/web/api/window/focus/index.html @@ -14,14 +14,14 @@ translation_of: Web/API/Window/focus
    window.focus()
     
    -

    Exemple

    +

    Exemple

    if (clicked) { window.focus(); }
     
    -

    Spécification

    +

    Spécification

    - +
    diff --git a/files/fr/web/api/window/frameelement/index.html b/files/fr/web/api/window/frameelement/index.html index 682e4852f0..4a36ff3fd6 100644 --- a/files/fr/web/api/window/frameelement/index.html +++ b/files/fr/web/api/window/frameelement/index.html @@ -11,7 +11,7 @@ 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.

    +

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

    @@ -19,7 +19,7 @@ translation_of: Web/API/Window/frameElement

    Syntaxe

    -
    const frameEl = window.frameElement
    +
    const frameEl = window.frameElement
     

    Valeur

    @@ -28,7 +28,7 @@ translation_of: Web/API/Window/frameElement

    Exemple

    -
    const frameEl = window.frameElement;
    +
    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/';
    diff --git a/files/fr/web/api/window/frames/index.html b/files/fr/web/api/window/frames/index.html
    index 3823eba20d..1fd6a767fe 100644
    --- a/files/fr/web/api/window/frames/index.html
    +++ b/files/fr/web/api/window/frames/index.html
    @@ -15,13 +15,9 @@ translation_of: Web/API/Window/frames
     ---
     

    {{ApiRef("Window")}}

    -

     

    - -

    Résumé

    -

    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

    +

    Syntaxe

    frameList = window.frames;
     
    @@ -29,11 +25,11 @@ translation_of: Web/API/Window/frames
    • frameList est une liste d'objets frame, semblable à un tableau grâce à la propriété length . Ses éléments sont accessibles en utilisant la notation  {{ mediawiki.external('i') }}.
    • frameList === window est évalué à true.
    • -
    • Chaque élément de window.frames est un pseudo tableau représentant l'objet window correspondant au contenu de la  <frame> ou <iframe> , et non au DOM element (i)frame (ex., window.frames[ 0 ] équivaut à document.getElementsByTagName( "iframe" )[ 0 ].contentWindow).
    • -
    • pour plus de détails sur la valeur retournée, se référer au fil de discussion sur mozilla.dev.platform.
    • +
    • Chaque élément de window.frames est un pseudo tableau représentant l'objet window correspondant au contenu de la  <frame> ou <iframe> , et non au DOM element (i)frame (ex., window.frames[ 0 ] équivaut à document.getElementsByTagName( "iframe" )[ 0 ].contentWindow).
    • +
    • pour plus de détails sur la valeur retournée, se référer au fil de discussion sur mozilla.dev.platform.
    -

    Exemple

    +

    Exemple

    var frames = window.frames; // ou // var frames = window.parent.frames;
     for (var i = 0; i < frames.length; i++) {
    @@ -42,8 +38,6 @@ for (var i = 0; i < frames.length; i++) {
     }
     
    -

    Spécifications

    - -

    {{SpecName('HTML WHATWG','browsers.html#dom-frames','Window.frames')}}

    +

    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 index 32fe1cb9bb..dbd330f4f5 100644 --- a/files/fr/web/api/window/fullscreen/index.html +++ b/files/fr/web/api/window/fullscreen/index.html @@ -8,13 +8,13 @@ tags: translation_of: Web/API/Window/fullScreen ---

    {{ ApiRef() }}

    -

    Résumé

    +

    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

    +

    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

    +

    Valeur de retour

    isInFullScreen
    @@ -25,12 +25,8 @@ translation_of: Web/API/Window/fullScreen
  • true : La fenêtre est en mode plein écran.
  • false : La fenêtre n'est pas en mode plein écran.
  • -

    Exemples

    -

    Spécification

    +

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

    -

     

    -
    -  
    -

    {{ languages( { "en": "en/DOM/window.fullScreen", "es": "es/DOM/window.fullScreen", "ja": "ja/DOM/window.fullScreen" } ) }}

    +

    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 index 0f68232b6c..4452ac1892 100644 --- a/files/fr/web/api/window/gamepadconnected_event/index.html +++ b/files/fr/web/api/window/gamepadconnected_event/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/Window/gamepadconnected_event
    Spécification
    -
    Gamepad
    +
    Gamepad
    Interface
    Event
    Propagation
    @@ -76,7 +76,7 @@ window.addEventListener("gamepadconnected", function( event ) {

    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 index f62baa963a..e4c36c1ece 100644 --- a/files/fr/web/api/window/gamepaddisconnected_event/index.html +++ b/files/fr/web/api/window/gamepaddisconnected_event/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Window/gamepaddisconnected_event
    Spécification
    -
    Gamepad
    +
    Gamepad
    Interface
    {{domxref("Event")}}
    Propagation
    @@ -64,7 +64,7 @@ translation_of: Web/API/Window/gamepaddisconnected_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 index d6210f567c..3309f13543 100644 --- a/files/fr/web/api/window/getcomputedstyle/index.html +++ b/files/fr/web/api/window/getcomputedstyle/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/Window/getComputedStyle

    Résumé

    -

    La méthode window.getComputedStyle() donne la  valeur calculée finale de toutes les propriétés CSS sur un élément.

    +

    La méthode window.getComputedStyle() donne la  valeur calculée finale de toutes les propriétés CSS sur un élément.

    Syntaxe

    @@ -20,9 +20,11 @@ translation_of: Web/API/Window/getComputedStyle
    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.
    +
    +

    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.

    +

    La valeur de retour style est un objet CSSStyleDeclaration.

    Exemple

    @@ -55,21 +57,21 @@ var style = window.getComputedStyle(elem1, null); </script>
    -
    function dumpComputedStyles(elem,prop) {
    +
    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 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));
    -  }
    +    var style = cs[i];
    +    console.log(style+" : "+cs.getPropertyValue(style));
    +  }
     
    -}
    +}

    Description

    diff --git a/files/fr/web/api/window/getselection/index.html b/files/fr/web/api/window/getselection/index.html index 9e2bfde703..579af3f9a0 100644 --- a/files/fr/web/api/window/getselection/index.html +++ b/files/fr/web/api/window/getselection/index.html @@ -7,18 +7,18 @@ translation_of: Web/API/Window/getSelection

    Renvoie un objet selection représentant le ou les objets sélectionnés.

    -

    Syntaxe

    +

    Syntaxe

    selection = window.getSelection()
     
    -

    Paramètres

    +

    Paramètres

    • selection est un objet de type {{DOMxRef("Selection")}}.
    -

    Exemple

    +

    Exemple

    function foo() {
        var selObj = window.getSelection();
    @@ -28,20 +28,20 @@ translation_of: Web/API/Window/getSelection
     }
     
    -

    Notes

    +

    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

    +

    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

    +

    Spécification

    DOM Level 0. Ne fait partie d'aucune spécification.

    -

    Voir aussi

    +

    Voir aussi

    diff --git a/files/fr/web/api/window/history/index.html b/files/fr/web/api/window/history/index.html index 65ab9cfe4e..04b1a2052f 100644 --- a/files/fr/web/api/window/history/index.html +++ b/files/fr/web/api/window/history/index.html @@ -5,26 +5,26 @@ 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).

    +

    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.

    +

    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

    +

    Exemple

    history.back();     // similaire au bouton de retour
     history.go(-1);     // similaire à history.back();
     
    -

    Notes

    +

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

    +

    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.

    +

    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

    +

    Spécification

    Specification
    diff --git a/files/fr/web/api/window/home/index.html b/files/fr/web/api/window/home/index.html index 1d9985483e..856f95067c 100644 --- a/files/fr/web/api/window/home/index.html +++ b/files/fr/web/api/window/home/index.html @@ -17,12 +17,12 @@ translation_of: Web/API/Window/home

    Syntaxe

    -
    window.home();
    +
    window.home();
     

    Exemple

    -
    function goHome() {
    +
    function goHome() {
       window.home();
     }
     
    diff --git a/files/fr/web/api/window/index.html b/files/fr/web/api/window/index.html index d36732a346..285b6d9f32 100644 --- a/files/fr/web/api/window/index.html +++ b/files/fr/web/api/window/index.html @@ -12,9 +12,9 @@ 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")}}.

    +

    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.

    +

    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.

    @@ -36,7 +36,7 @@ translation_of: Web/API/Window
    {{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.
    +
    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")}}
    @@ -183,102 +183,55 @@ translation_of: Web/API/Window
    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

    +

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

    base64 func https://bugzilla.mozilla.org/show_bug.cgi?id=287112 (see last comments) https://bugzilla.mozilla.org/show_bug.cgi?id=123003 http://lxr.mozilla.org/seamonkey/sou...indow.cpp#4946

    - -
    {{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()")}}
    @@ -287,90 +240,42 @@ translation_of: Web/API/Window
    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()")}}
    @@ -379,19 +284,15 @@ translation_of: Web/API/Window
    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("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()")}}
    @@ -412,14 +313,16 @@ translation_of: Web/API/Window
    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

    -
    +
    + +

    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

    +

    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.

    @@ -631,7 +534,7 @@ translation_of: Web/API/Window

    Constructeurs

    -

    Voir aussi les Interfaces DOM.

    +

    Voir aussi les Interfaces DOM.

    {{domxref("DOMParser")}}
    @@ -647,7 +550,7 @@ translation_of: Web/API/Window
    {{domxref("Window.XMLSerializer")}}
    {{todo("NeedsContents")}}
    {{domxref("Worker")}}
    -
    Used for creating a Web worker
    +
    Used for creating a Web worker
    {{domxref("Window.XPCNativeWrapper")}}
    {{todo("NeedsContents")}}
    {{domxref("Window.XPCSafeJSObjectWrapper")}}
    diff --git a/files/fr/web/api/window/innerheight/index.html b/files/fr/web/api/window/innerheight/index.html index adbf3d97bf..19e63c1f54 100644 --- a/files/fr/web/api/window/innerheight/index.html +++ b/files/fr/web/api/window/innerheight/index.html @@ -12,32 +12,31 @@ 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.

    +

    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

    +

    Syntaxe

    var hauteur = window.innerHeight;
     
    -

    Valeur

    +

    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.

    +

    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

    +

    Notes

    • La propriété window.innerHeight est supportée par tout objet assimilé à une fenêtre {{domxref("window")}}, un cadre frame , un ensemble de cadres frameset, ou une fenêtre secondaire.
    • Il existe un algorithme pour calculer la hauteur de la partie visible de la fenêtre en excluant la barre de défilement horizontale si est elle affichée.
    -

    Exemples

    +

    Exemples

    -

    Sur un frameset

    +

    Sur un frameset

    var intFrameHeight = window.innerHeight; // ou
     
    @@ -60,8 +59,9 @@ var intOuterFramesetHeight = top.innerHeight;
     
     

    Exemple graphique

    -

    L'illustration suivante montre la différence entre outerHeight et innerHeight.
    - outerHeight vs innerHeight

    +

    L'illustration suivante montre la différence entre outerHeight et innerHeight.

    + +

    Illustration de la différence entre innerHeight et outerHeight

    Spécification

    diff --git a/files/fr/web/api/window/innerwidth/index.html b/files/fr/web/api/window/innerwidth/index.html index f317384ca2..a76af5343a 100644 --- a/files/fr/web/api/window/innerwidth/index.html +++ b/files/fr/web/api/window/innerwidth/index.html @@ -5,19 +5,19 @@ translation_of: Web/API/Window/innerWidth ---

    {{ ApiRef() }}

    -

    Résumé

    +

    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

    +

    Syntaxe

    var largeur = window.innerWidth;
     

    Voir aussi : window.innerHeight, window.outerHeight and window.outerWidth.

    -

    Valeur renvoyée

    +

    Valeur renvoyée

    innerWidth
    diff --git a/files/fr/web/api/window/issecurecontext/index.html b/files/fr/web/api/window/issecurecontext/index.html index 8009462d92..dd6a2dbbc3 100644 --- a/files/fr/web/api/window/issecurecontext/index.html +++ b/files/fr/web/api/window/issecurecontext/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Window/isSecureContext

    Syntaxe

    -
    var isSecure = window.isSecureContext
    +
    var isSecure = window.isSecureContext

    Exemples

    @@ -23,7 +23,7 @@ translation_of: Web/API/Window/isSecureContext

    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) {
    +
    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 () {
         ...
    diff --git a/files/fr/web/api/window/languagechange_event/index.html b/files/fr/web/api/window/languagechange_event/index.html
    index eadf83df3c..a55d83a36d 100644
    --- a/files/fr/web/api/window/languagechange_event/index.html
    +++ b/files/fr/web/api/window/languagechange_event/index.html
    @@ -38,13 +38,13 @@ translation_of: Web/API/Window/languagechange_event
     
     

    Vous pouvez utiliser l'événement languagechange dans une méthode {{domxref("EventTarget/addEventListener", "addEventListener")}} :

    -
    window.addEventListener('languagechange', function() {
    +
    window.addEventListener('languagechange', function() {
       console.log('languagechange event detected!');
     });

    Ou utilisez la propriété du gestionnaire d'événements onlanguagechange :

    -
    window.onlanguagechange = function(event) {
    +
    window.onlanguagechange = function(event) {
       console.log('languagechange event detected!');
     };
    diff --git a/files/fr/web/api/window/length/index.html b/files/fr/web/api/window/length/index.html index 2980798007..af1ee54111 100644 --- a/files/fr/web/api/window/length/index.html +++ b/files/fr/web/api/window/length/index.html @@ -5,11 +5,9 @@ translation_of: Web/API/Window/length ---
    {{ ApiRef() }}
    -

    Résumé

    -

    Retourne le nombre de frames (soit des éléments de frame ou iframe) présent sur la page.

    -

    Syntaxe

    +

    Syntaxe

    nombreDeFrames= window.length;
     
    @@ -18,12 +16,12 @@ translation_of: Web/API/Window/length
  • nombreDeFrames est égal au nombre de frames présent sur la page.
  • -

    Exemple

    +

    Exemple

    if (window.length) {
       // La page contient des frames
     }
    -

    Specification

    +

    Specification

    {{DOM0}}

    diff --git a/files/fr/web/api/window/load_event/index.html b/files/fr/web/api/window/load_event/index.html index ee798a29e4..d418a89a96 100644 --- a/files/fr/web/api/window/load_event/index.html +++ b/files/fr/web/api/window/load_event/index.html @@ -13,7 +13,7 @@ original_slug: Web/Events/load
    Spécification
    -
    DOM L3
    +
    DOM L3
    Interface
    UIEvent
    Bouillonne
    diff --git a/files/fr/web/api/window/localstorage/index.html b/files/fr/web/api/window/localstorage/index.html index 71c5f6fbec..3385e051fb 100644 --- a/files/fr/web/api/window/localstorage/index.html +++ b/files/fr/web/api/window/localstorage/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/Window/localStorage

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

    +

    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

    @@ -57,7 +57,7 @@ localStorage.clear();
    -

    Note: Se référer à l'article Using the Web Storage API pour voir un exemple complet.

    +

    Note : Se référer à l'article Using the Web Storage API pour voir un exemple complet.

    Spécifications

    diff --git a/files/fr/web/api/window/locationbar/index.html b/files/fr/web/api/window/locationbar/index.html index 9ba0cefa63..294652fb88 100644 --- a/files/fr/web/api/window/locationbar/index.html +++ b/files/fr/web/api/window/locationbar/index.html @@ -15,14 +15,14 @@ translation_of: Web/API/Window/locationbar

    Syntaxe

    -
    objRef = window.locationbar
    +
    objRef = window.locationbar
     

    Exemple

    L'exemple HTML complet suivant montre comment la propriété visible de l'objet locationbar est utilisée.

    -
    <!DOCTYPE html>
    +
    <!DOCTYPE html>
     <html lang="fr">
     <head>
     <meta charset="UTF-8" />
    diff --git a/files/fr/web/api/window/matchmedia/index.html b/files/fr/web/api/window/matchmedia/index.html
    index ecc1644b62..77fea4b292 100644
    --- a/files/fr/web/api/window/matchmedia/index.html
    +++ b/files/fr/web/api/window/matchmedia/index.html
    @@ -3,21 +3,20 @@ title: window.matchMedia
     slug: Web/API/Window/matchMedia
     translation_of: Web/API/Window/matchMedia
     ---
    -
    - {{ApiRef}}
    -

    Résumé

    -

    Retourne un nouvel objet {{domxref("MediaQueryList")}} contenant les résultats de la chaîne de caractères media query spécifiée.

    -

    Syntaxe

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

    +

    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.

    +

    Voir Utiliser les media queries avec du code pour plus d'exemples.

    Spécifications

    @@ -45,8 +44,8 @@ translation_of: Web/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 index 21204f7405..6e5fc9371d 100644 --- a/files/fr/web/api/window/menubar/index.html +++ b/files/fr/web/api/window/menubar/index.html @@ -15,14 +15,14 @@ translation_of: Web/API/Window/menubar

    Syntaxe

    -
    objRef = window.menubar
    +
    objRef = window.menubar
     

    Exemple

    L'exemple HTML complet suivant montre comment la propriété visible de l'objet menubar est utilisée.

    -
    <html>
    +
    <html>
     <head>
       <title>Divers Tests DOM</title>
       <script>
    diff --git a/files/fr/web/api/window/message_event/index.html b/files/fr/web/api/window/message_event/index.html
    index afa06c25b7..7122fbb2d9 100644
    --- a/files/fr/web/api/window/message_event/index.html
    +++ b/files/fr/web/api/window/message_event/index.html
    @@ -33,9 +33,9 @@ translation_of: Web/API/Window/message_event
     
     

    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:

    +

    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 targetFrame = window.top.frames[1];
     const targetOrigin = 'https://exemple.org';
     const windowMessageButton = document.querySelector('#window-message');
     
    @@ -45,13 +45,13 @@ windowMessageButton.addEventListener('click', () => {
     
     

    Le récepteur peut écouter le message en utilisant addEventListener() avec un code comme celui-ci:

    -
    window.addEventListener('message', (event) => {
    +
    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) => {
    +
    window.onmessage = (event) => {
         console.log(`Message reçu: ${event.data}`);
     };
    diff --git a/files/fr/web/api/window/messageerror_event/index.html b/files/fr/web/api/window/messageerror_event/index.html index cc321adbb9..0f63b05e44 100644 --- a/files/fr/web/api/window/messageerror_event/index.html +++ b/files/fr/web/api/window/messageerror_event/index.html @@ -38,13 +38,13 @@ translation_of: Web/API/Window/messageerror_event

    Écoutez messageerror en utilisant {{domxref("EventTarget/addEventListener", "addEventListener()")}} :

    -
    window.addEventListener('messageerror', (event) => {
    +
    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) => {
    +
    window.onmessageerror = (event) => {
         console.error(event);
     };
    diff --git a/files/fr/web/api/window/mozanimationstarttime/index.html b/files/fr/web/api/window/mozanimationstarttime/index.html index d58bd9eabe..cd98cffd8b 100644 --- a/files/fr/web/api/window/mozanimationstarttime/index.html +++ b/files/fr/web/api/window/mozanimationstarttime/index.html @@ -12,16 +12,16 @@ translation_of: 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.

    +

    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

    +

    Syntaxe

    -
    time = window.mozAnimationStartTime;
    +
    time = window.mozAnimationStartTime;
     
    -

    Paramètres

    +

    Paramètres

    • time est le temps en millisecondes depuis l'époque à laquelle les animations de la fenêtre actuelle doivent être considérées comme ayant démarré.
    • diff --git a/files/fr/web/api/window/mozinnerscreenx/index.html b/files/fr/web/api/window/mozinnerscreenx/index.html index 255235e7b9..3cce6881b6 100644 --- a/files/fr/web/api/window/mozinnerscreenx/index.html +++ b/files/fr/web/api/window/mozinnerscreenx/index.html @@ -16,11 +16,13 @@ translation_of: Web/API/Window/mozInnerScreenX

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

      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;
      +
      screenX = window.mozInnerScreenX;

      Valeur

      diff --git a/files/fr/web/api/window/mozinnerscreeny/index.html b/files/fr/web/api/window/mozinnerscreeny/index.html index 3a8163382d..2b9ebd8564 100644 --- a/files/fr/web/api/window/mozinnerscreeny/index.html +++ b/files/fr/web/api/window/mozinnerscreeny/index.html @@ -16,17 +16,19 @@ translation_of: Web/API/Window/mozInnerScreenY

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

      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;
      +
      screenY = window.mozInnerScreenY;

      Valeur

      • screenY stocke la valeur de la propriété window.mozInnerScreenY.
      • -
      • La propriété window.mozInnerScreenY est une valeur en lecture seule à virgule flottante; il n'a pas de valeur par défaut.
      • +
      • La propriété window.mozInnerScreenY est une valeur en lecture seule à virgule flottante; il n'a pas de valeur par défaut.

      Spécification

      diff --git a/files/fr/web/api/window/mozpaintcount/index.html b/files/fr/web/api/window/mozpaintcount/index.html index 288e5ecfe1..a6f3d9eb7c 100644 --- a/files/fr/web/api/window/mozpaintcount/index.html +++ b/files/fr/web/api/window/mozpaintcount/index.html @@ -17,18 +17,18 @@ translation_of: Web/API/Window/mozPaintCount

      Renvoie le nombre de fois où le document actuel a été peint à l'écran dans cette fenêtre.

      -

      Syntaxe

      +

      Syntaxe

      -
      var paintCount = window.mozPaintCount;
      +
      var paintCount = window.mozPaintCount;
      • paintCount stocke la valeur de la propriété window.mozPaintCount.
      • -
      • La valeur window.mozPaintCount est longue, et commence à zéro lorsque le document est créé pour la première fois, en incrémentant de un à chaque fois que le document est peint.
      • +
      • La valeur window.mozPaintCount est longue, et commence à zéro lorsque le document est créé pour la première fois, en incrémentant de un à chaque fois que le document est peint.
      -

      Spécification

      +

      Spécification

      -

      Ne fait partie d'aucune spécification ou recommandation du W3C.

      +

      Ne fait partie d'aucune spécification ou recommandation du W3C.

      Compatibilité des navigateurs

      diff --git a/files/fr/web/api/window/offline_event/index.html b/files/fr/web/api/window/offline_event/index.html index a038b1ea4a..fa7752a90c 100644 --- a/files/fr/web/api/window/offline_event/index.html +++ b/files/fr/web/api/window/offline_event/index.html @@ -36,7 +36,7 @@ translation_of: Web/API/Window/offline_event

      Exemples

      -
      //version addEventListener
      +
      //version addEventListener
       window.addEventListener('offline', (event) => {
           console.log("La Connexion au réseau est perdu.");
       });
      @@ -47,7 +47,7 @@ window.onoffline = (event) => {
       };
       
      -

      Spécifications

      +

      Spécifications

    diff --git a/files/fr/web/api/window/online_event/index.html b/files/fr/web/api/window/online_event/index.html index 0dd968c064..c2c93916c8 100644 --- a/files/fr/web/api/window/online_event/index.html +++ b/files/fr/web/api/window/online_event/index.html @@ -13,7 +13,9 @@ translation_of: Web/API/Window/online_event

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

    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.

    +
    @@ -36,13 +38,9 @@ translation_of: Web/API/Window/online_event
    -
    -
    -
    -

    Exemples

    -
    // addEventListener version
    +
    // addEventListener version
     window.addEventListener('online', (event) => {
         console.log("Vous êtes maintenant connecté au réseau.");
     });
    @@ -53,7 +51,7 @@ window.ononline = (event) => {
     };
     
    -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/window/onpaint/index.html b/files/fr/web/api/window/onpaint/index.html index 351683ba0c..d7ae9b979d 100644 --- a/files/fr/web/api/window/onpaint/index.html +++ b/files/fr/web/api/window/onpaint/index.html @@ -13,13 +13,13 @@ translation_of: Web/API/Window/onpaint

    Window.onpaint est un gestionnaire d'événements pour l'événement paint sur la fenêtre.

    -
    -

    Ne fonctionne pas dans les applications basées sur Gecko actuellement, voir la section Notes!

    +
    +

    Attention : Ne fonctionne pas dans les applications basées sur Gecko actuellement, voir la section Notes!

    Syntaxe

    -
    window.onpaint = funcRef;
    +
    window.onpaint = funcRef;
     
      diff --git a/files/fr/web/api/window/open/index.html b/files/fr/web/api/window/open/index.html index d4fced2fa8..863f61a1a9 100644 --- a/files/fr/web/api/window/open/index.html +++ b/files/fr/web/api/window/open/index.html @@ -8,67 +8,58 @@ translation_of: Web/API/Window/open ---

      {{ ApiRef() }}

      -

      Définition

      +

      Définition

      Crée une nouvelle fenêtre de navigation secondaire et y charge la ressource référencée.

      -

      Syntaxe

      +

      Syntaxe

      -
      var windowObjectReference = window.open(strUrl, strWindowName[, strWindowFeatures]);
      +
      var windowObjectReference = window.open(strUrl, strWindowName[, strWindowFeatures]);
      -

      Valeur renvoyée et paramètres

      +

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

      +

      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

      +

      Exemples

      -
      var windowObjectReference;
      -var strWindowFeatures = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";
      +
      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);
      -}
      +function openRequestedPopup() { + windowObjectReference = window.open("http://www.cnn.com/", "CNN_WindowName", strWindowFeatures); +}
      -
      var windowObjectReference;
      +
      var windowObjectReference;
       
      -function openRequestedPopup() {
      -  windowObjectReference = window.open(
      -    "http://www.domainname.ext/path/ImageFile.png",
      -    "DescriptiveWindowName",
      -    "resizable,scrollbars,status"
      -  );
      -}
      +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.

      +

      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.

      @@ -80,247 +71,103 @@ translation_of: Web/API/Window/open

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

      -

      Astuce : 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.

      +

      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.

      -

      Illustration des barres d'outils du chrome de Firefox

      - -

      Fonctionnalités de position et de taille

      +

      Fonctionnalités de position et de taille

      Note sur les corrections d'erreurs de position et de dimension

      -
      {{bug(176320) }}
      +

      {{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.
      -
      Reconnu par : , , , , ,
      -
      - -
      -
      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.
      -
      Reconnu par : , , , , ,
      -
      - -
      -
      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.
      -
      Note sur la différence entre outerHeight et height (ou innerHeight)
      -
      Reconnu par : , , , , ,
      -
      - -
      -
      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.
      -
      Reconnu par : , , , , ,
      -
      - -
      -
      screenX 
      -
      Déprécié. Ne plus utiliser. Similaire à left, mais uniquement reconnu par les navigateurs Netscape et basés sur Mozilla.
      -
      Reconnu par : , , ,
      -
      - -
      -
      screenY 
      -
      Déprécié. Ne plus utiliser. Similaire à top, mais uniquement reconnu par les navigateurs Netscape et basés sur Mozilla.
      -
      Reconnu par : , , ,
      -
      - -
      -
      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.
      -
      Note sur les différences entre outerHeight et height (ou innerHeight)
      -
      Reconnu par : , , ,
      -
      - -
      -
      outerWidth 
      +
      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.
      -
      Reconnu par : , , ,
      -
      - -
      -
      innerHeight 
      -
      Similaire à height, mais uniquement reconnu par les navigateurs Netscape et basés sur Mozilla. Spécifie la hauteur 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.
      -
      Note sur les différences entre outerHeight et height (ou innerHeight)
      -
      Reconnu par : , , ,
      -
      - -
      -
      innerWidth 
      -
      Similaire à width , mais uniquement reconnu par les navigateurs Netscape et basés sur Mozilla. Spécifie la largeur 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.
      -
      Reconnu par : , , ,
      -
      - -

      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.
      -
      Reconnu par : , , , ,
      -
      - -
      -
      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.
      -
      Reconnu par : , , , ,
      -
      - -
      -
      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) }}
      -
      -
      - -
      -
      Reconnu par : , , , , ,
      +
      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.
      -
      -
      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.
      -
      Reconnu par : , , , ,
      -
      +

      Fonctionnalités de barres d'outils et de chrome

      -
      personalbar 
      +
      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.
      -
      Reconnu par : , , ,
      -
      - -
      -
      status 
      +
      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.
      -
      Note sur la barre d'état
      -
      Reconnu par : , , , ,
      -

      Fonctionnalités relatives à la fenêtre

      +

      Fonctionnalités relatives à la fenêtre

      -
      resizable 
      -
      Si cette fonctionnalité est définie à yes, la nouvelle fenêtre secondaire sera redimensionnable.
      -
      Note : à 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) }})
      -
      - +
      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) }})

      -

      Astuce : pour des raisons d'accessibilité, il est vivement recommandé de toujours définir cette fonctionnalité à yes.

      +

      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.
      -
      Reconnu par : , , , ,
      -
      - -
      -
      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.
      -
      - +

      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.

      -

      Astuce : pour des raisons d'accessibilité, il est vivement recommandé de toujours définir cette fonctionnalité à yes.

      +

      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.
      -
      Note sur les barres de défilement
      -
      Reconnu par : , , , ,
      -
      - -
      -
      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().
      -
      Reconnu par : , , ,
      -
      - -
      -
      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().
      -
      Reconnu par : , , ,
      -
      - -
      -
      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 .
      -
      Reconnu par : , , ,
      -
      - -
      -
      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.
      -
      Reconnu par : , , ,
      +

      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.

      -
      -
      fullscreen 
      -
      À ne pas utiliser. N'est pas reconnu par Mozilla, et il n'existe aucun plan prévoyant de le faire fonctionner dans Mozilla.
      -
      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.
      -
      Note sur fullscreen
      -
      Reconnu par :
      -
      fullscreen ne fonctionne plus vraiment dans Internet Explorer 6 SP2.
      -
      - -

      Fonctionnalités nécessitant des privilèges

      +

      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).
      -
      Reconnu par : , , ,
      -
      - -
      -
      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.
      -
      Reconnu par : , , ,
      -
      - -
      -
      alwaysRaised 
      +
      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.
      -
      Reconnu par : , , ,
      -
      - -
      -
      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.
      -
      Reconnu par : , , ,
      -
      - -
      -
      z-lock 
      +
      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.
      -
      Reconnu par : , , ,
      +
      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.

      @@ -340,7 +187,7 @@ function openRequestedPopup() {

      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

      +

      Bonnes pratiques

      <script type="text/javascript">
       var WindowObjectReference = null; // variable globale
      @@ -375,9 +222,9 @@ l'adoption de Firefox</a></p>
       
       

      Plus d'informations sur l'utilisation de l'attribut target :

      -

      HTML 4.01, section 16.3.2 La sémantique de cible

      +

      HTML 4.01, section 16.3.2 La sémantique de cible

      -

      Comment créer un lien qui ouvre une nouvelle fenêtre?

      +

      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 :

      @@ -445,99 +292,49 @@ title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouver de Firefox</a></p>
      -

      FAQ

      +

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

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

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

      -

      Problèmes d'utilisabilité

      - -

      Évitez de recourir à window.open()

      +

      É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 :

      • Tous les navigateurs basés sur Mozilla offrent la navigation par onglets, et il s'agit du mode préféré pour ouvrir des ressources référencées… pas seulement dans le cas des navigateurs basés sur Mozilla, mais dans tous les autres navigateurs offrant la navigation par onglets. En d'autres mots, les utilisateurs de navigateurs utilisant des onglets préfèrent ouvrir des onglets que des fenêtres dans la plupart des situations. Ce type de navigateur gagne rapidement en popularité depuis plusieurs années et cette tendance ne semble pas près de s'arrêter. La version 7 d'Internet Explorer sortie en octobre 2006 propose également la navigation par onglets.
      • -
      - -
        -
      • Il existe à présent plusieurs extensions à Mozilla (comme Multizilla) et à Firefox (comme Tabbrowser preferences), fonctionnalités et préférences avancées basées sur la navigation par onglets, sur la conversion des appels à window.open() en ouvertures d'onglets, et sur la neutralisation des appels à window.open(). En particulier, afin de neutraliser l'ouverture de nouvelles fenêtres non demandées (souvent présentés comme bloquant les fenêtre popups non sollicitées ou les ouvertures automatiques de fenêtres par des scripts). Parmi ces fonctionnalités qu'on peut retrouver dans des extensions, il y a l'ouverture d'un lien 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. Coder sans réfléchir pour ouvrir de nouvelles fenêtres n'est plus assuré de succès, ne pourra pas se faire par la force, et dans le cas où l'auteur Web y parvient, ne fera qu'ennuyer la majorité des utilisateurs.
      • -
      - -
        +
      • Il existe à présent plusieurs extensions à Mozilla (comme Multizilla) et à Firefox (comme Tabbrowser preferences), fonctionnalités et préférences avancées basées sur la navigation par onglets, sur la conversion des appels à window.open() en ouvertures d'onglets, et sur la neutralisation des appels à window.open(). En particulier, afin de neutraliser l'ouverture de nouvelles fenêtres non demandées (souvent présentés comme bloquant les fenêtre popups non sollicitées ou les ouvertures automatiques de fenêtres par des scripts). Parmi ces fonctionnalités qu'on peut retrouver dans des extensions, il y a l'ouverture d'un lien 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. Coder sans réfléchir pour ouvrir de nouvelles fenêtres n'est plus assuré de succès, ne pourra pas se faire par la force, et dans le cas où l'auteur Web y parvient, ne fera qu'ennuyer la majorité des utilisateurs.
      • Les nouvelles fenêtres peuvent avoir leur barre de menu, leurs barres de défilement, leur barre d'état, leur redimensionnabilité etc. désactivées. Ceci n'est pas possible avec de nouveaux onglets. Par conséquent, de nombreux utilisateurs préfèrent utiliser des onglets étant donné que l'interface de leur navigateur est laissée intacte et reste stable.
      • -
      - -
      • L'ouverture de nouvelles fenêtres, même avec leurs fonctionnalités réduites, utilise des ressources système considérables sur l'ordinateur de l'utilisateur (processeur, mémoire RAM) et met en jeu une grande quantité de code à exécuter (gestion de la sécurité, de la mémoire, diverses options de code parfois assez complexes, la construction du cadre de la fenêtre, des barres d'outils de la fenêtre, son positionnement et sa taille, etc.). L'ouverture de nouveaux onglets demande nettement moins de ressources système et est plus rapide à exécuter que d'ouvrir de nouvelles fenêtres.
      -

      Offrez d'ouvrir un lien dans une nouvelle fenêtre, en suivant ces recommandations

      +

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

      @@ -546,7 +343,7 @@ de Firefox</a></p>
    • Les pseudo-liens « javascript:» ne fonctionnent plus du tout lorsque la gestion de JavaScript est désactivée ou inexistante. Certaines sociétés n'autorisent leurs employés à utiliser le Web que suivant des politiques de sécurité très strictes : JavaScript désactivé, pas de Java, pas d'ActiveX, pas de Flash. Pour diverses raisons (sécurité, accès public, navigateurs texte, etc.), environ 5% à 10% des utilisateurs naviguent sur le Web avec JavaScript désactivé.
    • Les liens « javascript: » interfèrent avec les fonctionnalités avancées de la navigation par onglets : entre autres, le clic du milieu sur des liens, le raccourci Ctrl+clic sur un lien, les fonctions de certaines extensions, etc.
    • Les liens « javascript: » interfèrent avec le processus d'indexation des pages Web par les moteurs de recherche.
    • -
    • Les liens « javascript: » interfèrent avec les technologies d'assistance (par exemple les lecteurs vocaux) et diverses applications utilisant le Web (par exemple les PDA ou les navigateurs pour mobiles).
    • +
    • Les liens « javascript: » interfèrent avec les technologies d'assistance (par exemple les lecteurs vocaux) et diverses applications utilisant le Web (par exemple les PDA ou les navigateurs pour mobiles).
    • Les liens « javascript: » interfèrent également avec les fonctionnalités de « mouse gestures » proposées par certains navigateurs.
    • Le schéma de protocole « javascript: » sera rapporté comme une erreur par les validateurs et vérificateurs de liens.
    @@ -554,16 +351,16 @@ de Firefox</a></p>

    Plus d'informations à ce sujet :

    -
    N'utilisez jamais <a href="#" onclick="window.open(...);">
    +
    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 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.

    @@ -571,7 +368,7 @@ de Firefox</a></p>

    « 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

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

    @@ -579,75 +376,39 @@ de Firefox</a></p>

    Références

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Exemples de curseurs et icônes « Nouvelle fenêtre »
    - -
    Utilisez toujours l'attribut target
    +
    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"
    +
    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

    +

    Glossaire

    -
    Fenêtre ouvrante, opener, fenêtre parente, fenêtre principale, première fenêtre 
    +
    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 
    +
    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 
    +
    Fenêtres popup non sollicitées
    Ouverture automatique de fenêtres initiée par un script sans le consentement de l'utilisateur.
    -

    Spécification

    +

    Spécification

    -

    {{ DOM0() }} window.open() ne fait partie d'aucune spécification ou recommandation technique du W3C.

    +

    {{ DOM0() }} window.open() ne fait partie d'aucune spécification ou recommandation technique du W3C.

    -

    Notes

    +

    Notes

    -

    Note sur les priorités

    +

    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.

    @@ -669,13 +430,13 @@ WindowObjectReference = window.open("http://www.wwf.org/", </script>
    -

    Note sur les corrections d'erreurs de position et de dimension

    +

    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.

    +

    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

    +

    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 :

    @@ -684,7 +445,7 @@ WindowObjectReference = window.open("http://www.wwf.org/",
  • l'utilisateur a augmenté la taille de police du texte via le menu Affichage/Taille du texte (%) dans Mozilla ou Affichage/Taille du texte/Plus grande ou Plus petite dans Firefox
  • l'utilisateur a défini une taille minimale de police pour les pages qui est plus grande que celle demandée par l'auteur. Les personnes de plus de 40 ans ou ayant des habitudes particulières de lecture choisissent souvent une taille minimale de police dans les navigateurs basés sur Mozilla.
  • l'auteur n'est pas conscient des marges par défaut (et/ou bordures et/ou padding) appliquées à l'élément racine ou nœud body dans les différents navigateurs et versions de ceux-ci
  • -
  • l'utilisateur utilise une feuille de style utilisateur (userContent.css in Mozilla-based browsers) pour ses habitudes de navigation qui modifie les dimensions habituelles pour ses habitudes de lecture (marges, padding, taille de police par défaut)
  • +
  • l'utilisateur utilise une feuille de style utilisateur (userContent.css in Mozilla-based browsers) pour ses habitudes de navigation qui modifie les dimensions habituelles pour ses habitudes de lecture (marges, padding, taille de police par défaut)
  • l'utilisateur peut personnaliser individuellement la taille (hauteur ou largeur) de la plupart des barres d'outils via son système d'exploitation. Par exemple les bordures de fenêtres, la hauteur de la barre de titre, des menus et des barres de défilement, ainsi que la taille du texte sont entièrement personnalisables par l'utilisateur dans le système d'exploitation Windows XP. Ces dimensions de barres d'outils peuvent également être changées par des thèmes du navigateur, ou du système d'exploitation
  • l'auteur ne s'attend pas à ce que la fenêtre de l'utilisateur dispose de barres d'outils spécifiques supplémentaires ; comme des barres de préférences, la barre web developer, des barres d'accessibilité, de blocage de popups et de recherche, etc.
  • l'utilisateur utilise des technologies assistives ou addons qui modifient la zone de travail des applications, par exemple Microsoft Magnifier
  • @@ -692,18 +453,18 @@ WindowObjectReference = window.open("http://www.wwf.org/",
  • certains systèmes d'exploitation (Mac OS X) forcent la présence de barres d'outils qui peuvent démentir les anticipations et calculs de l'auteur Web sur les dimensions effectives de la fenêtre de navigation
  • -

    Note sur la barre d'état

    +

    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.

    +

    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

    +

    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

    + citation de Fine-Tune Your Web Site for Windows XP Service Pack 2, Browser Window Restrictions in XP SP2

    @@ -714,57 +475,44 @@ WindowObjectReference = window.open("http://www.wwf.org/", 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

    + citation de Changes to Functionality in Microsoft Windows XP Service Pack 2, Internet Explorer Window Restrictions

    -

    Note sur le plein écran (fullscreen)

    +

    Note sur le plein écran (fullscreen)

    Dans Internet Explorer 6 pour XP SP2 :

    • « window.open() avec fullscreen=yes donnera à présent une fenêtre maximisée, et non une fenêtre en mode kiosque. »
    • -
    - -
    • « La définition de la spécification de fullscreen=yes est modifiée pour signifier "afficher la fenêtre maximisée," ce qui gardera la barre de titre, la barre d'adresse et la barre d'état visibles. »

    Références :

    - - -

    Note sur la différence entre outerHeight et height

    +

    Note sur la différence entre outerHeight et height

    - -

    Tutoriels

    +

    Tutoriels

    en français :

    -

    Créer des pop-up intelligentes par Fabrice Bonny, OpenWeb

    +

    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

    +

    JavaScript windows (tutorial) par Lasse Reichstein Nielsen

    -

    Links & JavaScript Living Together in Harmony by Jeff Howden

    +

    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

    -

    {{ languages( { "en": "en/DOM/window.open", "ja": "ja/DOM/window.open", "pl": "pl/DOM/window.open", "zh-cn": "cn/DOM/window.open" } ) }}

    +

    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 index 1c366c5355..5329caea16 100644 --- a/files/fr/web/api/window/opendialog/index.html +++ b/files/fr/web/api/window/opendialog/index.html @@ -8,104 +8,95 @@ tags: - boîte de dialogue translation_of: Web/API/Window/openDialog --- -

    {{ ApiRef() }}

    +

    {{ ApiRef() }}

    -

    Résumé

    +

    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.

    -

    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ès windowFeatures, et que windowFeatures 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.

    -

    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ênement load . 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.

    -

    Notez que l'appel à la méthode openDialog() se termine immédiatement. Si vous souhaitez le bloquer jusqu'à ce que l'utilisateur ferme la boîte de dialogue, utilisez la valeur modal 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

    +

    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 de window.open() pour plus de détails.
    -
    features 
    -
    Voir la description de window.open() pour la description.
    -
    arg1, arg2, ... 
    -
    Les arguments à passer à la nouvelle fenêtre (optionnel).
    +
    +
    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

    +

    Exemple

    var win = openDialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98);
    -

    Notes

    +

    Notes

    -

    Nouvelles fonctionnalités

    +

    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().
    -
    -
    Active ou désactive ("all=no") toutes les fonctionnalités (excepté chrome, dialog et modal). 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éthode window.open() mais pas par window.openDialog().
    -
    +

    Comportement

    -

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

    -

    La méthode window.openDialog() traite l'absence du paramètre features de la même manière que window.open() (une chaîne vide désactive toutes les fonctionnalités) excepté pour chrome et dialog qui sont activés par défaut et peuvent être explicitement désactivées par "chrome=no".

    +

    Passage de paramètres supplémentaires

    -

    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 :

    +

    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 type Array, et cette propriété sera ajoutée à la nouvelle boîte de dialogue.

    +

    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 :

    +

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

    +

    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

    +

    Retourner des arguments depuis la boîte de dialogue

    -

    Depuis que window.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).

    +

    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éthode window.close().

    +

    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'objet retVals depuis la boîte de dialogue comme décrit précédemment, vous pouvez y accéder via le tableau retVals après l'appel à openDialog().

    +

    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 :

    +

    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 aussi ce message. (Autre exemple).
    - Voir aussi window.importDialog().

    +

    Voir aussice message. (Autre exemple).
    + Voir aussiwindow.importDialog().

    -

    Spécification

    +

    Spécification

    -

    {{ DOM0() }}

    +

    {{ DOM0() }}

    -

    Compatibilité des navigateurs

    +

    Compatibilité des navigateurs

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

    Voir également

    -

     

    - - -

     

    +
  • Another example
  • +
  • window.importDialog (mobile) {{obsolete_inline}}
  • + \ 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 index 43c965d501..3ccf6c71ae 100644 --- a/files/fr/web/api/window/opener/index.html +++ b/files/fr/web/api/window/opener/index.html @@ -8,20 +8,17 @@ tags: translation_of: Web/API/Window/opener ---

    {{ ApiRef() }}

    -

    Résumé

    +

    Résumé

    Renvoie une référence vers la fenêtre qui a ouvert la fenêtre courante.

    -

    Syntaxe

    +

    Syntaxe

    refObj = window.opener
     
    -

    Exemple

    +

    Exemple

     if window.opener != indexWin {
          referToTop(window.opener);
      }
     
    -

    Notes

    +

    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() }}

    -
    -  
    -

    {{ languages( { "en": "en/DOM/window.opener", "ja": "ja/DOM/window.opener", "pl": "pl/DOM/window.opener" } ) }}

    +

    Spécification

    +

    {{ DOM0() }}

    \ No newline at end of file diff --git a/files/fr/web/api/window/outerheight/index.html b/files/fr/web/api/window/outerheight/index.html index 064bd3c82e..53b6f0637a 100644 --- a/files/fr/web/api/window/outerheight/index.html +++ b/files/fr/web/api/window/outerheight/index.html @@ -5,8 +5,6 @@ translation_of: Web/API/Window/outerHeight ---
    {{APIRef}}
    -

    Résumé

    -

    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.

    @@ -18,13 +16,13 @@ translation_of: Web/API/Window/outerHeight

    La valeur retournée correspond à la hauteur extérieure de la fenêtre.

    -

    Notes

    +

    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é

    +

    Exemple illustré

    La figure suivante montre la différence entre outerHeight et innerHeight.

    diff --git a/files/fr/web/api/window/outerwidth/index.html b/files/fr/web/api/window/outerwidth/index.html index a8076143bb..863a26a3ab 100644 --- a/files/fr/web/api/window/outerwidth/index.html +++ b/files/fr/web/api/window/outerwidth/index.html @@ -11,24 +11,22 @@ translation_of: Web/API/Window/outerWidth ---
    {{APIRef}}
    -

    Résumé

    +

    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.

    -

    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.

    -

    Cette propriété est en lecture seule ; elle n'a pas de valeur par défaut.

    - -

    Syntaxe

    +

    Syntaxe

    largeurExterieureFenetre = window.outerWidth;
     

    Lors du retour, largeurExterieureFenetre vaut la largeur de l'extérieur de la fenêtre.

    -

    Notes

    +

    Notes

    -

    Pour changer la taille d'une fenêtre, voir {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo ()")}}.

    +

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

    +

    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

    diff --git a/files/fr/web/api/window/pagehide_event/index.html b/files/fr/web/api/window/pagehide_event/index.html index ae97628c71..81e2c695f8 100644 --- a/files/fr/web/api/window/pagehide_event/index.html +++ b/files/fr/web/api/window/pagehide_event/index.html @@ -9,21 +9,21 @@ original_slug: Web/Events/pagehide

    Informations générales

    -
    Spécification
    -
    HTML5
    -
    Interface
    -
    PageTransitionEvent
    -
    Bouillonne
    -
    Non
    -
    Annulable
    -
    Non
    -
    Cible
    -
    Document (dispatché sur Window)
    -
    Action par défaut
    -
    Aucune
    +
    Spécification
    +
    HTML5
    +
    Interface
    +
    PageTransitionEvent
    +
    Bouillonne
    +
    Non
    +
    Annulable
    +
    Non
    +
    Cible
    +
    Document (dispatché sur Window)
    +
    Action par défaut
    +
    Aucune
    -

    Propriétés

    +

    Propriétés

    diff --git a/files/fr/web/api/window/pageshow_event/index.html b/files/fr/web/api/window/pageshow_event/index.html index 4bc3fb867e..4687409333 100644 --- a/files/fr/web/api/window/pageshow_event/index.html +++ b/files/fr/web/api/window/pageshow_event/index.html @@ -9,21 +9,21 @@ original_slug: Web/Events/pageshow

    Informations générales

    -
    Spécification
    -
    HTML5
    -
    Interface
    -
    PageTransitionEvent
    -
    Bouillonne
    -
    Non
    -
    Annulable
    -
    Non
    -
    Cible
    -
    Document (dispatché sur Window)
    -
    Action par défaut
    -
    Aucune
    +
    Spécification
    +
    HTML5
    +
    Interface
    +
    PageTransitionEvent
    +
    Bouillonne
    +
    Non
    +
    Annulable
    +
    Non
    +
    Cible
    +
    Document (dispatché sur Window)
    +
    Action par défaut
    +
    Aucune
    -

    Propriétés

    +

    Propriétés

    diff --git a/files/fr/web/api/window/parent/index.html b/files/fr/web/api/window/parent/index.html index f45781f517..01da0b6b14 100644 --- a/files/fr/web/api/window/parent/index.html +++ b/files/fr/web/api/window/parent/index.html @@ -8,18 +8,18 @@ tags: translation_of: Web/API/Window/parent ---

    {{ ApiRef() }}

    -

    Résumé

    +

    Résumé

    Renvoie une référence à la fenêtre parente ou cadre parent de la fenêtre courante ou du cadre courant.

    -

    Syntaxe

    +

    Syntaxe

    refObj = window.parent
     
    -

    Exemple

    +

    Exemple

    if (window.parent != window.top) {
          // on se trouve dans une imbrication de cadres
     }
     
    -

    Notes

    +

    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

    +

    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 index af59ba4d71..0f215c946e 100644 --- a/files/fr/web/api/window/paste_event/index.html +++ b/files/fr/web/api/window/paste_event/index.html @@ -10,7 +10,7 @@ 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.

    +

    L'événement paste est déclenché lorsque l'utilisateur a lancé une action de "paste" via l'interface utilisateur du navigateur.

    @@ -33,11 +33,11 @@ translation_of: Web/API/Window/paste_event
    -

    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.

    +

    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) => {
    +
    window.addEventListener('paste', (event) => {
         console.log('paste action initiated')
     });
    diff --git a/files/fr/web/api/window/popstate_event/index.html b/files/fr/web/api/window/popstate_event/index.html index f924242a05..9c821b6ea9 100644 --- a/files/fr/web/api/window/popstate_event/index.html +++ b/files/fr/web/api/window/popstate_event/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Window/popstate_event
    Specification
    -
    HTML5
    +
    HTML5
    Interface
    PopStateEvent
    Bubbles
    diff --git a/files/fr/web/api/window/postmessage/index.html b/files/fr/web/api/window/postmessage/index.html index 9c4e349959..e7224757d7 100644 --- a/files/fr/web/api/window/postmessage/index.html +++ b/files/fr/web/api/window/postmessage/index.html @@ -13,26 +13,26 @@ translation_of: Web/API/Window/postMessage
    -

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

    +

    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.
    +
    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]
    +
    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é

    +

    L'évènement envoyé

    otherWindow peut surveiller les messages envoyés en exécutant le JavaScript suivant :

    @@ -53,23 +53,23 @@ function receiveMessage(event)
    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.
    +
    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.
    +
    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é

    +

    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.

    +

    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

    +

    Exemple

    /*
      * Dans les scripts de la fenêtre A, avec A sur <http://example.com:8080>:
    @@ -126,7 +126,7 @@ function receiveMessage(event)
     window.addEventListener("message", receiveMessage, false);
     
    -

    Notes

    +

    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.

    @@ -173,7 +173,7 @@ window.addEventListener("message", receiveMessage, false);

    Voir aussi

    diff --git a/files/fr/web/api/window/print/index.html b/files/fr/web/api/window/print/index.html index 17eeacc763..89f93aecf3 100644 --- a/files/fr/web/api/window/print/index.html +++ b/files/fr/web/api/window/print/index.html @@ -13,20 +13,18 @@ translation_of: Web/API/Window/print ---

    {{ ApiRef() }}

    -

    Résumé

    -

    Ouvre la fenêtre de dialogue d'impression pour imprimer le document courant. 

    -

    Syntaxe

    +

    Syntaxe

    window.print()
     
    -

    Notes

    +

    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écification

    @@ -46,7 +44,7 @@ translation_of: Web/API/Window/print

    Voir également

      -
    • Printing
    • +
    • Printing
    • {{ domxref("window.onbeforeprint") }}
    • {{ domxref("window.onafterprint") }}
    diff --git a/files/fr/web/api/window/prompt/index.html b/files/fr/web/api/window/prompt/index.html index 9622d8b8e3..6b37e23e15 100644 --- a/files/fr/web/api/window/prompt/index.html +++ b/files/fr/web/api/window/prompt/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Window/prompt

    Syntaxe

    -
    résultat = window.prompt(message, défaut);
    +
    résultat = window.prompt(message, défaut);
     

    Paramètres

    @@ -33,7 +33,7 @@ translation_of: Web/API/Window/prompt

    Exemples

    -
    let signe = prompt("Quel est votre signe astrologique ?");
    +
    let signe = prompt("Quel est votre signe astrologique ?");
     
     if (signe.toLowerCase() == "verseau") {
       console.log("Oh ? moi aussi je suis verseau :)");
    @@ -56,11 +56,11 @@ signe = window.prompt('Quelle est la réponse ?', '42');

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

    +

    The following text is shared between this article, DOM:window.confirm and DOM:window.alertLes 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.", ""));
    +
    const aNumber = Number(window.prompt("Veuillez saisir un nombre.", ""));

    Spécifications

    diff --git a/files/fr/web/api/window/rejectionhandled_event/index.html b/files/fr/web/api/window/rejectionhandled_event/index.html index fb53af2a1b..ebe167e30f 100644 --- a/files/fr/web/api/window/rejectionhandled_event/index.html +++ b/files/fr/web/api/window/rejectionhandled_event/index.html @@ -15,7 +15,9 @@ 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 .

    +

    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 .

    @@ -42,7 +44,7 @@ translation_of: Web/API/Window/rejectionhandled_event

    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 => {
    +
    window.addEventListener("rejectionhandled", event => {
       console.log("Promise rejected; reason: " + event.reason);
     }, false);
     
    diff --git a/files/fr/web/api/window/requestanimationframe/index.html b/files/fr/web/api/window/requestanimationframe/index.html index 8bdb9c1f89..210fa93d1a 100644 --- a/files/fr/web/api/window/requestanimationframe/index.html +++ b/files/fr/web/api/window/requestanimationframe/index.html @@ -11,20 +11,22 @@ translation_of: Web/API/window/requestAnimationFrame

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

    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

    +

    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

    +

    Paramètres

    callback
    @@ -35,7 +37,7 @@ translation_of: Web/API/window/requestAnimationFrame

    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

    +

    Exemple

    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                                   window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    @@ -58,15 +60,15 @@ function step(timestamp) {
     requestAnimationFrame(step);
     
    -

    Compatibilités

    +

    Compatibilités

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

    -

    Notes pour Gecko

    +

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

    +

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

    @@ -74,7 +76,7 @@ requestAnimationFrame(step);

    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

    +

    Specification

    {{spec("http://www.w3.org/TR/animation-timing/#requestAnimationFrame", "Timing control for script-based animations: requestAnimationFrame", "WD")}}

    @@ -87,5 +89,5 @@ requestAnimationFrame(step);
  • requestAnimationFrame for smart animating - Blog post
  • Animating with javascript: from setInterval to requestAnimationFrame - Blog post
  • Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1 - Blog post
  • -
  • TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations
  • +
  • TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations
  • diff --git a/files/fr/web/api/window/requestidlecallback/index.html b/files/fr/web/api/window/requestidlecallback/index.html index 86a3cc180f..ca33f7ac28 100644 --- a/files/fr/web/api/window/requestidlecallback/index.html +++ b/files/fr/web/api/window/requestidlecallback/index.html @@ -5,22 +5,20 @@ translation_of: Web/API/Window/requestIdleCallback ---
    {{APIRef}}{{SeeCompatTable}}
    -

    Résumé

    -

    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

    +

    Syntaxe

    var idleCallbackId = window.requestIdleCallback(fonction[, options])
    -

    Retour de l'appel

    +

    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

    +

    Paramètres

    -
    fonction
    +
    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.
    • diff --git a/files/fr/web/api/window/resizeby/index.html b/files/fr/web/api/window/resizeby/index.html index 982dfa4b23..b74e4ea022 100644 --- a/files/fr/web/api/window/resizeby/index.html +++ b/files/fr/web/api/window/resizeby/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Window/resizeBy

      Syntaxe

      -
      window.resizeBy(xDelta, yDelta)
      +
      window.resizeBy(xDelta, yDelta)
       

      Paramètres

      @@ -24,7 +24,7 @@ translation_of: Web/API/Window/resizeBy

      Exemple

      -
      // Réduit la fenêtre
      +
      // Réduit la fenêtre
       window.resizeBy(-200, -200);
       
      @@ -38,7 +38,7 @@ window.resizeBy(-200, -200);

      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
      +
      // Créer une fenêtre redimensionnable
       myExternalWindow = window.open("http://myurl.domain", "myWindowName", "resizable");
       
       // Redimensionner la fenêtre à 500 x 500
      diff --git a/files/fr/web/api/window/screen/index.html b/files/fr/web/api/window/screen/index.html
      index ff16ac6bc9..c86fcb6f61 100644
      --- a/files/fr/web/api/window/screen/index.html
      +++ b/files/fr/web/api/window/screen/index.html
      @@ -13,14 +13,14 @@ 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.
      +
      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

      +

      Syntaxe

      objetEcran = window.screen;
       
      -

      Examples

      +

      Examples

      if (screen.pixelDepth < 8) {
         // utiliser la page en colorisation réduite
      @@ -29,7 +29,7 @@ translation_of: Web/API/Window/screen
       }
       
      -

      Spécifications

      +

      Spécifications

    diff --git a/files/fr/web/api/window/screenx/index.html b/files/fr/web/api/window/screenx/index.html index cc762ade3b..2ff4f0dc7b 100644 --- a/files/fr/web/api/window/screenx/index.html +++ b/files/fr/web/api/window/screenx/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Window/screenX

    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

    +

    Syntax

    lLoc = window.screenX
     
    @@ -21,9 +21,9 @@ translation_of: Web/API/Window/screenX
  • lLoc is the number of CSS pixels from the left side the screen.
  • -

    Specifications

    +

    Specifications

    -
    +
    diff --git a/files/fr/web/api/window/scroll/index.html b/files/fr/web/api/window/scroll/index.html index 82075c6ba2..17ae626928 100644 --- a/files/fr/web/api/window/scroll/index.html +++ b/files/fr/web/api/window/scroll/index.html @@ -4,24 +4,21 @@ slug: Web/API/Window/scroll translation_of: Web/API/Window/scroll ---

    {{ ApiRef() }}

    -

    Résumé

    +

    Fait glisser la fenêtre vers une position particulière du document

    -

    Syntax

    +

    Syntax

    window.scroll(x-coord,y-coord)
     
    -

    Parameters

    +

    Parameters

    • x-coord est la position horizontale du pixel que vous voulez voir apparaitre en haut à gauche de l’écran.
    • y-coord est la position verticale du pixel que vous voulez voir apparaitre en haut à gauche de l’écran.
    -

    Example

    +

    Example

     // Déplace la fenêtre 100px plus bas
      <button onClick="scroll(0, 100);">click to scroll down 100 pixels</button>
     
    -

    Notes

    +

    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.

    -
    -  
    -

    {{ languages( { "ja": "ja/DOM/window.scroll", "pl": "pl/DOM/window.scroll" } ) }}

    +

    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 index c8536a550b..1a292aed78 100644 --- a/files/fr/web/api/window/scrollbars/index.html +++ b/files/fr/web/api/window/scrollbars/index.html @@ -15,14 +15,14 @@ translation_of: Web/API/Window/scrollbars

    Syntaxe

    -
    objRef = window.scrollbars
    +
    objRef = window.scrollbars
     

    Exemple

    L'exemple HTML complet suivant montre comment la propriété visible de l'objet scrollbars est utilisée.

    -
    <!doctype html>
    +
    <!doctype html>
     <html>
     <head>
       <title>Divers Tests DOM</title>
    diff --git a/files/fr/web/api/window/scrollby/index.html b/files/fr/web/api/window/scrollby/index.html
    index 17b80d2ea6..8713385ca8 100644
    --- a/files/fr/web/api/window/scrollby/index.html
    +++ b/files/fr/web/api/window/scrollby/index.html
    @@ -10,16 +10,14 @@ translation_of: Web/API/Window/scrollBy
     ---
     

    {{ APIRef() }}

    -

    Description

    -

    Fait défiler le document dans la fenêtre du nombre de pixels passé en paramètre.

    -

    Syntaxe

    +

    Syntaxe

    window.scrollBy(X, Y);
     
    -

    Paramètres

    +

    Paramètres

    • X est le nombre en pixels pour le défilement horizontal.
    • @@ -28,17 +26,17 @@ translation_of: Web/API/Window/scrollBy

      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

      +

      Exemples

      // fait défiler d'une page
       window.scrollBy(0, window.innerHeight);
       
      -

      Notes

      +

      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écification

    Specification
    diff --git a/files/fr/web/api/window/scrollbylines/index.html b/files/fr/web/api/window/scrollbylines/index.html index 471bae984f..eac61c0802 100644 --- a/files/fr/web/api/window/scrollbylines/index.html +++ b/files/fr/web/api/window/scrollbylines/index.html @@ -12,27 +12,23 @@ translation_of: Web/API/Window/scrollByLines ---
    {{ ApiRef() }}
    -
    -

    {{Non-standard_header}}

    -
    - -

    Description

    +

    {{Non-standard_header}}

    Fait défiler le document du nombre de lignes spécifié.

    -

    Syntaxe

    +

    Syntaxe

    window.scrollByLines(lignes)
     
    -

    Paramètres

    +

    Paramètres

    • lignes est le nombre de lignes à faire défiler.
    • lignes peut être un entier positif ou négatif.
    -

    Exemples

    +

    Exemples

    <!-- Faire défiler le document de 5 lignes vers le bas. -->
     <button onclick="scrollByLines(5);">5 lignes vers le bas</button>
    @@ -42,11 +38,11 @@ translation_of: Web/API/Window/scrollByLines
     <button onclick="scrollByLines(-5);">5 lignes vers le haut</button>
     
    -

    Spécification

    +

    Spécification

    -

    Ne fait partie d'aucune spécification.

    +

    Ne fait partie d'aucune spécification.

    -

    See also

    +

    See also

    • {{domxref("window.scrollBy")}}, {{domxref("window.scrollByPages")}}
    • diff --git a/files/fr/web/api/window/scrollbypages/index.html b/files/fr/web/api/window/scrollbypages/index.html index e352ef57e0..d3de7c935c 100644 --- a/files/fr/web/api/window/scrollbypages/index.html +++ b/files/fr/web/api/window/scrollbypages/index.html @@ -10,23 +10,21 @@ translation_of: Web/API/Window/scrollByPages ---

      {{ ApiRef() }}{{Non-standard_header}}

      -

      Description

      -

      Fait défiler le document du nombre de pages spécifié.

      -

      Syntaxe

      +

      Syntaxe

      window.scrollByPages(pages)
       
      -

      Paramètres

      +

      Paramètres

      • pages est le nombre de pages à faire défiler.
      • pages peut être un entier positif ou négatif.
      -

      Exemples

      +

      Exemples

      // fait défiler le document d'une page vers le bas
       window.scrollByPages(1);
      @@ -35,11 +33,11 @@ window.scrollByPages(1);
       window.scrollByPages(-1);
       
      -

      Notes

      +

      Notes

      -

      Voir aussi window.scrollBy, window.scrollByLines, window.scroll, window.scrollTo.

      +

      Voir aussi window.scrollBy, window.scrollByLines, window.scroll, window.scrollTo.

      -

      Spécification

      +

      Spécification

      DOM Niveau 0. Ne fait pas partie de la spécification.

      diff --git a/files/fr/web/api/window/scrollto/index.html b/files/fr/web/api/window/scrollto/index.html index 8198308355..753059d1c9 100644 --- a/files/fr/web/api/window/scrollto/index.html +++ b/files/fr/web/api/window/scrollto/index.html @@ -8,35 +8,31 @@ translation_of: Web/API/Window/scrollTo ---

      {{ ApiRef() }}

      -

      Résumé

      +

      Résumé

      Fait défiler le document jusqu'à un jeu de coordonnées particulier.

      -

      Syntaxe

      +

      Syntaxe

      window.scrollTo(coord-x,coord-y);
       
      -

      Paramètres

      +

      Paramètres

      • coord-x est le pixel le long de l'axe horizontal du document qui doit être affiché en haut à gauche.
      • coord-y est le pixel le long de l'axe vertical du document qui doit être affiché en haut à gauche.
      -

      Exemple

      +

      Exemple

      window.scrollTo(0, 1000);
       
      -

      Notes

      +

      Notes

      Cette fonction est fonctionnellement identique à window.scroll. Pour un défilement relatif, consultez window.scrollBy, window.scrollByLines et window.scrollByPages.

      -

      Spécification

      +

      Spécification

      {{ DOM0() }}

      - -
       
      - -

      {{ languages( { "en": "en/DOM/window.scrollTo", "ja": "ja/DOM/window.scrollTo", "pl": "pl/DOM/window.scrollTo" } ) }}

      diff --git a/files/fr/web/api/window/scrolly/index.html b/files/fr/web/api/window/scrolly/index.html index 23a8eaea78..6d556c1eae 100644 --- a/files/fr/web/api/window/scrolly/index.html +++ b/files/fr/web/api/window/scrolly/index.html @@ -5,11 +5,9 @@ translation_of: Web/API/Window/scrollY ---
      {{APIRef}}
      -

      Résumé

      -

      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

      +

      Syntaxe

      var y = window.scrollY;
      @@ -17,7 +15,7 @@ translation_of: Web/API/Window/scrollY
    • y est le nombre de pixels verticaux défilés.
    -

    Exemple

    +

    Exemple

    // make sure and go down to the second page
     if (window.scrollY) {
    @@ -26,7 +24,7 @@ if (window.scrollY) {
     
     window.scrollByPages(1);
    -

    Notes

    +

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

    @@ -43,7 +41,7 @@ var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documen var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop; -

    Spécifications

    +

    Spécifications

    diff --git a/files/fr/web/api/window/sessionstorage/index.html b/files/fr/web/api/window/sessionstorage/index.html index e93c0bb0cc..64a4e4cc27 100644 --- a/files/fr/web/api/window/sessionstorage/index.html +++ b/files/fr/web/api/window/sessionstorage/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Window/sessionStorage

    Syntaxe

    -
    // Enregistrer des données dans sessionStorage
    +
    // Enregistrer des données dans sessionStorage
     sessionStorage.setItem('clé', 'valeur');
     
     // Récupérer des données depuis sessionStorage
    @@ -34,11 +34,11 @@ sessionStorage.clear();
     
     

    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');
    +
    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
    +
    // Récupération du champ à enregistrer
     var champ = document.getElementById("champ");
     
     // Vérification de l'existence d'une donnée enregistrée auparavant
    @@ -55,7 +55,7 @@ champ.addEventListener("change", function() {
     });
    -

    Note: Veuillez vous référer à l'article Utilisation de l'API Web Storage pour des exemples plus complets.

    +

    Note : Veuillez vous référer à l'article Utilisation de l'API Web Storage pour des exemples plus complets.

    Spécifications

    @@ -79,7 +79,7 @@ champ.addEventListener("change", function() {

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

    +

    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 index e3fba42ed2..3d86815e6a 100644 --- a/files/fr/web/api/window/showmodaldialog/index.html +++ b/files/fr/web/api/window/showmodaldialog/index.html @@ -7,19 +7,19 @@ translation_of: Web/API/Window/showModalDialog ---

    {{ ApiRef() }}

    -

    Résumé

    +

    Résumé

    Crée et affiche un dialogue modal contenant un document HTML spécifié.

    -
    -

    Cette fonction est obsolète.

    +
    +

    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

    +

    Syntaxe

    retour = window.showModalDialog(uri[,arguments][,options]);
     
    @@ -40,7 +40,7 @@ translation_of: Web/API/Window/showModalDialog
    - + @@ -60,11 +60,11 @@ translation_of: Web/API/Window/showModalDialog - + - + @@ -72,20 +72,16 @@ translation_of: Web/API/Window/showModalDialog

    {{ Note("Firefox n\'implémente pas les paramètres dialogHide, edge, status ou unadorned.") }}

    -

    Compatibilité

    +

    Compatibilité

    Introduit par Microsoft Internet Explorer 4. Support ajouté à Firefox dans Firefox 3.

    -

    Exemples

    +

    Exemples

    -

    Essayer showModalDialog().

    +

    Essayer showModalDialog().

    -

    Notes

    +

    Notes

    -

    Spécification

    +

    Spécification

    -

    Microsoft MSDN : showModalDialog

    - -
     
    - -

    {{ languages( { "en": "en/DOM/window.showModalDialog", "ja": "ja/DOM/window.showModalDialog" } ) }}

    +

    Microsoft MSDN : showModalDialog

    diff --git a/files/fr/web/api/window/stop/index.html b/files/fr/web/api/window/stop/index.html index 144637b97b..491876c7b8 100644 --- a/files/fr/web/api/window/stop/index.html +++ b/files/fr/web/api/window/stop/index.html @@ -11,27 +11,25 @@ tags: - stop translation_of: Web/API/Window/stop --- -
     {{APIRef}}
    +
    {{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.
    +

    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.

    -
    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

    -

    Syntaxe

    - -
    window.stop()
    +
    window.stop()
     
    -

    Exemple

    +

    Exemple

    -
    window.stop();
    +
    window.stop();
     
    -

    Spécification

    +

    Spécification

    -
    Description
    center: {on | off | yes | no | 1 | 0 }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.
    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 }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 }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.
    +
    diff --git a/files/fr/web/api/window/storage_event/index.html b/files/fr/web/api/window/storage_event/index.html index 49152ebc7d..8bfbc393b3 100644 --- a/files/fr/web/api/window/storage_event/index.html +++ b/files/fr/web/api/window/storage_event/index.html @@ -41,7 +41,7 @@ translation_of: Web/API/Window/storage_event

    Consignez l'élément sampleList sur la console lorsque l'événement storage se déclenche :

    -
    window.addEventListener('storage', () => {
    +
    window.addEventListener('storage', () => {
       // Lorsque le stockage local change, vider la liste sur
       // la console.
       console.log(JSON.parse(window.localStorage.getItem('sampleList')));
    @@ -49,7 +49,7 @@ translation_of: Web/API/Window/storage_event
     
     

    La même action peut être réalisée ) l'aide de la propriété du gestionnaire d'événements onstorage :

    -
    window.onstorage = () => {
    +
    window.onstorage = () => {
       // Lorsque le stockage local change, vider la liste dans
       // la console.
       console.log(JSON.parse(window.localStorage.getItem('sampleList')));
    diff --git a/files/fr/web/api/window/top/index.html b/files/fr/web/api/window/top/index.html
    index 01b394037f..8fa533e6f9 100644
    --- a/files/fr/web/api/window/top/index.html
    +++ b/files/fr/web/api/window/top/index.html
    @@ -16,7 +16,7 @@ translation_of: Web/API/Window/top
     
     

    Syntaxe

    -
    var topWindow = window.top;
    +
    var topWindow = window.top;
     

    Notes

    diff --git a/files/fr/web/api/window/unload_event/index.html b/files/fr/web/api/window/unload_event/index.html index 1803dc1f98..aa14cc47c8 100644 --- a/files/fr/web/api/window/unload_event/index.html +++ b/files/fr/web/api/window/unload_event/index.html @@ -7,14 +7,13 @@ tags: 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é.

    +

    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. -
    3. pagehide
    4. +
    5. beforeunload (événement annulable)
    6. +
    7. pagehide

    Le document se trouve alors dans un état particulier :

    @@ -66,28 +65,28 @@ original_slug: Web/Events/unload
    - + - + - + - + - - + + @@ -152,6 +151,6 @@ original_slug: Web/Events/unload

    Spécifications

    diff --git a/files/fr/web/api/window/vrdisplayconnect_event/index.html b/files/fr/web/api/window/vrdisplayconnect_event/index.html index 9ec3b9eb0c..888a500d2f 100644 --- a/files/fr/web/api/window/vrdisplayconnect_event/index.html +++ b/files/fr/web/api/window/vrdisplayconnect_event/index.html @@ -40,14 +40,14 @@ translation_of: Web/API/Window/vrdisplayconnect_event

    Vous pouvez utiliser l'événement vrdisplayconnect dans une méthode addEventListener :

    -
    window.addEventListener('vrdisplayconnect', function() {
    +
    window.addEventListener('vrdisplayconnect', function() {
       info.textContent = 'Affichage connecté.';
       reportDisplays();
     });

    Ou utilisez la propriété du gestionnaire d'événements onvrdisplayconnect :

    -
    window.onvrdisplayconnect = function() {
    +
    window.onvrdisplayconnect = function() {
       info.textContent = 'Affichage connecté.';
       reportDisplays();
     };
    diff --git a/files/fr/web/api/window/vrdisplaydisconnect_event/index.html b/files/fr/web/api/window/vrdisplaydisconnect_event/index.html index b6beea3f6e..75a6c9924a 100644 --- a/files/fr/web/api/window/vrdisplaydisconnect_event/index.html +++ b/files/fr/web/api/window/vrdisplaydisconnect_event/index.html @@ -40,14 +40,14 @@ translation_of: Web/API/Window/vrdisplaydisconnect_event

    Vous pouvez utiliser l'événement vrdisplaydisconnect dans une méthode addEventListener :

    -
    window.addEventListener('vrdisplaydisconnect', function() {
    +
    window.addEventListener('vrdisplaydisconnect', function() {
       info.textContent = 'Affichage déconnecté';
       reportDisplays();
     });

    Ou utilisez la propriété du gestionnaire d'événements onvrdisplaydisconnect :

    -
    window.onvrdisplaydisconnect = function() {
    +
    window.onvrdisplaydisconnect = function() {
       info.textContent = 'Affichage déconnecté';
       reportDisplays();
     );
    diff --git a/files/fr/web/api/window/vrdisplaypresentchange_event/index.html b/files/fr/web/api/window/vrdisplaypresentchange_event/index.html index 01e3b050b1..c2abcb5e12 100644 --- a/files/fr/web/api/window/vrdisplaypresentchange_event/index.html +++ b/files/fr/web/api/window/vrdisplaypresentchange_event/index.html @@ -40,7 +40,7 @@ translation_of: Web/API/Window/vrdisplaypresentchange_event

    Vous pouvez utiliser l'événement vrdisplaypresentchange dans une méthode addEventListener :

    -
    window.addEventListener('vrdisplaypresentchange', function() {
    +
    window.addEventListener('vrdisplaypresentchange', function() {
       if(vrDisplay.isPresenting) {
         info.textContent = "L'affichage a commencé à présenter.";
       } else {
    @@ -51,7 +51,7 @@ translation_of: Web/API/Window/vrdisplaypresentchange_event
     
     

    Ou utilisez la propriété de gestionnaire d'événements onvrdisplaypresentchange :

    -
    window.onvrdisplaypresentchange = function() {
    +
    window.onvrdisplaypresentchange = function() {
       if(vrDisplay.isPresenting) {
         info.textContent = "L'affichage a commencé à présenter.";
       } else {
    diff --git a/files/fr/web/api/windowclient/focus/index.html b/files/fr/web/api/windowclient/focus/index.html
    index 577285459b..b78542bb67 100644
    --- a/files/fr/web/api/windowclient/focus/index.html
    +++ b/files/fr/web/api/windowclient/focus/index.html
    @@ -14,7 +14,7 @@ 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.

    +

    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

    diff --git a/files/fr/web/api/windowclient/index.html b/files/fr/web/api/windowclient/index.html index b5b0fe36e0..1a7d646b7a 100644 --- a/files/fr/web/api/windowclient/index.html +++ b/files/fr/web/api/windowclient/index.html @@ -86,7 +86,7 @@ translation_of: Web/API/WindowClient
  • Using Service Workers
  • Service workers basic code example
  • Is ServiceWorker ready?
  • -
  • Promises
  • +
  • Promises
  • Using web workers
  • Channel Messaging API
  • diff --git a/files/fr/web/api/windowclient/navigate/index.html b/files/fr/web/api/windowclient/navigate/index.html index f7d35d7399..038f93f87c 100644 --- a/files/fr/web/api/windowclient/navigate/index.html +++ b/files/fr/web/api/windowclient/navigate/index.html @@ -14,7 +14,7 @@ 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).

    +

    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

    @@ -26,7 +26,7 @@ translation_of: Web/API/WindowClient/navigate
    url
    -
    L'emplacement pour naviguer vers (url est une string) .
    +
    L'emplacement pour naviguer vers (url est une string) .

    Retour

    diff --git a/files/fr/web/api/windowclient/visibilitystate/index.html b/files/fr/web/api/windowclient/visibilitystate/index.html index 0456b39d55..3f0d42838e 100644 --- a/files/fr/web/api/windowclient/visibilitystate/index.html +++ b/files/fr/web/api/windowclient/visibilitystate/index.html @@ -3,9 +3,9 @@ title: WindowClient.visibilityState slug: Web/API/WindowClient/visibilityState translation_of: Web/API/WindowClient/visibilityState --- -

    {{SeeCompatTable}}{{APIRef("Service Workers API")}}

    +

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

    +

    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

    @@ -33,9 +33,9 @@ translation_of: Web/API/WindowClient/visibilityState })); });
    -

    Spécifications

    +

    Spécifications

    -
    Spécifications
    target {{readonlyInline}}EventTargetEventTarget La cible de l'événement (la cible de plus haut niveau dans le DOM).
    type {{readonlyInline}}DOMStringDOMString Le type d'événement.
    bubbles {{readonlyInline}}BooleanBoolean Si l'événement remonte ou non.
    cancelable {{readonlyInline}}BooleanBoolean Si l'événement est annulable ou non.
    view {{readonlyInline}}WindowProxydocument.defaultView (fenêtre du document)WindowProxydocument.defaultView (fenêtre du document)
    detail {{readonlyInline}}
    +
    diff --git a/files/fr/web/api/windoweventhandlers/index.html b/files/fr/web/api/windoweventhandlers/index.html index 412ab62770..b74f03c601 100644 --- a/files/fr/web/api/windoweventhandlers/index.html +++ b/files/fr/web/api/windoweventhandlers/index.html @@ -9,10 +9,9 @@ translation_of: Web/API/WindowEventHandlers
    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.

    +

    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

    diff --git a/files/fr/web/api/windoweventhandlers/onafterprint/index.html b/files/fr/web/api/windoweventhandlers/onafterprint/index.html index fdabdc1f3e..c51179479a 100644 --- a/files/fr/web/api/windoweventhandlers/onafterprint/index.html +++ b/files/fr/web/api/windoweventhandlers/onafterprint/index.html @@ -61,7 +61,5 @@ translation_of: Web/API/WindowEventHandlers/onafterprint
    • {{domxref("window.print")}}
    • {{domxref("window.onbeforeprint")}}
    • -
    • Printing
    • -
    - -
     
    +
  • Printing
  • + \ 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 index 4f5e06adb8..049c317a23 100644 --- a/files/fr/web/api/windoweventhandlers/onbeforeprint/index.html +++ b/files/fr/web/api/windoweventhandlers/onbeforeprint/index.html @@ -12,12 +12,12 @@ translation_of: Web/API/WindowEventHandlers/onbeforeprint

    La propriété onbeforeprint définit et retourne le code du gestionnaire d'événement onbeforeprint onbeforeprint pour la fenêtre actuelle.

    -

    Syntaxe

    +

    Syntaxe

    window.onbeforeprint = code de traitement de l'événement
     
    -

    Notes

    +

    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.

    @@ -25,10 +25,6 @@ translation_of: Web/API/WindowEventHandlers/onbeforeprint

    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) {
    @@ -36,7 +32,7 @@ mediaQueryList.addListener(function(mql) {
       }
     });
    -

    Spécification

    +

    Spécification

    Specification
    @@ -55,13 +51,13 @@ mediaQueryList.addListener(function(mql) {
    -

    Compatibilité des navigateurs

    +

    Compatibilité des navigateurs

    {{Compat("api.WindowEventHandlers.onbeforeprint")}}

    -

    Voir également

    +

    Voir également

    • {{domxref("window.print")}}
    • diff --git a/files/fr/web/api/windoweventhandlers/onbeforeunload/index.html b/files/fr/web/api/windoweventhandlers/onbeforeunload/index.html index b63c5b4caf..0848a6ae06 100644 --- a/files/fr/web/api/windoweventhandlers/onbeforeunload/index.html +++ b/files/fr/web/api/windoweventhandlers/onbeforeunload/index.html @@ -3,11 +3,11 @@ title: window.onbeforeunload slug: Web/API/WindowEventHandlers/onbeforeunload translation_of: Web/API/WindowEventHandlers/onbeforeunload --- -

      Résumé

      +

      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

      +

      Syntaxe

      <element beforeunload="funcRef(event);" />
      @@ -19,7 +19,7 @@ translation_of: Web/API/WindowEventHandlers/onbeforeunload
    • funcRef : Référence à une fonction appelée lorsque l'évènement se déclenche
    -

    Exemple

    +

    Exemple

    window.onbeforeunload = function (e) {
       var e = e || window.event;
    @@ -34,7 +34,7 @@ translation_of: Web/API/WindowEventHandlers/onbeforeunload
     };
     
    -

    Propriétés de l'objet event

    +

    Propriétés de l'objet event

    returnValue
    @@ -46,4 +46,4 @@ translation_of: Web/API/WindowEventHandlers/onbeforeunload

    L'évènement 'onbeforeunload' a été introduit par Microsoft dans IE4 et s'est généralisé dans tous les navigateurs.

    -

    MSDN—onbeforeunload Event

    +

    MSDN—onbeforeunload Event

    diff --git a/files/fr/web/api/windoweventhandlers/onhashchange/index.html b/files/fr/web/api/windoweventhandlers/onhashchange/index.html index bc46a7b004..1a495e5a37 100644 --- a/files/fr/web/api/windoweventhandlers/onhashchange/index.html +++ b/files/fr/web/api/windoweventhandlers/onhashchange/index.html @@ -124,6 +124,6 @@ if(!window.HashChangeEvent)(function(){ diff --git a/files/fr/web/api/windoweventhandlers/onlanguagechange/index.html b/files/fr/web/api/windoweventhandlers/onlanguagechange/index.html index 9e3d5fa3f8..5fe039c2cb 100644 --- a/files/fr/web/api/windoweventhandlers/onlanguagechange/index.html +++ b/files/fr/web/api/windoweventhandlers/onlanguagechange/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/WindowEventHandlers/onlanguagechange

    Syntaxe

    -
    object.onlanguagechange = function;
    +
    object.onlanguagechange = function;
     

    Valeur

    @@ -29,7 +29,7 @@ translation_of: Web/API/WindowEventHandlers/onlanguagechange

    Exemple

    -
    window.onlanguagechange = function(event) {
    +
    window.onlanguagechange = function(event) {
       console.log('événement de changement de langue détecté!');
     };
     
    diff --git a/files/fr/web/api/windoweventhandlers/onpopstate/index.html b/files/fr/web/api/windoweventhandlers/onpopstate/index.html index 1218a53ac5..0a0ab110f2 100644 --- a/files/fr/web/api/windoweventhandlers/onpopstate/index.html +++ b/files/fr/web/api/windoweventhandlers/onpopstate/index.html @@ -11,11 +11,11 @@ translation_of: Web/API/WindowEventHandlers/onpopstate

    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.

    +

    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

    +

    Syntaxe

    window.onpopstate = funcRef;
     
    @@ -26,7 +26,7 @@ translation_of: Web/API/WindowEventHandlers/onpopstate

    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:

    +

    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));
    @@ -39,20 +39,20 @@ history.back(); // affiche "adresse: http://example.com/example.html, état: nul
     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().

    +

    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

    +

    Spécification

    Lire également

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

    diff --git a/files/fr/web/api/windoworworkerglobalscope/index.html b/files/fr/web/api/windoworworkerglobalscope/index.html index 749188112c..3e31d88c6c 100644 --- a/files/fr/web/api/windoworworkerglobalscope/index.html +++ b/files/fr/web/api/windoworworkerglobalscope/index.html @@ -18,14 +18,13 @@ translation_of: Web/API/WindowOrWorkerGlobalScope

    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.

    +

    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.
    @@ -36,7 +35,6 @@ translation_of: Web/API/WindowOrWorkerGlobalScope
    {{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}
    Renvoie l'origine de la portée globale, sérialisée sous forme de chaîne.
    -

    Méthodes

    diff --git a/files/fr/web/api/worker/index.html b/files/fr/web/api/worker/index.html index 9bfd4f6de4..a77f47cf51 100644 --- a/files/fr/web/api/worker/index.html +++ b/files/fr/web/api/worker/index.html @@ -13,23 +13,23 @@ 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.

    +

    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.

    +

    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.

    -
    -

    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.

    +
    +

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

    @@ -81,15 +81,15 @@ translation_of: Web/API/Worker

    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');
    +
    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');
    -}
    +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é).

    +

    Pour un exemple complet, voir Exemple basique de worker dédié (exécuter le worker dédié).

    Spécifications

    @@ -125,8 +125,8 @@ premier.onchange Voir aussi diff --git a/files/fr/web/api/worker/onmessage/index.html b/files/fr/web/api/worker/onmessage/index.html index c380d76883..802fc4771e 100644 --- a/files/fr/web/api/worker/onmessage/index.html +++ b/files/fr/web/api/worker/onmessage/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Worker/onmessage

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

    -

    Remarque : le contenu du message est fourni par la propriété data de l'événement {{event("message")}}.

    +

    Note : Le contenu du message est fourni par la propriété data de l'événement {{event("message")}}.

    Syntaxe

    @@ -47,7 +47,7 @@ myWorker.onmessage = function(e) {

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

    +

    Pour un exemple complet, consulter notre Exemple basique de worker dédié (lancez le worker dédié).

    Spécifications

    diff --git a/files/fr/web/api/worker/postmessage/index.html b/files/fr/web/api/worker/postmessage/index.html index d8a3e7be93..76ea9d7e7e 100644 --- a/files/fr/web/api/worker/postmessage/index.html +++ b/files/fr/web/api/worker/postmessage/index.html @@ -19,35 +19,34 @@ translation_of: Web/API/Worker/postMessage
    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

    -
    +

    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');
    +
    var myWorker = new Worker('worker.js');
     
    -first.onchange = function() {
    -  myWorker.postMessage([first.value,second.value]);
    -  console.log('Message posted to worker');
    -}
    +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');
    -}
    +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).

    -
    -

    Remarque: postMessage() peut n'envoyer qu'un objet à la fois. Comme ci-dessus, si vous voulez envoyez plusieurs valeurs, vous pouvez utiliser un tableau.

    +
    +

    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

    @@ -56,60 +55,60 @@ second.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);
    +
    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';
    -    }
    -}
    +
    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);
    +function sendWorkerArrBuff(aBuf) {
    +    console.info('from worker, PRE send back aBuf.byteLength:', aBuf.byteLength);
     
    -    self.postMessage({aTopic:'do_sendMainArrBuff', aBuf:aBuf}, [aBuf]);
    +    self.postMessage({aTopic:'do_sendMainArrBuff', aBuf:aBuf}, [aBuf]);
     
    -    console.info('from worker, POST send back aBuf.byteLength:', aBuf.byteLength);
    -}
    + console.info('from worker, POST send back aBuf.byteLength:', aBuf.byteLength); +}

    Output logged

    -
    arrBuf.byteLength pre transfer: 8                              bootstrap.js:40
    +
    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
    @@ -117,7 +116,7 @@ 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
    +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

    diff --git a/files/fr/web/api/worker/worker/index.html b/files/fr/web/api/worker/worker/index.html index 662be32858..1448f5eb35 100644 --- a/files/fr/web/api/worker/worker/index.html +++ b/files/fr/web/api/worker/worker/index.html @@ -8,10 +8,10 @@ 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.

    +

    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.

    -

    Remarque : 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.

    +

    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

    @@ -30,7 +30,7 @@ translation_of: Web/API/Worker/Worker
    • 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.
    • +
    • name: Une {{domxref("DOMString")}} définissant un identifiant pour l'environment du worker {{domxref("DedicatedWorkerGlobalScope")}}, souvent utilisé pour le débogage.
    @@ -54,7 +54,7 @@ first.onchange = function() { console.log('Message envoyé au worker'); }
    -

    Pour un exemple complet, consultez notre Exemple basique d'un worker dédié (lancer le worker dédié).

    +

    Pour un exemple complet, consultez notre Exemple basique d'un worker dédié (lancer le worker dédié).

    Spécifications

    @@ -75,12 +75,10 @@ first.onchange = function() {

    Compatibilité des navigateurs

    - -

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

    -

    Remarque: 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.

    +

    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

    diff --git a/files/fr/web/api/workerglobalscope/console/index.html b/files/fr/web/api/workerglobalscope/console/index.html index f045e26b62..e60d13bf38 100644 --- a/files/fr/web/api/workerglobalscope/console/index.html +++ b/files/fr/web/api/workerglobalscope/console/index.html @@ -32,7 +32,7 @@ translation_of: Web/API/WorkerGlobalScope/console

    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

    +

    Spécifications

    Ne fait pas encore parti d'une spécification.

    diff --git a/files/fr/web/api/workerglobalscope/dump/index.html b/files/fr/web/api/workerglobalscope/dump/index.html index 8a6d9e31f2..9d06cf02d9 100644 --- a/files/fr/web/api/workerglobalscope/dump/index.html +++ b/files/fr/web/api/workerglobalscope/dump/index.html @@ -5,8 +5,8 @@ translation_of: Web/API/WorkerGlobalScope/dump ---
    {{APIRef("Web Workers API")}}
    -
    -

    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.

    +
    +

    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.

    diff --git a/files/fr/web/api/workerglobalscope/importscripts/index.html b/files/fr/web/api/workerglobalscope/importscripts/index.html index 28ad1782e6..eb47eac872 100644 --- a/files/fr/web/api/workerglobalscope/importscripts/index.html +++ b/files/fr/web/api/workerglobalscope/importscripts/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/WorkerGlobalScope/importScripts
    self.importScripts('foo.js');
     self.importScripts('foo.js', 'bar.js', ...);
    -

    Paramètres

    +

    Paramètres

    Une liste d'objets {{domxref("DOMString")}} séparés par des virgules et représentant les scripts à importer.

    diff --git a/files/fr/web/api/workerglobalscope/index.html b/files/fr/web/api/workerglobalscope/index.html index e6e5061e9d..946df930aa 100644 --- a/files/fr/web/api/workerglobalscope/index.html +++ b/files/fr/web/api/workerglobalscope/index.html @@ -103,11 +103,11 @@ translation_of: Web/API/WorkerGlobalScope

    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');
    +
    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.

    +

    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

    diff --git a/files/fr/web/api/workerglobalscope/location/index.html b/files/fr/web/api/workerglobalscope/location/index.html index 9406fa3aeb..cdda4cbfc8 100644 --- a/files/fr/web/api/workerglobalscope/location/index.html +++ b/files/fr/web/api/workerglobalscope/location/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/WorkerGlobalScope/location
    var locationObj = self.location;
    -

    Valeur de retour

    +

    Valeur de retour

    Un objet {{domxref("WorkerLocation")}}.

    @@ -38,7 +38,7 @@ translation_of: Web/API/WorkerGlobalScope/location

    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.

    -

    Remarque : 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é.

    +

    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

    diff --git a/files/fr/web/api/workerglobalscope/navigator/index.html b/files/fr/web/api/workerglobalscope/navigator/index.html index b077c9d3be..f73f000d03 100644 --- a/files/fr/web/api/workerglobalscope/navigator/index.html +++ b/files/fr/web/api/workerglobalscope/navigator/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/WorkerGlobalScope/navigator
    var navigatorObj = self.navigator;
    -

    Valeur de retour

    +

    Valeur de retour

    Un objet  {{domxref("WorkerNavigator")}}.

    @@ -37,7 +37,7 @@ translation_of: Web/API/WorkerGlobalScope/navigator

    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.

    -

    Remarque : 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é.

    +

    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

    diff --git a/files/fr/web/api/workerglobalscope/self/index.html b/files/fr/web/api/workerglobalscope/self/index.html index 6260113f9d..8adef5a5f2 100644 --- a/files/fr/web/api/workerglobalscope/self/index.html +++ b/files/fr/web/api/workerglobalscope/self/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/WorkerGlobalScope/self
    var selfRef = self;
    -

    Valeur

    +

    Valeur

    Un objet global scope (qui diffère selon le type du worker concerné, comme indiqué ci-dessus).

    diff --git a/files/fr/web/api/xmldocument/async/index.html b/files/fr/web/api/xmldocument/async/index.html index 436e3e5215..d9f8142761 100644 --- a/files/fr/web/api/xmldocument/async/index.html +++ b/files/fr/web/api/xmldocument/async/index.html @@ -28,7 +28,7 @@ xmlDoc.async = false; xmlDoc.onload = loadXMLData; xmlDoc.load('querydata.xml');
    -

    Spécification

    +

    Spécification

    • DOM Level 3 Load & Save module
    • @@ -37,6 +37,6 @@ xmlDoc.load('querydata.xml');

      Voir aussi

      diff --git a/files/fr/web/api/xmldocument/load/index.html b/files/fr/web/api/xmldocument/load/index.html index ec92ef69b9..5bd175f927 100644 --- a/files/fr/web/api/xmldocument/load/index.html +++ b/files/fr/web/api/xmldocument/load/index.html @@ -14,11 +14,10 @@ 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).

      +

      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

      +

      Exemples

      -
      var docXml = document.implementation.createDocument("", "test", null);
       
       function documentCharge (e) {
      @@ -27,11 +26,10 @@ function documentCharge (e) {
       
       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

      +

      Spécification

      • Old W3C Working Draft of the DOM Level 3 Load & Save module
      • @@ -41,9 +39,9 @@ xmlDoc.load('querydata.xml');

        {{Compat("api.XMLDocument.load")}}

        -

        Voir aussi

        +

        Voir aussi

        diff --git a/files/fr/web/api/xmlhttprequest/abort_event/index.html b/files/fr/web/api/xmlhttprequest/abort_event/index.html index cc85c33e23..2c9738082e 100644 --- a/files/fr/web/api/xmlhttprequest/abort_event/index.html +++ b/files/fr/web/api/xmlhttprequest/abort_event/index.html @@ -10,7 +10,7 @@ original_slug: Web/Events/abort_(ProgressEvent)
        Spécification
        -
        Progress
        +
        Progress
        Interface
        ProgressEvent
        Propagation
        @@ -86,5 +86,5 @@ original_slug: Web/Events/abort_(ProgressEvent)

        Voir aussi

        diff --git a/files/fr/web/api/xmlhttprequest/index.html b/files/fr/web/api/xmlhttprequest/index.html index 8494aac97d..3fed67ac6e 100644 --- a/files/fr/web/api/xmlhttprequest/index.html +++ b/files/fr/web/api/xmlhttprequest/index.html @@ -13,7 +13,9 @@ 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")}}.

        +

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

        @@ -33,23 +35,23 @@ translation_of: Web/API/XMLHttpRequest

        Cette interface hérite également des propriétés de {{domxref("XMLHttpRequestEventTarget")}} et de {{domxref("EventTarget")}}.

        -
        {{domxref("XMLHttpRequest.onreadystatechange")}}
        +
        {{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}}
        +
        {{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}}
        +
        {{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")}}
        +
        {{domxref("XMLHttpRequest.responseType")}}
        Une valeur parmi une liste qui définit le type de réponse.
        -
        {{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}
        +
        {{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}}
        +
        {{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}}
        +
        {{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}}
        +
        {{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).
        @@ -58,13 +60,13 @@ translation_of: Web/API/XMLHttpRequest
    -
    {{domxref("XMLHttpRequest.timeout")}}
    +
    {{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")}}
    +
    {{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}}
    +
    {{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}
    Un objet {{domxref("XMLHttpRequestUpload")}} qui représente le processus d'upload.
    -
    {{domxref("XMLHttpRequest.withCredentials")}}
    +
    {{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.
    @@ -119,11 +121,13 @@ translation_of: Web/API/XMLHttpRequest
    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.
    +
    +

    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.
    +
    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.
    @@ -183,8 +187,8 @@ translation_of: Web/API/XMLHttpRequest
  • Introduction à AJAX
  • Utiliser XMLHttpRequest
  • Manipuler le HTML avec XMLHttpRequest
  • -
  • L'API Fetch
  • +
  • L'API Fetch
  • -
  • HTML5 Rocks — Nouvelles astuces avec XMLHttpRequest2 (en anglais)
  • +
  • HTML5 Rocks — Nouvelles astuces avec XMLHttpRequest2 (en anglais)
  • diff --git a/files/fr/web/api/xmlhttprequest/onreadystatechange/index.html b/files/fr/web/api/xmlhttprequest/onreadystatechange/index.html index 27916885ff..f1b8c7a69d 100644 --- a/files/fr/web/api/xmlhttprequest/onreadystatechange/index.html +++ b/files/fr/web/api/xmlhttprequest/onreadystatechange/index.html @@ -5,13 +5,13 @@ 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.

    +

    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.

    +

    Attention : Ne doit pas être utilisé avec des requêtes synchrone ni avec du code natif.

    -

    Syntaxe

    +

    Syntaxe

    XMLHttpRequest.onreadystatechange = callback;
    @@ -21,7 +21,7 @@ translation_of: Web/API/XMLHttpRequest/onreadystatechange
  • callback est la fonction exécutée lorsque readyState change.
  • -

    Exemple

    +

    Exemple

    var xhr = new XMLHttpRequest(),
         method = "GET",
    diff --git a/files/fr/web/api/xmlhttprequest/open/index.html b/files/fr/web/api/xmlhttprequest/open/index.html
    index 335017f4eb..567982586c 100644
    --- a/files/fr/web/api/xmlhttprequest/open/index.html
    +++ b/files/fr/web/api/xmlhttprequest/open/index.html
    @@ -7,7 +7,9 @@ translation_of: Web/API/XMLHttpRequest/open
     
     

    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()")}}.
    +
    +

    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

    @@ -26,7 +28,9 @@ translation_of: Web/API/XMLHttpRequest/open
    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")}}s.
    +
    +

    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.
    @@ -60,6 +64,6 @@ translation_of: Web/API/XMLHttpRequest/open

    Voir aussi

      -
    • Utiliser XMLHttpRequest
    • +
    • Utiliser XMLHttpRequest
    • Méthodes {{domxref("XMLHttpRequest")}} en relation : {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}},{{domxref("XMLHttpRequest.send", "send()")}}, and {{domxref("XMLHttpRequest.abort", "abort()")}}
    diff --git a/files/fr/web/api/xmlhttprequest/readystate/index.html b/files/fr/web/api/xmlhttprequest/readystate/index.html index d56cdaa142..c500f0ede1 100644 --- a/files/fr/web/api/xmlhttprequest/readystate/index.html +++ b/files/fr/web/api/xmlhttprequest/readystate/index.html @@ -5,7 +5,7 @@ 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 :

    +

    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 :

    @@ -56,12 +56,12 @@ translation_of: Web/API/XMLHttpRequest/readyState
    -

    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.

    +

    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();
    +
    var xhr = new XMLHttpRequest();
     console.log('UNSENT', xhr.readyState); // readyState will be 0
     
     xhr.open('GET', '/api', true);
    diff --git a/files/fr/web/api/xmlhttprequest/response/index.html b/files/fr/web/api/xmlhttprequest/response/index.html
    index 3a8b84b5e0..afbad2c4f1 100644
    --- a/files/fr/web/api/xmlhttprequest/response/index.html
    +++ b/files/fr/web/api/xmlhttprequest/response/index.html
    @@ -135,7 +135,7 @@ function load(url, callback) {
           
  • Ajax — Pour commencer
  • Utilisation de XMLHttpRequest
  • HTML dans XMLHttpRequest
  • -
  • Fetch API
  • +
  • Fetch API
  • HTML5 Rocks — New Tricks in XMLHttpRequest2
  • diff --git a/files/fr/web/api/xmlhttprequest/responsetext/index.html b/files/fr/web/api/xmlhttprequest/responsetext/index.html index 3074a9d6b7..e9df4fd81a 100644 --- a/files/fr/web/api/xmlhttprequest/responsetext/index.html +++ b/files/fr/web/api/xmlhttprequest/responsetext/index.html @@ -7,11 +7,11 @@ translation_of: Web/API/XMLHttpRequest/responseText
    {{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.

    +

    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;
    +
    var resultText = XMLHttpRequest.responseText;

    Value

    @@ -30,7 +30,7 @@ translation_of: Web/API/XMLHttpRequest/responseText

    Example

    -
    var xhr = new XMLHttpRequest();
    +
    var xhr = new XMLHttpRequest();
     xhr.open('GET', '/server', true);
     
     // If specified, responseType must be empty string or "text"
    diff --git a/files/fr/web/api/xmlhttprequest/send/index.html b/files/fr/web/api/xmlhttprequest/send/index.html
    index 3f4881c502..26f77bf14a 100644
    --- a/files/fr/web/api/xmlhttprequest/send/index.html
    +++ b/files/fr/web/api/xmlhttprequest/send/index.html
    @@ -17,7 +17,7 @@ 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.

    +

    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.

    @@ -25,7 +25,7 @@ translation_of: Web/API/XMLHttpRequest/send

    Syntaxe

    -
    XMLHttpRequest.send(body)
    +
    XMLHttpRequest.send(body)
     

    Paramètres

    @@ -70,7 +70,7 @@ translation_of: Web/API/XMLHttpRequest/send

    Exemple: GET

    -
    var xhr = new XMLHttpRequest();
    +
    var xhr = new XMLHttpRequest();
     xhr.open('GET', '/server', true);
     
     xhr.onload = function () {
    @@ -86,7 +86,7 @@ xhr.send(null);
     
     

    Example: POST

    -
    var xhr = new XMLHttpRequest();
    +
    var xhr = new XMLHttpRequest();
     xhr.open("POST", '/server', true);
     
     //Envoie les informations du header adaptées avec la requête
    @@ -128,6 +128,6 @@ xhr.send("foo=bar&lorem=ipsum");
     

    Voir aussi

    diff --git a/files/fr/web/api/xmlhttprequest/setrequestheader/index.html b/files/fr/web/api/xmlhttprequest/setrequestheader/index.html index 2f556dfb2b..ed3689fd8d 100644 --- a/files/fr/web/api/xmlhttprequest/setrequestheader/index.html +++ b/files/fr/web/api/xmlhttprequest/setrequestheader/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/XMLHttpRequest/setRequestHeader

    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.

    +

    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

    diff --git a/files/fr/web/api/xmlhttprequest/status/index.html b/files/fr/web/api/xmlhttprequest/status/index.html index 059a9a8aae..a6fe81eda6 100644 --- a/files/fr/web/api/xmlhttprequest/status/index.html +++ b/files/fr/web/api/xmlhttprequest/status/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/XMLHttpRequest/status

    Exemple

    -
    var xhr = new XMLHttpRequest();
    +
    var xhr = new XMLHttpRequest();
     console.log('UNSENT: ', xhr.status);
     
     xhr.open('GET', '/server');
    diff --git a/files/fr/web/api/xmlhttprequest/timeout/index.html b/files/fr/web/api/xmlhttprequest/timeout/index.html
    index 18e4dddb5d..e3dc91ab6b 100644
    --- a/files/fr/web/api/xmlhttprequest/timeout/index.html
    +++ b/files/fr/web/api/xmlhttprequest/timeout/index.html
    @@ -14,9 +14,13 @@ translation_of: Web/API/XMLHttpRequest/timeout
     
     

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

    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

    diff --git a/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.html index 3590d71a4c..a2d850ed5d 100644 --- a/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.html +++ b/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.html @@ -14,9 +14,8 @@ tags: 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.

    +

    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);
    @@ -29,36 +28,40 @@ 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.

    +

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

    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.

    +

    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. -
    3. Utiliser JXON pour le convertir en Objet structuré JavaScript.
    4. -
    5. Manuellement parser et serializer le XML en chaînes de caractères ou en objets.
    6. -
    7. Utiliser XMLSerializer pour serializer le DOM en chaînes ou en fichiers.
    8. -
    9. 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.
    10. +
    11. Utiliser XPath pour localiser des parties.
    12. +
    13. Utiliser JXON pour le convertir en Objet structuré JavaScript.
    14. +
    15. Manuellement parser et serializer le XML en chaînes de caractères ou en objets.
    16. +
    17. Utiliser XMLSerializer pour serializer le DOM en chaînes ou en fichiers.
    18. +
    19. 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.

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

    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. Injecter le contenu dans le body d'un fragment de document via fragment.body.innerHTML et traverser le DOM du fragment.
    3. -
    4. 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.
    5. +
    6. 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.

    Gérer les données binaires

    @@ -85,7 +88,7 @@ oReq.onload = function(e) { oReq.send();
    -

    Pour plus d'exemples, jettez un oeil à la page Envoyer et recevoir des données binaires

    +

    Pour plus d'exemples, jettez un oeil à la page Envoyer et recevoir des données binaires

    Surveiller la progression

    @@ -128,7 +131,9 @@ function transferCanceled(evt) {

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

    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.

    @@ -144,16 +149,20 @@ oReq.upload.addEventListener("abort", transferCanceled, false); oReq.open();
    -
    Note: Les évènements de progression ne sont pas disponibles sur le protocole file:.
    +
    +

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

    +

    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 :

    @@ -173,15 +182,15 @@ function loadEnd(e) {
    • n'utiliser rien de plus qu'AJAX
    • -
    • utiliser l'API FormData
    • +
    • utiliser l'API FormData
    -

    La seconde solution (utiliser l'API FormData) est la plus simple et la plus rapide, mais a le désavantage que les données collectées ne peuvent pas être chainifiées.
    +

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

    +

    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

    @@ -194,7 +203,7 @@ function loadEnd(e) {
  • en utilisant la méthode GET (dans ce cas, l'attribut enctype sera ignoré).
  • -

    Maintenant, considérons qu'on envoie un formulaire contenant seulement deux champs, nommées foo et baz. Si vous utilisez la méthode POST, le serveur va recevoir une chaîne similaire à l'un des trois suivantes, en fonction de l'encodage que vous utilisez :

    +

    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 :

    • @@ -216,7 +225,7 @@ The second line.
  • Méthode: POST; Encodage: multipart/form-data:

    -
    Content-Type: multipart/form-data; boundary=---------------------------314911788813839
    +  
    Content-Type: multipart/form-data; boundary=---------------------------314911788813839
     
     -----------------------------314911788813839
     Content-Disposition: form-data; name="foo"
    @@ -240,7 +249,7 @@ The second line.
     
     

    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>
    @@ -483,9 +492,8 @@ var AJAXSubmit = (function () {
     
     </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:

    +

    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 */
    @@ -516,17 +524,22 @@ print_r($_FILES);
     
     
    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 : 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 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.
    +
    +

    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 :

    +

    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>
    @@ -642,9 +655,10 @@ function AJAXSubmit (oFormElement) {
     
     </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.
    +
    +

    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

    @@ -691,15 +705,15 @@ 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.

    +

    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.

    +

    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 :

    +

    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
    @@ -724,11 +738,11 @@ oReq.send(null);

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

    +

    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.

    +

    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");
     
    @@ -743,14 +757,14 @@ var oReq = new XMLHttpRequest();

    Voir aussi

      -
    1. MDN AJAX introduction
    2. -
    3. HTTP access control
    4. -
    5. How to check the security state of an XMLHTTPRequest over SSL
    6. +
    7. MDN AJAX introduction
    8. +
    9. HTTP access control
    10. +
    11. How to check the security state of an XMLHTTPRequest over SSL
    12. XMLHttpRequest - REST and the Rich User Experience
    13. Microsoft documentation
    14. Apple developers' reference
    15. "Using the XMLHttpRequest Object" (jibbering.com)
    16. The XMLHttpRequest Object: W3C Specification
    17. Web Progress Events specification
    18. -
    19. XMLHttpRequest (Référence Web API)
    20. +
    21. XMLHttpRequest (Référence Web API)
    diff --git a/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.html b/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.html index 3a5f635aca..0e708d3463 100644 --- a/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.html +++ b/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.html @@ -17,9 +17,9 @@ translation_of: Web/API/XMLHttpRequest/XMLHttpRequest ---
    {{draft}}{{APIRef('XMLHttpRequest')}}
    -

    Le constructeur XMLHttpRequest() crée une nouvelle instance {{domxref("XMLHttpRequest")}}.

    +

    Le constructeur XMLHttpRequest() crée une nouvelle instance {{domxref("XMLHttpRequest")}}.

    -

    Pour plus de détails sur l'utilisation de XMLHttpRequest, voir Using XMLHttpRequest.

    +

    Pour plus de détails sur l'utilisation de XMLHttpRequest, voir Using XMLHttpRequest.

    Syntax

    @@ -36,7 +36,7 @@ translation_of: Web/API/XMLHttpRequest/XMLHttpRequest

    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.

    +

    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);
    @@ -47,7 +47,7 @@ translation_of: Web/API/XMLHttpRequest/XMLHttpRequest
    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.
    +
    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
    diff --git a/files/fr/web/api/xmlhttprequesteventtarget/index.html b/files/fr/web/api/xmlhttprequesteventtarget/index.html index 1ab8136bcc..dc5b1c1185 100644 --- a/files/fr/web/api/xmlhttprequesteventtarget/index.html +++ b/files/fr/web/api/xmlhttprequesteventtarget/index.html @@ -61,5 +61,5 @@ translation_of: Web/API/XMLHttpRequestEventTarget diff --git a/files/fr/web/api/xmlhttprequesteventtarget/onload/index.html b/files/fr/web/api/xmlhttprequesteventtarget/onload/index.html index 33c90dabc2..8a6afa0393 100644 --- a/files/fr/web/api/xmlhttprequesteventtarget/onload/index.html +++ b/files/fr/web/api/xmlhttprequesteventtarget/onload/index.html @@ -9,9 +9,9 @@ translation_of: Web/API/XMLHttpRequestEventTarget/onload

    The XMLHttpRequestEventTarget.onload is the function called when an {{domxref("XMLHttpRequest")}} transaction completes successfully.

    -

    Syntax

    +

    Syntax

    -
    XMLHttpRequest.onload = callback;
    +
    XMLHttpRequest.onload = callback;

    Values

    @@ -19,9 +19,9 @@ translation_of: Web/API/XMLHttpRequestEventTarget/onload
  • callback is the function to be executed when the request completes successfully. It receives a {{domxref("ProgressEvent")}} object as its first argument. The value of this (i.e. the context) is the same {{domxref("XMLHttpRequest")}} this callback is related to.
  • -

    Example

    +

    Example

    -
    var xmlhttp = new XMLHttpRequest(),
    +
    var xmlhttp = new XMLHttpRequest(),
       method = 'GET',
       url = 'https://developer.mozilla.org/';
     
    diff --git a/files/fr/web/api/xmlserializer/index.html b/files/fr/web/api/xmlserializer/index.html
    index 6662ab7046..00a7edf328 100644
    --- a/files/fr/web/api/xmlserializer/index.html
    +++ b/files/fr/web/api/xmlserializer/index.html
    @@ -6,12 +6,14 @@ tags:
     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.

    +
    -

    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.

    +

    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

    + +

    Méthodes

    serializeToString
    @@ -22,7 +24,7 @@ original_slug: XMLSerializer
    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

    +

    Exemple

     var s = new XMLSerializer();
      var d = document;
      var str = s.serializeToString(d);
    @@ -44,12 +46,12 @@ original_slug: XMLSerializer
      };
      s.serializeToStream(document, stream, "UTF-8");
     
    -

    Voir également

    +

    Voir également

    diff --git a/files/fr/web/api/xpathexpression/index.html b/files/fr/web/api/xpathexpression/index.html index 8c39da4897..7a6d6ce42d 100644 --- a/files/fr/web/api/xpathexpression/index.html +++ b/files/fr/web/api/xpathexpression/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/XPathExpression

    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

    +

    Méthodes

    • evaluate (contextNode, type, result) - fournit un noeud / document contextuel, une constante {{domxref("XPathResult")}} et XPathResult pour stocker la requête ou null pour renvoyer un nouveau XPathResult.
    • diff --git a/files/fr/web/api/xsltprocessor/basic_example/index.html b/files/fr/web/api/xsltprocessor/basic_example/index.html index 8b5cab35e0..fb6884c046 100644 --- a/files/fr/web/api/xsltprocessor/basic_example/index.html +++ b/files/fr/web/api/xsltprocessor/basic_example/index.html @@ -12,7 +12,7 @@ original_slug: XSLT_dans_Gecko/Exemple_basique
    • Ressources
    • -

      Exemple basique

      +

      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.

      diff --git a/files/fr/web/api/xsltprocessor/browser_differences/index.html b/files/fr/web/api/xsltprocessor/browser_differences/index.html index 7c2bff665e..5ab86ed667 100644 --- a/files/fr/web/api/xsltprocessor/browser_differences/index.html +++ b/files/fr/web/api/xsltprocessor/browser_differences/index.html @@ -12,10 +12,10 @@ original_slug: XSLT_dans_Gecko/Différences_entre_les_navigateurs
    • Ressources
    • -

      Différences entre les navigateurs

      +

      Différences entre les navigateurs

        -
      • Netscape 7.x (toutes plateformes confondues) et Internet Explorer 6 (Windows) support ent la recommandation XSLT 1.0 (en) du W3C.
      • +
      • Netscape 7.x (toutes plateformes confondues) et Internet Explorer 6 (Windows) support ent la recommandation XSLT 1.0 (en) du W3C.
      • IE 5.0 et 5.5 (Windows) ne supportent que le brouillon de travail de XSLT, et ne sont donc pas compatibles avec les feuilles de style XSLT 1.0.
      • Netscape 6.x ne supporte que partiellement XSLT 1.0.
      diff --git a/files/fr/web/api/xsltprocessor/generating_html/index.html b/files/fr/web/api/xsltprocessor/generating_html/index.html index ff41c66fbe..59286d20d5 100644 --- a/files/fr/web/api/xsltprocessor/generating_html/index.html +++ b/files/fr/web/api/xsltprocessor/generating_html/index.html @@ -12,17 +12,17 @@ original_slug: XSLT_dans_Gecko/Génération_de_HTML
    • Ressources
    • -

      Génération de HTML

      +

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

      +

      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;">

      +

      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: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>
      @@ -37,7 +37,7 @@ original_slug: XSLT_dans_Gecko/Génération_de_HTML
       
       

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

      +

      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"
      @@ -51,7 +51,7 @@ original_slug: XSLT_dans_Gecko/Génération_de_HTML
       
       

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

      +

      Figure 4 : Création du document HTML de base feuille de style XSL (example2.xsl):

        ...
         <xsl:template match="/">
      @@ -92,7 +92,7 @@ original_slug: XSLT_dans_Gecko/Génération_de_HTML
       
       

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

      +

      Figure 5 : Les 3 modèles finaux feuille de style XSL (example2.xsl):

        ...
         <xsl:template match="myNS:Author">
      @@ -121,7 +121,7 @@ original_slug: XSLT_dans_Gecko/Génération_de_HTML
       
       

      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 :

      +

      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"
      diff --git a/files/fr/web/api/xsltprocessor/index.html b/files/fr/web/api/xsltprocessor/index.html
      index afcd8d40e1..68179a3bce 100644
      --- a/files/fr/web/api/xsltprocessor/index.html
      +++ b/files/fr/web/api/xsltprocessor/index.html
      @@ -18,20 +18,20 @@ translation_of: Web/API/XSLTProcessor
       
       

      Le constructeur n'a pas de paramètre.

      -
      new XSLTProcessor()
      +
      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>.
      +
      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 :

      +

      L'objet résultant dépend de la méthode de sortie de la feuille de style :

  • 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 index 707314c789..e98799df65 100644 --- 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 @@ -6,18 +6,17 @@ tags: 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é.

    -

    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 ?

    +

    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 ?

    +

    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 ?

    +

    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'">
    @@ -34,28 +33,16 @@ original_slug: FAQ_sur_les_transformations_XSL_dans_Mozilla
             <!-- MSXML3 specific markup -->
           </xsl:if>
     
    -

    Que dire de media="print"?

    +

    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?

    +

    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 ?

    +

    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 ?

    +

    Comment compiler une version autonome de TransforMiiX ?

    Voir l'article sur Compilation de TransforMiiX. -

    -
    -

    Informations sur le document original

    -
    • Auteur(s) : Axel Hecht -
    • Dernière mise à jour : 2 février 2005 -
    • Copyright : Portions of this content are © 1998–2006 by individual mozilla.org contributors; content available under a Creative Commons license -
    -
    -

    Interwiki Languages Links -

    -
    -
    -{{ languages( { "en": "en/XSL_Transformations_in_Mozilla_FAQ", "ja": "ja/XSL_Transformations_in_Mozilla_FAQ" } ) }} +

    \ No newline at end of file -- cgit v1.2.3-54-g00ecf