From 841aae260382e2bf5ebb44d765d8c7301d27caab Mon Sep 17 00:00:00 2001 From: Alexey Istomin Date: Sat, 20 Mar 2021 18:37:44 +0300 Subject: Restore "ё" letter in Russian translation (#239) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs(ru): restore ё letter * docs(ru): resolve conflicts * refactor(idea): remove ide folder --- files/ru/web/api/abortcontroller/index.html | 10 ++-- files/ru/web/api/abortsignal/index.html | 2 +- files/ru/web/api/abstractworker/index.html | 2 +- files/ru/web/api/ambient_light_events/index.html | 10 ++-- .../analysernode/getbytefrequencydata/index.html | 2 +- files/ru/web/api/angle_instanced_arrays/index.html | 4 +- files/ru/web/api/animation/index.html | 24 ++++----- files/ru/web/api/attr/index.html | 10 ++-- files/ru/web/api/audiobuffer/index.html | 6 +-- .../createmediaelementsource/index.html | 4 +- files/ru/web/api/audiocontext/index.html | 2 +- files/ru/web/api/audionode/index.html | 6 +-- .../web/api/audioparam/setvalueattime/index.html | 2 +- .../api/baseaudiocontext/createpanner/index.html | 4 +- files/ru/web/api/beacon_api/index.html | 8 +-- .../ru/web/api/beforeinstallpromptevent/index.html | 2 +- files/ru/web/api/blob/blob/index.html | 2 +- files/ru/web/api/blob/index.html | 4 +- files/ru/web/api/blob/slice/index.html | 4 +- .../web/api/bluetoothremotegattserver/index.html | 2 +- files/ru/web/api/body/arraybuffer/index.html | 6 +-- files/ru/web/api/body/json/index.html | 6 +-- files/ru/web/api/broadcastchannel/index.html | 4 +- .../api/broadcastchannel/postmessage/index.html | 2 +- files/ru/web/api/cache/add/index.html | 2 +- files/ru/web/api/cache/addall/index.html | 2 +- files/ru/web/api/cache/delete/index.html | 2 +- files/ru/web/api/cache/index.html | 16 +++--- files/ru/web/api/cache/keys/index.html | 4 +- files/ru/web/api/cache/match/index.html | 4 +- files/ru/web/api/cachestorage/index.html | 18 +++---- .../api/canvas_api/a_basic_ray-caster/index.html | 10 ++-- .../tutorial/advanced_animations/index.html | 2 +- .../tutorial/applying_styles_and_colors/index.html | 46 ++++++++--------- .../api/canvas_api/tutorial/basic_usage/index.html | 12 ++--- .../api/canvas_api/tutorial/compositing/index.html | 14 ++--- .../canvas_api/tutorial/drawing_shapes/index.html | 36 ++++++------- .../canvas_api/tutorial/drawing_text/index.html | 2 +- files/ru/web/api/canvas_api/tutorial/index.html | 4 +- .../tutorial/optimizing_canvas/index.html | 8 +-- .../pixel_manipulation_with_canvas/index.html | 16 +++--- .../canvas_api/tutorial/transformations/index.html | 8 +-- .../canvas_api/tutorial/using_images/index.html | 22 ++++---- .../api/canvascapturemediastreamtrack/index.html | 2 +- files/ru/web/api/canvasgradient/index.html | 2 +- .../api/canvasrenderingcontext2d/arc/index.html | 2 +- .../api/canvasrenderingcontext2d/arcto/index.html | 6 +-- .../beziercurveto/index.html | 2 +- .../canvasrenderingcontext2d/clearrect/index.html | 2 +- .../canvasrenderingcontext2d/closepath/index.html | 4 +- .../createlineargradient/index.html | 6 +-- .../canvasrenderingcontext2d/drawimage/index.html | 16 +++--- .../canvasrenderingcontext2d/ellipse/index.html | 2 +- .../api/canvasrenderingcontext2d/fill/index.html | 8 +-- .../canvasrenderingcontext2d/fillstyle/index.html | 4 +- .../canvasrenderingcontext2d/filltext/index.html | 2 +- .../api/canvasrenderingcontext2d/font/index.html | 2 +- .../getimagedata/index.html | 8 +-- .../getlinedash/index.html | 2 +- .../globalalpha/index.html | 2 +- .../ru/web/api/canvasrenderingcontext2d/index.html | 36 ++++++------- .../linedashoffset/index.html | 6 +-- .../canvasrenderingcontext2d/linejoin/index.html | 2 +- .../api/canvasrenderingcontext2d/lineto/index.html | 4 +- .../canvasrenderingcontext2d/linewidth/index.html | 2 +- .../api/canvasrenderingcontext2d/rect/index.html | 2 +- .../canvasrenderingcontext2d/restore/index.html | 2 +- .../api/canvasrenderingcontext2d/rotate/index.html | 4 +- .../api/canvasrenderingcontext2d/stroke/index.html | 4 +- .../strokestyle/index.html | 2 +- .../canvasrenderingcontext2d/stroketext/index.html | 2 +- .../canvasrenderingcontext2d/textalign/index.html | 2 +- files/ru/web/api/cdatasection/index.html | 2 +- files/ru/web/api/characterdata/index.html | 2 +- files/ru/web/api/childnode/index.html | 2 +- files/ru/web/api/childnode/remove/index.html | 4 +- files/ru/web/api/clients/index.html | 2 +- files/ru/web/api/clients/openwindow/index.html | 4 +- files/ru/web/api/clipboardevent/index.html | 2 +- files/ru/web/api/comment/index.html | 2 +- files/ru/web/api/console/count/index.html | 6 +-- files/ru/web/api/console/countreset/index.html | 20 ++++---- files/ru/web/api/console/group/index.html | 6 +-- files/ru/web/api/console/index.html | 6 +-- files/ru/web/api/console/time/index.html | 2 +- files/ru/web/api/console/timelog/index.html | 2 +- files/ru/web/api/console/trace/index.html | 2 +- .../web/api/credential_management_api/index.html | 16 +++--- files/ru/web/api/css_object_model/index.html | 2 +- .../managing_screen_orientation/index.html | 6 +-- files/ru/web/api/cssrule/index.html | 2 +- files/ru/web/api/cssstyledeclaration/index.html | 6 +-- files/ru/web/api/datatransfer/index.html | 8 +-- files/ru/web/api/document/activeelement/index.html | 2 +- files/ru/web/api/document/alinkcolor/index.html | 2 +- files/ru/web/api/document/cookie/index.html | 4 +- .../ru/web/api/document/createattribute/index.html | 2 +- .../api/document/createdocumentfragment/index.html | 2 +- files/ru/web/api/document/createelement/index.html | 12 ++--- .../ru/web/api/document/createtextnode/index.html | 2 +- files/ru/web/api/document/document/index.html | 2 +- files/ru/web/api/document/execcommand/index.html | 20 ++++---- .../api/document/getelementsbyclassname/index.html | 8 +-- .../api/document/getelementsbytagname/index.html | 2 +- files/ru/web/api/document/head/index.html | 2 +- files/ru/web/api/document/importnode/index.html | 4 +- files/ru/web/api/document/index.html | 2 +- .../ru/web/api/document/keypress_event/index.html | 2 +- files/ru/web/api/document/queryselector/index.html | 4 +- files/ru/web/api/document/readystate/index.html | 6 +-- files/ru/web/api/document/referrer/index.html | 4 +- files/ru/web/api/document/scroll_event/index.html | 4 +- .../api/document_object_model/events/index.html | 8 +-- .../api/document_object_model/examples/index.html | 2 +- .../document_object_model/introduction/index.html | 8 +-- .../index.html | 6 +-- files/ru/web/api/documentfragment/index.html | 4 +- files/ru/web/api/domhighrestimestamp/index.html | 2 +- .../createhtmldocument/index.html | 4 +- files/ru/web/api/domimplementation/index.html | 12 ++--- files/ru/web/api/domparser/index.html | 2 +- files/ru/web/api/domtokenlist/replace/index.html | 2 +- files/ru/web/api/element/attachshadow/index.html | 6 +-- files/ru/web/api/element/blur_event/index.html | 2 +- files/ru/web/api/element/classlist/index.html | 2 +- files/ru/web/api/element/clientleft/index.html | 6 +-- files/ru/web/api/element/clienttop/index.html | 2 +- files/ru/web/api/element/closest/index.html | 2 +- files/ru/web/api/element/error_event/index.html | 2 +- .../api/element/getboundingclientrect/index.html | 4 +- .../api/element/getelementsbyclassname/index.html | 4 +- .../api/element/getelementsbytagname/index.html | 6 +-- files/ru/web/api/element/hasattribute/index.html | 2 +- files/ru/web/api/element/index.html | 22 ++++---- files/ru/web/api/element/innerhtml/index.html | 8 +-- .../web/api/element/insertadjacenttext/index.html | 2 +- .../ru/web/api/element/mouseenter_event/index.html | 2 +- .../ru/web/api/element/mouseleave_event/index.html | 2 +- .../ru/web/api/element/removeattribute/index.html | 2 +- files/ru/web/api/element/scrollheight/index.html | 2 +- files/ru/web/api/element/scrolltop/index.html | 2 +- files/ru/web/api/element/setattribute/index.html | 6 +-- files/ru/web/api/element/slot/index.html | 2 +- .../web/api/elementcssinlinestyle/style/index.html | 6 +-- files/ru/web/api/event/event/index.html | 2 +- files/ru/web/api/event/index.html | 4 +- files/ru/web/api/event/type/index.html | 2 +- .../api/eventtarget/addeventlistener/index.html | 16 +++--- .../api/eventtarget/removeeventlistener/index.html | 4 +- .../web/api/extendableevent/waituntil/index.html | 2 +- .../fetch_api/cross-global_fetch_usage/index.html | 6 +-- files/ru/web/api/fetch_api/index.html | 6 +-- files/ru/web/api/fetch_api/using_fetch/index.html | 12 ++--- files/ru/web/api/fetchevent/index.html | 2 +- files/ru/web/api/file/filename/index.html | 4 +- .../using_files_from_web_applications/index.html | 26 +++++----- .../api/file_and_directory_entries_api/index.html | 12 ++--- .../introduction/index.html | 6 +-- files/ru/web/api/filereader/index.html | 8 +-- .../api/filereader/readasarraybuffer/index.html | 2 +- .../api/filereader/readasbinarystring/index.html | 4 +- files/ru/web/api/fontface/index.html | 2 +- files/ru/web/api/formdata/append/index.html | 8 +-- files/ru/web/api/formdata/delete/index.html | 2 +- files/ru/web/api/formdata/formdata/index.html | 4 +- files/ru/web/api/formdata/get/index.html | 4 +- files/ru/web/api/formdata/getall/index.html | 2 +- files/ru/web/api/formdata/index.html | 4 +- files/ru/web/api/formdata/set/index.html | 4 +- files/ru/web/api/gamepad/buttons/index.html | 2 +- files/ru/web/api/gamepad/connected/index.html | 4 +- files/ru/web/api/gamepad/id/index.html | 6 +-- files/ru/web/api/gamepad/index.html | 6 +-- files/ru/web/api/gamepad/index/index.html | 4 +- files/ru/web/api/gamepad_api/index.html | 10 ++-- .../gamepad_api/using_the_gamepad_api/index.html | 6 +-- files/ru/web/api/gamepadbutton/index.html | 4 +- files/ru/web/api/gamepadevent/index.html | 2 +- files/ru/web/api/geolocation_api/index.html | 2 +- .../using_the_geolocation_api/index.html | 4 +- files/ru/web/api/geolocationcoordinates/index.html | 2 +- .../ru/web/api/geolocationpositionerror/index.html | 2 +- .../onanimationcancel/index.html | 4 +- .../web/api/globaleventhandlers/onerror/index.html | 2 +- .../api/globaleventhandlers/onloadend/index.html | 2 +- files/ru/web/api/gyroscope/index.html | 2 +- files/ru/web/api/history/go/index.html | 8 +-- files/ru/web/api/history/index.html | 8 +-- files/ru/web/api/history/state/index.html | 4 +- files/ru/web/api/history_api/index.html | 4 +- .../working_with_the_history_api/index.html | 2 +- .../drag_operations/index.html | 26 +++++----- files/ru/web/api/html_drag_and_drop_api/index.html | 8 +-- files/ru/web/api/htmlanchorelement/hash/index.html | 2 +- .../web/api/htmlanchorelement/hostname/index.html | 2 +- files/ru/web/api/htmlanchorelement/href/index.html | 2 +- files/ru/web/api/htmlanchorelement/index.html | 6 +-- .../ru/web/api/htmlanchorelement/origin/index.html | 2 +- .../web/api/htmlanchorelement/password/index.html | 2 +- .../web/api/htmlanchorelement/pathname/index.html | 2 +- files/ru/web/api/htmlanchorelement/port/index.html | 2 +- .../web/api/htmlanchorelement/protocol/index.html | 2 +- .../ru/web/api/htmlanchorelement/search/index.html | 2 +- .../web/api/htmlanchorelement/tostring/index.html | 2 +- .../web/api/htmlanchorelement/username/index.html | 2 +- files/ru/web/api/htmlareaelement/index.html | 2 +- files/ru/web/api/htmlaudioelement/audio/index.html | 4 +- files/ru/web/api/htmlaudioelement/index.html | 2 +- files/ru/web/api/htmlbasefontelement/index.html | 4 +- files/ru/web/api/htmlbodyelement/index.html | 2 +- files/ru/web/api/htmlbuttonelement/index.html | 6 +-- .../api/htmlcanvaselement/capturestream/index.html | 2 +- .../api/htmlcanvaselement/getcontext/index.html | 6 +-- .../ru/web/api/htmlcanvaselement/toblob/index.html | 4 +- files/ru/web/api/htmldialogelement/index.html | 2 +- files/ru/web/api/htmlelement/accesskey/index.html | 4 +- files/ru/web/api/htmlelement/hidden/index.html | 2 +- .../ru/web/api/htmlelement/offsetheight/index.html | 2 +- .../api/htmlelement/transitionend_event/index.html | 8 +-- files/ru/web/api/htmlimageelement/image/index.html | 2 +- .../htmlinputelement/setselectionrange/index.html | 6 +-- .../web/api/htmlmediaelement/duration/index.html | 2 +- files/ru/web/api/htmlmediaelement/index.html | 18 +++---- .../api/htmlmediaelement/seeking_event/index.html | 2 +- .../api/htmlorforeignelement/dataset/index.html | 4 +- .../web/api/htmlorforeignelement/nonce/index.html | 2 +- files/ru/web/api/htmlscriptelement/index.html | 2 +- files/ru/web/api/htmltableelement/index.html | 6 +-- .../basic_concepts_behind_indexeddb/index.html | 4 +- .../index.html | 6 +-- files/ru/web/api/indexeddb_api/index.html | 16 +++--- .../api/indexeddb_api/using_indexeddb/index.html | 20 ++++---- files/ru/web/api/inputevent/index.html | 2 +- .../web/api/intersection_observer_api/index.html | 10 ++-- .../timing_element_visibility/index.html | 26 +++++----- files/ru/web/api/intersectionobserver/index.html | 2 +- files/ru/web/api/keyboardevent/altkey/index.html | 2 +- files/ru/web/api/keyboardevent/index.html | 2 +- .../api/keyboardevent/key/key_values/index.html | 60 +++++++++++----------- files/ru/web/api/localmediastream/index.html | 2 +- files/ru/web/api/location/index.html | 2 +- files/ru/web/api/media_session_api/index.html | 4 +- .../web/api/mediadevices/getusermedia/index.html | 24 ++++----- files/ru/web/api/mediadevices/index.html | 4 +- files/ru/web/api/mediaerror/code/index.html | 4 +- files/ru/web/api/mediarecorder/index.html | 20 ++++---- .../web/api/mediarecorder/mediarecorder/index.html | 4 +- .../api/mediarecorder/ondataavailable/index.html | 2 +- files/ru/web/api/mediasource/index.html | 8 +-- .../web/api/mediastream_recording_api/index.html | 4 +- .../recording_a_media_element/index.html | 2 +- .../using_the_mediastream_recording_api/index.html | 14 ++--- files/ru/web/api/mediastreamtrack/index.html | 2 +- .../echocancellation/index.html | 2 +- files/ru/web/api/mouseevent/index.html | 2 +- files/ru/web/api/mouseevent/screenx/index.html | 2 +- files/ru/web/api/mutationobserver/index.html | 6 +-- files/ru/web/api/namednodemap/index.html | 10 ++-- files/ru/web/api/navigation_timing_api/index.html | 2 +- files/ru/web/api/navigator/battery/index.html | 2 +- .../ru/web/api/navigator/cookieenabled/index.html | 2 +- files/ru/web/api/navigator/geolocation/index.html | 2 +- files/ru/web/api/navigator/getgamepads/index.html | 2 +- .../ru/web/api/navigator/getvrdisplays/index.html | 2 +- files/ru/web/api/navigator/index.html | 6 +-- files/ru/web/api/navigator/mediadevices/index.html | 2 +- .../navigator/registerprotocolhandler/index.html | 2 +- files/ru/web/api/navigator/vibrate/index.html | 4 +- files/ru/web/api/navigatorid/platform/index.html | 2 +- files/ru/web/api/navigatorid/product/index.html | 6 +-- .../ru/web/api/navigatorid/taintenabled/index.html | 2 +- files/ru/web/api/navigatorid/useragent/index.html | 2 +- .../web/api/navigatorlanguage/language/index.html | 2 +- .../web/api/navigatorlanguage/languages/index.html | 2 +- files/ru/web/api/navigatoronline/online/index.html | 10 ++-- files/ru/web/api/navigatorplugins/index.html | 2 +- .../api/navigatorplugins/javaenabled/index.html | 4 +- files/ru/web/api/node/appendchild/index.html | 2 +- files/ru/web/api/node/clonenode/index.html | 6 +-- .../api/node/comparedocumentposition/index.html | 2 +- files/ru/web/api/node/getuserdata/index.html | 2 +- files/ru/web/api/node/index.html | 18 +++---- files/ru/web/api/node/insertbefore/index.html | 10 ++-- .../ru/web/api/node/isdefaultnamespace/index.html | 4 +- files/ru/web/api/node/isequalnode/index.html | 2 +- files/ru/web/api/node/issupported/index.html | 4 +- files/ru/web/api/node/localname/index.html | 2 +- .../ru/web/api/node/lookupnamespaceuri/index.html | 4 +- files/ru/web/api/node/lookupprefix/index.html | 4 +- files/ru/web/api/node/namespaceuri/index.html | 12 ++--- files/ru/web/api/node/nextsibling/index.html | 2 +- files/ru/web/api/node/nodevalue/index.html | 2 +- files/ru/web/api/node/parentnode/index.html | 4 +- files/ru/web/api/node/prefix/index.html | 2 +- files/ru/web/api/node/removechild/index.html | 8 +-- files/ru/web/api/node/replacechild/index.html | 12 ++--- files/ru/web/api/node/textcontent/index.html | 4 +- files/ru/web/api/nodelist/index.html | 2 +- files/ru/web/api/notification/index.html | 14 ++--- files/ru/web/api/notifications_api/index.html | 4 +- files/ru/web/api/page_visibility_api/index.html | 4 +- files/ru/web/api/pannernode/index.html | 16 +++--- files/ru/web/api/parentnode/prepend/index.html | 2 +- files/ru/web/api/performance/index.html | 6 +-- files/ru/web/api/performance/now/index.html | 2 +- files/ru/web/api/pointer_lock_api/index.html | 4 +- files/ru/web/api/positionoptions/index.html | 2 +- files/ru/web/api/push_api/index.html | 6 +-- files/ru/web/api/pushmanager/subscribe/index.html | 4 +- files/ru/web/api/range/surroundcontents/index.html | 2 +- files/ru/web/api/response/index.html | 2 +- .../cantrickleicecandidates/index.html | 8 +-- .../currentlocaldescription/index.html | 4 +- .../currentremotedescription/index.html | 4 +- .../icecandidate_event/index.html | 6 +-- files/ru/web/api/rtcpeerconnection/index.html | 46 ++++++++--------- .../rtcpeerconnection/rtcpeerconnection/index.html | 2 +- .../using_screen_capture/index.html | 14 ++--- files/ru/web/api/selection/tostring/index.html | 2 +- .../using_server-sent_events/index.html | 10 ++-- files/ru/web/api/service_worker_api/index.html | 12 ++--- .../using_service_workers/index.html | 38 +++++++------- .../ru/web/api/serviceworker/scripturl/index.html | 2 +- .../api/serviceworkercontainer/register/index.html | 8 +-- .../pushmanager/index.html | 2 +- .../shownotification/index.html | 2 +- files/ru/web/api/serviceworkerstate/index.html | 2 +- files/ru/web/api/sharedworker/index.html | 2 +- files/ru/web/api/speechgrammar/index.html | 2 +- files/ru/web/api/speechrecognition/index.html | 14 ++--- .../ru/web/api/speechsynthesisutterance/index.html | 6 +-- files/ru/web/api/storage/clear/index.html | 4 +- files/ru/web/api/storage/getitem/index.html | 4 +- files/ru/web/api/storage/key/index.html | 2 +- files/ru/web/api/storage/length/index.html | 2 +- files/ru/web/api/storage/removeitem/index.html | 4 +- files/ru/web/api/storage/setitem/index.html | 4 +- files/ru/web/api/storagemanager/index.html | 2 +- files/ru/web/api/streams_api/index.html | 12 ++--- files/ru/web/api/svgaelement/index.html | 2 +- files/ru/web/api/svgaelement/target/index.html | 2 +- files/ru/web/api/svggraphicselement/index.html | 2 +- files/ru/web/api/svgtextcontentelement/index.html | 4 +- files/ru/web/api/svgtextelement/index.html | 4 +- files/ru/web/api/text/index.html | 4 +- files/ru/web/api/touch_events/index.html | 16 +++--- files/ru/web/api/touchevent/index.html | 4 +- files/ru/web/api/url/createobjecturl/index.html | 6 +-- files/ru/web/api/usb/requestdevice/index.html | 2 +- .../ru/web/api/vrdisplay/requestpresent/index.html | 4 +- files/ru/web/api/vrdisplayevent/index.html | 2 +- files/ru/web/api/vrframedata/index.html | 2 +- files/ru/web/api/web_animations_api/index.html | 6 +-- .../using_the_web_animations_api/index.html | 56 ++++++++++---------- files/ru/web/api/web_audio_api/index.html | 6 +-- .../visualizations_with_web_audio_api/index.html | 22 ++++---- files/ru/web/api/web_authentication_api/index.html | 14 ++--- files/ru/web/api/web_speech_api/index.html | 2 +- .../using_the_web_speech_api/index.html | 46 ++++++++--------- files/ru/web/api/web_storage_api/index.html | 14 ++--- .../using_the_web_storage_api/index.html | 16 +++--- .../structured_clone_algorithm/index.html | 6 +-- .../web_workers_api/using_web_workers/index.html | 46 ++++++++--------- files/ru/web/api/webgl_api/index.html | 6 +-- .../index.html | 24 ++++----- .../animating_objects_with_webgl/index.html | 2 +- .../creating_3d_objects_using_webgl/index.html | 4 +- .../tutorial/getting_started_with_webgl/index.html | 24 ++++----- files/ru/web/api/webgl_api/tutorial/index.html | 4 +- .../tutorial/lighting_in_webgl/index.html | 16 +++--- .../index.html | 12 ++--- .../tutorial/using_textures_in_webgl/index.html | 16 +++--- .../api/webgl_api/webgl_best_practices/index.html | 8 +-- .../webglrenderingcontext/activetexture/index.html | 4 +- .../webglrenderingcontext/bindtexture/index.html | 4 +- .../webglrenderingcontext/compileshader/index.html | 2 +- .../api/webglrenderingcontext/enable/index.html | 2 +- .../getshaderinfolog/index.html | 2 +- files/ru/web/api/webglrenderingcontext/index.html | 10 ++-- .../webglrenderingcontext/shadersource/index.html | 2 +- .../api/webglrenderingcontext/uniform/index.html | 2 +- files/ru/web/api/webrtc_api/adapter.js/index.html | 2 +- files/ru/web/api/webrtc_api/index.html | 18 +++---- .../web/api/webrtc_api/session_lifetime/index.html | 20 ++++---- .../signaling_and_video_calling/index.html | 10 ++-- .../simple_rtcdatachannel_sample/index.html | 2 +- .../api/webrtc_api/taking_still_photos/index.html | 16 +++--- .../api/webrtc_api/using_data_channels/index.html | 20 ++++---- files/ru/web/api/websocket/index.html | 10 ++-- files/ru/web/api/websockets_api/index.html | 2 +- .../index.html | 2 +- files/ru/web/api/webvr_api/index.html | 8 +-- .../api/webvr_api/using_the_webvr_api/index.html | 2 +- files/ru/web/api/webvtt_api/index.html | 6 +-- files/ru/web/api/webxr_device_api/index.html | 2 +- .../web/api/window/beforeunload_event/index.html | 2 +- files/ru/web/api/window/close/index.html | 2 +- files/ru/web/api/window/closed/index.html | 2 +- files/ru/web/api/window/console/index.html | 2 +- files/ru/web/api/window/crypto/index.html | 2 +- files/ru/web/api/window/frameelement/index.html | 2 +- .../ru/web/api/window/getcomputedstyle/index.html | 6 +-- files/ru/web/api/window/getselection/index.html | 6 +-- files/ru/web/api/window/history/index.html | 6 +-- files/ru/web/api/window/index.html | 48 ++++++++--------- files/ru/web/api/window/innerheight/index.html | 2 +- files/ru/web/api/window/localstorage/index.html | 6 +-- files/ru/web/api/window/location/index.html | 4 +- .../api/window/mozanimationstarttime/index.html | 2 +- files/ru/web/api/window/pageyoffset/index.html | 4 +- files/ru/web/api/window/popstate_event/index.html | 2 +- files/ru/web/api/window/postmessage/index.html | 4 +- files/ru/web/api/window/prompt/index.html | 4 +- .../api/window/requestanimationframe/index.html | 2 +- files/ru/web/api/window/self/index.html | 2 +- files/ru/web/api/window/sessionstorage/index.html | 4 +- .../api/window/unhandledrejection_event/index.html | 4 +- .../api/windoweventhandlers/onpopstate/index.html | 2 +- .../api/windoworworkerglobalscope/atob/index.html | 2 +- .../api/windoworworkerglobalscope/btoa/index.html | 2 +- .../cleartimeout/index.html | 6 +-- .../api/windoworworkerglobalscope/fetch/index.html | 6 +-- .../web/api/windoworworkerglobalscope/index.html | 2 +- .../setinterval/index.html | 2 +- .../settimeout/index.html | 4 +- files/ru/web/api/worker/onmessage/index.html | 2 +- files/ru/web/api/worker/postmessage/index.html | 8 +-- files/ru/web/api/worker/terminate/index.html | 4 +- files/ru/web/api/worker/worker/index.html | 2 +- .../api/workerglobalscope/importscripts/index.html | 4 +- files/ru/web/api/xmlhttprequest/index.html | 32 ++++++------ .../ru/web/api/xmlhttprequest/response/index.html | 10 ++-- .../web/api/xmlhttprequest/responsetext/index.html | 4 +- .../web/api/xmlhttprequest/responsetype/index.html | 2 +- .../web/api/xmlhttprequest/responseurl/index.html | 2 +- files/ru/web/api/xmlhttprequest/send/index.html | 6 +-- .../sending_and_receiving_binary_data/index.html | 12 ++--- .../xmlhttprequest/using_xmlhttprequest/index.html | 2 +- .../api/xmlhttprequest/xmlhttprequest/index.html | 4 +- files/ru/web/api/xmlserializer/index.html | 2 +- 440 files changed, 1369 insertions(+), 1369 deletions(-) (limited to 'files/ru/web/api') diff --git a/files/ru/web/api/abortcontroller/index.html b/files/ru/web/api/abortcontroller/index.html index 4914b8ca76..07671c5722 100644 --- a/files/ru/web/api/abortcontroller/index.html +++ b/files/ru/web/api/abortcontroller/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/AbortController
{{domxref("AbortController.AbortController()")}}
-
Создает новый экземпляр AbortController.
+
Создаёт новый экземпляр AbortController.

Свойства

@@ -27,16 +27,16 @@ translation_of: Web/API/AbortController
{{domxref("AbortController.abort()")}}
-
Прерывает DOM запрос до момента его завершения. Это дает возможность обрывать fetch запросы, потребителей любых ответов с {{domxref("Body")}} и потоки.
+
Прерывает DOM запрос до момента его завершения. Это даёт возможность обрывать fetch запросы, потребителей любых ответов с {{domxref("Body")}} и потоки.

Примеры

В текущем фрагменте мы пытаемся скачать видео используя Fetch API.

-

Для начала мы создадим контроллер используя конструктор {{domxref("AbortController.AbortController","AbortController()")}}, затем возьмем ссылку на ассоциированный с ним объект {{domxref("AbortSignal")}} используя свойство {{domxref("AbortController.signal")}}.

+

Для начала мы создадим контроллер используя конструктор {{domxref("AbortController.AbortController","AbortController()")}}, затем возьмём ссылку на ассоциированный с ним объект {{domxref("AbortSignal")}} используя свойство {{domxref("AbortController.signal")}}.

-

При инициализации fetch запроса, мы передаем AbortSignal в качестве параметра (смотрите ниже {signal}). Это ассоциирует сигнал и контроллер с fetch запросом и дает нам возможность остановить запрос вызовом метода {{domxref("AbortController.abort()")}}, что можно увидеть во втором addEventListener.

+

При инициализации fetch запроса, мы передаём AbortSignal в качестве параметра (смотрите ниже {signal}). Это ассоциирует сигнал и контроллер с fetch запросом и даёт нам возможность остановить запрос вызовом метода {{domxref("AbortController.abort()")}}, что можно увидеть во втором addEventListener.

var controller = new AbortController();
 var signal = controller.signal;
@@ -61,7 +61,7 @@ function fetchVideo() {
 }
-

Заметка: При вызове abort(), промис fetch() будет отклонен с AbortError.

+

Заметка: При вызове abort(), промис fetch() будет отклонён с AbortError.

Вы можете найти полный рабочий пример на GitHub — смотрите abort-api (и живой пример).

diff --git a/files/ru/web/api/abortsignal/index.html b/files/ru/web/api/abortsignal/index.html index 1830282648..ea8d029224 100644 --- a/files/ru/web/api/abortsignal/index.html +++ b/files/ru/web/api/abortsignal/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/AbortSignal
{{domxref("AbortSignal.aborted")}} {{readonlyInline}}
-
Это {{domxref("Boolean")}}, который указывает, отменен ли запрос(ы), с которым связывался сигнал, отменён (true) или нет (false).
+
Это {{domxref("Boolean")}}, который указывает, отменён ли запрос(ы), с которым связывался сигнал, отменён (true) или нет (false).

Обработчики событий

diff --git a/files/ru/web/api/abstractworker/index.html b/files/ru/web/api/abstractworker/index.html index f7aa28428b..fc666b57c7 100644 --- a/files/ru/web/api/abstractworker/index.html +++ b/files/ru/web/api/abstractworker/index.html @@ -45,7 +45,7 @@ first.onchange = function() { console.log('Message posted to worker'); } -

Код воркера загружается из файла "worker.js". В данном коде предполагается, что есть элемент {{HTMLElement("input")}}, его определяет переменная first. Для события {{domxref("change")}} элемента создается обработчик, поэтому когда пользователь изменяет значение для first, отправляется сообщение в воркер для уведомления его об данных изменениях.

+

Код воркера загружается из файла "worker.js". В данном коде предполагается, что есть элемент {{HTMLElement("input")}}, его определяет переменная first. Для события {{domxref("change")}} элемента создаётся обработчик, поэтому когда пользователь изменяет значение для first, отправляется сообщение в воркер для уведомления его об данных изменениях.

Вы можете найти больше примеров в репозитории MDN Web Docs на GitHub:

diff --git a/files/ru/web/api/ambient_light_events/index.html b/files/ru/web/api/ambient_light_events/index.html index 61b79484e6..c992706006 100644 --- a/files/ru/web/api/ambient_light_events/index.html +++ b/files/ru/web/api/ambient_light_events/index.html @@ -2,20 +2,20 @@ title: Ambient Light Events slug: Web/API/Ambient_Light_Events tags: - - Освещенность + - Освещённость translation_of: Web/API/Ambient_Light_Events ---
{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}
-

События "окружающего света" -  удобный способ уведомить веб-страницу или приложение о каком-либо изменении интенсивности света. Это позволяет им реагировать на такое изменение, например, путем изменения цветового контраста пользовательского интерфейса (UI) или путем изменения экспозиции, необходимой для фотографирования.

+

События "окружающего света" -  удобный способ уведомить веб-страницу или приложение о каком-либо изменении интенсивности света. Это позволяет им реагировать на такое изменение, например, путём изменения цветового контраста пользовательского интерфейса (UI) или путём изменения экспозиции, необходимой для фотографирования.

Световые события

-

Когда датчик света устройства обнаруживает изменение уровня освещенности, он уведомляет браузер об этом изменении. Когда браузер получает такое уведомление, он вызывает {{domxref("DeviceLightEvent")}} событие, которое предоставляет информацию о точной интенсивности света.

+

Когда датчик света устройства обнаруживает изменение уровня освещённости, он уведомляет браузер об этом изменении. Когда браузер получает такое уведомление, он вызывает {{domxref("DeviceLightEvent")}} событие, которое предоставляет информацию о точной интенсивности света.

-

Это событие может быть захвачено на уровне объектом окна, используя метод {{domxref("EventTarget.addEventListener","addEventListener")}}  (используя имя события {{event("devicelight")}} ) или путем присоединения обработчика событий к свойству {{domxref("window.ondevicelight")}}.

+

Это событие может быть захвачено на уровне объектом окна, используя метод {{domxref("EventTarget.addEventListener","addEventListener")}}  (используя имя события {{event("devicelight")}} ) или путём присоединения обработчика событий к свойству {{domxref("window.ondevicelight")}}.

-

После того, как захвачен объект события дает доступ к интенсивности света, выраженного в lux через свойство {{domxref("DeviceLightEvent.value")}}.

+

После того, как захвачен объект события даёт доступ к интенсивности света, выраженного в lux через свойство {{domxref("DeviceLightEvent.value")}}.

Пример

diff --git a/files/ru/web/api/analysernode/getbytefrequencydata/index.html b/files/ru/web/api/analysernode/getbytefrequencydata/index.html index c042694040..94309ba833 100644 --- a/files/ru/web/api/analysernode/getbytefrequencydata/index.html +++ b/files/ru/web/api/analysernode/getbytefrequencydata/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/AnalyserNode/getByteFrequencyData

Данные частоты состоят из целых чисел по шкале от 0 до 255.

-

Каждый элемент в массиве представляет собой значение в децибелах для определенной частоты. Частоты распределены линейно от 0 до 1/2 частоты дискретизации. Например, для частоты дискретизации 48000 последний элемент массива будет представлять значение в децибелах для 24000 Гц.

+

Каждый элемент в массиве представляет собой значение в децибелах для определённой частоты. Частоты распределены линейно от 0 до 1/2 частоты дискретизации. Например, для частоты дискретизации 48000 последний элемент массива будет представлять значение в децибелах для 24000 Гц.

Если в массиве меньше элементов, чем в {{domxref("AnalyserNode.frequencyBinCount")}}, лишние элементы удаляются. Если в нем больше элементов, чем необходимо, лишние элементы игнорируются.

diff --git a/files/ru/web/api/angle_instanced_arrays/index.html b/files/ru/web/api/angle_instanced_arrays/index.html index 558e053527..3f769d4c64 100644 --- a/files/ru/web/api/angle_instanced_arrays/index.html +++ b/files/ru/web/api/angle_instanced_arrays/index.html @@ -34,7 +34,7 @@ translation_of: Web/API/ANGLE_instanced_arrays

Behaves identically to {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}} except that multiple instances of the range of elements are executed, and the instance advances for each iteration.

{{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}
-
Ведет себя идентично {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}} за исключением того, что выполняется несколько экземпляров набора элементов и экземпляр перемещается между каждым набором
+
Ведёт себя идентично {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}} за исключением того, что выполняется несколько экземпляров набора элементов и экземпляр перемещается между каждым набором
{{domxref("ANGLE_instanced_arrays.vertexAttribDivisorANGLE()", "ext.vertexAttribDivisorANGLE()")}}

Изменяет скорость продвижения общих атрибутов вершин при визуализации нескольких экземпляров примитивов с помощью {{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}} и {{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}.

@@ -67,7 +67,7 @@ translation_of: Web/API/ANGLE_instanced_arrays

Совместимость браузеров

- +

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

diff --git a/files/ru/web/api/animation/index.html b/files/ru/web/api/animation/index.html index d1deb15f99..fbe650d434 100644 --- a/files/ru/web/api/animation/index.html +++ b/files/ru/web/api/animation/index.html @@ -11,33 +11,33 @@ translation_of: Web/API/Animation
{{domxref("Animation.Animation()", "Animation()")}}
-
Создает новый экземпляр объекта Animation.
+
Создаёт новый экземпляр объекта Animation.

Свойства

{{domxref("Animation.currentTime")}}
-
Текущее значение времени анимации в миллисекундах, независимо от того работает анимация или приостановлена. Если анимация не имеет {{domxref("AnimationTimeline", "timeline")}}, неактивна или еще не воспроизведена, то это значение равно нулю.
+
Текущее значение времени анимации в миллисекундах, независимо от того работает анимация или приостановлена. Если анимация не имеет {{domxref("AnimationTimeline", "timeline")}}, неактивна или ещё не воспроизведена, то это значение равно нулю.
{{domxref("Animation.effect")}}
-
Возвращает и задает {{domxref ("AnimationEffectReadOnly")}} связанный с этой анимацией. Обычно это объект {{domxref ("KeyframeEffect")}}.
+
Возвращает и задаёт {{domxref ("AnimationEffectReadOnly")}} связанный с этой анимацией. Обычно это объект {{domxref ("KeyframeEffect")}}.
{{domxref("Animation.finished")}} {{readOnlyInline}}
-
Возвращает текущее завершенное Promise(обещание) для этой анимации.
+
Возвращает текущее завершённое Promise(обещание) для этой анимации.
{{domxref("Animation.id")}}
-
Возвращает и задает String(строку), используемую для идентификации анимации.
+
Возвращает и задаёт String(строку), используемую для идентификации анимации.
{{domxref("Animation.playState")}} {{readOnlyInline}}
Возвращает перечисляемое значение, описывающее состояние воспроизведения анимации.
{{domxref("Animation.playbackRate")}}
-
Возвращает или задает скорость воспроизведения анимации.
+
Возвращает или задаёт скорость воспроизведения анимации.
@@ -47,21 +47,21 @@ translation_of: Web/API/Animation
{{domxref("Animation.startTime")}}
-
Возвращает или задает начало выполнения анимации.
+
Возвращает или задаёт начало выполнения анимации.
{{domxref("Animation.timeline")}}
-
Возвращает или задает {{domxref("AnimationTimeline", "timeline")}}, связанную с этой анимации.
+
Возвращает или задаёт {{domxref("AnimationTimeline", "timeline")}}, связанную с этой анимации.

Обработчики событий

{{domxref("Animation.oncancel")}}
-
Возвращает и задает обработчик событий для отмены события.
+
Возвращает и задаёт обработчик событий для отмены события.
{{domxref("Animation.onfinish")}}
-
Возвращает и задает обработчик событий для завершения события.
+
Возвращает и задаёт обработчик событий для завершения события.

Методы

@@ -70,7 +70,7 @@ translation_of: Web/API/Animation
{{domxref("Animation.cancel()")}}
Очищает все {{domxref("KeyframeEffect", "keyframeEffects")}} вызванные этой анимацией и прекращает его выполнение.
{{domxref("animation.commitStyles()")}}
-
Фиксирует конечное состояние стиля анимации к анимируемому элементу, даже после того, как эта анимация была удалена. Это приведет к тому, что конечное состояние стиля будет записано в анимируемый элемент в виде свойств внутри атрибута стиля.
+
Фиксирует конечное состояние стиля анимации к анимируемому элементу, даже после того, как эта анимация была удалена. Это приведёт к тому, что конечное состояние стиля будет записано в анимируемый элемент в виде свойств внутри атрибута стиля.
@@ -94,7 +94,7 @@ translation_of: Web/API/Animation
{{domxref("Animation.reverse()")}}
Меняет направление воспроизведения, останавливаясь в начале анимации. Если анимация закончена или не запущена, то будет проигрываться с конца к началу.
{{domxref("Animation.updatePlaybackRate()")}}
-
Задает скорость анимации после синхронизации ее положения воспроизведения.
+
Задаёт скорость анимации после синхронизации её положения воспроизведения.

Спецификации

diff --git a/files/ru/web/api/attr/index.html b/files/ru/web/api/attr/index.html index 303090a17a..c8e1ce971a 100644 --- a/files/ru/web/api/attr/index.html +++ b/files/ru/web/api/attr/index.html @@ -17,23 +17,23 @@ translation_of: Web/API/Attr
{{domxref("Attr.name", "name")}} {{readOnlyInline}}
Имя атрибута.
{{domxref("Attr.namespaceURI", "namespaceURI")}} {{readOnlyInline}}
-
{{domxref("DOMString")}} представление URI пространства имен атрибута, или NULL если нет никакого пространства имен.
+
{{domxref("DOMString")}} представление URI пространства имён атрибута, или NULL если нет никакого пространства имен.
{{domxref("Attr.localName", "localName")}} {{readOnlyInline}}
{{domxref("DOMString")}}  представление локальной части полного имени атрибута.
{{domxref("Attr.prefix", "prefix")}} {{readOnlyInline}}
-
{{domxref("DOMString")}}  представление префикс пространства имен атрибута, или NULL, если префикс не указан.
+
{{domxref("DOMString")}}  представление префикс пространства имён атрибута, или NULL, если префикс не указан.
{{domxref("Attr.ownerElement", "ownerElement")}} {{readOnlyInline}}

Элемент, содержащий атрибут.

-

Примечание: DOM уровень 4 удалил это свойство.Предполагалось, что, поскольку Вы получаете объект Attr от {{domxref("Element")}}, вы заранее должны знать связанный элемент.  Поскольку это не верно в случаях, подобных объектам Attr, возвращаемым  {{domxref("Document.evaluate")}}, DOM уровень жизни вновь ввел это свойство. 

+

Примечание: DOM уровень 4 удалил это свойство.Предполагалось, что, поскольку Вы получаете объект Attr от {{domxref("Element")}}, вы заранее должны знать связанный элемент.  Поскольку это не верно в случаях, подобных объектам Attr, возвращаемым  {{domxref("Document.evaluate")}}, DOM уровень жизни вновь ввёл это свойство. 

Gecko выводит предупреждение об использовании, начиная с Gecko 7.0 {{geckoRelease("7.0")}}. Это предупреждение было удалено в Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46).

{{domxref("Attr.specified", "specified")}} {{readOnlyInline}}
-
Это свойство всегда возвращает true. Первоначально, оно возвращало true, если атрибут был явно определен в исходном коде или сценарием и false, если ее значение прибыло из значения по умолчанию  определенном в DTD документе.
+
Это свойство всегда возвращает true. Первоначально, оно возвращало true, если атрибут был явно определён в исходном коде или сценарием и false, если её значение прибыло из значения по умолчанию  определённом в DTD документе.
{{domxref("Attr.value", "value")}}
Значение атрибута
@@ -74,7 +74,7 @@ translation_of: Web/API/Attr
previousSibling
Это свойство всегда возвращает значение  NULL.
schemaTypeInfo {{obsolete_inline}} {{readOnlyInline}}
-
Сведения о типе, связанные с этим атрибутом. В то время как информация о типе, содержащаяся в этом атрибуте, гарантированно будет правильной после загрузки документа или вызова  {{domxref("Document.normalizeDocument")}}, это свойство может быть ненадежным, если узел был перемещен.
+
Сведения о типе, связанные с этим атрибутом. В то время как информация о типе, содержащаяся в этом атрибуте, гарантированно будет правильной после загрузки документа или вызова  {{domxref("Document.normalizeDocument")}}, это свойство может быть ненадёжным, если узел был перемещен.
 
specified
Это свойство всегда возвращает значение  true.
diff --git a/files/ru/web/api/audiobuffer/index.html b/files/ru/web/api/audiobuffer/index.html index b2972a1f78..f2d6e5e0e4 100644 --- a/files/ru/web/api/audiobuffer/index.html +++ b/files/ru/web/api/audiobuffer/index.html @@ -8,7 +8,7 @@ translation_of: Web/API/AudioBuffer

Сводка

-

AudioBuffer - это интерфейс короткого звукового ресурса (audio asset), находящегося в памяти и созданного из аудиофайла методом {{ domxref("AudioContext.decodeAudioData()") }}, или из исходных данных с помощью метода {{ domxref("AudioContext.createBuffer()") }}. Помещенные в AudioBuffer звуковые данные могут быть воспроизведены в  {{ domxref("AudioBufferSourceNode") }}.

+

AudioBuffer - это интерфейс короткого звукового ресурса (audio asset), находящегося в памяти и созданного из аудиофайла методом {{ domxref("AudioContext.decodeAudioData()") }}, или из исходных данных с помощью метода {{ domxref("AudioContext.createBuffer()") }}. Помещённые в AudioBuffer звуковые данные могут быть воспроизведены в  {{ domxref("AudioBufferSourceNode") }}.

Объекты этого типа предназначены для хранения небольших звуковых фрагментов, обычно менее 45 секунд. Для более длинных звуков, объекты реализующие {{domxref("MediaElementAudioSourceNode")}} являются более подходящими. Этот буфер содержит данные в формате неперемещаемого IEE754 32-битного линейного ИКМ с номинальным диапазоном от -1 до +1, то есть 32-битный буфер с плавающей точкой каждого звукового фрагмента (samples) от -1.0 до 1.0. Если {{domxref("AudioBuffer")}} имеет несколько каналов, то они хранятся в отдельном буфере.

@@ -17,7 +17,7 @@ translation_of: Web/API/AudioBuffer
{{domxref("AudioBuffer.AudioBuffer", "AudioBuffer()")}}
-
Создает и возвращает новый объект AudioBuffer.
+
Создаёт и возвращает новый объект AudioBuffer.

Свойства

@@ -49,7 +49,7 @@ translation_of: Web/API/AudioBuffer
// Стерео
 var channels = 2;
 
-// Создает пустой двухсекундный стерео-буфер
+// Создаёт пустой двухсекундный стерео-буфер
 // с частотой звука AudioContext (sample rate)
 var frameCount = audioCtx.sampleRate * 2.0;
 var myArrayBuffer = audioCtx.createBuffer(channels, frameCount, audioCtx.sampleRate);
diff --git a/files/ru/web/api/audiocontext/createmediaelementsource/index.html b/files/ru/web/api/audiocontext/createmediaelementsource/index.html
index 87e504f6c6..6693ef14dc 100644
--- a/files/ru/web/api/audiocontext/createmediaelementsource/index.html
+++ b/files/ru/web/api/audiocontext/createmediaelementsource/index.html
@@ -42,11 +42,11 @@ var myScript = document.querySelector('script');
 
 pre.innerHTML = myScript.innerHTML;
 
-// Создаем MediaElementAudioSourceNode
+// Создаём MediaElementAudioSourceNode
 // На основе HTMLMediaElement
 var source = audioCtx.createMediaElementSource(myAudio);
 
-// Создаем узел контроля громкости (усиления)
+// Создаём узел контроля громкости (усиления)
 var gainNode = audioCtx.createGain();
 
 // Переменные, содержащие Y координату курсора мыши
diff --git a/files/ru/web/api/audiocontext/index.html b/files/ru/web/api/audiocontext/index.html
index 17b32839d0..ad057ccfe6 100644
--- a/files/ru/web/api/audiocontext/index.html
+++ b/files/ru/web/api/audiocontext/index.html
@@ -66,7 +66,7 @@ translation_of: Web/API/AudioContext
  
{{domxref("AudioContext.createOscillator()")}}
Создаёт объект {{domxref("OscillatorNode")}}, источник, представляющий собой периодическую волну звукового сигнала.
{{domxref("AudioContext.createPanner()")}}
-
Создаёт объект {{domxref("PannerNode")}}, который используется для пространственного определения аудио-потока в трехмерном пространстве.
+
Создаёт объект {{domxref("PannerNode")}}, который используется для пространственного определения аудио-потока в трёхмерном пространстве.
{{domxref("AudioContext.createPeriodicWave()")}}
Создаёт объект {{domxref("PeriodicWave")}}, используемый для определения периодической волны звукового сигнала, которая, в свою очередь, используется для определения вывода в {{ domxref("OscillatorNode") }}.
{{domxref("AudioContext.createWaveShaper()")}}
diff --git a/files/ru/web/api/audionode/index.html b/files/ru/web/api/audionode/index.html index f4b7693230..57b2f450a2 100644 --- a/files/ru/web/api/audionode/index.html +++ b/files/ru/web/api/audionode/index.html @@ -4,7 +4,7 @@ slug: Web/API/AudioNode translation_of: Web/API/AudioNode ---

{{ APIRef("Web Audio API") }}
- AudioNode это общий интерфейс для описания модулей обработки аудио таких как источники звука (например HTML элементы {{HTMLElement("audio")}} или {{HTMLElement("video")}}), генераторы звука (например {{domxref("OscillatorNode")}} и т.п.), приемники звука для модулей производящих обработку звука (например {{domxref("BiquadFilterNode")}} или {{domxref("ConvolverNode")}}), или регуляторы громкости (например {{domxref("GainNode")}}). 

+ AudioNode это общий интерфейс для описания модулей обработки аудио таких как источники звука (например HTML элементы {{HTMLElement("audio")}} или {{HTMLElement("video")}}), генераторы звука (например {{domxref("OscillatorNode")}} и т.п.), приёмники звука для модулей производящих обработку звука (например {{domxref("BiquadFilterNode")}} или {{domxref("ConvolverNode")}}), или регуляторы громкости (например {{domxref("GainNode")}}). 

AudioNodes participating in an AudioContext create a audio routing graph.

@@ -25,7 +25,7 @@ translation_of: Web/API/AudioNode
{{domxref("AudioNode.numberOfInputs")}} {{readonlyInline}}
-
Возвращает количество входов узла. Узлы определенные как источники имеют numberOfInputs равное 0.
+
Возвращает количество входов узла. Узлы определённые как источники имеют numberOfInputs равное 0.
@@ -56,7 +56,7 @@ translation_of: Web/API/AudioNode
{{domxref("AudioNode.connect(AudioParam)")}}
Позволяет нам подключить один выход данного узла на параметрический вход другого.
{{domxref("AudioNode.disconnect()")}}
-
Позволяет нам отключить текущий узел от другого, уже подключенного узла.
+
Позволяет нам отключить текущий узел от другого, уже подключённого узла.

Примеры

diff --git a/files/ru/web/api/audioparam/setvalueattime/index.html b/files/ru/web/api/audioparam/setvalueattime/index.html index f60d3e7d99..202e13d971 100644 --- a/files/ru/web/api/audioparam/setvalueattime/index.html +++ b/files/ru/web/api/audioparam/setvalueattime/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/AudioParam/setValueAtTime ---

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

-

setValueAtTime() метод интерфейса {{domxref("AudioParam")}} позволяющий мгновенно точно по времени изменять значение AudioParam , сравнивая с {{domxref("AudioContext.currentTime")}}. Новое значение дается в значении параметра.

+

setValueAtTime() метод интерфейса {{domxref("AudioParam")}} позволяющий мгновенно точно по времени изменять значение AudioParam , сравнивая с {{domxref("AudioContext.currentTime")}}. Новое значение даётся в значении параметра.

Синтаксис

diff --git a/files/ru/web/api/baseaudiocontext/createpanner/index.html b/files/ru/web/api/baseaudiocontext/createpanner/index.html index 83a8089d44..9d4161e184 100644 --- a/files/ru/web/api/baseaudiocontext/createpanner/index.html +++ b/files/ru/web/api/baseaudiocontext/createpanner/index.html @@ -24,13 +24,13 @@ var panner = audioCtx.createPanner();

Пример

-
Ниже можно увидеть пример использования {{domxref("AudioListener")}}, {{domxref("PannerNode")}} и метода createPanner() для управления пространством объемного звука. Обычно определяется положение в трехмерном пространстве, изначально занимаемое обработчиком (listener) и источником звука (panner), а затем, при использовании приложения, обновляется позиция одного из них или обоих. Например, вы можете перемещать персонажа внутри игрового мира, и желательно чтобы передача звука изменялась реалистично, по мере приближения или отдаления персонажа относительно источника звука, вроде стереопроигрывателя. В этом примере можно видеть, что все это управляется функциями moveRight(), moveLeft(), и т.п., которые устанавливают новые значения для положения паннера через функцию PositionPanner().
+
Ниже можно увидеть пример использования {{domxref("AudioListener")}}, {{domxref("PannerNode")}} и метода createPanner() для управления пространством объёмного звука. Обычно определяется положение в трёхмерном пространстве, изначально занимаемое обработчиком (listener) и источником звука (panner), а затем, при использовании приложения, обновляется позиция одного из них или обоих. Например, вы можете перемещать персонажа внутри игрового мира, и желательно чтобы передача звука изменялась реалистично, по мере приближения или отдаления персонажа относительно источника звука, вроде стереопроигрывателя. В этом примере можно видеть, что все это управляется функциями moveRight(), moveLeft(), и т.п., которые устанавливают новые значения для положения паннера через функцию PositionPanner().
 
-
Чтобы увидеть полную реализацию ознакомьтесь с нашим примером panner-node (просмотрите весь список примеров) — эта демонстрация перенесет вас в 2.5D "Room of metal" (2,5-мерную "металлическую комнату"), где можно проиграть трек на бумбоксе и затем походить вокруг него и посмотреть как изменяется звук!
+
Чтобы увидеть полную реализацию ознакомьтесь с нашим примером panner-node (просмотрите весь список примеров) — эта демонстрация перенесёт вас в 2.5D "Room of metal" (2,5-мерную "металлическую комнату"), где можно проиграть трек на бумбоксе и затем походить вокруг него и посмотреть как изменяется звук!
 
diff --git a/files/ru/web/api/beacon_api/index.html b/files/ru/web/api/beacon_api/index.html index 984c00117d..1e33abb3df 100644 --- a/files/ru/web/api/beacon_api/index.html +++ b/files/ru/web/api/beacon_api/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Beacon_API

Например, вариантом использования Beacon API может быть логирование активности или отправка аналитики на сервер.

-

Пример кода интерфейсов, описанных в этом документе, включен в раздел Использование Beacon API.

+

Пример кода интерфейсов, описанных в этом документе, включён в раздел Использование Beacon API.

@@ -23,11 +23,11 @@ translation_of: Web/API/Beacon_API

Интерфейс Beacon отвечает потребностям аналитического и диагностического кода, который обычно пытается отправить данные на веб-сервер перед выгрузкой документа. Отправка данных хоть на секунду раньше может привести к упущенной возможности сбора данных. В любом случае, обеспечение того, чтобы данные отправлялись во время выгрузки документа, является чем-то, что традиционно было трудным для разработчиков.

-

Пользовательские браузеры обычно игнорируют асинхронные  {{domxref("XMLHttpRequest","XMLHttpRequests")}} сделанные в обработчике выгрузки. Для решения этой проблемы, аналитический и диагностический код обычно создает синхронный {{domxref("XMLHttpRequest")}} в обработчике {{event("unload")}} или {{event("beforeunload")}} для отправки данных. Синхронный {{domxref("XMLHttpRequest")}} заставляет браузер отложить выгрузку документа и делает следующую навигацию более медленной. Следующая страница ничего не может сделать, чтобы избежать этого ощущения низкой производительности при загрузке страницы. 

+

Пользовательские браузеры обычно игнорируют асинхронные  {{domxref("XMLHttpRequest","XMLHttpRequests")}} сделанные в обработчике выгрузки. Для решения этой проблемы, аналитический и диагностический код обычно создаёт синхронный {{domxref("XMLHttpRequest")}} в обработчике {{event("unload")}} или {{event("beforeunload")}} для отправки данных. Синхронный {{domxref("XMLHttpRequest")}} заставляет браузер отложить выгрузку документа и делает следующую навигацию более медленной. Следующая страница ничего не может сделать, чтобы избежать этого ощущения низкой производительности при загрузке страницы. 

-

Есть и другие методы, используемые для проверки предоставления данных. Одним из таких методов является задержка отправки данных путем создания элемента Image и установки его атрибута src в обработчике выгрузки. Поскольку большинство браузеров откладывают выгрузку для завершения ожидающей загрузки изображения, данные могут быть отправлены во время выгрузки. Другой метод заключается в создании неработающего цикла, который  в течение нескольких секунд будет висеть в обработчике выгрузки, чтобы задержать выгрузку и отправить данные на сервер.

+

Есть и другие методы, используемые для проверки предоставления данных. Одним из таких методов является задержка отправки данных путём создания элемента Image и установки его атрибута src в обработчике выгрузки. Поскольку большинство браузеров откладывают выгрузку для завершения ожидающей загрузки изображения, данные могут быть отправлены во время выгрузки. Другой метод заключается в создании неработающего цикла, который  в течение нескольких секунд будет висеть в обработчике выгрузки, чтобы задержать выгрузку и отправить данные на сервер.

-

Эти методы представляют плохие шаблоны программирования, некоторые из них ненадежны и приводят к восприятию плохой производительности при загрузке страницы для следующей навигации. API-интерфейс Beacon предоставляет стандартный способ решения этих проблем.

+

Эти методы представляют плохие шаблоны программирования, некоторые из них ненадёжны и приводят к восприятию плохой производительности при загрузке страницы для следующей навигации. API-интерфейс Beacon предоставляет стандартный способ решения этих проблем.

Глобальный контекст

diff --git a/files/ru/web/api/beforeinstallpromptevent/index.html b/files/ru/web/api/beforeinstallpromptevent/index.html index a9359fddfe..ab241f8f1d 100644 --- a/files/ru/web/api/beforeinstallpromptevent/index.html +++ b/files/ru/web/api/beforeinstallpromptevent/index.html @@ -22,7 +22,7 @@ translation_of: Web/API/BeforeInstallPromptEvent
{{domxref("BeforeInstallPromptEvent.BeforeInstallPromptEvent","BeforeInstallPromptEvent()")}}
-
Создает новый BeforeInstallPromptEvent.
+
Создаёт новый BeforeInstallPromptEvent.

Свойства

diff --git a/files/ru/web/api/blob/blob/index.html b/files/ru/web/api/blob/blob/index.html index b1ed2d7bc1..6969b073ff 100644 --- a/files/ru/web/api/blob/blob/index.html +++ b/files/ru/web/api/blob/blob/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Blob/Blob ---

{{APIRef("File API")}}

-

Конструктор Blob() возвращает новый объект {{domxref("Blob")}}. Содержимое blob состоит из объединенных значений, переданных в параметре array.

+

Конструктор Blob() возвращает новый объект {{domxref("Blob")}}. Содержимое blob состоит из объединённых значений, переданных в параметре array.

Синтаксис

diff --git a/files/ru/web/api/blob/index.html b/files/ru/web/api/blob/index.html index a256ce6a5f..445e8da297 100644 --- a/files/ru/web/api/blob/index.html +++ b/files/ru/web/api/blob/index.html @@ -73,7 +73,7 @@ var myBlob = builder.getBlob('text/xml');

Создание URL для содержимого типизированного массива

-

Следующий код создает типизированный массив JavaScript и создает новый Blob, содержащий данные типизированного массива. Затем вызывается {{DOMxRef("URL.createObjectURL()")}} для преобразования blob в {{glossary("URL")}}.

+

Следующий код создаёт типизированный массив JavaScript и создаёт новый Blob, содержащий данные типизированного массива. Затем вызывается {{DOMxRef("URL.createObjectURL()")}} для преобразования blob в {{glossary("URL")}}.

HTML

@@ -84,7 +84,7 @@ var myBlob = builder.getBlob('text/xml');

JavaScript

-

Основной частью этого кода для примера является функция typedArrayToURL(), которая создает Blob из переданного типизированного массива и возвращает объект URL для него. Преобразовав данные в URL объекта, их можно использовать несколькими способами, в том числе, в качестве значения атрибута {{htmlattrxref("src", "img")}} элементов {{HTMLElement("img")}} (конечно, при условии, что данные содержат изображение).

+

Основной частью этого кода для примера является функция typedArrayToURL(), которая создаёт Blob из переданного типизированного массива и возвращает объект URL для него. Преобразовав данные в URL объекта, их можно использовать несколькими способами, в том числе, в качестве значения атрибута {{htmlattrxref("src", "img")}} элементов {{HTMLElement("img")}} (конечно, при условии, что данные содержат изображение).

function typedArrayToURL(typedArray, mimeType) {
   return URL.createObjectURL(new Blob([typedArray.buffer], {type: mimeType}))
diff --git a/files/ru/web/api/blob/slice/index.html b/files/ru/web/api/blob/slice/index.html
index f0e5eaf4df..384577a82c 100644
--- a/files/ru/web/api/blob/slice/index.html
+++ b/files/ru/web/api/blob/slice/index.html
@@ -17,9 +17,9 @@ translation_of: Web/API/Blob/slice
 
 
start {{optional_inline}}
-
Индекс в {{domxref("Blob")}} указывающий первый байт, включенный в новый {{domxref("Blob")}}. Если указать отрицательное значение, это будет рассматриваться, как смещение с конца строки к началу. К примеру, -10 будет 10-ым от последнего байта {{domxref("Blob")}}. Значение по умолчанию равно 0. Если указать значение start, которое больше размера источника {{domxref("Blob")}}, размер возвращаемого {{domxref("Blob")}} будет равен 0 и не будет содержать данных.
+
Индекс в {{domxref("Blob")}} указывающий первый байт, включённый в новый {{domxref("Blob")}}. Если указать отрицательное значение, это будет рассматриваться, как смещение с конца строки к началу. К примеру, -10 будет 10-ым от последнего байта {{domxref("Blob")}}. Значение по умолчанию равно 0. Если указать значение start, которое больше размера источника {{domxref("Blob")}}, размер возвращаемого {{domxref("Blob")}} будет равен 0 и не будет содержать данных.
end {{optional_inline}}
-
Индекс в {{domxref("Blob")}} указывающий первый байт, который не будет включен в новый {{domxref("Blob")}} (т.е. байт с этим индексом не будет включен). Если указать отрицательное значение, это будет рассматриваться, как смещение с конца строки к началу. К примеру, -10 будет 10-ым от последнего байта {{domxref("Blob")}}. Значение по умолчанию равно size.
+
Индекс в {{domxref("Blob")}} указывающий первый байт, который не будет включён в новый {{domxref("Blob")}} (т.е. байт с этим индексом не будет включён). Если указать отрицательное значение, это будет рассматриваться, как смещение с конца строки к началу. К примеру, -10 будет 10-ым от последнего байта {{domxref("Blob")}}. Значение по умолчанию равно size.
contentType {{optional_inline}}
Тип содержимого нового {{domxref("Blob")}}; это будет значение его свойства type. Значение по умолчанию - пустая строка.
diff --git a/files/ru/web/api/bluetoothremotegattserver/index.html b/files/ru/web/api/bluetoothremotegattserver/index.html index f99ea7c5c1..3f5fad78b7 100644 --- a/files/ru/web/api/bluetoothremotegattserver/index.html +++ b/files/ru/web/api/bluetoothremotegattserver/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/BluetoothRemoteGATTServer ---
{{APIRef("Bluetooth API")}}{{SeeCompatTable}}
-

Интерфейс BluetoothRemoteGATTServer, относящийся к Web Bluetooth API, представляет сервер GATT на удаленном устройстве.

+

Интерфейс BluetoothRemoteGATTServer, относящийся к Web Bluetooth API, представляет сервер GATT на удалённом устройстве.

Данная страница описывает Web Bluetooth API от W3C Community Group. BluetoothGattServer (Firefox OS) - Bluetooth API в Firefox OS.

diff --git a/files/ru/web/api/body/arraybuffer/index.html b/files/ru/web/api/body/arraybuffer/index.html index 7aff670eb7..31402b8a22 100644 --- a/files/ru/web/api/body/arraybuffer/index.html +++ b/files/ru/web/api/body/arraybuffer/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Body/arrayBuffer ---
{{APIRef("Fetch")}}
-

Метод arrayBuffer() из примеси(mixin) {{domxref("Body")}} берет поток(stream) {{domxref("Response")}} и читает его до завершения. Он возвращает промис, который будет успешно завершен с помощью {{domxref("ArrayBuffer")}}.

+

Метод arrayBuffer() из примеси(mixin) {{domxref("Body")}} берет поток(stream) {{domxref("Response")}} и читает его до завершения. Он возвращает промис, который будет успешно завершён с помощью {{domxref("ArrayBuffer")}}.

Синтаксис

@@ -32,9 +32,9 @@ translation_of: Web/API/Body/arrayBuffer
new Audio(music.ogg).play()
 
-

В функции getData() мы создаем новый запрос используя конструктор {{domxref("Request.Request")}}, после этого используем его чтобы загрузить OGG звук. Мы также используем {{domxref("AudioContext.createBufferSource")}} чтобы создать ресурс аудиобуффера. При успешном завершении запроса, мы считываем {{domxref("ArrayBuffer")}} из ответа используя arrayBuffer(), декодируем аудио с помощью {{domxref("AudioContext.decodeAudioData")}}, устанавливаем раскодированные данные как ресурс аудио буфера (source.buffer), затем используем данные этого ресурса в  {{domxref("AudioContext.destination")}}.

+

В функции getData() мы создаём новый запрос используя конструктор {{domxref("Request.Request")}}, после этого используем его чтобы загрузить OGG звук. Мы также используем {{domxref("AudioContext.createBufferSource")}} чтобы создать ресурс аудиобуффера. При успешном завершении запроса, мы считываем {{domxref("ArrayBuffer")}} из ответа используя arrayBuffer(), декодируем аудио с помощью {{domxref("AudioContext.decodeAudioData")}}, устанавливаем раскодированные данные как ресурс аудио буфера (source.buffer), затем используем данные этого ресурса в  {{domxref("AudioContext.destination")}}.

-

Когда функция getData() заканчивает свое выполнение, мы стартуем проигрывание аудио ресурса функцией start(0), потом блокируем кнопку проигрывания для предотвращения повторного проигрывания (это может привести к ошибкам)

+

Когда функция getData() заканчивает своё выполнение, мы стартуем проигрывание аудио ресурса функцией start(0), потом блокируем кнопку проигрывания для предотвращения повторного проигрывания (это может привести к ошибкам)

function getData() {
   source = audioCtx.createBufferSource();
diff --git a/files/ru/web/api/body/json/index.html b/files/ru/web/api/body/json/index.html
index 47b40dee49..76811b032b 100644
--- a/files/ru/web/api/body/json/index.html
+++ b/files/ru/web/api/body/json/index.html
@@ -9,7 +9,7 @@ translation_of: Web/API/Body/json
 ---
 
{{APIRef("Fetch")}}
-

Метод json() , определен на миксине {{domxref("Body")}}, который включён в объектах Request и Response, принимает и читает тело {{domxref("Response")}} stream. Возвращает promise (обещание), который, когда ответ будет получен, вызовет колбэк с результатом парсинга тела ответа в {{jsxref("JSON")}} объект.

+

Метод json() , определён на миксине {{domxref("Body")}}, который включён в объектах Request и Response, принимает и читает тело {{domxref("Response")}} stream. Возвращает promise (обещание), который, когда ответ будет получен, вызовет колбэк с результатом парсинга тела ответа в {{jsxref("JSON")}} объект.

Синтаксис

@@ -27,7 +27,7 @@ translation_of: Web/API/Body/json

Пример

-

В нашем fetch json примере (запустите fetch json live), мы создаем новый запрос, используя {{domxref("Request.Request")}} конструктор, в последствии мы используем его (запрос) для получения .json файла. Когда fetch запрос будет выполнен, мы прочтем и спарсим данные, используя json(), а далее вставим значения из полученного объекта в list элементы списка для отображения данных по нашему продукту.

+

В нашем fetch json примере (запустите fetch json live), мы создаём новый запрос, используя {{domxref("Request.Request")}} конструктор, в последствии мы используем его (запрос) для получения .json файла. Когда fetch запрос будет выполнен, мы прочтём и спарсим данные, используя json(), а далее вставим значения из полученного объекта в list элементы списка для отображения данных по нашему продукту.

var myList = document.querySelector('ul');
 
@@ -64,7 +64,7 @@ fetch(myRequest)
 
 

Совместимость с браузерами

- +

{{Compat("api.Body.json")}}

diff --git a/files/ru/web/api/broadcastchannel/index.html b/files/ru/web/api/broadcastchannel/index.html index b898960fe3..1f3a792ce0 100644 --- a/files/ru/web/api/broadcastchannel/index.html +++ b/files/ru/web/api/broadcastchannel/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/BroadcastChannel
{{domxref("BroadcastChannel.BroadcastChannel", "BroadcastChannel()")}}
-
Создает объект, связанный с именованным каналом.
+
Создаёт объект, связанный с именованным каналом.

Свойства

@@ -27,7 +27,7 @@ translation_of: Web/API/BroadcastChannel

Обработчики событий

{{domxref("BroadcastChannel.onmessage")}}
-
{{domxref("EventHandler")}} свойство, определяющее функцию, которая будет запущена, когда произойдет вызов события {{event("message")}} на этом объекте.
+
{{domxref("EventHandler")}} свойство, определяющее функцию, которая будет запущена, когда произойдёт вызов события {{event("message")}} на этом объекте.
{{domxref("BroadcastChannel.onmessageerror")}}
{{domxref("EventHandler")}}, который вызывается, когда приходит {{domxref("MessageEvent")}} типа {{domxref("MessageError")}} — когда приходит сообщение, которое не может быть десереализовано.
diff --git a/files/ru/web/api/broadcastchannel/postmessage/index.html b/files/ru/web/api/broadcastchannel/postmessage/index.html index abbb139478..39bf32b534 100644 --- a/files/ru/web/api/broadcastchannel/postmessage/index.html +++ b/files/ru/web/api/broadcastchannel/postmessage/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/BroadcastChannel/postMessage ---

{{APIRef("BroadCastChannel API")}}

-

BroadcastChannel.postMessage() отправляет сообщение, которое может быть любым {{jsxref("Object", "объектом")}}, каждому обработчику в {{glossary("browsing context", "контексте браузера")}} с тем же {{glossary("origin")}}. Сообщение передается в виде события {{event("message")}} к каждому BroadcastChannel, привязанному к данному каналу.

+

BroadcastChannel.postMessage() отправляет сообщение, которое может быть любым {{jsxref("Object", "объектом")}}, каждому обработчику в {{glossary("browsing context", "контексте браузера")}} с тем же {{glossary("origin")}}. Сообщение передаётся в виде события {{event("message")}} к каждому BroadcastChannel, привязанному к данному каналу.

{{AvailableInWorkers}}

diff --git a/files/ru/web/api/cache/add/index.html b/files/ru/web/api/cache/add/index.html index fd32f46b8c..ae88c76901 100644 --- a/files/ru/web/api/cache/add/index.html +++ b/files/ru/web/api/cache/add/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/Cache/add

Для более сложных операций, вам нужно использовать {{domxref("Cache.put","Cache.put()")}}.

-

Замечание: add() перезапишет любую пару ключ/значение, сохраненную ранее в кеше, соответствующем запросу.

+

Замечание: add() перезапишет любую пару ключ/значение, сохранённую ранее в кеше, соответствующем запросу.

Синтаксис

diff --git a/files/ru/web/api/cache/addall/index.html b/files/ru/web/api/cache/addall/index.html index 094912bdeb..d72262f99d 100644 --- a/files/ru/web/api/cache/addall/index.html +++ b/files/ru/web/api/cache/addall/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Cache/addAll
-

Замечание: Первоначальная реализация Cache (как в Blink, так и в Gecko) разрешает промисы {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, и {{domxref("Cache.put")}} когда тело ответа полностью записано в хранилище. Более поздние версии спецификации говорят, что браузер может разрешить промис как только данные были записаны в базу данных, даже если тело ответа еще формируется.

+

Замечание: Первоначальная реализация Cache (как в Blink, так и в Gecko) разрешает промисы {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, и {{domxref("Cache.put")}} когда тело ответа полностью записано в хранилище. Более поздние версии спецификации говорят, что браузер может разрешить промис как только данные были записаны в базу данных, даже если тело ответа ещё формируется.

diff --git a/files/ru/web/api/cache/delete/index.html b/files/ru/web/api/cache/delete/index.html index 5efa82b44a..846ccc2a0c 100644 --- a/files/ru/web/api/cache/delete/index.html +++ b/files/ru/web/api/cache/delete/index.html @@ -29,7 +29,7 @@ translation_of: Web/API/Cache/delete
  • ignoreSearch: Булево значение {{domxref("Boolean")}}, которое определяет будет ли процесс сопоставления игнорировать строку запроса в url.  Если установлено в true, часть ?value=bar запроса http://foo.com/?value=bar будет проигнорирована при сопоставлении ключей. По умолчанию установлено в false.
  • ignoreMethod: Булево значение {{domxref("Boolean")}}, которое, если равно true, предотвращает проверку {{domxref("Request")}} при сопоставлении ключей на HTTP метод (обычно допускаются только GET и HEAD). По умолчанию установлено в false.
  • ignoreVary: Булево значение {{domxref("Boolean")}}, которое, если равно true, указывает операции сопоставления ключей не проводить проверку заголовка VARY.  Другими словами, если URL совпадает, вы получите соответствие, независимо от того, есть ли заголовок VARY на объекте запроса {{domxref("Response")}}. По умолчанию установлено в false.
  • -
  • cacheName: Строка {{domxref("DOMString")}}, которая представляет собой определенный кеш, в котором вести поиск. Заметьте, что этот параметр игнорируется методом Cache.delete().
  • +
  • cacheName: Строка {{domxref("DOMString")}}, которая представляет собой определённый кеш, в котором вести поиск. Заметьте, что этот параметр игнорируется методом Cache.delete().
  • diff --git a/files/ru/web/api/cache/index.html b/files/ru/web/api/cache/index.html index 53bfe013d4..dc5d273133 100644 --- a/files/ru/web/api/cache/index.html +++ b/files/ru/web/api/cache/index.html @@ -5,18 +5,18 @@ translation_of: Web/API/Cache ---

    {{APIRef("Service Workers API")}}{{SeeCompatTable}}

    -

    Интерфейс Cache представляет собой механизм хранения пары объектов Request / Response, которые кешируются, например, как часть жизненного цикла {{domxref("ServiceWorker")}}. Заметьте, что интерфейс Cache доступен как в области видимости окна, так и в области видимости воркеров. Не обязательно использовать его вместе с сервис воркерами, даже если интерфейс определен в их спецификации.

    +

    Интерфейс Cache представляет собой механизм хранения пары объектов Request / Response, которые кешируются, например, как часть жизненного цикла {{domxref("ServiceWorker")}}. Заметьте, что интерфейс Cache доступен как в области видимости окна, так и в области видимости воркеров. Не обязательно использовать его вместе с сервис воркерами, даже если интерфейс определён в их спецификации.

    -

    Для вызывающего скрипта может быть множество именованных объектов Cache. Разработчик сам определяет реализацию того, как скрипт (например, в  {{domxref("ServiceWorker")}}) управляет обновлением Cache. Записи в Cache не будут обновлены, пока не будет выполнен явный запрос; их время жизни не истечет до момента удаления. Используйте {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}}, чтобы открыть определенный именованный объект Cache и затем вызывайте любые методы Cache для управления его состоянием.

    +

    Для вызывающего скрипта может быть множество именованных объектов Cache. Разработчик сам определяет реализацию того, как скрипт (например, в  {{domxref("ServiceWorker")}}) управляет обновлением Cache. Записи в Cache не будут обновлены, пока не будет выполнен явный запрос; их время жизни не истечёт до момента удаления. Используйте {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}}, чтобы открыть определённый именованный объект Cache и затем вызывайте любые методы Cache для управления его состоянием.

    -

    Вы также ответственны за периодическую очистку записей кеша. Каждый браузер имеет жесткие ограничения на объем хранилища кеша, доступный для исходного кода. Браузер делает все, чтобы как можно лучше использовать дисковое пространство, но он может удалить хранилище кеша для скрипта. В основном, браузер либо удаляет все данные из кеша для скрипта, либо не удаляет ничего. Устанавливайте версии кеша в имени и используйте кеш только той версии, которая безопасна для использования. Смотрите Удаление старого кеша.

    +

    Вы также ответственны за периодическую очистку записей кеша. Каждый браузер имеет жёсткие ограничения на объем хранилища кеша, доступный для исходного кода. Браузер делает все, чтобы как можно лучше использовать дисковое пространство, но он может удалить хранилище кеша для скрипта. В основном, браузер либо удаляет все данные из кеша для скрипта, либо не удаляет ничего. Устанавливайте версии кеша в имени и используйте кеш только той версии, которая безопасна для использования. Смотрите Удаление старого кеша.

    Замечание: {{domxref("Cache.put")}}, {{domxref("Cache.add")}} и {{domxref("Cache.addAll")}} допускают сохранение в кеш только GET запросов.

    -

    Замечание: Изначально, реализация Cache (как в Blink, так и в Gecko) возвращала успешное завершение для промисов {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}} и {{domxref("Cache.put")}}, когда тело ответа было полностью помещено в хранилище. Более поздние версии используют новейший язык, утверждая, что браузер может разрешить промис как только запись будет записана в базу данных, даже если тело ответа все еще загружается в потоке.

    +

    Замечание: Изначально, реализация Cache (как в Blink, так и в Gecko) возвращала успешное завершение для промисов {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}} и {{domxref("Cache.put")}}, когда тело ответа было полностью помещено в хранилище. Более поздние версии используют новейший язык, утверждая, что браузер может разрешить промис как только запись будет записана в базу данных, даже если тело ответа все ещё загружается в потоке.

    @@ -47,7 +47,7 @@ translation_of: Web/API/Cache
    {{domxref("Cache.delete", "Cache.delete(request, options)")}}
    Находит запись {{domxref("Cache")}}, чей ключ является запросом, и, в случае нахождения, удаляет запись {{domxref("Cache")}}  и возвращает {{jsxref("Promise")}}, успешно завершающийся со значением true. Если же запись  {{domxref("Cache")}} не найдена, возвращается false.
    {{domxref("Cache.keys", "Cache.keys(request, options)")}}
    -
    Возвращает {{jsxref("Promise")}}, который отдает массив ключей {{domxref("Cache")}}.
    +
    Возвращает {{jsxref("Promise")}}, который отдаёт массив ключей {{domxref("Cache")}}.

    Примеры

    @@ -56,9 +56,9 @@ translation_of: Web/API/Cache

    Далее используется {{domxref("Cache.match", "Cache.match(request, options)")}} для определения того, находится ли уже совпадающий шрифт в кеше, и, если так, то возвращает его. Если же совпадающего шрифта нет, код получает этот шрифт по сети и использует {{domxref("Cache.put","Cache.put(request, response)")}} для кеширования полученного ресурса.

    -

    Код обрабатывает исключения, возможные при операции {{domxref("Globalfetch.fetch","fetch()")}}. Заметьте, что HTTP-ответ с ошибкой  (например, 404) не будет вызывать исключения. Будет возвращен нормальный объект ответа с установленным соответствующим кодом ошибки.

    +

    Код обрабатывает исключения, возможные при операции {{domxref("Globalfetch.fetch","fetch()")}}. Заметьте, что HTTP-ответ с ошибкой  (например, 404) не будет вызывать исключения. Будет возвращён нормальный объект ответа с установленным соответствующим кодом ошибки.

    -

    Также, пример описывает лучшие практики по заданию версий кеша при работе с сервис воркерами. И хотя в примере лишь один кеш, тот же подход может быть использован для множества кешей. Он сравнивает сокращенный идентификатор кеша с определенным, версионным именем кеша. Код также удаляет весь кеш, для которого не определено имя CURRENT_CACHES.

    +

    Также, пример описывает лучшие практики по заданию версий кеша при работе с сервис воркерами. И хотя в примере лишь один кеш, тот же подход может быть использован для множества кешей. Он сравнивает сокращённый идентификатор кеша с определённым, версионным именем кеша. Код также удаляет весь кеш, для которого не определено имя CURRENT_CACHES.

    В примере кода "кеш" это атрибут WorkerGlobalScope сервис воркеров. Он содержит объект CacheStorage, через который можно получить доступ к CacheStorage  API.

    @@ -66,7 +66,7 @@ translation_of: Web/API/Cache
    var CACHE_VERSION = 1;
     
    -// Сокращенный идентификатор привязанный к определенной версии кеша.
    +// Сокращённый идентификатор привязанный к определённой версии кеша.
     var CURRENT_CACHES = {
       font: 'font-cache-v' + CACHE_VERSION
     };
    diff --git a/files/ru/web/api/cache/keys/index.html b/files/ru/web/api/cache/keys/index.html
    index 0ae385d424..aa09fb7642 100644
    --- a/files/ru/web/api/cache/keys/index.html
    +++ b/files/ru/web/api/cache/keys/index.html
    @@ -28,14 +28,14 @@ translation_of: Web/API/Cache/keys
     
     
    request {{optional_inline}}
    -
    {{domxref("Request")}} который будет возвращен, если найден указанный ключ.
    +
    {{domxref("Request")}} который будет возвращён, если найден указанный ключ.
    options {{optional_inline}}
    Объект, чьи свойства контролируют то, как выполняется сопоставление ключей для операции keys. Допустимые параметры:
    • ignoreSearch: Булево значение {{domxref("Boolean")}}, которое определяет должен ли процесс сопоставления игнорировать строку запроса в url.  Если установлено в true, часть ?value=bar запроса http://foo.com/?value=bar будет проигнорирована при сопоставлении. По умолчанию установлено в false.
    • ignoreMethod: Булево значение {{domxref("Boolean")}}, которое, когда равно true, предотвращает проверку {{domxref("Request")}}, при сопоставлении ключей, на HTTP метод (обычно допускаются только GET и HEAD). По умолчанию установлено в false.
    • ignoreVary: Булево значение {{domxref("Boolean")}}, которое, когда равно true, указывает операции сопоставления ключей не проводить проверку заголовка VARY.  Другими словами, если URL совпадает, вы получите соответствие, независимо от того, есть ли заголовок VARY на объекте запроса {{domxref("Response")}}. По умолчанию установлено в false.
    • -
    • cacheName: Строка {{domxref("DOMString")}}, которая представляет собой определенный кеш, в котором нужно вести поиск. Заметьте, что этот параметр игнорируется методом Cache.keys().
    • +
    • cacheName: Строка {{domxref("DOMString")}}, которая представляет собой определённый кеш, в котором нужно вести поиск. Заметьте, что этот параметр игнорируется методом Cache.keys().
    diff --git a/files/ru/web/api/cache/match/index.html b/files/ru/web/api/cache/match/index.html index a487987497..ae0b0783bd 100644 --- a/files/ru/web/api/cache/match/index.html +++ b/files/ru/web/api/cache/match/index.html @@ -28,12 +28,12 @@ translation_of: Web/API/Cache/match
    request
    Запрос {{domxref("Request")}}, который вы пытаетесь найти в {{domxref("Cache")}}.
    options {{optional_inline}}
    -
    Объект, который задает параметры для операции match. Допустимые значения: +
    Объект, который задаёт параметры для операции match. Допустимые значения:
    • ignoreSearch: Булево значение {{domxref("Boolean")}}, которое указывает следует ли игнорировать строку запроса в url.  Например, если оно установлено в true, часть ?value=bar запроса http://foo.com/?value=bar будет проигнорирована при поиске соответствий ключа. По умолчанию равно false.
    • ignoreMethod: Булево значение {{domxref("Boolean")}}, которое, когда равно true, предотвращает проверку http метода для запроса  {{domxref("Request")}} при выполнении сопоставлений ключа (обычно разрешены лишь GET и HEAD). По умолчанию равно false.
    • ignoreVary: Булево значение {{domxref("Boolean")}}, которое, когда установлено в true, указывает операции сопоставления ключа не проводить проверку соответствия заголовка VARY — т.е., если URL совпадает, вы получите соответствие независимо от того, установлен ли на объекте {{domxref("Response")}} заголовок VARY. По умолчанию равно false.
    • -
    • cacheName: Строка {{domxref("DOMString")}}, задающая определенный кеш для поиска. Заметьте, что этот параметр игнорируется методом  Cache.match().
    • +
    • cacheName: Строка {{domxref("DOMString")}}, задающая определённый кеш для поиска. Заметьте, что этот параметр игнорируется методом  Cache.match().

    В Chrome поддерживается лишь cacheName.

    diff --git a/files/ru/web/api/cachestorage/index.html b/files/ru/web/api/cachestorage/index.html index 49d37cd9cd..98471205c0 100644 --- a/files/ru/web/api/cachestorage/index.html +++ b/files/ru/web/api/cachestorage/index.html @@ -15,36 +15,36 @@ translation_of: Web/API/CacheStorage ---

    {{APIRef("Service Workers API")}}{{SeeCompatTable}}

    -

    Интерфейс CacheStorage представляет собой хранилище для объектов {{domxref("Cache")}}. Он предоставляет главную директорию всех именованных кешей, к которым могут получить доступ {{domxref("ServiceWorker")}}, другие типы воркеров или {{domxref("window")}} (вы не обязаны использовать их с service workers, даже если существует спецификация, определяющая это) и поддерживает отображение строковых имен соответствующих объектов {{domxref("Cache")}}.

    +

    Интерфейс CacheStorage представляет собой хранилище для объектов {{domxref("Cache")}}. Он предоставляет главную директорию всех именованных кешей, к которым могут получить доступ {{domxref("ServiceWorker")}}, другие типы воркеров или {{domxref("window")}} (вы не обязаны использовать их с service workers, даже если существует спецификация, определяющая это) и поддерживает отображение строковых имён соответствующих объектов {{domxref("Cache")}}.

    CacheStorage также позволяет вызвать {{domxref("CacheStorage.open()")}} и {{domxref("CacheStorage.match()")}}. Используйте {{domxref("CacheStorage.open()")}} для получения экземпляров {{domxref("Cache")}}. Используйте {{domxref("CacheStorage.match()")}} для проверки того, является ли данный {{domxref("Request")}} ключом в любом из объектов {{domxref("Cache")}}, отслеживаемых объектом CacheStorage.

    Вы можете получить доступ к CacheStorage через глобальное свойство {{domxref("WorkerGlobalScope.caches", "caches")}}.

    -
    Заметка: CacheStorage всегда возвращает отказ с SecurityError для ненадежных источников (т.e. тех, что не используют HTTPS, хотя это утверждение, вероятно, станет более общим в будущем). При тестировании это можно обойти, установив опцию "Enable Service Workers over HTTP (when toolbox is open)" в меню Firefox Devtools options/gear.
    +
    Заметка: CacheStorage всегда возвращает отказ с SecurityError для ненадёжных источников (т.e. тех, что не используют HTTPS, хотя это утверждение, вероятно, станет более общим в будущем). При тестировании это можно обойти, установив опцию "Enable Service Workers over HTTP (when toolbox is open)" в меню Firefox Devtools options/gear.
    -
    Заметка: {{domxref("CacheStorage.match()")}} удобный метод. Подобный функционал сопоставления записей кеша может быть реализован путем открытия вашего кеша с помощью {{domxref("CacheStorage.open()")}}, возвращения записей, в ней содержащихся, через {{domxref("CacheStorage.keys()")}} и сравнения необходимой {{domxref("CacheStorage.match()")}}.
    +
    Заметка: {{domxref("CacheStorage.match()")}} удобный метод. Подобный функционал сопоставления записей кеша может быть реализован путём открытия вашего кеша с помощью {{domxref("CacheStorage.open()")}}, возвращения записей, в ней содержащихся, через {{domxref("CacheStorage.keys()")}} и сравнения необходимой {{domxref("CacheStorage.match()")}}.

    Методы

    {{domxref("CacheStorage.match()")}}
    -
    Проверяет, является ли данный {{domxref("Request")}} ключом в любом из объектов {{domxref("Cache")}}, отслеживаемых объектом {{domxref("CacheStorage")}}, и возвращает {{jsxref("Promise")}}, который успешно завершится, когда найдет совпадение.
    +
    Проверяет, является ли данный {{domxref("Request")}} ключом в любом из объектов {{domxref("Cache")}}, отслеживаемых объектом {{domxref("CacheStorage")}}, и возвращает {{jsxref("Promise")}}, который успешно завершится, когда найдёт совпадение.
    {{domxref("CacheStorage.has()")}}
    -
    Возвращает {{jsxref("Promise")}}, который успешно завершится и вернет true, если объект {{domxref("Cache")}} содержит кеш с установленным cacheName.
    +
    Возвращает {{jsxref("Promise")}}, который успешно завершится и вернёт true, если объект {{domxref("Cache")}} содержит кеш с установленным cacheName.
    {{domxref("CacheStorage.open()")}}
    -
    Возвращает {{jsxref("Promise")}}, который успешно завершится, когда объект {{domxref("Cache")}} найдет необходимый объект с cacheName (если такого нет, то создаст новый).
    +
    Возвращает {{jsxref("Promise")}}, который успешно завершится, когда объект {{domxref("Cache")}} найдёт необходимый объект с cacheName (если такого нет, то создаст новый).
    {{domxref("CacheStorage.delete()")}}
    -
    Находит объект {{domxref("Cache")}}, соответствующий cacheName, и, если такой обнаружен, удаляет объект {{domxref("Cache")}} и возвращает {{jsxref("Promise")}}, завершающийся с true. Если объект {{domxref("Cache")}} не найдет, то возвращается false.
    +
    Находит объект {{domxref("Cache")}}, соответствующий cacheName, и, если такой обнаружен, удаляет объект {{domxref("Cache")}} и возвращает {{jsxref("Promise")}}, завершающийся с true. Если объект {{domxref("Cache")}} не найдёт, то возвращается false.
    {{domxref("CacheStorage.keys()")}}
    -
    Возвращает {{jsxref("Promise")}}, который вернет массив, содержащий строки, соответствующие всем именованным объектам {{domxref("Cache")}}, отслеживаемым {{domxref("CacheStorage")}}. Используйте этот метод для прохода по списку всех объектов {{domxref("Cache")}}.
    +
    Возвращает {{jsxref("Promise")}}, который вернёт массив, содержащий строки, соответствующие всем именованным объектам {{domxref("Cache")}}, отслеживаемым {{domxref("CacheStorage")}}. Используйте этот метод для прохода по списку всех объектов {{domxref("Cache")}}.

    Примеры

    Фрагмент кода взят с MDN sw-test example (смотри sw-test running live). Этот service worker ожидает старта события {{domxref("InstallEvent")}}, затем запускает {{domxref("ExtendableEvent.waitUntil","waitUntil")}} для обработки процесса установки приложения. Он состоит из вызова {{domxref("CacheStorage.open")}} для создания нового кеша и затем использует {{domxref("Cache.addAll")}} для добавления к нему списка ресурсов.

    -

    Во втором блоке кода мы ждем запуска события {{domxref("FetchEvent")}}. Мы создаем встроенный ответ:

    +

    Во втором блоке кода мы ждём запуска события {{domxref("FetchEvent")}}. Мы создаём встроенный ответ:

    1. Проверяем, был ли необходимый запрос найден в CacheStorage. Если да, выполняем его.
    2. diff --git a/files/ru/web/api/canvas_api/a_basic_ray-caster/index.html b/files/ru/web/api/canvas_api/a_basic_ray-caster/index.html index 4f0922351f..d7afa0bf65 100644 --- a/files/ru/web/api/canvas_api/a_basic_ray-caster/index.html +++ b/files/ru/web/api/canvas_api/a_basic_ray-caster/index.html @@ -15,19 +15,19 @@ translation_of: Web/API/Canvas_API/A_basic_ray-caster

      Я попробовал небольшой эксперимент, понимая, к моему восторгу, что стильный элемент <canvas> о котором я читал, поддерживается не только в Fierfox, но так же поддерживается последней версией Safari.

      -

      Хорошие обзор и руководство по canvas я нашел в MDN, но никто еще не писал об анимации, поэтому я решил попробовать базовый порт raycaster, над которым я работал некоторое время назад, и посмотреть, какую производительность мы можем ожидать от управляемого JavaScript-ом пиксельного буфера.

      +

      Хорошие обзор и руководство по canvas я нашёл в MDN, но никто ещё не писал об анимации, поэтому я решил попробовать базовый порт raycaster, над которым я работал некоторое время назад, и посмотреть, какую производительность мы можем ожидать от управляемого JavaScript-ом пиксельного буфера.

      Как?

      -

      Основная идея заключается в использовании {{domxref("window.setInterval","setInterval()")}} с некоторой произвольной задержкой, соответствующей требуемой частоте кадров. После каждого интервала функция обновления будет перерисовывать холст, и отображать текущий вид. Я знаю, что мог бы начать с более простого примера, но я уверен, что руководство canvas доберется до этого, и я хотел посмотреть, смогу ли я это сделать.

      +

      Основная идея заключается в использовании {{domxref("window.setInterval","setInterval()")}} с некоторой произвольной задержкой, соответствующей требуемой частоте кадров. После каждого интервала функция обновления будет перерисовывать холст, и отображать текущий вид. Я знаю, что мог бы начать с более простого примера, но я уверен, что руководство canvas доберётся до этого, и я хотел посмотреть, смогу ли я это сделать.

      -

      Таким образом каждое обновление raycaster смотрит нажимали ли вы какие либо клавиши в последнее время, сохраняет расчеты и останавливается если вы бездействуете. Получив расчеты, холст очищается, земля и небо рисуются, положение камеры и/или ориентация обновляются, а лучи отбрасываются. Когда лучи попадают на стены, они отображают вертикальный кусок холста в цвете стены, на которую они попали, смешанный с более темной версией цвета в зависимости от расстояния до стены. Высота этого кусочка также моделируется расстоянием от камеры до стены и рисуется по центру линии горизонта.

      +

      Таким образом каждое обновление raycaster смотрит нажимали ли вы какие либо клавиши в последнее время, сохраняет расчёты и останавливается если вы бездействуете. Получив расчёты, холст очищается, земля и небо рисуются, положение камеры и/или ориентация обновляются, а лучи отбрасываются. Когда лучи попадают на стены, они отображают вертикальный кусок холста в цвете стены, на которую они попали, смешанный с более тёмной версией цвета в зависимости от расстояния до стены. Высота этого кусочка также моделируется расстоянием от камеры до стены и рисуется по центру линии горизонта.

      -

      Код, который я получил, - это смесь глав raycaster из старой книги Андре Ламотетрикса о гуру программирования игр (ISBN: 0672305070) и  java raycaster, которую я нашел в интернете, отфильтровал, переименовал, и внес все изменения, которые нужно было внести, чтобы все работало хорошо.

      +

      Код, который я получил, - это смесь глав raycaster из старой книги Андре Ламотетрикса о гуру программирования игр (ISBN: 0672305070) и  java raycaster, которую я нашёл в интернете, отфильтровал, переименовал, и внёс все изменения, которые нужно было внести, чтобы все работало хорошо.

      Результаты

      -

      Холст в Safari 2.0.1 выполнен на удивление хорошо. С коэффициентом блочности, увеличенным до отображения кусочка шириной 8 пикселей, я могу запустить окно 320 x 240 при 24 fps на моем Apple mini. Firefox 1.5 Beta 1 еще быстрее; я могу запускать 320 x 240 при 24 fps с 4 пиксельным кусочком. Не совсем новый член семейства программного обеспечения ID, но довольно приличный, учитывая, что это полностью интерпретируемая среда, и мне не нужно было беспокоиться о выделении памяти или видеорежимах или кодировании внутренних процедур в ассемблере или чем-то еще. Код получился очень эффективным, он использует поиск по массиву предварительно вычисленных значений, но я не гуру оптимизации, поэтому все, вероятно, можно было бы написать быстрее.

      +

      Холст в Safari 2.0.1 выполнен на удивление хорошо. С коэффициентом блочности, увеличенным до отображения кусочка шириной 8 пикселей, я могу запустить окно 320 x 240 при 24 fps на моем Apple mini. Firefox 1.5 Beta 1 ещё быстрее; я могу запускать 320 x 240 при 24 fps с 4 пиксельным кусочком. Не совсем новый член семейства программного обеспечения ID, но довольно приличный, учитывая, что это полностью интерпретируемая среда, и мне не нужно было беспокоиться о выделении памяти или видеорежимах или кодировании внутренних процедур в ассемблере или чем-то ещё. Код получился очень эффективным, он использует поиск по массиву предварительно вычисленных значений, но я не гуру оптимизации, поэтому все, вероятно, можно было бы написать быстрее.

      Кроме того, он оставляет желать лучшего с точки зрения попыток быть игровым движком—нет текстур стен, нет спрайтов, нет дверей, даже нет телепортов, чтобы добраться до другого уровня. Но я уверен, что все эти вещи могут быть добавлены, через некоторое время. Canvas API поддерживает пиксельное копирование изображений, поэтому текстуры могут быть добавлены. Я оставлю это для другой статьи, возможно, от другого человека. =)

      diff --git a/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html index a1b7b04467..dddee8da38 100644 --- a/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html +++ b/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html @@ -364,7 +364,7 @@ ball.draw();

      Breakout(арканоид)

      -

      В этой короткой главе описаны некоторые приемы создания продвинутой анимации.  Как насчет того, что бы добавить доску, кирпичи и превратить это демо в игру Breakout(в Росси более известный клон этой игры - арканоид)? Посетите Game development чтобы узнать больше об играх.

      +

      В этой короткой главе описаны некоторые приёмы создания продвинутой анимации.  Как насчёт того, что бы добавить доску, кирпичи и превратить это демо в игру Breakout(в Росси более известный клон этой игры - арканоид)? Посетите Game development чтобы узнать больше об играх.

      Смотрите так же

      diff --git a/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html b/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html index 7eea729bc2..9a750e66cc 100644 --- a/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html +++ b/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html @@ -21,7 +21,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Применение_стилей_и_
      Устанавливает стиль контура фигуры. 
      -

      color может быть цветом, (строка, представленная в CSS {{cssxref("<color>")}}), градиентом или паттерном. Градиенты и паттерны мы рассмотрим позже. По умолчанию цвет фона и контура  — черный (значение CSS цвета  #000000).

      +

      color может быть цветом, (строка, представленная в CSS {{cssxref("<color>")}}), градиентом или паттерном. Градиенты и паттерны мы рассмотрим позже. По умолчанию цвет фона и контура  — чёрный (значение CSS цвета  #000000).

      На заметку: Когда вы устанавливаете  значения strokeStyle и/или fillStyle, то новое значение становится стандартным для всех фигур, которые будут нарисованы с этого момента. Когда вам нужен другой цвет, вы должны перезаписать значение в fillStyle или в strokeStyle для каждой фигуры.

      @@ -39,7 +39,7 @@ ctx.fillStyle = "rgba(255,165,0,1)";

      Пример fillStyle

      -

      В этом примере мы опять воспользуемся двойным циклом, чтобы нарисовать сетку из прямоугольников, каждый из которых имеет свой цвет. Окончательное изображение должно иметь вид, как показано на скриншоте. Здесь не происходит ничего сверхъестественного. Мы используем две переменные i и j для генерации уникального RGB цвета для каждого квадрата и изменяем только красные и зеленые значения. Синий канал представляет собой фиксированное значение. Путем изменения каналов вы можете генерировать всю палитру. Увеличив количество шагов вы можете достигнуть такого вида палитры, какая используется в Photoshop.

      +

      В этом примере мы опять воспользуемся двойным циклом, чтобы нарисовать сетку из прямоугольников, каждый из которых имеет свой цвет. Окончательное изображение должно иметь вид, как показано на скриншоте. Здесь не происходит ничего сверхъестественного. Мы используем две переменные i и j для генерации уникального RGB цвета для каждого квадрата и изменяем только красные и зелёные значения. Синий канал представляет собой фиксированное значение. Путём изменения каналов вы можете генерировать всю палитру. Увеличив количество шагов вы можете достигнуть такого вида палитры, какая используется в Photoshop.

      function draw() {
         var ctx = document.getElementById('canvas').getContext('2d');
      @@ -113,7 +113,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)";
       
       

      Пример globalAlpha

      -

      В данном примере мы нарисуем фон и четыре квадрата с различными цветами.  Сверху изображения будет выведен набор полупрозрачных кругов. Установим свойство globalAlpha значением 0.2, которое будет использовано для всех последующих форм. Каждый шаг цикла рисует круг с большим радиусом. По окончанию получим радиальный градиент. Накладывая еще больше кругов друг на друга, мы фактически сможем уменьшить прозрачность ранее нарисованных кругов. Увеличив счетчик итераций, при этом рисуя еще круги, мы сможем добиться исчезновение центра изображения.

      +

      В данном примере мы нарисуем фон и четыре квадрата с различными цветами.  Сверху изображения будет выведен набор полупрозрачных кругов. Установим свойство globalAlpha значением 0.2, которое будет использовано для всех последующих форм. Каждый шаг цикла рисует круг с большим радиусом. По окончанию получим радиальный градиент. Накладывая ещё больше кругов друг на друга, мы фактически сможем уменьшить прозрачность ранее нарисованных кругов. Увеличив счётчик итераций, при этом рисуя ещё круги, мы сможем добиться исчезновение центра изображения.

      function draw() {
         var ctx = document.getElementById('canvas').getContext('2d');
      @@ -195,22 +195,22 @@ ctx.fillStyle = "rgba(255,0,0,0.5)";
        
      {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}
      Устанавливает ограничение на митру, когда две линии соединяются под острым углом, чтобы вы могли контролировать её толщину.
      {{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}
      -
      Возвращает текущий массив тире штриховки, содержащий четное число неотрицательных чисел.
      +
      Возвращает текущий массив тире штриховки, содержащий чётное число неотрицательных чисел.
      {{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}
      Устанавливает текущий пунктир линии.
      {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}
      Указывает, где следует начинать тире массива в строке.
      -

      Вы лучше поймете, что они делают, глядя на приведенные ниже примеры.

      +

      Вы лучше поймёте, что они делают, глядя на приведённые ниже примеры.

      Пример lineWidth

      -

      Это свойство задает толщину текущей строки. Значения должны быть положительными. По умолчанию для этого значения установлено 1.0 единицы.

      +

      Это свойство задаёт толщину текущей строки. Значения должны быть положительными. По умолчанию для этого значения установлено 1.0 единицы.

      -

      Ширина линии - это толщина хода, центрированного по данному пути. Другими словами, область, которая нарисована, простирается до половины ширины линии по обе стороны пути. Поскольку координаты холста не напрямую ссылаются на пиксели, особое внимание следует уделять получению четких горизонтальных и вертикальных линий.

      +

      Ширина линии - это толщина хода, центрированного по данному пути. Другими словами, область, которая нарисована, простирается до половины ширины линии по обе стороны пути. Поскольку координаты холста не напрямую ссылаются на пиксели, особое внимание следует уделять получению чётких горизонтальных и вертикальных линий.

      -

      В приведенном ниже примере 10 прямых линий рисуются с увеличением ширины линий. Линия в крайнем левом углу - 1.0 единицы. Тем не менее, толщина левой и всех других линий нечетной ширины не выглядят четкими из-за позиционирования пути.

      +

      В приведённом ниже примере 10 прямых линий рисуются с увеличением ширины линий. Линия в крайнем левом углу - 1.0 единицы. Тем не менее, толщина левой и всех других линий нечётной ширины не выглядят чёткими из-за позиционирования пути.

      function draw() {
         var ctx = document.getElementById('canvas').getContext('2d');
      @@ -232,7 +232,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)";
       
       

      {{EmbedLiveSample("Пример_lineWidth", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}

      -

      Получение четких строк требует понимания путей сглаживания. На рисунках ниже представлена сетка координат холста. Квадраты между сетками являются фактическими экранными пикселями. В первом изображении сетки ниже прямоугольник от (2, 1) до (5, 5) заполняется. Вся область между ними (светло-красный) падает на границы пикселей, поэтому полученный заполненный прямоугольник будет иметь четкие края.

      +

      Получение чётких строк требует понимания путей сглаживания. На рисунках ниже представлена сетка координат холста. Квадраты между сетками являются фактическими экранными пикселями. В первом изображении сетки ниже прямоугольник от (2, 1) до (5, 5) заполняется. Вся область между ними (светло-красный) падает на границы пикселей, поэтому полученный заполненный прямоугольник будет иметь чёткие края.

      @@ -241,14 +241,14 @@ ctx.fillStyle = "rgba(255,0,0,0.5)";

      Чтобы исправить это, вы должны быть более точными при создании пути. Зная, что линия шириной 1.0 занимает половину единицы по обе стороны пути, создание пути от (3.5, 1) до (3.5, 5) приведёт к ситуации в третьем изображении - ширина линии 1.0 закончится верно, точно заполняя вертикальную линию с одним пикселем.

      -

      Примечание: Имейте в виду, что в нашем примере с вертикальной линией позиция Y по-прежнему ссылается на целочисленную позицию сетки - иначе мы увидели бы пиксели с половинным охватом в конечных точках (также обратите внимание, что это поведение зависит от текущего стиля lineCap,  значение по умолчанию - butt; вы можете вычислить согласованные штрихи с полупиксельными координатами для линий с нечетной шириной, установив стиль lineCap в square, чтобы внешняя граница вокруг конечной точки линии автоматически расширялась, охватывая весь пиксель в точку).

      +

      Примечание: Имейте в виду, что в нашем примере с вертикальной линией позиция Y по-прежнему ссылается на целочисленную позицию сетки - иначе мы увидели бы пиксели с половинным охватом в конечных точках (также обратите внимание, что это поведение зависит от текущего стиля lineCap,  значение по умолчанию - butt; вы можете вычислить согласованные штрихи с полупиксельными координатами для линий с нечётной шириной, установив стиль lineCap в square, чтобы внешняя граница вокруг конечной точки линии автоматически расширялась, охватывая весь пиксель в точку).

      -

      Также обратите внимание, что затронуты только начальные и конечные  точки пути: если путь закрыт с помощью closePath(), - нет начальной и конечной точки; вместо этого все конечные точки в пути подключены к их прикрепленному предыдущему и следующему сегментам и при текущей настройке стиля lineJoin в значении по умолчанию - miter, с эффектом автоматического расширения внешних границ подключенных сегментов до их точки пересечения - обработанный ход будет точно покрывать полные пиксели с центром в каждой конечной точке, если эти связанные сегменты горизонтальны и/или вертикальны). См. следующие два раздела, демонстрирующие эти дополнительные стили.

      +

      Также обратите внимание, что затронуты только начальные и конечные  точки пути: если путь закрыт с помощью closePath(), - нет начальной и конечной точки; вместо этого все конечные точки в пути подключены к их прикреплённому предыдущему и следующему сегментам и при текущей настройке стиля lineJoin в значении по умолчанию - miter, с эффектом автоматического расширения внешних границ подключённых сегментов до их точки пересечения - обработанный ход будет точно покрывать полные пиксели с центром в каждой конечной точке, если эти связанные сегменты горизонтальны и/или вертикальны). См. следующие два раздела, демонстрирующие эти дополнительные стили.

      -

      Для линий с четной шириной каждая половина заканчивается как целое количество пикселей, поэтому вам нужен путь, который находится между пикселями (то есть (3,1) - (3,5)), вместо середины пикселей.

      +

      Для линий с чётной шириной каждая половина заканчивается как целое количество пикселей, поэтому вам нужен путь, который находится между пикселями (то есть (3,1) - (3,5)), вместо середины пикселей.

      -

      Хотя это и необычно, когда изначально работаешь с масштабируемой 2D-графикой, обращая внимание на сетку пикселей и положение путей, но вы убедитесь, что ваши рисунки будут выглядеть правильно, независимо от масштабирования или любых других преобразований. Вертикальная линия ширины 1,0, построенная таким образом, станет четкой 2-пиксельной линией при увеличении на 2 и появится в правильном положении.

      +

      Хотя это и необычно, когда изначально работаешь с масштабируемой 2D-графикой, обращая внимание на сетку пикселей и положение путей, но вы убедитесь, что ваши рисунки будут выглядеть правильно, независимо от масштабирования или любых других преобразований. Вертикальная линия ширины 1,0, построенная таким образом, станет чёткой 2-пиксельной линией при увеличении на 2 и появится в правильном положении.

      Пример lineCap

      @@ -265,7 +265,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)";
      Концы линий описаны квадратом с равной шириной и половиной высоты толщины линии.
      -

      В этом примере мы проведем три строки, каждая из которых имеет другое значение для свойства lineCap. Я также добавил два руководства, чтобы увидеть точные различия между ними. Каждая из этих линий начинается и заканчивается именно на этих направляющих.

      +

      В этом примере мы проведём три строки, каждая из которых имеет другое значение для свойства lineCap. Я также добавил два руководства, чтобы увидеть точные различия между ними. Каждая из этих линий начинается и заканчивается именно на этих направляющих.

      Строка слева использует butt опцию по умолчанию. Вы заметите, что она полностью очищена от направляющих. Второй вариант -  round опция. Это добавляет полукруг к концу, который имеет радиус, равный половине ширины линии. Строка справа использует square опцию. Это добавляет поле с равной шириной и половиной высоты толщины линии.

      @@ -313,14 +313,14 @@ ctx.fillStyle = "rgba(255,0,0,0.5)";
      round
      -
      Радиус заполняемой части для скругленных углов равен половине ширины линии. центр этого радиуса совпадает с концами подключенных сегментов.
      +
      Радиус заполняемой части для скруглённых углов равен половине ширины линии. центр этого радиуса совпадает с концами подключённых сегментов.
      bevel
      -
      Заполняет дополнительную треугольную область между общей конечной точкой подключенных сегментов и отдельными внешними прямоугольными углами каждого сегмента. 
      +
      Заполняет дополнительную треугольную область между общей конечной точкой подключённых сегментов и отдельными внешними прямоугольными углами каждого сегмента. 
      miter
      -
      Подключенные сегменты соединяются путем расширения их внешних краев для соединения в одной точке с эффектом заполнения дополнительной области в форме пастилки. Эта настройка выполняется с помощью свойства miterLimit, которое объясняется ниже.
      +
      Подключённые сегменты соединяются путём расширения их внешних краёв для соединения в одной точке с эффектом заполнения дополнительной области в форме пастилки. Эта настройка выполняется с помощью свойства miterLimit, которое объясняется ниже.
      -

      В приведенном ниже примере показаны три разных пути, демонстрирующие каждый из этих трех свойств lineJoin; результат - выше. 

      +

      В приведённом ниже примере показаны три разных пути, демонстрирующие каждый из этих трёх свойств lineJoin; результат - выше. 

      function draw() {
         var ctx = document.getElementById('canvas').getContext('2d');
      @@ -351,9 +351,9 @@ ctx.fillStyle = "rgba(255,0,0,0.5)";
       
       

      Как вы видели в предыдущем примере, при объединении двух строк с опцией miter внешние края двух соединительных линий расширены до точки, где они встречаются. Для линий, которые находятся под большими углами друг с другом, эта точка находится недалеко от внутренней точки соединения. Однако, поскольку углы между каждой линией уменьшаются, расстояние (длина меча) между этими точками увеличивается экспоненциально.

      -

      Свойство miterLimit определяет, как далеко можно установить внешнюю точку соединения из внутренней точки подключения. Если две линии превышают это значение, вместо этого получается привязка конуса. Обратите внимание, что максимальная длина митра является произведением ширины линии, измеренной в текущей системе координат, значением этого свойства miterLimit (значение по умолчанию 10,0 в HTML {{HTMLElement("canvas")}}), поэтому miterLimit может устанавливаться независимо от текущей шкалы дисплея или любых аффинных преобразований путей: она влияет только на эффективно визуализированную форму ребер линии.

      +

      Свойство miterLimit определяет, как далеко можно установить внешнюю точку соединения из внутренней точки подключения. Если две линии превышают это значение, вместо этого получается привязка конуса. Обратите внимание, что максимальная длина митра является произведением ширины линии, измеренной в текущей системе координат, значением этого свойства miterLimit (значение по умолчанию 10,0 в HTML {{HTMLElement("canvas")}}), поэтому miterLimit может устанавливаться независимо от текущей шкалы дисплея или любых аффинных преобразований путей: она влияет только на эффективно визуализированную форму рёбер линии.

      -

      Точнее, предел митры является максимально допустимым отношением длины расширения (в холсте HTML он измеряется между внешним углом соединенных краев линии и общей конечной точкой соединительных сегментов, указанными на пути), до половины ширины линии. Его можно равнозначно определить как максимально допустимое отношение расстояния между внутренней и внешней точками перехода краев к общей ширине линии. Затем он равен косекансу с половиной минимального внутреннего угла соединительных сегментов, ниже которого не будет создано ни одного соединения митра, а только скос соединяется:

      +

      Точнее, предел митры является максимально допустимым отношением длины расширения (в холсте HTML он измеряется между внешним углом соединённых краёв линии и общей конечной точкой соединительных сегментов, указанными на пути), до половины ширины линии. Его можно равнозначно определить как максимально допустимое отношение расстояния между внутренней и внешней точками перехода краёв к общей ширине линии. Затем он равен косекансу с половиной минимального внутреннего угла соединительных сегментов, ниже которого не будет создано ни одного соединения митра, а только скос соединяется:

      • miterLimit = max miterLength / lineWidth = 1 / sin ( min θ / 2 )
      • @@ -365,7 +365,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)";

        Вот небольшая демонстрация, в которой вы можете динамически установить miterLimit и посмотреть, как это влияет на фигуры на холсте. Синие линии показывают, где начальная и конечная точки для каждой из линий в шаблоне зигзага.

        -

        Если вы укажете в этой демонстрации значение miterLimit ниже 4.2, ни один из видимых углов не присоединится к расширению митры, но только с небольшим скосом рядом с синими линиями; с отметкой miterLimit выше 10, большинство углов в этой демонстрации должны соединяться с митрой, удаленной от синих линий, высота которой уменьшается между углами слева направо, потому что они соединяются с растущими углами; с промежуточными значениями углы с левой стороны будут соединяться только с скосом рядом с синими линиями, а углы с правой стороны с удлинителем митры (также с уменьшающейся высотой).

        +

        Если вы укажете в этой демонстрации значение miterLimit ниже 4.2, ни один из видимых углов не присоединится к расширению митры, но только с небольшим скосом рядом с синими линиями; с отметкой miterLimit выше 10, большинство углов в этой демонстрации должны соединяться с митрой, удалённой от синих линий, высота которой уменьшается между углами слева направо, потому что они соединяются с растущими углами; с промежуточными значениями углы с левой стороны будут соединяться только с скосом рядом с синими линиями, а углы с правой стороны с удлинителем митры (также с уменьшающейся высотой).

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

        Метод setLineDash и свойство lineDashOffset задают шаблон штрихов для линий. Метод setLineDash принимает список чисел, который определяет расстояния для попеременного рисования линии и разрыва, а свойство lineDashOffset устанавливает смещение, с которого начинается шаблон.

        -

        В этом примере мы создаем эффект походных муравьев. Это техника анимации, часто встречающаяся в инструментах выбора программ компьютерной графики. Это помогает пользователю отличить границу выделения от фона изображения, анимируя границу. В следующей части этого руководства вы узнаете, как сделать эту и другие основные анимации.

        +

        В этом примере мы создаём эффект походных муравьёв. Это техника анимации, часто встречающаяся в инструментах выбора программ компьютерной графики. Это помогает пользователю отличить границу выделения от фона изображения, анимируя границу. В следующей части этого руководства вы узнаете, как сделать эту и другие основные анимации.

        -

        В первых нескольких строках кода мы рисуем черный прямоугольник размером с холстом в качестве фона, а затем переводим начало координат в центр. Затем мы создаем круговой обтравочный контур, рисуя дугу и вызывающий clip(). Обрезанные контуры также являются частью состояния сохранения холста. Если бы мы хотели сохранить исходный обтравочный контур, мы могли бы сохранить состояние холста перед созданием нового.

        +

        В первых нескольких строках кода мы рисуем чёрный прямоугольник размером с холстом в качестве фона, а затем переводим начало координат в центр. Затем мы создаём круговой обтравочный контур, рисуя дугу и вызывающий clip(). Обрезанные контуры также являются частью состояния сохранения холста. Если бы мы хотели сохранить исходный обтравочный контур, мы могли бы сохранить состояние холста перед созданием нового.

        -

        Все, что нарисовано после создания отсеченного контура, появится только внутри этого пути. Вы можете видеть это четко в линейном градиенте, который нарисован далее. После этого набирается набор из 50 случайно расположенных и масштабированных звезд, используя drawStar(). Снова звезды появляются только в пределах определенного обтравочного контура.

        +

        Все, что нарисовано после создания отсечённого контура, появится только внутри этого пути. Вы можете видеть это чётко в линейном градиенте, который нарисован далее. После этого набирается набор из 50 случайно расположенных и масштабированных звёзд, используя drawStar(). Снова звезды появляются только в пределах определённого обтравочного контура.

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

        diff --git a/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html index 30225ac786..83ef78542a 100644 --- a/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html +++ b/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html @@ -12,11 +12,11 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур

        Сетка

        -

        Перед тем, как мы начнем рисовать, нам нужно поговорить о сетке canvas или координатной плоскости. Наш HTML каркас из предыдущей страницы включал в себя элемент canvas 150 пикселей в ширину и 150 пикселей в высоту. Справа можно увидеть этот canvas с сеткой, накладываемой по умолчанию. Обычно 1 единица на сетке соответствует 1 пикселю на canvas. Начало координат этой сетки расположено в верхнем левом углу в координате (0,0 ). Все элементы размещены относительно этого начала. Таким образом, положение верхнего левого угла синего квадрата составляет х пикселей слева и у пикселей сверху, на координате , у). Позже в этом уроке мы увидим, как можно перевести начало координат в другое место, вращать сетку и даже масштабировать ее, но сейчас мы будем придерживаться настроек сетки по умолчанию.

        +

        Перед тем, как мы начнём рисовать, нам нужно поговорить о сетке canvas или координатной плоскости. Наш HTML каркас из предыдущей страницы включал в себя элемент canvas 150 пикселей в ширину и 150 пикселей в высоту. Справа можно увидеть этот canvas с сеткой, накладываемой по умолчанию. Обычно 1 единица на сетке соответствует 1 пикселю на canvas. Начало координат этой сетки расположено в верхнем левом углу в координате (0,0 ). Все элементы размещены относительно этого начала. Таким образом, положение верхнего левого угла синего квадрата составляет х пикселей слева и у пикселей сверху, на координате , у). Позже в этом уроке мы увидим, как можно перевести начало координат в другое место, вращать сетку и даже масштабировать её, но сейчас мы будем придерживаться настроек сетки по умолчанию.

        Рисование прямоугольников

        -

        В отличие от {{Glossary("SVG")}}, {{HTMLElement("canvas")}} поддерживает только одну примитивную фигуру: прямоугольник. Все другие фигуры должны быть созданы комбинацией одного или большего количества контуров (paths), набором точек, соединенных в линии. К счастью в ассортименте рисования контуров у нас есть  функции, которые делают возможным составление очень сложных фигур.

        +

        В отличие от {{Glossary("SVG")}}, {{HTMLElement("canvas")}} поддерживает только одну примитивную фигуру: прямоугольник. Все другие фигуры должны быть созданы комбинацией одного или большего количества контуров (paths), набором точек, соединённых в линии. К счастью в ассортименте рисования контуров у нас есть  функции, которые делают возможным составление очень сложных фигур.

        Сначала рассмотрим прямоугольник. Ниже представлены три функции рисования прямоугольников в canvas:

        @@ -29,7 +29,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур
        Очистка  прямоугольной области, делая содержимое совершенно прозрачным.
        -

        Каждая из приведенных функций принимает несколько параметров: 

        +

        Каждая из приведённых функций принимает несколько параметров: 

        • xy устанавливают положение верхнего левого угла прямоугольника в canvas (относительно начала координат);
        • @@ -60,11 +60,11 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур } }
      -

      Этот пример изображен ниже.

      +

      Этот пример изображён ниже.

      {{EmbedLiveSample("Пример_создания_прямоугольных_фигур", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}

      -

      Функция fillRect() рисует большой чёрный квадрат со стороной 100 px. Функция clearRect() вырезает квадрат 60х60 из центра, а функция strokeRect() создает прямоугольный контур 50х50 пикселей внутри очищенного квадрата.

      +

      Функция fillRect() рисует большой чёрный квадрат со стороной 100 px. Функция clearRect() вырезает квадрат 60х60 из центра, а функция strokeRect() создаёт прямоугольный контур 50х50 пикселей внутри очищенного квадрата.

      На следующей странице мы рассмотрим две альтернативы методу clearRect(), и также увидим, как можно изменять цвет и стиль контура отображаемых фигур.

      @@ -77,7 +77,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур

      Создание фигур используя контуры происходит в несколько важных шагов:

        -
      1. Сначала вы создаете контур.
      2. +
      3. Сначала вы создаёте контур.
      4. Затем, используя команды рисования, рисуете контур.
      5. Потом закрываете контур.
      6. Созданный контур вы можете обвести или залить для его отображения.
      7. @@ -87,7 +87,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур
        {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}
        -
        Создает новый контур. После создания используется в дальнейшем командами рисования при построении контуров.
        +
        Создаёт новый контур. После создания используется в дальнейшем командами рисования при построении контуров.
        Path методы
        Методы для установки различных контуров объекта.
        {{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}
        @@ -195,12 +195,12 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур
        {{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}
        -
        Рисует линию с текущей позиции до позиции, определенной x и y.
        +
        Рисует линию с текущей позиции до позиции, определённой x и y.

        Этот метод принимает два аргумента x и y, которые являются координатами конечной точки линии. Начальная точка зависит от ранее нарисованных путей, причём конечная точка предыдущего пути является начальной точкой следующего и т. д. Начальная точка также может быть изменена с помощью метода moveTo().

        -

        Пример ниже рисует два треугольника, один закрашенный и другой обведен контуром.

        +

        Пример ниже рисует два треугольника, один закрашенный и другой обведён контуром.

        -

        Рассмотрим детальнее метод arc(), который имеет пять параметров: x и y — это координаты центра окружности, в которой должна быть нарисована дуга. radius — не требует пояснений. Углы startAngle и endAngle определяют начальную и конечную точки дуги в радианах вдоль кривой окружности. Отсчет происходит от оси x. Параметр anticlockwise — логическое значение, которое, если true, то рисование дуги совершается против хода часовой стрелки; иначе рисование происходит по ходу часовой стрелки.

        +

        Рассмотрим детальнее метод arc(), который имеет пять параметров: x и y — это координаты центра окружности, в которой должна быть нарисована дуга. radius — не требует пояснений. Углы startAngle и endAngle определяют начальную и конечную точки дуги в радианах вдоль кривой окружности. Отсчёт происходит от оси x. Параметр anticlockwise — логическое значение, которое, если true, то рисование дуги совершается против хода часовой стрелки; иначе рисование происходит по ходу часовой стрелки.

        Note: Углы в функции arc() измеряют в радианах, не в градусах. Для перевода градусов в радианы вы можете использовать JavaScript-выражение: radians = (Math.PI/180)*degrees.

        @@ -263,7 +263,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур

        Координаты x и y  должны быть достаточно ясны. radius and startAngle — фиксированы. endAngle начинается со 180 градусов (полуокружность) в первой колонке и, увеличиваясь с шагом 90 градусов, достигает кульминации полноценной окружностью в последнем столбце.

        -

        Установка параметра clockwise определяет результат; в первой и третьей строках рисование дуг происходит по часовой стрелке, а во второй и четвертой - против часовой стрелки. Благодаря if-условию верхняя половина дуг образуется с контуром, (обводкой), а нижняя половина дуг - с заливкой.

        +

        Установка параметра clockwise определяет результат; в первой и третьей строках рисование дуг происходит по часовой стрелке, а во второй и четвёртой - против часовой стрелки. Благодаря if-условию верхняя половина дуг образуется с контуром, (обводкой), а нижняя половина дуг - с заливкой.

        Note: Этот пример требует немного большего холста (canvas), чем другие на этой странице: 150 x 200 pixels.

        @@ -319,13 +319,13 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур
        Рисуется кубическая кривая Безье с текущей позиции пера в конечную точку с координатами x и y, используя две контрольные точки с координатами (cp1x, cp1y) и (cp2x, cp2y).
        -

        Различие между ними можно увидеть на рисунке, изображенном справа. Квадратичная кривая Безье имеет стартовую и конечную точки (синие точки) и всего одну контрольную точку (красная точка), в то время как кубическая кривая Безье использует две контрольные точки.

        +

        Различие между ними можно увидеть на рисунке, изображённом справа. Квадратичная кривая Безье имеет стартовую и конечную точки (синие точки) и всего одну контрольную точку (красная точка), в то время как кубическая кривая Безье использует две контрольные точки.

        Параметры x и y в этих двух методах являются координатами конечной точки. cp1x и cp1y — координаты первой контрольной точки, а cp2x и cp2y — координаты второй контрольной точки.

        Использование квадратичных или кубических кривых Безье может быть  спорным выходом, так как в отличие от приложений векторной графики типа Adobe Illustrator, мы не имеем полной видимой обратной связи с тем, что мы делаем. Этот факт делает довольно сложным процесс рисования сложных фигур. В следующем примере мы нарисуем совсем простую составную фигуру, но, если у вас есть время и ещё больше терпения, можно создать более сложные составные фигуры.

        -

        В этом примере нет ничего слишком тяжелого. В обоих случаях мы видим последовательность кривых, рисуя которые, в результате получим составную фигуру.

        +

        В этом примере нет ничего слишком тяжёлого. В обоих случаях мы видим последовательность кривых, рисуя которые, в результате получим составную фигуру.

        Квадратичные кривые Безье

        @@ -513,7 +513,7 @@ function roundedRect(ctx,x,y,width,height,radius){

        Мы не будем подробно останавливаться на том, так как это на самом деле удивительно просто. Наиболее важные вещи, которые следует отметить, это использование свойства fillStyle в контексте рисования и использование функции утилиты (в данном случае roundedRect()). Использование функций утилиты для битов чертежа часто может быть очень полезным и сократить количество необходимого кода, а также его сложность.

        -

        Позже, в этом уроке, мы еще раз рассмотрим fillStyle, но более подробно. Здесь же мы используем его для изменения цвета заливки путей вместо цвета по умолчанию от черного до белого, а затем обратно.

        +

        Позже, в этом уроке, мы ещё раз рассмотрим fillStyle, но более подробно. Здесь же мы используем его для изменения цвета заливки путей вместо цвета по умолчанию от чёрного до белого, а затем обратно.

        Path2D объекты

        @@ -522,7 +522,7 @@ function roundedRect(ctx,x,y,width,height,radius){
        {{domxref("Path2D.Path2D", "Path2D()")}}
        -
        Конструктор Path2D() возвращает вновь созданный объект Path2D  необязательно с другим путем в качестве аргумента (создает копию) или необязательно со строкой, состоящей из данных пути SVG path .
        +
        Конструктор Path2D() возвращает вновь созданный объект Path2D  необязательно с другим путём в качестве аргумента (создаёт копию) или необязательно со строкой, состоящей из данных пути SVG path .
        new Path2D();     // пустой path объект
        @@ -540,7 +540,7 @@ new Path2D(d);    // path из SVG

        Path2D пример

        -

        В этом примере мы создаем прямоугольник и круг. Оба они сохраняются как объект Path2D, поэтому они доступны для последующего использования. С новым API Path2D несколько методов были обновлены, чтобы при необходимости принять объект Path2D для использования вместо текущего пути. Здесь stroke и fill используются с аргументом пути, например, для рисования обоих объектов на холст.

        +

        В этом примере мы создаём прямоугольник и круг. Оба они сохраняются как объект Path2D, поэтому они доступны для последующего использования. С новым API Path2D несколько методов были обновлены, чтобы при необходимости принять объект Path2D для использования вместо текущего пути. Здесь stroke и fill используются с аргументом пути, например, для рисования обоих объектов на холст.

    path
    @@ -54,7 +54,7 @@ ctx.rect(10, 10, 100, 100); ctx.fill();
    -

    Отредактируйте приведенный ниже код и посмотрите, как обновляется ваше обновление на холсте:

    +

    Отредактируйте приведённый ниже код и посмотрите, как обновляется ваше обновление на холсте:

    -

    Свойство Node.prefix только для чтения, возвращающее префикс пространства имен указанного узла или null, если не указан префикс. Это свойство только для чтения.

    +

    Свойство Node.prefix только для чтения, возвращающее префикс пространства имён указанного узла или null, если не указан префикс. Это свойство только для чтения.

    Синтаксис

    diff --git a/files/ru/web/api/node/removechild/index.html b/files/ru/web/api/node/removechild/index.html index 738dadbaa6..0666aa815c 100644 --- a/files/ru/web/api/node/removechild/index.html +++ b/files/ru/web/api/node/removechild/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Node/removeChild

    Аннотация

    -

    Удаляет дочерний элемент из DOM. Возвращает удаленный элемент.

    +

    Удаляет дочерний элемент из DOM. Возвращает удалённый элемент.

    Синтаксис

    @@ -21,14 +21,14 @@ translation_of: Web/API/Node/removeChild
      -
    • child дочерний элемент который будет удален из DOM.
    • +
    • child дочерний элемент который будет удалён из DOM.
    • element родительский элемент удаляемого child.
    • oldChild ссылка на удаляемый дочерний элемент. oldChild === child.
    -

    Удаленный дочерний элемент остается в памяти, но больше не является частью DOM. Вы можете повторно использовать удаленный элемент с помощью ссылки на объект - oldChild.

    +

    Удалённый дочерний элемент остаётся в памяти, но больше не является частью DOM. Вы можете повторно использовать удалённый элемент с помощью ссылки на объект - oldChild.

    -

    Если child не является дочерним элементом element, тогда метод генерирует исключение. Также это происходит если child является дочерним элементом element во время вызова метода, но был удален во время вызова обработчика событий удаляющего элемент(т.e при удалении элемента непосредственно перед вызовом обработчика событий).

    +

    Если child не является дочерним элементом element, тогда метод генерирует исключение. Также это происходит если child является дочерним элементом element во время вызова метода, но был удалён во время вызова обработчика событий удаляющего элемент(т.e при удалении элемента непосредственно перед вызовом обработчика событий).

    Пример

    diff --git a/files/ru/web/api/node/replacechild/index.html b/files/ru/web/api/node/replacechild/index.html index c1959cc322..ae9a375735 100644 --- a/files/ru/web/api/node/replacechild/index.html +++ b/files/ru/web/api/node/replacechild/index.html @@ -14,34 +14,34 @@ original_slug: Web/API/Node.replaceChild
    {{ApiRef}}

    Аннотация

    -

    Заменяет дочерний элемент на выбранный. Возвращает замененный элемент.

    +

    Заменяет дочерний элемент на выбранный. Возвращает заменённый элемент.

    Синтаксис

    replacedNode = parentNode.replaceChild(newChild, oldChild);
     
      -
    • newChild элемент на который будет заменен oldChild. В случает если он уже есть в DOM, то сначала он будет удален.
    • +
    • newChild элемент на который будет заменён oldChild. В случает если он уже есть в DOM, то сначала он будет удален.
    • oldChild элемент который будет заменен.
    • -
    • replacedNode замененный элемент. Тоже самое что и oldChild.
    • +
    • replacedNode заменённый элемент. Тоже самое что и oldChild.

    Пример

    // <div>
     //  <span id="childSpan">foo bar</span>
     // </div>
     
    -// Создаем новый пустой элемент
    +// Создаём новый пустой элемент
     // without an ID, any attributes, or any content
     var sp1 = document.createElement("span");
     
     // Присваиваем ему id 'newSpan'
     sp1.setAttribute("id", "newSpan");
     
    -// Создаем строку.
    +// Создаём строку.
     var sp1_content = document.createTextNode("new replacement span element.");
     
     // Добавляем контент в созданный нами узел
     sp1.appendChild(sp1_content);
     
    -// создаем ссылку на существующий элемент который будем заменять
    +// создаём ссылку на существующий элемент который будем заменять
     var sp2 = document.getElementById("childSpan");
     var parentDiv = sp2.parentNode;
     
    diff --git a/files/ru/web/api/node/textcontent/index.html b/files/ru/web/api/node/textcontent/index.html
    index 479fae01e3..7ee831edaf 100644
    --- a/files/ru/web/api/node/textcontent/index.html
    +++ b/files/ru/web/api/node/textcontent/index.html
    @@ -33,7 +33,7 @@ element.textContent = "Это просто текст";
     
     

    Отличие от innerText

    -

    element.innerText был введен Internet Explorer-ом. Работает по тому же принципу за небольшими исключениями:

    +

    element.innerText был введён Internet Explorer-ом. Работает по тому же принципу за небольшими исключениями:

    • textContent получает содержимое всех элементов, включая  {{HTMLElement("script")}} и {{HTMLElement("style")}}, тогда как innerText этого не делает.
    • @@ -50,7 +50,7 @@ element.textContent = "Это просто текст";
      // Дан следующий фрагмент:
       //   <div id="block">Это — <span>просто</span> текст</div>
       
      -// Достаем текстовое содержимое:
      +// Достаём текстовое содержимое:
       var text = document.getElementById("block").textContent;
       // В переменной |text| находится: "Это — просто текст".
       
      diff --git a/files/ru/web/api/nodelist/index.html b/files/ru/web/api/nodelist/index.html
      index 1e3bf20fff..d102e8c70e 100644
      --- a/files/ru/web/api/nodelist/index.html
      +++ b/files/ru/web/api/nodelist/index.html
      @@ -15,7 +15,7 @@ translation_of: Web/API/NodeList
       

      Несмотря на то, что NodeList не является массивом ( Array ), его вполне возможно перебрать при помощи метода forEach(). NodeList также можно конвертировать в Array при помощи {{jsxref("Array.from()")}}

      -

      Однако некоторые старые браузеры на данный момент все еще не поддерживают NodeList.forEach() или Array.from(). Данные ограничения можно обойти, используя {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} ( больше информации на этой странице ).

      +

      Однако некоторые старые браузеры на данный момент все ещё не поддерживают NodeList.forEach() или Array.from(). Данные ограничения можно обойти, используя {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} ( больше информации на этой странице ).

      Свойства

      diff --git a/files/ru/web/api/notification/index.html b/files/ru/web/api/notification/index.html index 0ba6b0d4d1..2f520242d4 100644 --- a/files/ru/web/api/notification/index.html +++ b/files/ru/web/api/notification/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Notification
      {{domxref("Notification.Notification", "Notification()")}}
      -
      Создает новый экземпляр объекта Notification.
      +
      Создаёт новый экземпляр объекта Notification.

      Свойства

      @@ -79,7 +79,7 @@ translation_of: Web/API/Notification
      {{domxref("Notification.title")}} {{readonlyinline}}
      Заголовок уведомления, указывается в опциях как параметр конструктора.
      {{domxref("Notification.vibrate")}} {{readonlyinline}}
      -
      Задает шаблон вибрации для устройств с вибро.
      +
      Задаёт шаблон вибрации для устройств с вибро.

      Не поддерживаемые свойства

      @@ -106,7 +106,7 @@ translation_of: Web/API/Notification

      Устаревшие обработчики событий

      -

      Следующие обработчики событий все еще поддерживаются, как указано в разделе {{anch("browser compatibility")}} ниже, но более не входят в актуальную спецификацию. Небезосновательно можно предположить, что они устарели и могут перестать работать в будущих версиях браузеров.

      +

      Следующие обработчики событий все ещё поддерживаются, как указано в разделе {{anch("browser compatibility")}} ниже, но более не входят в актуальную спецификацию. Небезосновательно можно предположить, что они устарели и могут перестать работать в будущих версиях браузеров.

      {{domxref("Notification.onclose")}}
      @@ -153,21 +153,21 @@ translation_of: Web/API/Notification // Проверка разрешения на отправку уведомлений else if (Notification.permission === "granted") { - // Если разрешено, то создаем уведомление + // Если разрешено, то создаём уведомление var notification = new Notification("Hi there!"); } // В противном случае, запрашиваем разрешение else if (Notification.permission !== 'denied') { Notification.requestPermission(function (permission) { - // Если пользователь разрешил, то создаем уведомление + // Если пользователь разрешил, то создаём уведомление if (permission === "granted") { var notification = new Notification("Hi there!"); } }); } - // В конечном счете, если пользователь отказался от получения + // В конечном счёте, если пользователь отказался от получения // уведомлений, то стоит уважать его выбор и не беспокоить его   // по этому поводу. }
      @@ -180,7 +180,7 @@ translation_of: Web/API/Notification console.log(result); });
    -

    Затем мы запускаем простую функцию spawnNotification(), когда мы хотим вывести уведомление, передающую аргументы для указания тела, иконки и заголовка, которые нам нужны, а затем она создает необходимый объект параметров options и запускает уведомление с помощью конструктора  {{domxref("Notification.Notification","Notification()")}}.

    +

    Затем мы запускаем простую функцию spawnNotification(), когда мы хотим вывести уведомление, передающую аргументы для указания тела, иконки и заголовка, которые нам нужны, а затем она создаёт необходимый объект параметров options и запускает уведомление с помощью конструктора  {{domxref("Notification.Notification","Notification()")}}.

    function spawnNotification(body, icon, title) {
       var options = {
    diff --git a/files/ru/web/api/notifications_api/index.html b/files/ru/web/api/notifications_api/index.html
    index 5641358a8a..8fdc6b6de0 100644
    --- a/files/ru/web/api/notifications_api/index.html
    +++ b/files/ru/web/api/notifications_api/index.html
    @@ -5,7 +5,7 @@ translation_of: Web/API/Notifications_API
     ---
     

    {{DefaultAPISidebar("Web Notifications")}}

    -

    Notifications API позволяют web-страницам контролировать отображение системных уведомлений для конечного пользователя — они находятся вне контекста окна браузера верхнего уровня, поэтому могут отображаться даже если пользователь сменил вкладку или перешел к другому приложению. API были разработаны таким образом, чтобы поддерживать совместимость с существующими системами уведомлений на различных платформах.

    +

    Notifications API позволяют web-страницам контролировать отображение системных уведомлений для конечного пользователя — они находятся вне контекста окна браузера верхнего уровня, поэтому могут отображаться даже если пользователь сменил вкладку или перешёл к другому приложению. API были разработаны таким образом, чтобы поддерживать совместимость с существующими системами уведомлений на различных платформах.

    Концепция и использование

    @@ -19,7 +19,7 @@ translation_of: Web/API/Notifications_API

    Заметка: Для Firefox 44, разрешения для Notifications и Push объединяются. Если было установлено разрешение для уведомлений, push так же будут разрешены .

    -

    Затем создается новое уведомление с помощью конструктора  {{domxref("Notification.Notification","Notification()")}}. В функцию должен быть передан аргумент заголовка и, по желанию, объект настроек, чтобы определить опции, такие как направление и тело текста, иконка, звук уведомления и т.д.

    +

    Затем создаётся новое уведомление с помощью конструктора  {{domxref("Notification.Notification","Notification()")}}. В функцию должен быть передан аргумент заголовка и, по желанию, объект настроек, чтобы определить опции, такие как направление и тело текста, иконка, звук уведомления и т.д.

    {{AvailableInWorkers}}

    diff --git a/files/ru/web/api/page_visibility_api/index.html b/files/ru/web/api/page_visibility_api/index.html index 7cfb82fdba..3ac365ba5d 100644 --- a/files/ru/web/api/page_visibility_api/index.html +++ b/files/ru/web/api/page_visibility_api/index.html @@ -27,9 +27,9 @@ original_slug: Web/API/Видимость_страницы_API

    Давайте рассмотрим несколько способов использования Page Visibility API.

      -
    • На сайте есть слайдер изображений с автопрокруткой, которую можно поставить на паузу, когда пользователь перешел на другую вкладку
    • +
    • На сайте есть слайдер изображений с автопрокруткой, которую можно поставить на паузу, когда пользователь перешёл на другую вкладку
    • Приложение выводит информацию в реальном времени, которую можно не обновлять, пока страница не видна, тем самым уменьшить количество запросов на сервер
    • -
    • Странице нужно понять, когда она должна быть отрисована, так что можно вести точный подсчет количества просмотров
    • +
    • Странице нужно понять, когда она должна быть отрисована, так что можно вести точный подсчёт количества просмотров
    • Сайту нужно выключить звук, когда устройство в режиме ожидания (пользователь нажал кнопку включения, чтобы погасить экран)
    diff --git a/files/ru/web/api/pannernode/index.html b/files/ru/web/api/pannernode/index.html index c8076f49df..a10a3c1eb4 100644 --- a/files/ru/web/api/pannernode/index.html +++ b/files/ru/web/api/pannernode/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/PannerNode
    PannerNode всегда имеет только один вход и один выход: вход может быть моно или стерео, но выход всегда стерео (2 канала); нельзя получить эффекты панорамирования при отсутствии, как минимум двух аудиоканалов!
    -

    PannerNode задает положение в пространстве, скорость распространения и направленность данного сигнала.

    +

    PannerNode задаёт положение в пространстве, скорость распространения и направленность данного сигнала.

    @@ -28,7 +28,7 @@ translation_of: Web/API/PannerNode - + @@ -50,7 +50,7 @@ translation_of: Web/API/PannerNode
    -
    Создает новый экземпляр PannerNode.
    +
    Создаёт новый экземпляр PannerNode.
    @@ -73,7 +73,7 @@ translation_of: Web/API/PannerNode
    {{domxref("PannerNode.coneOuterAngle")}}
    Это значение типа double, представляющее угол конуса (в градусах), вне которого громкость звука будет уменьшена на постоянное значение, определяемое атрибутом coneOuterGain.
    {{domxref("PannerNode.coneOuterGain")}}
    -
    Это значение типа double, представляющее величину снижения уровня громкости вне конуса, определенного атрибутом coneOuterAngle. Значение по умолчанию равно 0, то есть, вне конуса звук не будет слышен.
    +
    Это значение типа double, представляющее величину снижения уровня громкости вне конуса, определённого атрибутом coneOuterAngle. Значение по умолчанию равно 0, то есть, вне конуса звук не будет слышен.
    {{domxref("PannerNode.distanceModel")}}
    Перечислимое значение, определяющее, какой алгоритм будет использован для уменьшения громкости источника звука при удалении его от слушателя.
    {{domxref("PannerNode.maxDistance")}}
    @@ -83,15 +83,15 @@ translation_of: Web/API/PannerNode
    {{domxref("PannerNode.orientationY")}}
    Представляет вертикальное положение вектора источника звука в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}}. Значение по умолчанию равно 0.
    {{domxref("PannerNode.orientationZ")}}
    -
    Представляет продольную (вперед - назад) позицию вектора распространения звука от источника в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}}. Значение по умолчанию равно 0.
    +
    Представляет продольную (вперёд - назад) позицию вектора распространения звука от источника в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}}. Значение по умолчанию равно 0.
    {{domxref("PannerNode.panningModel")}}
    -
    Перечислимое значение, определяющее какой алгоритм пространственной обработки используется для размещения источника звука в трехмерном пространстве.
    +
    Перечислимое значение, определяющее какой алгоритм пространственной обработки используется для размещения источника звука в трёхмерном пространстве.
    {{domxref("PannerNode.positionX")}}
    Представляет горизонтальное положение источника звука в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}}. Значение по умолчанию равно 0.
    {{domxref("PannerNode.positionY")}}
    Представляет вертикальное положение источника звука в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}}. Значение по умолчанию равно 0.
    {{domxref("PannerNode.positionZ")}}
    -
    Представляет позицию источника звука вдоль оси Z (вперед и назад) в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}}. Значение по умолчанию равно 0.
    +
    Представляет позицию источника звука вдоль оси Z (вперёд и назад) в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}}. Значение по умолчанию равно 0.
    {{domxref("PannerNode.refDistance")}}
    Значение типа double, представляющее справочное (опорное) расстояние для уменьшения громкости при удалении источника звука от слушателя.
    {{domxref("PannerNode.rolloffFactor")}}
    @@ -119,7 +119,7 @@ translation_of: Web/API/PannerNode
    {{domxref("PannerNode.setVelocity()")}} {{obsolete_inline}}
    Это устаревший элемент API и его работа в дальнейшем не гарантируется.
    - Определяет вектор распространения звука от источника - как быстро он движется и в каком направлении. В предыдущей версии спецификации, {{domxref("PannerNode")}} имел скорость распространения, которую можно было выдать выше или ниже подключенного потока {{domxref("AudioBufferSourceNode")}}. Эта функция не была четко оговорена и имела ряд проблем, поэтому была удалена из спецификации.
    + Определяет вектор распространения звука от источника - как быстро он движется и в каком направлении. В предыдущей версии спецификации, {{domxref("PannerNode")}} имел скорость распространения, которую можно было выдать выше или ниже подключённого потока {{domxref("AudioBufferSourceNode")}}. Эта функция не была чётко оговорена и имела ряд проблем, поэтому была удалена из спецификации.

    Примеры

    diff --git a/files/ru/web/api/parentnode/prepend/index.html b/files/ru/web/api/parentnode/prepend/index.html index 709a620f85..40017ad44f 100644 --- a/files/ru/web/api/parentnode/prepend/index.html +++ b/files/ru/web/api/parentnode/prepend/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/ParentNode/prepend
    nodesToPrepend
    -
    Один или болле узлов, которые вставляются перед первым дочерним узлом в  ParentNode. Каждый узел может быть определен либо как {{domxref("Node")}} - объект, либо как строка; строки вставляются как новые узлы типа {{domxref("Text")}}.
    +
    Один или болле узлов, которые вставляются перед первым дочерним узлом в  ParentNode. Каждый узел может быть определён либо как {{domxref("Node")}} - объект, либо как строка; строки вставляются как новые узлы типа {{domxref("Text")}}.

    Возвращаемое значение

    diff --git a/files/ru/web/api/performance/index.html b/files/ru/web/api/performance/index.html index b8c2735644..bc721672b6 100644 --- a/files/ru/web/api/performance/index.html +++ b/files/ru/web/api/performance/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/Performance

    Объект этого типа может быть получен в результате вызова атрибута {{domxref("Window.performance")}}, доступного только для чтения.

    -

    Замечание: Этот интерфейс и его составляющие доступны в фоновых потоках выполнения, за исключением случаев, перечисленных ниже. Заметим, что некоторые доступные части интерфейса еще не документированы (подробнее см. разделы документации Performance Timeline и User Timing). Также заметим, что временные метки производительности относятся к текущему контексту. Если Вы создадите метку в основном потоке (или в другом фоновом потоке), то ее нельзя будет увидеть в другом фоновом потоке и наоборот.

    +

    Замечание: Этот интерфейс и его составляющие доступны в фоновых потоках выполнения, за исключением случаев, перечисленных ниже. Заметим, что некоторые доступные части интерфейса ещё не документированы (подробнее см. разделы документации Performance Timeline и User Timing). Также заметим, что временные метки производительности относятся к текущему контексту. Если Вы создадите метку в основном потоке (или в другом фоновом потоке), то её нельзя будет увидеть в другом фоновом потоке и наоборот.

    Свойства

    @@ -56,9 +56,9 @@ translation_of: Web/API/Performance
    {{domxref("Performance.getEntriesByType()")}}
    Возвращает список объектов {{domxref("PerformanceEntry")}} переданного, как аргумент, типа записи.
    {{domxref("Performance.mark()")}}
    -
    Создает {{domxref("DOMHighResTimeStamp","временну́ю метку")}} с заданным именем в буфере записей производительности.
    +
    Создаёт {{domxref("DOMHighResTimeStamp","временну́ю метку")}} с заданным именем в буфере записей производительности.
    {{domxref("Performance.measure()")}}
    -
    Создает именованную {{domxref("DOMHighResTimeStamp","временну́ю метку")}} в буфере записей производительности браузера между двумя определенными метками (известных как start mark (начальная метка) и end mark (конечная метка), соответственно).
    +
    Создаёт именованную {{domxref("DOMHighResTimeStamp","временну́ю метку")}} в буфере записей производительности браузера между двумя определёнными метками (известных как start mark (начальная метка) и end mark (конечная метка), соответственно).
    {{domxref("Performance.now()")}}
    Возвращает объект {{domxref("DOMHighResTimeStamp")}}, представляющий количество миллисекунд, прошедших с начала момента отсчета.
    {{domxref("Performance.setResourceTimingBufferSize()")}}
    diff --git a/files/ru/web/api/performance/now/index.html b/files/ru/web/api/performance/now/index.html index bf7359c969..3c0ae8630b 100644 --- a/files/ru/web/api/performance/now/index.html +++ b/files/ru/web/api/performance/now/index.html @@ -33,7 +33,7 @@ var t1 = performance.now(); console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.") -

    В отличие от других временны́х типов данных, доступных в JavaScript (таких как Date.now), метки времени, возвращенные из performance.now(), не ограничены кратностью в одну миллисекунду, а представляют значение времени как число с плавающей запятой, с точностью до микросекунд.

    +

    В отличие от других временны́х типов данных, доступных в JavaScript (таких как Date.now), метки времени, возвращённые из performance.now(), не ограничены кратностью в одну миллисекунду, а представляют значение времени как число с плавающей запятой, с точностью до микросекунд.

    Также, в противоположность Date.now, значение, возвращаемое из performance.now(), всегда возрастает с постоянной скоростью, независимо от системного времени (которое может быть установлено вручную или изменено программами наподобие NTP).

    diff --git a/files/ru/web/api/pointer_lock_api/index.html b/files/ru/web/api/pointer_lock_api/index.html index f02441f710..380e2b0888 100644 --- a/files/ru/web/api/pointer_lock_api/index.html +++ b/files/ru/web/api/pointer_lock_api/index.html @@ -3,11 +3,11 @@ title: Pointer Lock API slug: Web/API/Pointer_Lock_API translation_of: Web/API/Pointer_Lock_API --- -

    Pointer lock API(прежнее название Mouse Lock API) обеспечивает методы ввода, основанные на движении мыши , а не только абсолютно позиционированых координатах курсора в окне. Это дает вам доступ к необработанным движениям мыши, прикрепляет курсор мыши к любому элементу в окне браузера, предоставляет возможность вычислять координаты мыши не ограниченной областью окна проекции, и скрывает курсор из поля зрения. Это идеальное решение для 3D игр, например.

    +

    Pointer lock API(прежнее название Mouse Lock API) обеспечивает методы ввода, основанные на движении мыши , а не только абсолютно позиционированых координатах курсора в окне. Это даёт вам доступ к необработанным движениям мыши, прикрепляет курсор мыши к любому элементу в окне браузера, предоставляет возможность вычислять координаты мыши не ограниченной областью окна проекции, и скрывает курсор из поля зрения. Это идеальное решение для 3D игр, например.

    Более того, API полезно для любых приложений, которые используют данные мыши для управления движениями, вращения объектов и изменения записей. Например пользователь может управлять наклоном просто двигая мышь, не нажимая ни на какие кнопки. Сами кнопки освобождаются под другие задачи. Примерами могут послужить  программы для просмотра карт или спутниковой съемки.

    -

    Блокировка указателя позволяет вам получить доступ к данным мыши, даже если курсор ушел за границы экрана или браузера. Например, ваши пользователи могут продолжать вращать или управлять 3D моделью движением мыши бесконечно. Без блокировки вращение или управление останавливается, как только курсор достигает края браузера или экрана. Геймеры теперь могут нажимать кнопки и водить курсором взад и вперед, не боясь покинуть игровое поле и случайно переключится на другое приложение.

    +

    Блокировка указателя позволяет вам получить доступ к данным мыши, даже если курсор ушёл за границы экрана или браузера. Например, ваши пользователи могут продолжать вращать или управлять 3D моделью движением мыши бесконечно. Без блокировки вращение или управление останавливается, как только курсор достигает края браузера или экрана. Геймеры теперь могут нажимать кнопки и водить курсором взад и вперёд, не боясь покинуть игровое поле и случайно переключится на другое приложение.

    Основные концепции

    diff --git a/files/ru/web/api/positionoptions/index.html b/files/ru/web/api/positionoptions/index.html index 9f0fb0b77d..e9d175035c 100644 --- a/files/ru/web/api/positionoptions/index.html +++ b/files/ru/web/api/positionoptions/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PositionOptions
    {{domxref("PositionOptions.enableHighAccuracy")}}
    -
    {{domxref("Boolean")}} сообщает приложению, что нужно получить максимально уточненный результат. Если true и устройство поддерживает расширенный поиск локации, то он будет осуществлен. Нужно учитывать, что это может привести к замедлению времени отклика или увеличению потребляемых ресурсов (например расширенному использованию GPS на мобильных устройствах). Если false, устройство будет искать максимально быстро и экономично, что уменьшает точность. По умолчанию: false.
    +
    {{domxref("Boolean")}} сообщает приложению, что нужно получить максимально уточнённый результат. Если true и устройство поддерживает расширенный поиск локации, то он будет осуществлён. Нужно учитывать, что это может привести к замедлению времени отклика или увеличению потребляемых ресурсов (например расширенному использованию GPS на мобильных устройствах). Если false, устройство будет искать максимально быстро и экономично, что уменьшает точность. По умолчанию: false.
    {{domxref("PositionOptions.timeout")}}
    Положительное число в миллисекундах, устанавливающее время, за которое устройство должно вернуть результат. По умолчанию это значение Infinity, что значит, getCurrentPosition() будет работать до тех пор пока не определит положение устройства.
    {{domxref("PositionOptions.maximumAge")}}
    diff --git a/files/ru/web/api/push_api/index.html b/files/ru/web/api/push_api/index.html index 138ca1fb86..7fbf680b2b 100644 --- a/files/ru/web/api/push_api/index.html +++ b/files/ru/web/api/push_api/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/Push_API ---

    {{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}

    -

    Push API дает веб приложениям возможность получать сообщения отправленные с сервера, независимо от того, запущено ли веб приложение в фоне или даже загружено ли оно вообще пользователем. Это позволяет разработчикам посылать асинхронные сообщения и обновления пользователям которые подписались на них, как результат улучшается информированность пользователей о новом контенте

    +

    Push API даёт веб приложениям возможность получать сообщения отправленные с сервера, независимо от того, запущено ли веб приложение в фоне или даже загружено ли оно вообще пользователем. Это позволяет разработчикам посылать асинхронные сообщения и обновления пользователям которые подписались на них, как результат улучшается информированность пользователей о новом контенте

    Примечание: Эта документация охватывает спецификацию W3C Push API ; если вы ищете документацию по запатентованной технологии Firefox OS , смотрите здесь.

    @@ -38,10 +38,10 @@ translation_of: Web/API/Push_API

    Каждая подписка уникальна по отношению к service worker. Адрес для подписки это уникальный capability URL: все что нужно чтобы отослать сообщение вашему приложению это адрес. Однако это URL необходимо держать в секрете, иначе любое другое приложение сможет слать push уведомление к вашему приложению.

    -

    Использование service worker для получения push уведомлений может привести к повышенному потреблению ресурсов, например это может влиять на расход батареи. Во всех браузерах это работает по разному - нет стандарта на этот счет. К примеру Firefox позволяет лишь ограниченное число уведомлений которое может быть отправлено приложению, а Chrome не имеет таких ограничений, однако обязывает показывать уведомление пользователю каждый раз, чтобы пользователь мог решить хочет он или нет принимать их дальше.

    +

    Использование service worker для получения push уведомлений может привести к повышенному потреблению ресурсов, например это может влиять на расход батареи. Во всех браузерах это работает по разному - нет стандарта на этот счёт. К примеру Firefox позволяет лишь ограниченное число уведомлений которое может быть отправлено приложению, а Chrome не имеет таких ограничений, однако обязывает показывать уведомление пользователю каждый раз, чтобы пользователь мог решить хочет он или нет принимать их дальше.

    -

    Примечание: Начиная с Gecko 44, разрешенная квота push-уведомлений для каждого приложения не увеличивается, в случае если новое уведомление срабатывает когда другое все еще должна отображаться в течение трех секунд. Это обрабатывает случаи, когда получены несколько Push уведомлений подряд и не все генерируют видимое уведомление.

    +

    Примечание: Начиная с Gecko 44, разрешённая квота push-уведомлений для каждого приложения не увеличивается, в случае если новое уведомление срабатывает когда другое все ещё должна отображаться в течение трёх секунд. Это обрабатывает случаи, когда получены несколько Push уведомлений подряд и не все генерируют видимое уведомление.

    diff --git a/files/ru/web/api/pushmanager/subscribe/index.html b/files/ru/web/api/pushmanager/subscribe/index.html index a264d593d7..008a7438d8 100644 --- a/files/ru/web/api/pushmanager/subscribe/index.html +++ b/files/ru/web/api/pushmanager/subscribe/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/PushManager/subscribe

    Метод subscribe() интерфейса {{domxref("PushManager")}} позволяет осуществлять подписку на push-уведомления.

    -

    Возвращает {{jsxref("Promise")}}, который разрешается в объект {{domxref("PushSubscription")}}, содержащий детали push-подписки. Новая push-подписка создается в случае, если сервис-воркер не имеет существующей подписки.

    +

    Возвращает {{jsxref("Promise")}}, который разрешается в объект {{domxref("PushSubscription")}}, содержащий детали push-подписки. Новая push-подписка создаётся в случае, если сервис-воркер не имеет существующей подписки.

    Синтакс

    @@ -52,7 +52,7 @@ navigator.serviceWorker.register('serviceworker.js').then( // при помощи XMLHttpRequest. }, function(error) { // При разработке это часто помогает отлавливать ошибки в консоли. - // В продакшен-среде это также может быть полезно для отправки отчета + // В продакшен-среде это также может быть полезно для отправки отчёта // об ошибках на сервер приложения. console.log(error); } diff --git a/files/ru/web/api/range/surroundcontents/index.html b/files/ru/web/api/range/surroundcontents/index.html index 5108735c19..863ef08fd7 100644 --- a/files/ru/web/api/range/surroundcontents/index.html +++ b/files/ru/web/api/range/surroundcontents/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Range/surroundContents

    Этот метод приблизительно эквивалентен коду newNode.appendChild(range.extractContents()); range.insertNode(newNode). После его работы крайние точки диапазона будут включать в себя newNode.

    -

    Если {{ domxref("Range") }} разделяет любой не текстовый элемент хотя бы одной точкой, произойдет исключение. В отличие от альтернативы выше, если в диапазоне есть частично выделенные элементы, они не будут клонированы, а вместо этого производит ошибка.

    +

    Если {{ domxref("Range") }} разделяет любой не текстовый элемент хотя бы одной точкой, произойдёт исключение. В отличие от альтернативы выше, если в диапазоне есть частично выделенные элементы, они не будут клонированы, а вместо этого производит ошибка.

    Синтаксис

    diff --git a/files/ru/web/api/response/index.html b/files/ru/web/api/response/index.html index 30f50ac1a0..e32d4d23b9 100644 --- a/files/ru/web/api/response/index.html +++ b/files/ru/web/api/response/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Response

    Интерфейс Response из Fetch API представляет собой ответ на запрос.

    -

    Вы можете создать новый экземпляр объекта Response используя конструктор {{domxref("Response.Response()")}}, но скорее всего вы столкнетесь с объектом Response, как результат какой-нибудь API операции — например, service worker {{domxref("Fetchevent.respondWith")}}, или {{domxref("WindowOrWorkerGlobalScope.fetch()")}}.

    +

    Вы можете создать новый экземпляр объекта Response используя конструктор {{domxref("Response.Response()")}}, но скорее всего вы столкнётесь с объектом Response, как результат какой-нибудь API операции — например, service worker {{domxref("Fetchevent.respondWith")}}, или {{domxref("WindowOrWorkerGlobalScope.fetch()")}}.

    Конструктор

    diff --git a/files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html b/files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html index 227387085a..4cc50b9e0b 100644 --- a/files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html +++ b/files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html @@ -7,9 +7,9 @@ translation_of: Web/API/RTCPeerConnection/canTrickleIceCandidates
    -
    Свойство только для чтения canTrickleIceCandidates , объекта {{domxref("RTCPeerConnection")}}, возвращает значение типа {{jsxref("Boolean")}} , которое указывает на то, может ли удаленный пир принимать кандидаты, согласно спецификации  trickled ICE candidates.
    +
    Свойство только для чтения canTrickleIceCandidates , объекта {{domxref("RTCPeerConnection")}}, возвращает значение типа {{jsxref("Boolean")}} , которое указывает на то, может ли удалённый пир принимать кандидаты, согласно спецификации  trickled ICE candidates.
    -

    ICE trickling (ICE просачивание)  - процесс продолжающейся отправки кандидатов, после первоначальной передачи предложения или ответа удаленному пиру..

    +

    ICE trickling (ICE просачивание)  - процесс продолжающейся отправки кандидатов, после первоначальной передачи предложения или ответа удалённому пиру..

    Свойство инициализируется только после вызова метода  {{domxref("RTCPeerConnection.setRemoteDescription()")}}.  Было бы идеально, если бы ваш протокол сигнализации предоставлял способ определения поддержки просачивания кандидатов, для того, что бы не полагаться на это свойство. Браузер, поддерживающий WebRTC, всегда будет поддерживать ICE просачивание.

    @@ -21,10 +21,10 @@ translation_of: Web/API/RTCPeerConnection/canTrickleIceCandidates

    Значение

    -

    Тип  {{jsxref("Boolean")}} содержит true , если удаленный пир может принимать просвечивающие ICE кандидаты, и  false , если не может. Если удаленный пир еще не инициализирован, свойство возвращает null.

    +

    Тип  {{jsxref("Boolean")}} содержит true , если удалённый пир может принимать просвечивающие ICE кандидаты, и  false , если не может. Если удалённый пир ещё не инициализирован, свойство возвращает null.

    -

    Примечание : Значение свойства инициализируется после того, как локальный пир вызовет метод {{domxref("RTCPeerConnection.setRemoteDescription()")}};  Возвращаемый объект описания используется агентом ICE для определения возможности удаленного пира поддерживать просачивающихся  ICE кандидатов.

    +

    Примечание : Значение свойства инициализируется после того, как локальный пир вызовет метод {{domxref("RTCPeerConnection.setRemoteDescription()")}};  Возвращаемый объект описания используется агентом ICE для определения возможности удалённого пира поддерживать просачивающихся  ICE кандидатов.

    Пример

    diff --git a/files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html b/files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html index b0ddb77eb3..09fa8f0f88 100644 --- a/files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html +++ b/files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/RTCPeerConnection/currentLocalDescription ---

    {{WebRTCSidebar}} 

    -

    Только для чтения свойство  RTCPeerConnection.currentLocalDescription возвращает объект  {{domxref("RTCSessionDescription")}} , описывающий локальную сторону соединения, как  самый последний, удачно согласованный объект описания, с момента последнего завершения согласования  {{domxref("RTCPeerConnection")}} и соединения с удаленным пиром (участником соединения) . 

    +

    Только для чтения свойство  RTCPeerConnection.currentLocalDescription возвращает объект  {{domxref("RTCSessionDescription")}} , описывающий локальную сторону соединения, как  самый последний, удачно согласованный объект описания, с момента последнего завершения согласования  {{domxref("RTCPeerConnection")}} и соединения с удалённым пиром (участником соединения) . 

    Для изменения currentLocalDescription, вызовите метод {{domxref("RTCPeerConnection.setLocalDescription()")}}, который запускает серию событий, приводящих к присвоению значения. Более подробно о том, что точно происходит и почему изменения происходят не сразу, смотрите   {{SectionOnPage("/en-US/docs/Web/API/WebRTC_API/Connectivity", "Ожидающие и текущие объекты описания")}}.

    @@ -34,7 +34,7 @@ if (sd) { sd.sdp + "'"); } else { - alert("Локальной сессии еще нет."); + alert("Локальной сессии ещё нет."); } diff --git a/files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html b/files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html index a894369844..8793f0e379 100644 --- a/files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html +++ b/files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/RTCPeerConnection/currentRemoteDescription ---

    {{WebRTCSidebar}}

    -

    Только для чтения свойство RTCPeerConnection.currentRemoteDescription возвращает объект  {{domxref("RTCSessionDescription")}} , представляющий удаленную сторону соединения, как последний, успешно согласованный объект данных, с момента завершения согласования и установки соединения объектом {{domxref("RTCPeerConnection")}} с удаленным пиром. 

    +

    Только для чтения свойство RTCPeerConnection.currentRemoteDescription возвращает объект  {{domxref("RTCSessionDescription")}} , представляющий удалённую сторону соединения, как последний, успешно согласованный объект данных, с момента завершения согласования и установки соединения объектом {{domxref("RTCPeerConnection")}} с удалённым пиром. 

    Для изменения значения свойства currentRemoteDescription, вызовите метод {{domxref("RTCPeerConnection.setRemoteDescription()")}}, который запускает серию событий, приводящих к установке нового значения. Подробнее о том, что точно происходит и почему изменение значения не происходит немедленно, смотрите {{SectionOnPage("/en-US/docs/Web/API/WebRTC_API/Connectivity", "Ожидающие и текущие объекты описания")}}.

    @@ -19,7 +19,7 @@ translation_of: Web/API/RTCPeerConnection/currentRemoteDescription

    Возвращаемое значение

    -

    Текущий объект описания, представляющий удаленную сторону соединения, если она присутствует. Если ни один объект описания не установлен, значением будет null.

    +

    Текущий объект описания, представляющий удалённую сторону соединения, если она присутствует. Если ни один объект описания не установлен, значением будет null.

    Пример

    diff --git a/files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html b/files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html index 8bd86fa3e5..4cf9d46d46 100644 --- a/files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html +++ b/files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/RTCPeerConnection/icecandidate_event ---
    {{WebRTCSidebar}}
    -

    Событие icecandidate отправляется {{domxref("RTCPeerConnection")}} когда {{domxref("RTCIceCandidate")}} был идентифицирован и добавлен к локальному клиенту (local peer) через вызов {{domxref("RTCPeerConnection.setLocalDescription()")}}. Обработчик события должен передать кандидата удаленному клиенту (remote peer) по каналу сигнализации (signaling channel), чтобы удаленный клиент (remote peer) смог добавить его в свой набор удаленных кандидатов (remote candidates).

    +

    Событие icecandidate отправляется {{domxref("RTCPeerConnection")}} когда {{domxref("RTCIceCandidate")}} был идентифицирован и добавлен к локальному клиенту (local peer) через вызов {{domxref("RTCPeerConnection.setLocalDescription()")}}. Обработчик события должен передать кандидата удалённому клиенту (remote peer) по каналу сигнализации (signaling channel), чтобы удалённый клиент (remote peer) смог добавить его в свой набор удалённых кандидатов (remote candidates).

    1
    Режим подсчета каналовРежим подсчёта каналов "clamped-max"
    @@ -34,7 +34,7 @@ translation_of: Web/API/RTCPeerConnection/icecandidate_event

    Делимся (Sharing) новым кандидатом

    -

    В основном события icecandidate происходят, чтобы указать, что новый кандидат был построен (gathered). Этого кандидата нужно доставить удаленному клиенту (remote peer) через канал сигнализации (signaling channel), которым управляет ваш код.

    +

    В основном события icecandidate происходят, чтобы указать, что новый кандидат был построен (gathered). Этого кандидата нужно доставить удалённому клиенту (remote peer) через канал сигнализации (signaling channel), которым управляет ваш код.

    rtcPeerConnection.onicecandidate = (event) => {
       if (event.candidate) {
    @@ -45,7 +45,7 @@ translation_of: Web/API/RTCPeerConnection/icecandidate_event
     }
     
    -

    Удаленный клиент (peer), получив кандидата, добавит этого кандидата в свой пул кандидатов, используя вызов {{domxref("RTCPeerConnection.addIceCandidate", "addIceCandidate()")}}, передавая в {{domxref("RTCPeerConnectionIceEvent.candidate", "candidate")}} строку, которую вы передали с помощью сервера сигнализации (signaling server).

    +

    Удалённый клиент (peer), получив кандидата, добавит этого кандидата в свой пул кандидатов, используя вызов {{domxref("RTCPeerConnection.addIceCandidate", "addIceCandidate()")}}, передавая в {{domxref("RTCPeerConnectionIceEvent.candidate", "candidate")}} строку, которую вы передали с помощью сервера сигнализации (signaling server).

    Indicating the end of a generation of candidates

    diff --git a/files/ru/web/api/rtcpeerconnection/index.html b/files/ru/web/api/rtcpeerconnection/index.html index 5103da41dc..676d536252 100644 --- a/files/ru/web/api/rtcpeerconnection/index.html +++ b/files/ru/web/api/rtcpeerconnection/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/RTCPeerConnection ---

    {{APIRef('WebRTC')}}

    -

    Интерфейс RTCPeerConnection представляет соединение WebRTC между локальным пиром (участником соединения) на локальном компьютере и удаленным пиром на удаленном компьютере. Он предоставляет методы для соединения с удаленным участником соединения, обслуживания, мониторинга и закрытия соединения.

    +

    Интерфейс RTCPeerConnection представляет соединение WebRTC между локальным пиром (участником соединения) на локальном компьютере и удалённым пиром на удалённом компьютере. Он предоставляет методы для соединения с удалённым участником соединения, обслуживания, мониторинга и закрытия соединения.

    {{InheritanceDiagram}}

    @@ -17,7 +17,7 @@ translation_of: Web/API/RTCPeerConnection
    {{domxref("RTCPeerConnection.createDTMFSender()")}} {{obsolete_inline}}
    -
    Создает новый объект типа {{domxref("RTCDTMFSender")}}, связанный с определенным объектом {{domxref("MediaStreamTrack")}}, который сможет отправить объект сигнализации {{Glossary("DTMF")}} поверх соединения..
    +
    Создаёт новый объект типа {{domxref("RTCDTMFSender")}}, связанный с определённым объектом {{domxref("MediaStreamTrack")}}, который сможет отправить объект сигнализации {{Glossary("DTMF")}} поверх соединения..

    События 

    @@ -29,10 +29,10 @@ translation_of: Web/API/RTCPeerConnection
    Событие объекта RTCPeerConnection возникает, когда общий статус объекта соединения RTCPeerConnection изменился.
    Так же, доступно через свойство установки обработчика события  {{domxref("RTCPeerConnection.onconnectionstatechange", "onconnectionstatechange")}}.
    {{domxref("RTCPeerConnection.datachannel_event", "datachannel")}}
    -
    Событие объекта RTCPeerConnection возникает, когда удаленный пир (участник соединения) добавляет объект данных {{domxref("RTCDataChannel")}}  в текущее соединение.
    +
    Событие объекта RTCPeerConnection возникает, когда удалённый пир (участник соединения) добавляет объект данных {{domxref("RTCDataChannel")}}  в текущее соединение.
    Так же, доступно через свойство установки обработчика события {{domxref("RTCPeerConnection.ondatachannel", "ondatachannel")}}.
    {{domxref("RTCPeerConnection.icecandidate_event", "icecandidate")}}
    -
    Событие объекта RTCPeerConnection возникает, когда  специальный объект ICE кандидата (RTCIceCandidate) сгенерирован RTCPeerConnection и готов для передачи удаленному пиру по каналу сигнализации.Сам сгенерированный объект кандидата передается в параметр вызванного обработчика. 
    +
    Событие объекта RTCPeerConnection возникает, когда  специальный объект ICE кандидата (RTCIceCandidate) сгенерирован RTCPeerConnection и готов для передачи удалённому пиру по каналу сигнализации.Сам сгенерированный объект кандидата передаётся в параметр вызванного обработчика. 
    Так же, доступно через свойство установки обработчика события {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}}.
    {{domxref("RTCPeerConnection.icecandidateerror_event", "icecandidateerror")}}
    Событие типа ошибки  {{domxref("RTCPeerConnectionIceErrorEvent")}} , возникает на объекте соединения при генерации ICE кандидата (RTCIceCandidate), если при этом возникла ошибка. Свойства объекта ошибки, возвращаемого в обработчик,  описывают подробности ошибки.
    @@ -41,10 +41,10 @@ translation_of: Web/API/RTCPeerConnection
    Событие объекта RTCPeerConnection возникает при изменении статуса ICE соединения. К примеру, ICE соединение разорвано.
    Так же, доступно через свойство установки обработчика события{{domxref("RTCPeerConnection.oniceconnectionstatechange", "oniceconnectionstatechange")}} .
    {{domxref("RTCPeerConnection.icegatheringstatechange_event", "icegatheringstatechange")}}
    -
    Событие объекта RTCPeerConnection, возникает, когда статус сборки, представленный классом {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}}, изменяется. Это указывает на то, что :  согласование соединения ICE еще не началось (статус равен значению "new"); согласование соединения ICE началось (статус равен значению "gathering"); согласование ICE  соединения завершено (статус равен значению "complete").
    +
    Событие объекта RTCPeerConnection, возникает, когда статус сборки, представленный классом {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}}, изменяется. Это указывает на то, что :  согласование соединения ICE ещё не началось (статус равен значению "new"); согласование соединения ICE началось (статус равен значению "gathering"); согласование ICE  соединения завершено (статус равен значению "complete").
    Так же, доступно через свойство установки обработчика {{domxref("RTCPeerConnection.onicegatheringstatechange", "onicegatheringstatechange")}} .
    {{domxref("RTCPeerConnection.isolationchange_event", "isolationchange")}}
    -
    Событие объекта RTCPeerConnection возникает, когда свойство {{domxref("MediaStreamTrack.isolated", "isolated")}} на одном из объектов  {{domxref("MediaStreamTrack")}} , связанного с соединением изменяет свое значение. Объект трека является изолированным {{domxref("MediaStreamTrack.isolated", "isolated")}}, если его содержимое не может быть доступно содержащему его документу, по причине невозможности аутентификации, или объект трека прибыл не из источника происхождения страницы.
    +
    Событие объекта RTCPeerConnection возникает, когда свойство {{domxref("MediaStreamTrack.isolated", "isolated")}} на одном из объектов  {{domxref("MediaStreamTrack")}} , связанного с соединением изменяет своё значение. Объект трека является изолированным {{domxref("MediaStreamTrack.isolated", "isolated")}}, если его содержимое не может быть доступно содержащему его документу, по причине невозможности аутентификации, или объект трека прибыл не из источника происхождения страницы.
    Так же, доступно через свойство установки обработчика {{domxref("RTCPeerConnection.onisolationchange", "onisolationchange")}}.
    {{domxref("RTCPeerConnection.negotiationneeded_event", "negotiationneeded")}}
    Событие объекта RTCPeerConnection возникает, когда необходимо запустить согласование (пересогласование) ICE соединения; может произойти при первом открытии соединения , или при необходимости принятия изменений условий сети. Получатель должен ответить, создав предложение и отправив его другому партнеру. 
    @@ -83,7 +83,7 @@ translation_of: Web/API/RTCPeerConnection

    Перечисление RTCBundlePolicy 

    -

    Перечисление RTCBundlePolicy (политика сборки пакетов) определяет строковые константы, которые используются для запроса определенной политики при сборке  ICE кандидатов, в случае, если удаленный участник соединения (удаленная точка) не совместим со стандартом SDP BUNDLE standard  для объединения нескольких медиапотоков в один транспортный пакет.

    +

    Перечисление RTCBundlePolicy (политика сборки пакетов) определяет строковые константы, которые используются для запроса определённой политики при сборке  ICE кандидатов, в случае, если удалённый участник соединения (удалённая точка) не совместим со стандартом SDP BUNDLE standard  для объединения нескольких медиапотоков в один транспортный пакет.

     Примечание : В технических терминах BUNDLE (пакет) позволяет всем медиапотокам между двумя пирами проходить через один 5 - ти элементный кортеж (тип транспортного протокола передачи сообщений при установки  TCP, UDP, и ICMP соединений, состоящий из пяти элементов анализа данных). То есть, с одного IP-адреса и порта на одном узле на один IP-адрес и порт на другом узле с использованием одного и того же транспортного протокола.

    @@ -100,16 +100,16 @@ translation_of: Web/API/RTCPeerConnection
    - + - +
    "balanced" -

    Сбалансированный. Агент ICE изначально создает по одному объекту  {{domxref ("RTCDtlsTransport")}} для каждого типа добавляемого контента: аудио, видео и каналов данных. Если  удаленная конечная точка не опознает пакеты, то каждый из этих DTLS транспортов обрабатывает все коммуникации для одного типа данных.

    +

    Сбалансированный. Агент ICE изначально создаёт по одному объекту  {{domxref ("RTCDtlsTransport")}} для каждого типа добавляемого контента: аудио, видео и каналов данных. Если  удалённая конечная точка не опознает пакеты, то каждый из этих DTLS транспортов обрабатывает все коммуникации для одного типа данных.

    "max-compat"Максимально совместимый. Агент ICE изначально создает один объект {{domxref ("RTCDtlsTransport")}} для каждой медиа-дорожки и отдельный для каналов данных. Если удаленная точка не поддерживает опознавание пакета, все согласовывается на этих отдельных DTLS транспортахМаксимально совместимый. Агент ICE изначально создаёт один объект {{domxref ("RTCDtlsTransport")}} для каждой медиа-дорожки и отдельный для каналов данных. Если удалённая точка не поддерживает опознавание пакета, все согласовывается на этих отдельных DTLS транспортах
    "max-bundle"Максимальный пакет. Агент ICE изначально создает только один объект {{domxref ("RTCDtlsTransport")}} для переноса всех данных RTCPeerConnection. Если удаленная  точка не поддерживает опознавание пакета, то согласовывается только одна дорожка, а остальные игнорируются.Максимальный пакет. Агент ICE изначально создаёт только один объект {{domxref ("RTCDtlsTransport")}} для переноса всех данных RTCPeerConnection. Если удалённая  точка не поддерживает опознавание пакета, то согласовывается только одна дорожка, а остальные игнорируются.
    @@ -128,15 +128,15 @@ translation_of: Web/API/RTCPeerConnection "new" - ICE агент собирает адреса или ожидает получения удаленных кандидатов от вызова метода {{domxref("RTCPeerConnection.addIceCandidate()")}}. Или все сразу. + ICE агент собирает адреса или ожидает получения удалённых кандидатов от вызова метода {{domxref("RTCPeerConnection.addIceCandidate()")}}. Или все сразу. "checking" - ICE агент получил один или несколько удаленных кандидатов и проверяет парность локального и удаленного кандидатов относительно друг друга, пытаясь обнаружить совместимости. Но еще не обнаружил пару, соответствующую устанавливаемому удаленному соединению.Не исключено, что сборка кандидатов продолжиться. + ICE агент получил один или несколько удалённых кандидатов и проверяет парность локального и удалённого кандидатов относительно друг друга, пытаясь обнаружить совместимости. Но ещё не обнаружил пару, соответствующую устанавливаемому удалённому соединению.Не исключено, что сборка кандидатов продолжиться. "connected" - Совместимая парность локального и удаленного кандидатов найдена для всех компонентов соединения, и соединение было установлено. Не исключено продолжение сборки и проверки кандидатов в процессе соединения, для наилучший совместимости. + Совместимая парность локального и удалённого кандидатов найдена для всех компонентов соединения, и соединение было установлено. Не исключено продолжение сборки и проверки кандидатов в процессе соединения, для наилучший совместимости. "completed" @@ -144,11 +144,11 @@ translation_of: Web/API/RTCPeerConnection "failed" - Агент ICE проверил все пары кандидатов между собой и не нашел совместимых сопоставлений для всех компонентов соединения. Или не нашел совместимых соединений для некоторых компонентов.  + Агент ICE проверил все пары кандидатов между собой и не нашёл совместимых сопоставлений для всех компонентов соединения. Или не нашёл совместимых соединений для некоторых компонентов.  "disconnected" - Проверяет, что компоненты все еще подключены, хотя бы для одного объекта {{domxref("RTCPeerConnection")}}.  Это менее строгий тест, чем "failed", и он может периодически запускаться и разрешаться спонтанно в менее надежных сетях, или во время временного отключения. Когда проблема исчезнет, ​​соединение может вернуться в состояние "connected".  + Проверяет, что компоненты все ещё подключены, хотя бы для одного объекта {{domxref("RTCPeerConnection")}}.  Это менее строгий тест, чем "failed", и он может периодически запускаться и разрешаться спонтанно в менее надёжных сетях, или во время временного отключения. Когда проблема исчезнет, ​​соединение может вернуться в состояние "connected".  "closed" @@ -171,7 +171,7 @@ translation_of: Web/API/RTCPeerConnection "new" - Соединение только что создано, и еще не имело сетевой активности. + Соединение только что создано, и ещё не имело сетевой активности. "gathering" @@ -179,7 +179,7 @@ translation_of: Web/API/RTCPeerConnection "complete" - Агент ICE завершил сборку кандидатов. Если произойдет, что-то (например, добавление нового ICE сервера), для чего потребуется новая сборка кандидатов, статус переключиться в значение  "gathering" и начнется пересборка кандидатов. + Агент ICE завершил сборку кандидатов. Если произойдёт, что-то (например, добавление нового ICE сервера), для чего потребуется новая сборка кандидатов, статус переключиться в значение  "gathering" и начнётся пересборка кандидатов. @@ -202,7 +202,7 @@ translation_of: Web/API/RTCPeerConnection "public" {{obsolete_inline}} - Будут рассматриваться  ICE кандидаты, только имеющие публичные IP адреса. Удален в спецификации от 13 мая 2016 (working draft). + Будут рассматриваться  ICE кандидаты, только имеющие публичные IP адреса. Удалён в спецификации от 13 мая 2016 (working draft). "relay" @@ -233,11 +233,11 @@ translation_of: Web/API/RTCPeerConnection "connected" - Соединен. Каждый объект ICE передачи, использующийся соединением либо используется  (имеет статус "connected" или "completed") , либо закрыт  (имеет статус "closed"); кроме того, по крайней мере один объект передачи имеет статус либо  "connected" , либо "completed". + Соединён. Каждый объект ICE передачи, использующийся соединением либо используется  (имеет статус "connected" или "completed") , либо закрыт  (имеет статус "closed"); кроме того, по крайней мере один объект передачи имеет статус либо  "connected" , либо "completed". "disconnected" - Разъединен. По меньшей мере один из объектов ICE передачи в соединении имеет статус "disconnected"  и ни один из объекто передачи не находиться в статусе : "failed", "connecting", или  "checking". + Разъединён. По меньшей мере один из объектов ICE передачи в соединении имеет статус "disconnected"  и ни один из объекто передачи не находиться в статусе : "failed", "connecting", или  "checking". "failed" @@ -301,15 +301,15 @@ translation_of: Web/API/RTCPeerConnection "have-remote-offer" - Имеет удаленное предложение. Удаленный пир создал предложение, использовал сервер сигнализации для передачи этого предложения локальному пользователю, которое было установлено им в параметр, через вызов метода {{domxref("RTCPeerConnection.setRemoteDescription()")}}. + Имеет удалённое предложение. Удалённый пир создал предложение, использовал сервер сигнализации для передачи этого предложения локальному пользователю, которое было установлено им в параметр, через вызов метода {{domxref("RTCPeerConnection.setRemoteDescription()")}}. "have-local-pranswer" - Имеет локальный предварительный ответ. Предложение удаленного пира было применено, и ответ был создан (обычно, через вызов метода {{domxref("RTCPeerConnection.createAnswer()")}}) и использовано в параметре метода установки локального дескриптора {{domxref("RTCPeerConnection.setLocalDescription()")}}. Этот предварительный ответ описывает поддерживаемые медиа форматы и тому подобное. Но он не имееет включенных в него  полного набора ICE кандидатов. Позже, дополнительные кандидаты будут доставлены отдельно. + Имеет локальный предварительный ответ. Предложение удалённого пира было применено, и ответ был создан (обычно, через вызов метода {{domxref("RTCPeerConnection.createAnswer()")}}) и использовано в параметре метода установки локального дескриптора {{domxref("RTCPeerConnection.setLocalDescription()")}}. Этот предварительный ответ описывает поддерживаемые медиа форматы и тому подобное. Но он не имееет включённых в него  полного набора ICE кандидатов. Позже, дополнительные кандидаты будут доставлены отдельно. "have-remote-pranswer" - Имеет предварительный удаленный ответ. Предварительный удаленный ответ был получен и успешно применен в ответ на предложение, отправленное ранее и установленное методом setLocalDescription(). + Имеет предварительный удалённый ответ. Предварительный удалённый ответ был получен и успешно применён в ответ на предложение, отправленное ранее и установленное методом setLocalDescription(). "closed" {{obsolete_inline}} diff --git a/files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html b/files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html index 072496379e..25eaa93c7f 100644 --- a/files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html +++ b/files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/RTCPeerConnection/RTCPeerConnection ---
    {{APIRef("WebRTC")}}
    -

    Конструктор RTCPeerConnection() возвращает  новый экземпляр объекта {{domxref("RTCPeerConnection")}}, который представляет соединение между локальным устройством и удаленным пиром (участником соединения)

    +

    Конструктор RTCPeerConnection() возвращает  новый экземпляр объекта {{domxref("RTCPeerConnection")}}, который представляет соединение между локальным устройством и удалённым пиром (участником соединения)

    Синтаксис

    diff --git a/files/ru/web/api/screen_capture_api/using_screen_capture/index.html b/files/ru/web/api/screen_capture_api/using_screen_capture/index.html index d9d89652c2..7677339be1 100644 --- a/files/ru/web/api/screen_capture_api/using_screen_capture/index.html +++ b/files/ru/web/api/screen_capture_api/using_screen_capture/index.html @@ -8,7 +8,7 @@ translation_of: Web/API/Screen_Capture_API/Using_Screen_Capture

    В этой статье изучается использование программного интерфейса  Screen Capture и его метода {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} для захвата потока экрана (всего или его части), его записи или передачи через сессию WebRTC .

    -

    Примечание : Полезно отметить, что последние версии библиотеки WebRTC adapter.js  включают реализацию метода getDisplayMedia() для обмена изображениями с экрана на браузерах, которые его поддерживают, но еще не реализуют текущий стандартный интерфейс, который реализован в последних версиях  Chrome, Edge, и Firefox.

    +

    Примечание : Полезно отметить, что последние версии библиотеки WebRTC adapter.js  включают реализацию метода getDisplayMedia() для обмена изображениями с экрана на браузерах, которые его поддерживают, но ещё не реализуют текущий стандартный интерфейс, который реализован в последних версиях  Chrome, Edge, и Firefox.

    Захват содержимого экрана

    @@ -41,7 +41,7 @@ translation_of: Web/API/Screen_Capture_API/Using_Screen_Capture .catch(err => { console.error("Error:" + err); return null; }); } -

    В любом случае {{Glossary("user agent")}} ответить отображением интерфейса диалога, запрашивающий у пользователя размер области захвата экрана. Обе реализации функции startCapture() возвращают объект типа  {{domxref("MediaStream")}} , содержащий захваченное с экрана изображение (съемку ?).

    +

    В любом случае {{Glossary("user agent")}} ответить отображением интерфейса диалога, запрашивающий у пользователя размер области захвата экрана. Обе реализации функции startCapture() возвращают объект типа  {{domxref("MediaStream")}} , содержащий захваченное с экрана изображение (съёмку ?).

    Смотрим {{anch("Options and constraints")}}, ниже, подробнее о том, как указать желаемый тип поверхности, а также о других способах настройки результирующего потока.

    @@ -55,13 +55,13 @@ translation_of: Web/API/Screen_Capture_API/Using_Screen_Capture

    Видимые или логические  поверхности отображения

    -

    Для целей интерфейса Screen Capture API, поверхность отображения - это любой объект контента, который может быть выбран API для целей совместного (общего) использования.Поверхности общего доступа включают в себя содержимое вкладки браузера, полное окно, все приложения окна, объединенные в одну поверхность, и монитор (или группу мониторов, объединенных в одну поверхность).

    +

    Для целей интерфейса Screen Capture API, поверхность отображения - это любой объект контента, который может быть выбран API для целей совместного (общего) использования.Поверхности общего доступа включают в себя содержимое вкладки браузера, полное окно, все приложения окна, объединённые в одну поверхность, и монитор (или группу мониторов, объединённых в одну поверхность).

    Есть два типа поверхности дисплея. Видимая поверхность отображения - это поверхность, которая полностью видна на экране, например, переднее окно или вкладка или весь экран.

    Логическая поверхность отображения - это поверхность, которая частично или полностью скрыта, либо в некоторой степени перекрывается  другим объектом, либо полностью скрытая или находиться вне экрана. Эти поверхности обрабатываются по другому. Как правило, браузер предоставляет изображение, которое каким-то образом скрывает скрытую часть поверхности логического дисплея, например размытие или замена цветом или рисунком. Это сделано из соображений безопасности, поскольку контент, который не может быть просмотрен пользователем, может содержать данные, которыми они не хотят делиться.

    -

    Браузер может разрешить захват всего содержимого скрытого окна после получения разрешения от пользователя на это. В этом случае браузер может содержать затушеванный контент, либо путем получения текущего содержимого скрытой части окна, либо путем предоставления самого последнего видимого содержимого, если текущее содержимое недоступно.

    +

    Браузер может разрешить захват всего содержимого скрытого окна после получения разрешения от пользователя на это. В этом случае браузер может содержать затушёванный контент, либо путём получения текущего содержимого скрытой части окна, либо путём предоставления самого последнего видимого содержимого, если текущее содержимое недоступно.

    Свойства и ограничения

    @@ -96,7 +96,7 @@ translation_of: Web/API/Screen_Capture_API/Using_Screen_Capture

    К примеру, если определить ограничение  {{domxref("MediaTrackConstraints.width", "width")}} для видео, оно применится как масштабирование видео, после того, как пользователь выберет область, и не устанавливает ограничение на размер самого источника.

    -

    Примечание : Ограничения никогда не вызывают изменений в списке источников, доступных для захвата API Sharing Screen. Это гарантирует, что веб-приложения не могут заставить пользователя делиться определенным контентом, ограничивая исходный список, пока не останется только один элемент.

    +

    Примечание : Ограничения никогда не вызывают изменений в списке источников, доступных для захвата API Sharing Screen. Это гарантирует, что веб-приложения не могут заставить пользователя делиться определённым контентом, ограничивая исходный список, пока не останется только один элемент.

    В процессе захвата экрана машина, которая обменивается содержимым экрана, будет отображать какую-то форму индикатора, чтобы пользователь знал, что обмен находиться в процессе.

    @@ -111,7 +111,7 @@ translation_of: Web/API/Screen_Capture_API/Using_Screen_Capture

    До запуска скрипта, который будет запрашивать возможность обмена аудио, проверьте реализацию  {{SectionOnPage("/en-US/docs/Web/API/MediaDevices/getDisplayMedia", "Browser compatibility", "code")}} , для понимания браузерной совместимости с функциональностью захвата аудио в поток захвата экрана.

    -

    Чтобы запросить доступ к экрану с включенным звуком, параметры ниже передаются в метод getDisplayMedia():

    +

    Чтобы запросить доступ к экрану с включённым звуком, параметры ниже передаются в метод getDisplayMedia():

    const gdmOptions = {
       video: true,
    @@ -119,7 +119,7 @@ translation_of: Web/API/Screen_Capture_API/Using_Screen_Capture
     }
     
    -

    Это дает пользователю полную свободу выбора того, что он хочет, в пределах того, что поддерживает пользовательский агент. Это можно уточнить, указав дополнительную информацию для каждого свойства audio и video:

    +

    Это даёт пользователю полную свободу выбора того, что он хочет, в пределах того, что поддерживает пользовательский агент. Это можно уточнить, указав дополнительную информацию для каждого свойства audio и video:

    const gdmOptions = {
       video: {
    diff --git a/files/ru/web/api/selection/tostring/index.html b/files/ru/web/api/selection/tostring/index.html
    index 63899ce9d7..0e1dede357 100644
    --- a/files/ru/web/api/selection/tostring/index.html
    +++ b/files/ru/web/api/selection/tostring/index.html
    @@ -30,7 +30,7 @@ translation_of: Web/API/Selection/toString
     
     

    Этот метод возвращает выделенный текст.

    -

    В JavaScript, этот метод вызывается автоматически, когда функция, которой он передается, требует строку:

    +

    В JavaScript, этот метод вызывается автоматически, когда функция, которой он передаётся, требует строку:

    alert(window.getSelection()) // What is called
     alert(window.getSelection().toString())  // What is actually being effectively called.
    diff --git a/files/ru/web/api/server-sent_events/using_server-sent_events/index.html b/files/ru/web/api/server-sent_events/using_server-sent_events/index.html
    index 0bc2834743..bee580418a 100644
    --- a/files/ru/web/api/server-sent_events/using_server-sent_events/index.html
    +++ b/files/ru/web/api/server-sent_events/using_server-sent_events/index.html
    @@ -11,11 +11,11 @@ translation_of: Web/API/Server-sent_events/Using_server-sent_events
     
     

    Получение событий от сервера

    -

    Server-Sent Event API содержится внутри интерфейса {{domxref("EventSource")}}. Чтобы открыть соединение с сервером для начала записи событий, которые он присылает, необходимо создать новый объект EventSource, который будет указывать на URI скрипта, который создает события. Например:

    +

    Server-Sent Event API содержится внутри интерфейса {{domxref("EventSource")}}. Чтобы открыть соединение с сервером для начала записи событий, которые он присылает, необходимо создать новый объект EventSource, который будет указывать на URI скрипта, который создаёт события. Например:

    const evtSource = new EventSource("ssedemo.php");
    -

    Если файл с генератором событий размещен на другом домене, то должен быть создан новый объект EventSource в который следует передать помимо URI еще и словарь опций. Например, если предположить, что клиентский скрипт находится на example.com:

    +

    Если файл с генератором событий размещён на другом домене, то должен быть создан новый объект EventSource в который следует передать помимо URI ещё и словарь опций. Например, если предположить, что клиентский скрипт находится на example.com:

    const evtSource = new EventSource("//api.example.com/ssedemo.php", { withCredentials: true } ); 
     
    @@ -49,7 +49,7 @@ translation_of: Web/API/Server-sent_events/Using_server-sent_events

    Код на стороне сервера, который отправляет события, должен отвечать, используя MIME-тип text/event-stream. Каждое уведомление отправляется в виде блока текста, оканчивающегося парой новых строк (\n) . Подробнее о формате потока событий см.  {{ anch("Event stream format") }}.

    -

    {{Glossary("PHP")}} код, который мы используем для примера приведен ниже:

    +

    {{Glossary("PHP")}} код, который мы используем для примера приведён ниже:

    date_default_timezone_set("America/New_York");
     header('Cache-Control: no-cache');
    @@ -79,7 +79,7 @@ while (1) {
     }
     
    -

    Приведенный выше код генерирует событие каждую секунду с типом события «ping». Данные каждого события - это объект JSON, содержащий метку времени ISO 8601, соответствующую дате, когда было сгенерировано событие. Через случайные интервалы отправляется простое сообщение (без типа event).

    +

    Приведённый выше код генерирует событие каждую секунду с типом события «ping». Данные каждого события - это объект JSON, содержащий метку времени ISO 8601, соответствующую дате, когда было сгенерировано событие. Через случайные интервалы отправляется простое сообщение (без типа event).

    Примечание: Вы можете найти полный пример, который использует код, показанный в этой статье на GitHub - см. Simple SSE demo using PHP.

    @@ -106,7 +106,7 @@ while (1) {
    Примечание: Строка комментария может использоваться, чтобы предотвратить тайм-аут соединений; сервер может периодически отправлять комментарий, чтобы поддерживать соединение.
    -

    Каждое сообщение содержит одну или более строчек текста, которые перечисляют поля этого сообщения. Каждое имеет свое имя, за которым следует двоеточие, после которого идут текстовые данные для значения этого поля. 

    +

    Каждое сообщение содержит одну или более строчек текста, которые перечисляют поля этого сообщения. Каждое имеет своё имя, за которым следует двоеточие, после которого идут текстовые данные для значения этого поля. 

    Поля

    diff --git a/files/ru/web/api/service_worker_api/index.html b/files/ru/web/api/service_worker_api/index.html index 7d52ed2334..f7b0bbb1cd 100644 --- a/files/ru/web/api/service_worker_api/index.html +++ b/files/ru/web/api/service_worker_api/index.html @@ -21,7 +21,7 @@ translation_of: Web/API/Service_Worker_API

    Концепция и использование Service Worker

    -

    Service worker — это событийно-управляемый worker, регистрируемый на уровне источника и пути. Он представляет собой JavaScript-файл, который может контролировать веб-страницу/сайт, с которым он ассоциируется, перехватывать и модифицировать запросы навигации и ресурсов, очень гибко кешировать ресурсы, для того чтобы предоставить вам полный контроль над тем, как приложение ведет себя в определенных ситуациях (например, когда сеть не доступна).

    +

    Service worker — это событийно-управляемый worker, регистрируемый на уровне источника и пути. Он представляет собой JavaScript-файл, который может контролировать веб-страницу/сайт, с которым он ассоциируется, перехватывать и модифицировать запросы навигации и ресурсов, очень гибко кешировать ресурсы, для того чтобы предоставить вам полный контроль над тем, как приложение ведёт себя в определённых ситуациях (например, когда сеть не доступна).

    Service worker запускается в контексте воркеров, поэтому он не имеет доступа к DOM и работает в потоке отдельном от основного потока JavaScript, управляющего вашим приложением, а следовательно — не блокирует его. Он призван быть полностью асинхронным; как следствие, синхронные API, такие как XHR и localStorage, в Service Worker'е использовать нельзя.

    @@ -55,7 +55,7 @@ translation_of: Web/API/Service_Worker_API

    Установка производится в случае если загружаемый файл признается новым — либо отличным от уже установленного service worker (определяется через побайтовое сравнение), либо первым устанавливаемым service воркером для этой страницы/сайта.

    -

    Если это первый раз, когда service worker оказался доступен, будет проведена установка, а после успешного ее завершения — активация.

    +

    Если это первый раз, когда service worker оказался доступен, будет проведена установка, а после успешного её завершения — активация.

    Если service worker уже существует, новая версия устанавливается в фоновом режиме, но не активируется — worker переходит в состояние в ожидании. Новая версия активируется только тогда, когда больше не останется загруженных страниц, использующих старый service worker. Как только это случится, новый service worker активируется (станет активным воркером). Активация может произойти раньше при использовании {{domxref ("ServiceWorkerGlobalScope.skipWaiting()")}}, а существующие страницы могут быть переведены под контроль активного воркера с помощью {{domxref ("Clients.claim()")}}.

    @@ -63,7 +63,7 @@ translation_of: Web/API/Service_Worker_API

    Есть также событие activate. Момент, когда это событие наступает, является удачным для очистки старого кеша и всего, что ассоциировалось с предыдущей версией вашего service worker'а.

    -

    Service worker может отвечать на запросы, используя событие {{domxref("FetchEvent")}}. Вы можете изменять ответ на эти запросы на свое усмотрение используя метод {{domxref("FetchEvent.respondWith") }}.

    +

    Service worker может отвечать на запросы, используя событие {{domxref("FetchEvent")}}. Вы можете изменять ответ на эти запросы на своё усмотрение используя метод {{domxref("FetchEvent.respondWith") }}.

    Заметка: Так как выполнение oninstall/onactivate может занять время, спецификация service worker предоставляет метод waitUntil, который возвращает промис, когда вызывается oninstall или onactivate. Функциональные события не отправляются service worker, пока промис не завершится успешно.

    @@ -78,7 +78,7 @@ translation_of: Web/API/Service_Worker_API
    • Фоновая синхронизация данных
    • Ответ на запросы от других источников
    • -
    • Получение централизованного обновления для данных использующих тяжелые вычисления, таких как геолокация или гироскоп, для того чтобы несколько станиц могли использовать одни и те же данные
    • +
    • Получение централизованного обновления для данных использующих тяжёлые вычисления, таких как геолокация или гироскоп, для того чтобы несколько станиц могли использовать одни и те же данные
    • Компиляция и управление зависимостями на клиентской стороне для CoffeeScript, less, CJS/AMD модулей и т.д. для целей разработки
    • Подписка на фоновые сервисы
    • Кастомная шаблонизация, основанная на определённых паттернах URL
    • @@ -90,7 +90,7 @@ translation_of: Web/API/Service_Worker_API
      • Фоновой синхронизации: запускать service worker даже когда ни одного пользователя нет на сайте, чтобы обновить кеш.
      • Реакции на пуш-сообщения: запускать service worker для отправки сообщений пользователям, чтобы оповестить их о новом доступном контенте.
      • -
      • Реакции на определенное время и дату
      • +
      • Реакции на определённое время и дату
      • Введение гео-ограничений
      @@ -100,7 +100,7 @@ translation_of: Web/API/Service_Worker_API
      {{domxref("Cache") }}
      Представляет хранилище для объектов {{domxref("Request")}} / {{domxref("Response")}}, которые кешируются, как часть жизненного цикла {{domxref("ServiceWorker")}}.
      {{domxref("CacheStorage") }}
      -
      Представляет хранилище для объектов {{domxref("Cache")}}. Он создает главную директорию для всех именованных кешей, к которым {{domxref("ServiceWorker")}} имеет доступ, и поддерживает отображение строковых имен соответствующего объекта {{domxref("Cache")}}.
      +
      Представляет хранилище для объектов {{domxref("Cache")}}. Он создаёт главную директорию для всех именованных кешей, к которым {{domxref("ServiceWorker")}} имеет доступ, и поддерживает отображение строковых имён соответствующего объекта {{domxref("Cache")}}.
      {{domxref("Client") }}
      Представляет область видимости клиента service worker. Это либо документ в контексте браузера, либо {{domxref("SharedWorker")}}, который контролируется активным воркером.
      {{domxref("Clients") }}
      diff --git a/files/ru/web/api/service_worker_api/using_service_workers/index.html b/files/ru/web/api/service_worker_api/using_service_workers/index.html index bab45149a6..4fc2235590 100644 --- a/files/ru/web/api/service_worker_api/using_service_workers/index.html +++ b/files/ru/web/api/service_worker_api/using_service_workers/index.html @@ -83,7 +83,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers

      В первом примере код, идущий за вызовом функции myFunction(), будет ждать завершения вызова и возврата значения. Во втором примере myFunction() возвращает промис для value, в этом случае, последующий код сможет выполняться, не дожидаясь завершения основной работы функции. Когда промис разрешится, код, переданный методу then, будет выполнен асинхронно.

      -

      А вот вам реальный пример: что, если мы хотим загружать изображения динамически, к тому же мы желаем удостовериться, что изображения загрузились до того, как они будут показаны? То, что мы хотим сделать, является стандартной задачей, но она все же может доставить головной боли. Мы можем использовать .onload, чтобы показать изображение только после загрузки, но что делать с событиями, которые могут произойти до того, как мы начнем их слушать? Мы могли бы использовать .complete, но оно все еще ненадежно, да и что делать с повторяющимися изображениями? И наконец все это работает синхронно, блокируя главный поток.

      +

      А вот вам реальный пример: что, если мы хотим загружать изображения динамически, к тому же мы желаем удостовериться, что изображения загрузились до того, как они будут показаны? То, что мы хотим сделать, является стандартной задачей, но она все же может доставить головной боли. Мы можем использовать .onload, чтобы показать изображение только после загрузки, но что делать с событиями, которые могут произойти до того, как мы начнём их слушать? Мы могли бы использовать .complete, но оно все ещё ненадёжно, да и что делать с повторяющимися изображениями? И наконец все это работает синхронно, блокируя главный поток.

      Вместо этого мы можем написать собственный промис для работы с подобными случаями. (Вы можете найти исходный код в нашем примере Promises test или взглянуть на живое демо.)

      @@ -111,9 +111,9 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers }); }
    -

    Мы возвращаем новый промис, созданный конструктором Promise(), который в качестве аргумента принимает функцию с параметрами resolve и reject. Где-то внутри функции мы должны определить случаи, при которых промис должен быть разрешен или отклонен, — в нашем случае, в зависимости от того, вернулся ли статус 200 ОК или нет, будут вызваны resolve в случае успеха или reject при неудаче. Последующее содержимое этой функции — вполне стандартное XHR-наполнение, поэтому на данный момент не стоит о нем волноваться.

    +

    Мы возвращаем новый промис, созданный конструктором Promise(), который в качестве аргумента принимает функцию с параметрами resolve и reject. Где-то внутри функции мы должны определить случаи, при которых промис должен быть разрешён или отклонён, — в нашем случае, в зависимости от того, вернулся ли статус 200 ОК или нет, будут вызваны resolve в случае успеха или reject при неудаче. Последующее содержимое этой функции — вполне стандартное XHR-наполнение, поэтому на данный момент не стоит о нем волноваться.

    -

    Вызывая функцию imgLoad(), мы ожидаемо передаем в качестве параметра url изображения, которое хотим загрузить, но далее код немного отличается:

    +

    Вызывая функцию imgLoad(), мы ожидаемо передаём в качестве параметра url изображения, которое хотим загрузить, но далее код немного отличается:

    let body = document.querySelector('body');
     let myImage = new Image();
    @@ -126,7 +126,7 @@ imgLoad('myLittleVader.jpg').then((response) => {
       console.log(Error);
     });
    -

    После вызова функции мы "цепляем" к ней вызов промис-метода then(), которому в качестве параметров передаем две функции - первая будет вызвана в случае выполнения промиса, созданного вызовом функции imgLoad(), вторая функция будет вызвана в случае отклонения этого промиса. В случае выполнения мы показываем изображение в элементе myImage, который прикрепляем к body (аргументом является request.response, помещенный в промис-методе resolve); в случае отклонения промиса в консоли будет отображено сообщение об ошибке.

    +

    После вызова функции мы "цепляем" к ней вызов промис-метода then(), которому в качестве параметров передаём две функции - первая будет вызвана в случае выполнения промиса, созданного вызовом функции imgLoad(), вторая функция будет вызвана в случае отклонения этого промиса. В случае выполнения мы показываем изображение в элементе myImage, который прикрепляем к body (аргументом является request.response, помещённый в промис-методе resolve); в случае отклонения промиса в консоли будет отображено сообщение об ошибке.

    Все это происходит асинхронно.

    @@ -141,14 +141,14 @@ imgLoad('myLittleVader.jpg').then((response) => {

    Демонстрация Service Workers

    -

    Чтобы продемонстрировать только базовые моменты регистрации и установки сервис-воркеров, мы создали простое демо-приложение, названое sw-test. Это простая галерея изображений "Star wars Lego". Оно использует промис-функции, чтобы прочитать из JSON-объекта и загрузить, используя технологию Ajax, изображения, находящиеся далее нижнего края страницы, до того как они будут показаны. В приложении также еще регистрируется, устанавливается и активируется сервис-воркер, и, в случае если браузер поддерживает спецификацию Service Worker, запрашиваемые ресурсы будут закешированы, и приложение будет работать в offline-режиме!

    +

    Чтобы продемонстрировать только базовые моменты регистрации и установки сервис-воркеров, мы создали простое демо-приложение, названое sw-test. Это простая галерея изображений "Star wars Lego". Оно использует промис-функции, чтобы прочитать из JSON-объекта и загрузить, используя технологию Ajax, изображения, находящиеся далее нижнего края страницы, до того как они будут показаны. В приложении также ещё регистрируется, устанавливается и активируется сервис-воркер, и, в случае если браузер поддерживает спецификацию Service Worker, запрашиваемые ресурсы будут закешированы, и приложение будет работать в offline-режиме!



    Вы можете посмотреть исходный код на GitHub, а также этот живой пример. Единственное, что мы тут рассмотрим, это промис (смотрите app.js строки 22-47), модифицированная версия того, о котором вы читали выше в разделе Тестовая демонстрация промисов. Разница в следующем:

      -
    1. Ранее мы передавали параметром лишь URL изображения, которое мы хотели загрузить. Теперь же, мы передаем JSON-фрагмент, содержащий все данные для изображения (посмотрите, как это выглядит в image-list.js). Это сделано потому, что все данные для выполнения каждого промиса должны быть переданы ему, так как он выполняется асинхронно. Если же вы передали лишь URL, а чуть позже попытались получить доступ к другим атрибутам в JSON-фрагменте внутри цикла for(), это бы не сработало, так как этот промис не был бы выполнен во время текущей итерации цикла (это синхронный процесс).
    2. +
    3. Ранее мы передавали параметром лишь URL изображения, которое мы хотели загрузить. Теперь же, мы передаём JSON-фрагмент, содержащий все данные для изображения (посмотрите, как это выглядит в image-list.js). Это сделано потому, что все данные для выполнения каждого промиса должны быть переданы ему, так как он выполняется асинхронно. Если же вы передали лишь URL, а чуть позже попытались получить доступ к другим атрибутам в JSON-фрагменте внутри цикла for(), это бы не сработало, так как этот промис не был бы выполнен во время текущей итерации цикла (это синхронный процесс).
    4. Теперь мы выполняем промис с параметром-массивом, так как дальше мы хотим сделать загруженные данные изображения доступными для разрешающей функции, одновременно с именем файла, данными авторства и замещающим текстом (см. app.js строки 31-34). Промисы будут выполняться со всего одним аргументом, поэтому, если вы хотите выполнить их с несколькими параметрами, вы должны использовать массив/объект.
    5. Затем, чтобы получить доступ к выполненным значениям промисов, мы обращаемся к ним так, как было задумано (смотрите app.js строки 60-64). По началу это может выглядеть немного странно, но именно так и работают промисы.
    @@ -182,7 +182,7 @@ imgLoad('myLittleVader.jpg').then((response) => {

    Предыдущий код регистрирует сервис-воркера, который работает в worker-контексте, и следовательно, не имеет доступа к DOM. Затем вы запускаете код в сервис-воркере, вне ваших страниц, чтобы контролировать их загрузку.

    -

    Один сервис-воркер может контролировать несколько страниц. Каждый раз, когда загружается страница, находящаяся в пределах области видимости, сервис-воркер будет установлен на ней и начнет работу. Поэтому будьте осторожны с применением глобальных переменных в скриптах сервис-воркеров, потому как у каждой страницы нет своего уникального экземпляра сервис-воркера.

    +

    Один сервис-воркер может контролировать несколько страниц. Каждый раз, когда загружается страница, находящаяся в пределах области видимости, сервис-воркер будет установлен на ней и начнёт работу. Поэтому будьте осторожны с применением глобальных переменных в скриптах сервис-воркеров, потому как у каждой страницы нет своего уникального экземпляра сервис-воркера.

    На заметку: Сервис-воркеры функционально похожи на прокси-серверы, они позволяют модифицировать запросы и ответы, замещая записями из собственного кеша, и многое другое.

    @@ -192,7 +192,7 @@ imgLoad('myLittleVader.jpg').then((response) => {

    На заметку: Есть одна очень хорошая особенность при работе с сервис-воркерами. В случае, если вы используете функционал проверки поддержки Service Worker, то приложение в браузерах, не имеющих поддержки, продолжат нормально работать с ожидаемым поведением. Кроме того, если браузер поддерживает только AppCache, то будет использована эта технология. В случае, если браузер поддерживает и AppCache и Service Worker, то будет использована Service Worker.

    -

    Почему мой сервис-воркер не прошел регистрацию?

    +

    Почему мой сервис-воркер не прошёл регистрацию?

    Это может произойти по следующим причинам:

    @@ -222,7 +222,7 @@ imgLoad('myLittleVader.jpg').then((response) => {

    На заметку: Cache API поддерживается не всеми браузерами (смотрите раздел {{anch("Browser support")}} чтобы получить больше информации). Если вы хотите сейчас использовать эту технологию, то можете рассмотреть возможность использования полифила, который доступен в Google's Topeka demo, или можете хранить ресурсы в IndexedDB.

    -

    Давайте начнем этот раздел посмотрев на фрагмент кода ниже — это первый блок кода, который вы увидите в нашем сервис-воркере:

    +

    Давайте начнём этот раздел посмотрев на фрагмент кода ниже — это первый блок кода, который вы увидите в нашем сервис-воркере:

    self.addEventListener('install', (event) => {
       event.waitUntil(
    @@ -246,12 +246,12 @@ imgLoad('myLittleVader.jpg').then((response) => {
     
    1. Здесь мы добавляем обработчик события install к сервис-воркеру (отныне self), и затем вызываем метод {{domxref("ExtendableEvent.waitUntil()") }} объекта события. Такая конструкция гарантирует, что сервис-воркер не будет установлен, пока код, переданный внутри waitUntil(), не завершится с успехом.
    2. Внутри waitUntil() мы используем метод caches.open(), чтобы создать новый кеш, который назовём v1, это будет первая версия кеша ресурсов. Этот метод возвращает промис для созданного кеша; когда он выполнится, у объекта созданного кеша мы вызовем метод addAll(), который в качестве параметра ожидает получить массив origin-относительных URL всех ресурсов, которые мы хотим хранить в кеше.
    3. -
    4. Если промис будет отклонен, то установка будет завершена неудачно, и воркер ничего не сделает. Это хорошо, потому как вы можете исправить свой код и затем попробовать провести регистрацию в следующий раз.
    5. +
    6. Если промис будет отклонён, то установка будет завершена неудачно, и воркер ничего не сделает. Это хорошо, потому как вы можете исправить свой код и затем попробовать провести регистрацию в следующий раз.
    7. После успешной установки сервис-воркер активируется. Этот момент не очень важен при первоначальной установке/активации сервис-воркера, в то же время он имеет большое значение, когда происходит обновление воркера (смотрите раздел {{anch("Обновление вашего сервис-воркера")}}, находящийся ниже).
    -

    На заметку: localStorage работает схожим образом, но в синхронном режиме, поэтому запрещен в сервис-воркерах.

    +

    На заметку: localStorage работает схожим образом, но в синхронном режиме, поэтому запрещён в сервис-воркерах.

    @@ -264,7 +264,7 @@ imgLoad('myLittleVader.jpg').then((response) => {

    -

    Событие fetch возникает каждый раз, когда запрашиваются любые подконтрольные сервис-воркеру ресурсы, к которым относятся документы из области видимости и другие ресурсы, связанные с этими документами (например, если в index.html происходит кросс-доменный запрос для загрузки изображения, то он тоже попадет в сервис-воркер).

    +

    Событие fetch возникает каждый раз, когда запрашиваются любые подконтрольные сервис-воркеру ресурсы, к которым относятся документы из области видимости и другие ресурсы, связанные с этими документами (например, если в index.html происходит кросс-доменный запрос для загрузки изображения, то он тоже попадёт в сервис-воркер).

    Вы можете подключить к сервис-воркеру обработчик события fetch и внутри него на объекте события вызвать метод respondWith(), чтобы заменить ответы и показать собственную "магию".

    @@ -322,7 +322,7 @@ event.request.body

    Восстановление неудачных запросов

    -

    Итак, caches.match(event.request) отработает как нужно только в том случае, если в кеше сервис-воркера будет найдено соответствие запросу. Но что произойдет, если такого соответствия не будет найдено? Если мы не предоставим никакого механизма обработки такой ситуации, то промис выполнится со значением undefined и мы не получим никакого значения.

    +

    Итак, caches.match(event.request) отработает как нужно только в том случае, если в кеше сервис-воркера будет найдено соответствие запросу. Но что произойдёт, если такого соответствия не будет найдено? Если мы не предоставим никакого механизма обработки такой ситуации, то промис выполнится со значением undefined и мы не получим никакого значения.

    К счастью, сервис-воркеры имеют структуру основанную на промисах, что делает тривиальной такую обработку и предоставляет большое количество способов успешно обработать запрос:

    @@ -334,9 +334,9 @@ event.request.body
    ); }); -

    Если промис будет отклонен, функция catch() вернет обычный сетевой запрос к внешнему ресурсу. Это значит, что, если сеть доступна, то ресурс просто загрузится с сервера.

    +

    Если промис будет отклонён, функция catch() вернёт обычный сетевой запрос к внешнему ресурсу. Это значит, что, если сеть доступна, то ресурс просто загрузится с сервера.

    -

    Если же мы были достаточно умны, то мы не стали бы просто возвращать сетевой запрос, а сохранили бы его результат в кеше, чтобы иметь возможность получить его в offline-режиме. В случае с нашим демо-приложением "Star Wars gallery", это означает, что, если в галерею будет добавлено еще одно изображение, то оно будет получено и сохранено в кеше:

    +

    Если же мы были достаточно умны, то мы не стали бы просто возвращать сетевой запрос, а сохранили бы его результат в кеше, чтобы иметь возможность получить его в offline-режиме. В случае с нашим демо-приложением "Star Wars gallery", это означает, что, если в галерею будет добавлено ещё одно изображение, то оно будет получено и сохранено в кеше:

    self.addEventListener('fetch', (event) => {
       event.respondWith(
    @@ -351,11 +351,11 @@ event.request.body
    ); }); -

    Здесь мы возвращаем обычный сетевой запрос, который возвращен вызовом fetch(event.request); этот запрос также является промисом. Когда промис разрешится, мы получим кеш вызвав caches.open('v1'); этот метод также возвращает промис. Когда разрешится уже второй промис, будет использован вызов cache.put(), чтобы поместить ресурс в кеш. Ресурс получен через event.request, а ответ — через клонирование response.clone(). Клон помещается в кеш, а оригинальный ответ передается браузеру, который передает его странице, которая запросила ресурс.

    +

    Здесь мы возвращаем обычный сетевой запрос, который возвращён вызовом fetch(event.request); этот запрос также является промисом. Когда промис разрешится, мы получим кеш вызвав caches.open('v1'); этот метод также возвращает промис. Когда разрешится уже второй промис, будет использован вызов cache.put(), чтобы поместить ресурс в кеш. Ресурс получен через event.request, а ответ — через клонирование response.clone(). Клон помещается в кеш, а оригинальный ответ передаётся браузеру, который передаёт его странице, которая запросила ресурс.

    -

    Почему? Потому что потоки запроса и ответа могут быть прочитаны только единожды. Чтобы ответ был получен браузером и сохранен в кеше, нам нужно клонировать его. Так оригинальный объект отправится браузеру, а клон будет закеширован. Оба они будут прочитаны единожды.

    +

    Почему? Потому что потоки запроса и ответа могут быть прочитаны только единожды. Чтобы ответ был получен браузером и сохранён в кеше, нам нужно клонировать его. Так оригинальный объект отправится браузеру, а клон будет закеширован. Оба они будут прочитаны единожды.

    -

    У нас все ещё остается единственная проблема - если на какой-либо запрос в кеше не будет найдено соответствие, и в этот момент сеть не доступна, то наш запрос завершится неудачно. Давайте реализуем запасной вариант по умолчанию, при котором пользователь, в описанном случае, будет получать хоть что-нибудь:

    +

    У нас все ещё остаётся единственная проблема - если на какой-либо запрос в кеше не будет найдено соответствие, и в этот момент сеть не доступна, то наш запрос завершится неудачно. Давайте реализуем запасной вариант по умолчанию, при котором пользователь, в описанном случае, будет получать хоть что-нибудь:

    self.addEventListener('fetch', (event) => {
       event.respondWith(
    @@ -406,7 +406,7 @@ event.request.body

    Удаление старого кеша

    -

    Вы можете обрабатывать событие activate. Оно обычно используется в случае, если нужно выполнить такие действия, которые бы нарушили работу воркеров предыдущей версии, если они все еще работают со старым кешем. Также это событие полезно использовать для того, чтобы удалить ненужные данные, чтобы освободить место, занимаемое на диске, потому что каждый браузер имеет жесткие ограничения на размер хранилища кеша, которое доступно для использования сервис-воркерами.

    +

    Вы можете обрабатывать событие activate. Оно обычно используется в случае, если нужно выполнить такие действия, которые бы нарушили работу воркеров предыдущей версии, если они все ещё работают со старым кешем. Также это событие полезно использовать для того, чтобы удалить ненужные данные, чтобы освободить место, занимаемое на диске, потому что каждый браузер имеет жёсткие ограничения на размер хранилища кеша, которое доступно для использования сервис-воркерами.

    Promise, переданный в waitUntil(), заблокирует другие события до своего завершения, поэтому можно быть уверенным, что процесс очистки закончится раньше, чем выполнится первое событие fetch на основе нового кеша.

    diff --git a/files/ru/web/api/serviceworker/scripturl/index.html b/files/ru/web/api/serviceworker/scripturl/index.html index c01cb6c968..a0453d4354 100644 --- a/files/ru/web/api/serviceworker/scripturl/index.html +++ b/files/ru/web/api/serviceworker/scripturl/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/ServiceWorker/scriptURL ---
    {{APIRef("Service Workers API")}}
    -

    Возвращает URL, указывающий на скрипт данного Service Worker, определенный с помощью ServiceWorkerRegistration. URL должен находиться в том же домене, что и документ, регистрирующий ServiceWorker.

    +

    Возвращает URL, указывающий на скрипт данного Service Worker, определённый с помощью ServiceWorkerRegistration. URL должен находиться в том же домене, что и документ, регистрирующий ServiceWorker.

    Синтаксис

    diff --git a/files/ru/web/api/serviceworkercontainer/register/index.html b/files/ru/web/api/serviceworkercontainer/register/index.html index 7fd83f836c..3c86ae2687 100644 --- a/files/ru/web/api/serviceworkercontainer/register/index.html +++ b/files/ru/web/api/serviceworkercontainer/register/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/ServiceWorkerContainer/register ---

    {{SeeCompatTable}}{{APIRef("Service Workers API")}}

    -

    register() метод {{domxref("ServiceWorkerContainer")}} интерфейса который создает и обновляет ServiceWorkerRegistration  для указанного URL js скрипта.

    +

    register() метод {{domxref("ServiceWorkerContainer")}} интерфейса который создаёт и обновляет ServiceWorkerRegistration  для указанного URL js скрипта.

    Если удачно, service worker registration связывается по указанному URL js скрипта , который соответственно используется для проверки совпадения при навигации по URL. Если метод не возвращает ServiceWorkerRegistration, он возвращает Promise. Есть возможность вызвать этот метод без проверки на условие, т.е. нет необходимости сначала проверять существует ли активная регистрация в данный момент или нет.

    @@ -33,13 +33,13 @@ translation_of: Web/API/ServiceWorkerContainer/register

    Пример использования

    -

    Примеры кода, приведенные ниже, должны рассматриваться вместе для лучшего понимания того, как применяется scope service worker-ов к конкретной странице.

    +

    Примеры кода, приведённые ниже, должны рассматриваться вместе для лучшего понимания того, как применяется scope service worker-ов к конкретной странице.

    Следующий пример использует дефолтный scope (не указывая его прямо). Service worker в этом случае будет контролировать example.com/index.html и страницы, расположенные "глубже", например example.com/product/description.html.

    if ('serviceWorker' in navigator) {
       // Регистрация service worker-а, расположенного в корне сайта
    -  // за счет использования дефолтного scope (не указывая его)
    +  // за счёт использования дефолтного scope (не указывая его)
       navigator.serviceWorker.register('/sw.js').then(function(registration) {
         console.log('Service worker зарегистрирован:', registration);
       }).catch(function(error) {
    @@ -50,7 +50,7 @@ translation_of: Web/API/ServiceWorkerContainer/register
       console.log('Текущий браузер не поддерживает service worker-ы');
     }
    -

    Следующий пример, если он размещен на странице корня сайта, будет применен ровно к тем же страницам, что и пример выше. Помните, scope, если он указан, использует path страницы в качестве своей базы. Это значит, что, если следующий пример будет использоваться на странице example.com/product/description.html, то scope ./ будет означать, что service worker работает только со страницами внутри example.com/product. Если необходимо зарегистрировать service worker на example.com/product/description.html, и вы хотите, чтобы он обслуживал и корень, example.com, то scope лучше не указывать совсем, как в примере выше.

    +

    Следующий пример, если он размещён на странице корня сайта, будет применён ровно к тем же страницам, что и пример выше. Помните, scope, если он указан, использует path страницы в качестве своей базы. Это значит, что, если следующий пример будет использоваться на странице example.com/product/description.html, то scope ./ будет означать, что service worker работает только со страницами внутри example.com/product. Если необходимо зарегистрировать service worker на example.com/product/description.html, и вы хотите, чтобы он обслуживал и корень, example.com, то scope лучше не указывать совсем, как в примере выше.

    if ('serviceWorker' in navigator) {
       // Регистрация service worker-а, расположенного в корне сайта
    diff --git a/files/ru/web/api/serviceworkerregistration/pushmanager/index.html b/files/ru/web/api/serviceworkerregistration/pushmanager/index.html
    index 9ef0d95a7d..cc9b0097ba 100644
    --- a/files/ru/web/api/serviceworkerregistration/pushmanager/index.html
    +++ b/files/ru/web/api/serviceworkerregistration/pushmanager/index.html
    @@ -35,7 +35,7 @@ navigator.serviceWorker.register('serviceworker.js').then(
             // при помощи XMLHttpRequest.
           }, function(error) {
             // При разработке это часто помогает отлавливать ошибки в консоли.
    -        // В продакшен-среде это также может быть полезно для отправки отчета
    +        // В продакшен-среде это также может быть полезно для отправки отчёта
             // об ошибках на сервер приложения.
             console.log(error);
           }
    diff --git a/files/ru/web/api/serviceworkerregistration/shownotification/index.html b/files/ru/web/api/serviceworkerregistration/shownotification/index.html
    index fdcd0943fc..1be41dab02 100644
    --- a/files/ru/web/api/serviceworkerregistration/shownotification/index.html
    +++ b/files/ru/web/api/serviceworkerregistration/shownotification/index.html
    @@ -43,7 +43,7 @@ translation_of: Web/API/ServiceWorkerRegistration/showNotification
       
  • renotify: A boolean that indicates whether to supress vibrations and audible alerts when resusing a tag value. The default is false.
  • requireInteraction: Indicates that on devices with sufficiently large screens, a notification should remain active until the user clicks or dismisses it. If this value is absent or false, the desktop version of Chrome will auto-minimize notifications after approximately twenty seconds. The default value is false.
  • tag: An ID for a given notification that allows you to find, replace, or remove the notification using script if necessary.
  • -
  • vibrate: Шаблон вибрации, которая будет воспроизведена вместе с уведомлением. Шаблон может быть массивом из как минимум одного элемента. Значения элементов это время в миллисекундах, при этом четные элементы (0, 2, 4, и т.д.) отражают периоды вибрации, а нечетные периоды пауз. Например, [300, 100, 400] будет означать вибрацию 300ms, паузу 100ms, затем вибрацию 400ms.
  • +
  • vibrate: Шаблон вибрации, которая будет воспроизведена вместе с уведомлением. Шаблон может быть массивом из как минимум одного элемента. Значения элементов это время в миллисекундах, при этом чётные элементы (0, 2, 4, и т.д.) отражают периоды вибрации, а нечётные периоды пауз. Например, [300, 100, 400] будет означать вибрацию 300ms, паузу 100ms, затем вибрацию 400ms.
  • data: Arbitrary data that you want associated with the notification. This can be of any data type.
  • diff --git a/files/ru/web/api/serviceworkerstate/index.html b/files/ru/web/api/serviceworkerstate/index.html index a1702d28b1..9185341f54 100644 --- a/files/ru/web/api/serviceworkerstate/index.html +++ b/files/ru/web/api/serviceworkerstate/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/ServiceWorkerState
    installed
    Service worker находится в состоянии ожидания и будет активирован после закрытия всех страниц его источника, использующих предыдущую версию service worker'а.
    activating
    -
    Service worker в данном состоянии считается активным. В этом состоянии, метод {{DOMxRef("ExtendableEvent.waitUntil()")}} может быть вызван в обработчике события onactivate для продления этапа активации до успешного завершения переданного промиса. Service worker не начнет обрабатывать события до перехода в состояние activated.
    +
    Service worker в данном состоянии считается активным. В этом состоянии, метод {{DOMxRef("ExtendableEvent.waitUntil()")}} может быть вызван в обработчике события onactivate для продления этапа активации до успешного завершения переданного промиса. Service worker не начнёт обрабатывать события до перехода в состояние activated.
    activated
    Service worker в данном состоянии активен и готов обрабатывать события.
    redundant
    diff --git a/files/ru/web/api/sharedworker/index.html b/files/ru/web/api/sharedworker/index.html index 7e2b91c3c7..a50a9664a3 100644 --- a/files/ru/web/api/sharedworker/index.html +++ b/files/ru/web/api/sharedworker/index.html @@ -30,7 +30,7 @@ translation_of: Web/API/SharedWorker
    {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}
    -
    Создает разделяемый веб воркер, который выполняет скрипт по указанному URL.
    +
    Создаёт разделяемый веб воркер, который выполняет скрипт по указанному URL.

    Методы

    diff --git a/files/ru/web/api/speechgrammar/index.html b/files/ru/web/api/speechgrammar/index.html index d4f5246027..1731b109f3 100644 --- a/files/ru/web/api/speechgrammar/index.html +++ b/files/ru/web/api/speechgrammar/index.html @@ -21,7 +21,7 @@ translation_of: Web/API/SpeechGrammar
    {{domxref("SpeechGrammar.SpeechGrammar()")}}
    -
    Создает новый объект SpeechGrammar .
    +
    Создаёт новый объект SpeechGrammar .

    Свойства

    diff --git a/files/ru/web/api/speechrecognition/index.html b/files/ru/web/api/speechrecognition/index.html index 8331ae2e91..f7939e84d2 100644 --- a/files/ru/web/api/speechrecognition/index.html +++ b/files/ru/web/api/speechrecognition/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/SpeechRecognition
    {{domxref("SpeechRecognition.SpeechRecognition()")}}
    -
    Создает новый объект SpeechRecognition .
    +
    Создаёт новый объект SpeechRecognition .

    Свойства

    @@ -22,11 +22,11 @@ translation_of: Web/API/SpeechRecognition
    {{domxref("SpeechRecognition.grammars")}}
    Возвращает и устанавливает коллекцию объектов {{domxref("SpeechGrammar")}}  грамматики которые будут понятны текущему SpeechRecognition.
    {{domxref("SpeechRecognition.lang")}}
    -
    Задает и возвращает язык текущего SpeechRecognition. Если данное свойство не указано по умолчанию, то используется из HTML кода значение атрибута {{htmlattrxref("lang","html")}} , или настройки языка агента текущего пользователя.
    +
    Задаёт и возвращает язык текущего SpeechRecognition. Если данное свойство не указано по умолчанию, то используется из HTML кода значение атрибута {{htmlattrxref("lang","html")}} , или настройки языка агента текущего пользователя.
    {{domxref("SpeechRecognition.continuous")}}
    Проверяет возвращается ли непрерывные результаты или вернулся только один. По умолчанию для одиночного значение (false.)
    {{domxref("SpeechRecognition.interimResults")}}
    -
    Контроллирует, следует ли возвращать промежуточные результаты (true) или нет (false.) Промежуточные результаты это результаты которые еще не завершены ( например {{domxref("SpeechRecognitionResult.isFinal")}} свойство ложно.)
    +
    Контроллирует, следует ли возвращать промежуточные результаты (true) или нет (false.) Промежуточные результаты это результаты которые ещё не завершены ( например {{domxref("SpeechRecognitionResult.isFinal")}} свойство ложно.)
    {{domxref("SpeechRecognition.maxAlternatives")}}
    Устанавливает максимальное количество предоставленных результатов {{domxref("SpeechRecognitionAlternative")}}. По умолчанию значение 1.
    {{domxref("SpeechRecognition.serviceURI")}}
    @@ -45,7 +45,7 @@ translation_of: Web/API/SpeechRecognition
    {{domxref("SpeechRecognition.onerror")}}
    Вызывается когда произошла ошибка распознавания речи.
    {{domxref("SpeechRecognition.onnomatch")}}
    -
    Вызывается, когда служба распознавания речи возвращает окончательный результат без существенного распознавания. Это может включать определенную степень признания  {{domxref("SpeechRecognitionAlternative.confidence","confidence")}} которая не соответствует пороговому значению или превышает его.
    +
    Вызывается, когда служба распознавания речи возвращает окончательный результат без существенного распознавания. Это может включать определённую степень признания  {{domxref("SpeechRecognitionAlternative.confidence","confidence")}} которая не соответствует пороговому значению или превышает его.
    {{domxref("SpeechRecognition.onresult")}}
    Вызывается когда возвращает результат — слово или фраза были распознаны положительно, и это было передано обратно в приложение.
    {{domxref("SpeechRecognition.onsoundstart")}}
    @@ -75,9 +75,9 @@ translation_of: Web/API/SpeechRecognition

    Примеры

    -

    В нашем простом примере Speech color changer , мы создаем новый объект экземпляра SpeechRecognition используя этот конструктор {{domxref("SpeechRecognition.SpeechRecognition", "SpeechRecognition()")}} , создание нового  {{domxref("SpeechGrammarList")}}, И установить его в качестве грамматики, которая будет распознаваться экземпляром распознавание речи с использованием свойства {{domxref("SpeechRecognition.grammars")}}.

    +

    В нашем простом примере Speech color changer , мы создаём новый объект экземпляра SpeechRecognition используя этот конструктор {{domxref("SpeechRecognition.SpeechRecognition", "SpeechRecognition()")}} , создание нового  {{domxref("SpeechGrammarList")}}, И установить его в качестве грамматики, которая будет распознаваться экземпляром распознавание речи с использованием свойства {{domxref("SpeechRecognition.grammars")}}.

    -

    После определения некоторых других значений мы затем устанавливаем их так, чтобы служба распознавания началась когда произошло событие по клику ( {{domxref("SpeechRecognition.start()")}}.) Когда результат был успешно распознан, the {{domxref("SpeechRecognition.onresult")}} обработчик извлекаем цвет, который был произнесен из события, а затем меняем цвет фона на данный цвет {{htmlelement("html")}}.

    +

    После определения некоторых других значений мы затем устанавливаем их так, чтобы служба распознавания началась когда произошло событие по клику ( {{domxref("SpeechRecognition.start()")}}.) Когда результат был успешно распознан, the {{domxref("SpeechRecognition.onresult")}} обработчик извлекаем цвет, который был произнесён из события, а затем меняем цвет фона на данный цвет {{htmlelement("html")}}.

    var grammar = '#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;'
     var recognition = new SpeechRecognition();
    @@ -199,7 +199,7 @@ recognition.onresult = function(event) {
     
     

    Firefox OS разрешения

    -

    Чтобы использовать распознавание речи в приложении, вам необходимо указать следующие разрешения в своем manifest:

    +

    Чтобы использовать распознавание речи в приложении, вам необходимо указать следующие разрешения в своём manifest:

    "permissions": {
       "audio-capture" : {
    diff --git a/files/ru/web/api/speechsynthesisutterance/index.html b/files/ru/web/api/speechsynthesisutterance/index.html
    index 94c0d175d6..750e34d8f5 100644
    --- a/files/ru/web/api/speechsynthesisutterance/index.html
    +++ b/files/ru/web/api/speechsynthesisutterance/index.html
    @@ -16,7 +16,7 @@ translation_of: Web/API/SpeechSynthesisUtterance
     
     

    Свойства

    -

    SpeechSynthesisUtterance еще наследует свойства из его своего родительского интерфейса {{domxref("EventTarget")}}.

    +

    SpeechSynthesisUtterance ещё наследует свойства из его своего родительского интерфейса {{domxref("EventTarget")}}.

    {{domxref("SpeechSynthesisUtterance.lang")}}
    @@ -37,13 +37,13 @@ translation_of: Web/API/SpeechSynthesisUtterance
    {{domxref("SpeechSynthesisUtterance.onboundary")}}
    -
    Срабатывает, когда произнесенное высказывание достигает границы слова или предложения.
    +
    Срабатывает, когда произнесённое высказывание достигает границы слова или предложения.
    {{domxref("SpeechSynthesisUtterance.onend")}}
    Срабатывает, когда произнесение произнесено.
    {{domxref("SpeechSynthesisUtterance.onerror")}}
    Срабатывает, когда возникает ошибка, которая препятствует успешному произнесению высказывания.
    {{domxref("SpeechSynthesisUtterance.onmark")}}
    -
    Срабатывает, когда произнесенное высказывание достигает названного тега метки «SSML».
    +
    Срабатывает, когда произнесённое высказывание достигает названного тега метки «SSML».
    {{domxref("SpeechSynthesisUtterance.onpause")}}
    Срабатывает, когда высказывание приостановлено.
    {{domxref("SpeechSynthesisUtterance.onresume")}}
    diff --git a/files/ru/web/api/storage/clear/index.html b/files/ru/web/api/storage/clear/index.html index ca829dae1b..869995f394 100644 --- a/files/ru/web/api/storage/clear/index.html +++ b/files/ru/web/api/storage/clear/index.html @@ -21,7 +21,7 @@ translation_of: Web/API/Storage/clear

    Пример

    -

    Следующая функция создает 3 записи в локальном хранилище, после этого все значения удаляются с помощью метода clear().

    +

    Следующая функция создаёт 3 записи в локальном хранилище, после этого все значения удаляются с помощью метода clear().

    function populateStorage() {
       localStorage.setItem('bgcolor', 'red');
    @@ -110,7 +110,7 @@ translation_of: Web/API/Storage/clear
     
     
     
    -

    Все браузеры имеют различный уровень объема для localStorage и sessionStorage. Здесь подробное описание объема хранилищ для разных браузеров.

    +

    Все браузеры имеют различный уровень объёма для localStorage и sessionStorage. Здесь подробное описание объёма хранилищ для разных браузеров.

    Примечание: Начиная с версии iOS 5.1, Safari Mobile хранит данные localStorage в папке cache, которая периодически подлежит очистке по требованию ОС, как правило при недостаточном количестве свободного места.

    diff --git a/files/ru/web/api/storage/getitem/index.html b/files/ru/web/api/storage/getitem/index.html index cc066d8334..12a4985508 100644 --- a/files/ru/web/api/storage/getitem/index.html +++ b/files/ru/web/api/storage/getitem/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Storage/getItem ---

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

    -

    Если в метод getItem() интерфейса {{domxref("Storage")}} передать ключ в качестве параметра, то метод вернет значение, лежащее в хранилище по указанному ключу.

    +

    Если в метод getItem() интерфейса {{domxref("Storage")}} передать ключ в качестве параметра, то метод вернёт значение, лежащее в хранилище по указанному ключу.

    Синтаксис

    @@ -120,7 +120,7 @@ translation_of: Web/API/Storage/getItem
    -

    Все браузеры имеют различный уровень объема для localStorage и sessionStorage. Здесь подробное описание объема хранилищ для разных браузеров.

    +

    Все браузеры имеют различный уровень объёма для localStorage и sessionStorage. Здесь подробное описание объёма хранилищ для разных браузеров.

    Примечание: Начиная с версии iOS 5.1, Safari Mobile хранит данные localStorage в папке cache, которая периодически подлежит очистке по требованию ОС, как правило при недостаточном количестве свободного места

    diff --git a/files/ru/web/api/storage/key/index.html b/files/ru/web/api/storage/key/index.html index f8ff0d97b5..7accb735a9 100644 --- a/files/ru/web/api/storage/key/index.html +++ b/files/ru/web/api/storage/key/index.html @@ -117,7 +117,7 @@ translation_of: Web/API/Storage/key
    -

    Все браузеры имеют различный уровень объема для localStorage и sessionStorage. Здесь вы найдете подробное описание объема хранилищ для разных браузеров.

    +

    Все браузеры имеют различный уровень объёма для localStorage и sessionStorage. Здесь вы найдёте подробное описание объёма хранилищ для разных браузеров.

    Примечание: начиная с версии iOS 5.1, Safari Mobile хранит данные localStorage в папке с кэшем, которая может быть случайно  очищена по требованию OS, обычно это происходит, когда мало доступного места.

    diff --git a/files/ru/web/api/storage/length/index.html b/files/ru/web/api/storage/length/index.html index 559673f403..98f6ea61aa 100644 --- a/files/ru/web/api/storage/length/index.html +++ b/files/ru/web/api/storage/length/index.html @@ -111,7 +111,7 @@ translation_of: Web/API/Storage/length
    -

    Все браузеры имеют различный уровень объема для localStorage и sessionStorage. Здесь подробное описание объема хранилищ для разных браузеров.

    +

    Все браузеры имеют различный уровень объёма для localStorage и sessionStorage. Здесь подробное описание объёма хранилищ для разных браузеров.

    Примечание: начиная с версии iOS 5.1, Safari Mobile хранит данные localStorage в папке с кэшем, которая может быть очищена случайно по требованию OS, обычно это происходит, когда мало доступного места.

    diff --git a/files/ru/web/api/storage/removeitem/index.html b/files/ru/web/api/storage/removeitem/index.html index 12fbd2c7a4..e0767fa6a8 100644 --- a/files/ru/web/api/storage/removeitem/index.html +++ b/files/ru/web/api/storage/removeitem/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Storage/removeItem ---

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

    -

    Если методу removeItem() интерфейса {{domxref("Storage")}} передать ключ, то из хранилища будет удален элемент с указанным ключом. 

    +

    Если методу removeItem() интерфейса {{domxref("Storage")}} передать ключ, то из хранилища будет удалён элемент с указанным ключом. 

    Синтаксис

    @@ -28,7 +28,7 @@ translation_of: Web/API/Storage/removeItem

    Пример

    -

    Следующая функция создает три элемента внутри локального хранилища и потом удаляет элемент с ключом image.

    +

    Следующая функция создаёт три элемента внутри локального хранилища и потом удаляет элемент с ключом image.

    function populateStorage() {
       localStorage.setItem('bgcolor', 'red');
    diff --git a/files/ru/web/api/storage/setitem/index.html b/files/ru/web/api/storage/setitem/index.html
    index fe3540e3d6..75eb11453e 100644
    --- a/files/ru/web/api/storage/setitem/index.html
    +++ b/files/ru/web/api/storage/setitem/index.html
    @@ -32,7 +32,7 @@ translation_of: Web/API/Storage/setItem
     
     

    Пример

    -

    Следующая функция создает три элемента с данными в хранилище.

    +

    Следующая функция создаёт три элемента с данными в хранилище.

    function populateStorage() {
       localStorage.setItem('bgcolor', 'red');
    @@ -119,7 +119,7 @@ translation_of: Web/API/Storage/setItem
     
     
    -

    Все браузеры имеют различный уровень объема для localStorage и sessionStorage. Здесь подробное описание объема хранилищ для разных браузеров.

    +

    Все браузеры имеют различный уровень объёма для localStorage и sessionStorage. Здесь подробное описание объёма хранилищ для разных браузеров.

    Примечание: начиная с версии iOS 5.1, Safari Mobile хранит данные localStorage в папке с кэшем, которая может быть очищена случайно по требованию OS, обычно это происходит, когда мало доступного места.

    diff --git a/files/ru/web/api/storagemanager/index.html b/files/ru/web/api/storagemanager/index.html index c28ba798a3..126c659604 100644 --- a/files/ru/web/api/storagemanager/index.html +++ b/files/ru/web/api/storagemanager/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/StorageManager ---

    {{securecontext_header}}{{SeeCompatTable}}{{APIRef("Storage")}}

    -

    StorageManager является частью Storage API и предоставляет интерфейс для управления правами на хранение данных и для получения объема данных, доступного для хранения. Доступ к интерфейсу можно получить через {{domxref("navigator.storage")}} или через {{domxref("WorkerNavigator.storage")}}.

    +

    StorageManager является частью Storage API и предоставляет интерфейс для управления правами на хранение данных и для получения объёма данных, доступного для хранения. Доступ к интерфейсу можно получить через {{domxref("navigator.storage")}} или через {{domxref("WorkerNavigator.storage")}}.

    Методы

    diff --git a/files/ru/web/api/streams_api/index.html b/files/ru/web/api/streams_api/index.html index 777342b3bd..3ed4fc27ae 100644 --- a/files/ru/web/api/streams_api/index.html +++ b/files/ru/web/api/streams_api/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Streams_API

    Потоковая передача данных предполагает разбивку ресурса, который вы хотите получить через сеть, на мелкие кусочки и затем их обработку часть за частью. Это то, что браузеры делают в любом случае получения ассетов, чтобы показать их на страницах — видео буфер и другие ресурсы доступные для воспроизведения, и иногда это заметно на изображениях, загружающихся частями.

    -

    Но методы работы с этим и данные никогда прежде не были доступны для JavaScript. Раньше, если мы хотели обработать часть ресурса, нам все равно пришлось бы загрузить весь файл (будь то видео, текстовый файл и т.п.), мы были бы обязаны скачать файл целиком, дождаться пока он будет приведен к необходимому формату и только потом работать с файлом после его полной загрузки.

    +

    Но методы работы с этим и данные никогда прежде не были доступны для JavaScript. Раньше, если мы хотели обработать часть ресурса, нам все равно пришлось бы загрузить весь файл (будь то видео, текстовый файл и т.п.), мы были бы обязаны скачать файл целиком, дождаться пока он будет приведён к необходимому формату и только потом работать с файлом после его полной загрузки.

    С помощью потоков доступных в JavaScript меняется все — вы можете начать обрабатывать данные бит за битом как только данные появляются на стороне клиента, без необходимости генерировать буфер, строку или какой либо объект из потока.

    @@ -19,7 +19,7 @@ translation_of: Web/API/Streams_API

    Но это не все преимущества — вы можете отловить процессы старта и завершения потока, связывать потоки в цепочки, обрабатывать ошибки или прерывать их если это необходимо, реагировать на скорость с которой поток считывается.

    -

    Основное использование потоков крутиться вокруг создания ответов доступными в виде потоков. Например, тело ответа {{domxref("Body")}} возвращенного успешным fetch запросом может быть представлено как {{domxref("ReadableStream")}}, и вы можете прочитать его используя ридер полученный методом {{domxref("ReadableStream.getReader()")}}, отменить его с помощью {{domxref("ReadableStream.cancel()")}}, и тп.

    +

    Основное использование потоков крутиться вокруг создания ответов доступными в виде потоков. Например, тело ответа {{domxref("Body")}} возвращённого успешным fetch запросом может быть представлено как {{domxref("ReadableStream")}}, и вы можете прочитать его используя ридер полученный методом {{domxref("ReadableStream.getReader()")}}, отменить его с помощью {{domxref("ReadableStream.cancel()")}}, и тп.

    Более сложные примеры задействуют создание ваших собственных  потоков с помощью конструктора {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}, например чтобы обработать данные внутри service worker.

    @@ -46,11 +46,11 @@ translation_of: Web/API/Streams_API
    {{domxref("WritableStream")}}
    -
    Предоставляет стандартную абстракцию, известную как раковина, для записи потоков по месту назначения. Этот объект идет вместе со встроенными методами контроля обратного потока и созданием очередей.
    +
    Предоставляет стандартную абстракцию, известную как раковина, для записи потоков по месту назначения. Этот объект идёт вместе со встроенными методами контроля обратного потока и созданием очередей.
    {{domxref("WritableStreamDefaultWriter")}}
    Представляет запись потока по умолчанию, которая может использоваться для записи фрагментов данных в записываемый поток.
    {{domxref("WritableStreamDefaultController")}}
    -
    Представляет собой контроллер состояния {{domxref("WritableStream")}}. При создании WritableStream, создается также соответствующий экземпляр WritableStreamDefaultController.
    +
    Представляет собой контроллер состояния {{domxref("WritableStream")}}. При создании WritableStream, создаётся также соответствующий экземпляр WritableStreamDefaultController.

    Дополнительные API и операции по работе с потоками

    @@ -59,7 +59,7 @@ translation_of: Web/API/Streams_API
    {{domxref("ByteLengthQueuingStrategy")}}
    Предоставляет встроенную стратегию длины байт-очереди, которая может быть использована при построении потоков.
    {{domxref("CountQueuingStrategy")}}
    -
    Предоставляет встроенную стратегию организации очередей подсчета чанков, которая может использоваться при построении потоков.
    +
    Предоставляет встроенную стратегию организации очередей подсчёта чанков, которая может использоваться при построении потоков.

    Дополнения к другим API

    @@ -68,7 +68,7 @@ translation_of: Web/API/Streams_API
    {{domxref("Request")}}
    При создании нового объекта типа Request, вы можете добавить {{domxref("ReadableStream")}} в свойство body его словаря RequestInit.  Этот объект типа Request может быть отправлен в  {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, чтобы начать загрузку потока.
    {{domxref("Body")}}
    -
    Ответ {{domxref("Body")}} возвращенный успешному fetch запросу вывешивается по умолчанию как {{domxref("ReadableStream")}}, и может иметь получателя прикрепленного к нему и тп.
    +
    Ответ {{domxref("Body")}} возвращённый успешному fetch запросу вывешивается по умолчанию как {{domxref("ReadableStream")}}, и может иметь получателя прикреплённого к нему и тп.

    Интерфейсы в дополнение к ByteStream

    diff --git a/files/ru/web/api/svgaelement/index.html b/files/ru/web/api/svgaelement/index.html index 7bd391a9ff..16d0806808 100644 --- a/files/ru/web/api/svgaelement/index.html +++ b/files/ru/web/api/svgaelement/index.html @@ -23,7 +23,7 @@ translation_of: Web/API/SVGAElement
    {{domxref("SVGAElement.hreflang")}}
    Является {{domxref("DOMString")}}, который отражает атрибут hreflang, указывающий язык связанного ресурса.
    {{domxref("SVGAElement.ping")}}
    -
    Является {{domxref("DOMString")}}, отражая атрибут ping, содержащий список URL-адресов, разделенных пробелами, к которым, когда выполняется гиперссылка, {{HTTPMethod("POST")}} запрос с телом PING будет отправлен браузером (в фоновом режиме). Обычно используется для отслеживания.
    +
    Является {{domxref("DOMString")}}, отражая атрибут ping, содержащий список URL-адресов, разделённых пробелами, к которым, когда выполняется гиперссылка, {{HTTPMethod("POST")}} запрос с телом PING будет отправлен браузером (в фоновом режиме). Обычно используется для отслеживания.
    {{domxref("SVGAElement.referrerPolicy")}}
    См. {{domxref("HTMLAnchorElement.referrerPolicy")}}.
    {{domxref("SVGAElement.rel")}}
    diff --git a/files/ru/web/api/svgaelement/target/index.html b/files/ru/web/api/svgaelement/target/index.html index d8e3ba1aa2..4af2cede02 100644 --- a/files/ru/web/api/svgaelement/target/index.html +++ b/files/ru/web/api/svgaelement/target/index.html @@ -48,7 +48,7 @@ linkRef.target ='_blank';

    Browser compatibility

    - +

    {{Compat("api.SVGAElement.target")}}

    diff --git a/files/ru/web/api/svggraphicselement/index.html b/files/ru/web/api/svggraphicselement/index.html index 86f9e76035..eca4dd9c22 100644 --- a/files/ru/web/api/svggraphicselement/index.html +++ b/files/ru/web/api/svggraphicselement/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/SVGGraphicsElement

    {{InheritanceDiagram(600, 120)}}

    -

    Note: Этот интерфейс был введен в SVG 2 и заменяет интерфейсы  {{domxref("SVGLocatable")}} и {{domxref("SVGTransformable")}} из SVG 1.1.

    +

    Note: Этот интерфейс был введён в SVG 2 и заменяет интерфейсы  {{domxref("SVGLocatable")}} и {{domxref("SVGTransformable")}} из SVG 1.1.

    Свойства

    diff --git a/files/ru/web/api/svgtextcontentelement/index.html b/files/ru/web/api/svgtextcontentelement/index.html index 384958a557..8a7c2f356f 100644 --- a/files/ru/web/api/svgtextcontentelement/index.html +++ b/files/ru/web/api/svgtextcontentelement/index.html @@ -93,7 +93,7 @@ translation_of: Web/API/SVGTextContentElement {{SpecName("SVG2", "text.html#InterfaceSVGTextContentElement", "SVGTextContentElement")}} {{Spec2("SVG2")}} - Измененное наследование от {{domxref("SVGElement")}} до {{domxref("SVGGraphicsElement")}} и getStartPositionOfChar() удаленных реализаций {{domxref("SVGTests")}}, {{domxref("SVGLangSpace" )}}, {{domxref("SVGExternalResourcesRequired")}}, {{domxref("SVGStylable")}} интерфейсов и getEndPositionOfChar(), чтобы вернуть {{domxref("DOMPoint")}} вместо {{domxref( "SVGPoint")}}. + Изменённое наследование от {{domxref("SVGElement")}} до {{domxref("SVGGraphicsElement")}} и getStartPositionOfChar() удалённых реализаций {{domxref("SVGTests")}}, {{domxref("SVGLangSpace" )}}, {{domxref("SVGExternalResourcesRequired")}}, {{domxref("SVGStylable")}} интерфейсов и getEndPositionOfChar(), чтобы вернуть {{domxref("DOMPoint")}} вместо {{domxref( "SVGPoint")}}. {{SpecName("SVG1.1", "text.html#InterfaceSVGTextContentElement", "SVGTextContentElement")}} @@ -105,6 +105,6 @@ translation_of: Web/API/SVGTextContentElement

    Совместимость с браузером

    - +

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

    diff --git a/files/ru/web/api/svgtextelement/index.html b/files/ru/web/api/svgtextelement/index.html index f1e27d56a3..2ccbf4d576 100644 --- a/files/ru/web/api/svgtextelement/index.html +++ b/files/ru/web/api/svgtextelement/index.html @@ -34,7 +34,7 @@ translation_of: Web/API/SVGTextElement {{SpecName("SVG2", "text.html#InterfaceSVGTextElement", "SVGTextElement")}} {{Spec2("SVG2")}} -

    Удален реализованный
    +

    Удалён реализованный
    интерфейс {{domxref("SVGTransformable")}}.

    @@ -49,7 +49,7 @@ translation_of: Web/API/SVGTextElement

    Совместимость с браузером

    - +

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

    diff --git a/files/ru/web/api/text/index.html b/files/ru/web/api/text/index.html index f8e5f25f0e..625848211b 100644 --- a/files/ru/web/api/text/index.html +++ b/files/ru/web/api/text/index.html @@ -32,7 +32,7 @@ translation_of: Web/API/Text

    Возвращает флаг {{domxref("Boolean")}}, сигнализирующий, содержит ли (или нет) text node только пробел(ы).

    {{domxref("Text.wholeText")}} {{readonlyInline}}
    -
    Возвращает {{domxref("DOMString")}}, который содержит все Text nodes логически примыкающие к этому {{domxref("Node")}}, соединенные как в документе.
    +
    Возвращает {{domxref("DOMString")}}, который содержит все Text nodes логически примыкающие к этому {{domxref("Node")}}, соединённые как в документе.
    {{domxref("Text.assignedSlot")}} {{readonlyinline}}
    Возвращает объект {{domxref("HTMLSlotElement")}}, связанный с этим элементом.
    @@ -76,7 +76,7 @@ translation_of: Web/API/Text {{SpecName('DOM WHATWG', '#text', 'Text')}} {{Spec2('DOM WHATWG')}} Удалено свойство isElementContentWhitespace.
    - Удален метод replaceWholeText().
    + Удалён метод replaceWholeText().
    Добавлен конструктор Text().
    Добавлено свойство assignedSlot. diff --git a/files/ru/web/api/touch_events/index.html b/files/ru/web/api/touch_events/index.html index 0784963a41..fd86517821 100644 --- a/files/ru/web/api/touch_events/index.html +++ b/files/ru/web/api/touch_events/index.html @@ -93,7 +93,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre>
    }
    -

    Она вызывает {{domxref("event.preventDefault()")}} для того, чтобы предотвратить обработку браузером события касания (это также предотвращает обработку события мыши). Затем мы получаем контекст и извлекаем список измененных точек касаний из свойства {{domxref("TouchEvent.changedTouches")}} данного события.

    +

    Она вызывает {{domxref("event.preventDefault()")}} для того, чтобы предотвратить обработку браузером события касания (это также предотвращает обработку события мыши). Затем мы получаем контекст и извлекаем список изменённых точек касаний из свойства {{domxref("TouchEvent.changedTouches")}} данного события.

    После этого мы перебираем все объекты {{domxref("Touch")}} в списке, помещая их в массив активных точек касания и рисуя начальную точку в виде маленького кружка; мы используем линию толщиной 4 пикселя, поэтому получим аккуратный круг радиусом 4 пикселя.

    @@ -131,7 +131,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre>
    } -

    Функция также перебирает измененные касания, ищет в нашем массиве данных о касаниях предыдущие данные о каждом касании для определения начальной точки каждого отрезка линии, который должен быть нарисован с помощью касания. Это реализовано путем отслеживания свойства {{domxref("Touch.identifier")}} каждого касания. Это свойство является уникальным числом для каждого касания, и остается неизменным на протяжении всего времени контакта пальца с экраном.

    +

    Функция также перебирает изменённые касания, ищет в нашем массиве данных о касаниях предыдущие данные о каждом касании для определения начальной точки каждого отрезка линии, который должен быть нарисован с помощью касания. Это реализовано путём отслеживания свойства {{domxref("Touch.identifier")}} каждого касания. Это свойство является уникальным числом для каждого касания, и остаётся неизменным на протяжении всего времени контакта пальца с экраном.

    Это позволяет нам получать координаты предыдущей позиции каждого касания и использовать подходящий метод "canvas-контекста" для рисования отрезка линии, соединяющего начало и конец.

    @@ -139,7 +139,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre>

    Обработка завершения касания

    -

    Когда пользователь убирает палец с сенсорной поверхности, срабатывает событие {{domxref("Element/touchend_event", "touchend")}}. Мы обрабатываем его, вызывая функцию handleEnd(), которая представлена ниже. Ее задача - рисовать последний отрезок линии для каждого касания, которое завершилось, и удалять точку касания из текущего списка касаний.

    +

    Когда пользователь убирает палец с сенсорной поверхности, срабатывает событие {{domxref("Element/touchend_event", "touchend")}}. Мы обрабатываем его, вызывая функцию handleEnd(), которая представлена ниже. Её задача - рисовать последний отрезок линии для каждого касания, которое завершилось, и удалять точку касания из текущего списка касаний.

    function handleEnd(evt) {
       evt.preventDefault();
    @@ -167,9 +167,9 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre>
    } -

    Она очень похожа на предыдущую функцию; единственное отличие заключается в том, что,что теперь мы рисуем маленький квадрат, чтобы обозначить конец, и в том, что когда мы мы вызываем  Array.splice(), мы просто удаляем старую запись из текущего списка касаний без добавления обновленной информации. В результате мы прекращаем отслеживать эту точку касания.

    +

    Она очень похожа на предыдущую функцию; единственное отличие заключается в том, что,что теперь мы рисуем маленький квадрат, чтобы обозначить конец, и в том, что когда мы мы вызываем  Array.splice(), мы просто удаляем старую запись из текущего списка касаний без добавления обновлённой информации. В результате мы прекращаем отслеживать эту точку касания.

    -

    Обработка отмененных касаний

    +

    Обработка отменённых касаний

    Если палец пользователя перемещается в интерфейс браузера или прикосновение должно быть отменено, отправляется событие {{domxref("Element/touchcancel_event", "touchcancel")}}, и мы вызываем функцию handleCancel(), приведённую ниже.

    @@ -330,8 +330,8 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre>

    Firefox, события касаний и многопроцессность (e10s)

    -

    В Firefox события касания отключены, когда отключен e10s (электролиз; многопроцессорный Firefox). e10s включен по умолчанию в Firefox, но может в конечном итоге отключаться в определенных ситуациях, например, когда установлены определенные инструменты специальных возможностей или надстройки Firefox, для работы которых требуется отключение e10s. Это означает, что даже на настольном компьютере / ноутбуке с сенсорным экраном сенсорные события не будут включены.

    +

    В Firefox события касания отключены, когда отключён e10s (электролиз; многопроцессорный Firefox). e10s включён по умолчанию в Firefox, но может в конечном итоге отключаться в определённых ситуациях, например, когда установлены определённые инструменты специальных возможностей или надстройки Firefox, для работы которых требуется отключение e10s. Это означает, что даже на настольном компьютере / ноутбуке с сенсорным экраном сенсорные события не будут включены.

    -

    Вы можете проверить, отключен ли e10s, перейдя в about:support и посмотрев на запись «Многопроцессорная Windows» в разделе «Основы приложения». 1/1 означает, что он включен, 0/1 означает отключен.

    +

    Вы можете проверить, отключён ли e10s, перейдя в about:support и посмотрев на запись «Многопроцессорная Windows» в разделе «Основы приложения». 1/1 означает, что он включён, 0/1 означает отключен.

    -

    Если вы хотите принудительно включить e10s - чтобы явно повторно включить поддержку сенсорных событий - вам нужно перейти к about:config и создать новое логическое предпочтение browser.tabs.remote.force-enable. Установите значение true, перезапустите браузер, и e10s будет включен независимо от любых других настроек.

    +

    Если вы хотите принудительно включить e10s - чтобы явно повторно включить поддержку сенсорных событий - вам нужно перейти к about:config и создать новое логическое предпочтение browser.tabs.remote.force-enable. Установите значение true, перезапустите браузер, и e10s будет включён независимо от любых других настроек.

    diff --git a/files/ru/web/api/touchevent/index.html b/files/ru/web/api/touchevent/index.html index 2f5fa25eee..d141c8daa5 100644 --- a/files/ru/web/api/touchevent/index.html +++ b/files/ru/web/api/touchevent/index.html @@ -23,7 +23,7 @@ translation_of: Web/API/TouchEvent
    {{domxref("TouchEvent.TouchEvent", "TouchEvent()")}}
    -
    Создает экземпляр TouchEvent.
    +
    Создаёт экземпляр TouchEvent.

    Свойства

    @@ -65,7 +65,7 @@ translation_of: Web/API/TouchEvent

    Цель события - тот же экземпляр {{ domxref("Element") }}, что и для события touchstart с соответствующей точкой касания, даже если точка касания переместилась за пределы элемента.

    -

    Точки касания, удаленные с поверхности, содержатся в списке {{ domxref("TouchList") }}, который можно получить через атрибут changedTouches события.

    +

    Точки касания, удалённые с поверхности, содержатся в списке {{ domxref("TouchList") }}, который можно получить через атрибут changedTouches события.

    {{domxref("Element/touchmove_event", "touchmove")}}

    diff --git a/files/ru/web/api/url/createobjecturl/index.html b/files/ru/web/api/url/createobjecturl/index.html index bff6b425d5..01201cc4b0 100644 --- a/files/ru/web/api/url/createobjecturl/index.html +++ b/files/ru/web/api/url/createobjecturl/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/URL/createObjectURL

    Определение

    -

    URL.createObjectURL() - статический метод, который создает {{domxref("DOMString")}}, содержащий URL с указанием на объект, заданный как параметр. Время жизни URL связано с {{domxref("document")}} окна в котором он был создан. Новый URL объект может представлять собой {{domxref("File")}} объект или {{domxref("Blob")}} объект.

    +

    URL.createObjectURL() - статический метод, который создаёт {{domxref("DOMString")}}, содержащий URL с указанием на объект, заданный как параметр. Время жизни URL связано с {{domxref("document")}} окна в котором он был создан. Новый URL объект может представлять собой {{domxref("File")}} объект или {{domxref("Blob")}} объект.

    {{AvailableInWorkers}}

    @@ -23,7 +23,7 @@ translation_of: Web/API/URL/createObjectURL
    -
    Объект типа {{domxref("File")}} или {{domxref("Blob")}} для которого создается URL объект.
    +
    Объект типа {{domxref("File")}} или {{domxref("Blob")}} для которого создаётся URL объект.
      @@ -35,7 +35,7 @@ translation_of: Web/API/URL/createObjectURL

      Заметки

      -

      При каждом вызове createObjectURL(), создается новый URL объект, даже если он уже был ранее создан для того же самого объекта. Память для каждого из них нужно освобождать с помощью {{domxref("URL.revokeObjectURL()")}}, в том случае, если они больше не нужны. Браузер сделает это автоматически с выгрузкой объекта, тем не менее в целях оптимизации производительности и использования памяти, следует принудительно выгружать их по возможности.

      +

      При каждом вызове createObjectURL(), создаётся новый URL объект, даже если он уже был ранее создан для того же самого объекта. Память для каждого из них нужно освобождать с помощью {{domxref("URL.revokeObjectURL()")}}, в том случае, если они больше не нужны. Браузер сделает это автоматически с выгрузкой объекта, тем не менее в целях оптимизации производительности и использования памяти, следует принудительно выгружать их по возможности.

      Спецификации

      diff --git a/files/ru/web/api/usb/requestdevice/index.html b/files/ru/web/api/usb/requestdevice/index.html index bb162ad242..5ec208774e 100644 --- a/files/ru/web/api/usb/requestdevice/index.html +++ b/files/ru/web/api/usb/requestdevice/index.html @@ -43,7 +43,7 @@ translation_of: Web/API/USB/requestDevice

      Этот пример запрашивает любое из перечисленных USB-устройств. Обратите внимание, указаны два разных PID. Оба присутствуют в списке фильтров для requestDevice(). При этом браузер покажет окно для выбора и подтверждения доступа к устройству. Только выбранное пользователем устройство будет передано в then().

      -

      Количество фильтров не определяет количество устройств, показываемых браузером. Например, если найдено только USB-устройство с product ID 0xa800, браузер отобразит только одно устройство. Но, если браузер определит два устройства, совпадающих с первым фильтром, и еще одно, совпадающее со вторым, будут показаны все три устройства.

      +

      Количество фильтров не определяет количество устройств, показываемых браузером. Например, если найдено только USB-устройство с product ID 0xa800, браузер отобразит только одно устройство. Но, если браузер определит два устройства, совпадающих с первым фильтром, и ещё одно, совпадающее со вторым, будут показаны все три устройства.

      const filters = [
               {vendorId: 0x1209, productId: 0xa800},
      diff --git a/files/ru/web/api/vrdisplay/requestpresent/index.html b/files/ru/web/api/vrdisplay/requestpresent/index.html
      index 9537b94035..acdb59197f 100644
      --- a/files/ru/web/api/vrdisplay/requestpresent/index.html
      +++ b/files/ru/web/api/vrdisplay/requestpresent/index.html
      @@ -27,9 +27,9 @@ translation_of: Web/API/VRDisplay/requestPresent
       
       
        -
      • Если {{domxref("VRDisplayCapabilities.canPresent")}} ложно или если массив объектов VRLayer содержит более чем {{domxref("VRDisplayCapabilities.maxLayers")}} слоев, произойдёт переход в состояние "отклонено".
      • +
      • Если {{domxref("VRDisplayCapabilities.canPresent")}} ложно или если массив объектов VRLayer содержит более чем {{domxref("VRDisplayCapabilities.maxLayers")}} слоёв, произойдёт переход в состояние "отклонено".
      • Если объект {{domxref("VRDisplay")}} уже отображает сцену, то вызов его метода requestPresent() обновит массив отображаемых VRLayer объектов.
      • -
      • Если объект VRDisplay уже отображает сцену, а вызов метода requestPresent() приведет к возврату Promise в состоянии "отклонено", то отображение сцены прекратится.
      • +
      • Если объект VRDisplay уже отображает сцену, а вызов метода requestPresent() приведёт к возврату Promise в состоянии "отклонено", то отображение сцены прекратится.
      • If requestPresent() is called outside of an engagement gesture the promise will be rejected unless the VRDisplay was already presenting. This engagement gesture is also sufficient to allow requestPointerLock() calls until presentation has ended.
      diff --git a/files/ru/web/api/vrdisplayevent/index.html b/files/ru/web/api/vrdisplayevent/index.html index 8b8c2bee90..9847e7e521 100644 --- a/files/ru/web/api/vrdisplayevent/index.html +++ b/files/ru/web/api/vrdisplayevent/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/VRDisplayEvent
      {{domxref("VRDisplayEvent.VRDisplayEvent()")}}
      -
      Создает экземпляр объекта VRDisplayEvent.
      +
      Создаёт экземпляр объекта VRDisplayEvent.

      Properties

      diff --git a/files/ru/web/api/vrframedata/index.html b/files/ru/web/api/vrframedata/index.html index 5fe9d79079..babe98004a 100644 --- a/files/ru/web/api/vrframedata/index.html +++ b/files/ru/web/api/vrframedata/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/VRFrameData
      {{domxref("VRFrameData.VRFrameData()")}}
      -
      Создает экземпляр объекта VRFrameData.
      +
      Создаёт экземпляр объекта VRFrameData.

      Свойства

      diff --git a/files/ru/web/api/web_animations_api/index.html b/files/ru/web/api/web_animations_api/index.html index bb8ac2a631..7e9f416702 100644 --- a/files/ru/web/api/web_animations_api/index.html +++ b/files/ru/web/api/web_animations_api/index.html @@ -6,7 +6,7 @@ translation_of: Web/API/Web_Animations_API

      {{DefaultAPISidebar("Веб-анимация")}} {{SeeCompatTable()}}

      -

      API веб-анимации позволяет синхронизировать и сроки изменения представления веб-страницы, то есть анимации элементов DOM. Она делает это путем объединения двух моделей: Модель синхронизации и анимации модели.

      +

      API веб-анимации позволяет синхронизировать и сроки изменения представления веб-страницы, то есть анимации элементов DOM. Она делает это путём объединения двух моделей: Модель синхронизации и анимации модели.

      Основные понятия и использование API

      @@ -28,7 +28,7 @@ translation_of: Web/API/Web_Animations_API
      {{Domxref("DocumentTimeline")}}
      Представляет временные рамки анимации, в том числе временные рамки анимации по умолчанию для документа (через свойство {{domxref("Document.timeline")}}).
      {{Domxref("AnimationEffectTiming")}}
      -
      Объект, содержащий временные свойства, возвращенные {{domxref("KeyframeEffect.timing", "сроки")}} атрибут {{domxref("KeyframeEffect")}}. Он наследует свои свойства от {{domxref("AnimationEffectTimingReadOnly")}}, но в не только чтение формы.
      +
      Объект, содержащий временные свойства, возвращённые {{domxref("KeyframeEffect.timing", "сроки")}} атрибут {{domxref("KeyframeEffect")}}. Он наследует свои свойства от {{domxref("AnimationEffectTimingReadOnly")}}, но в не только чтение формы.
      {{Domxref("SharedKeyframeList")}}
      Представляет собой последовательность ключевых кадров , которые могут быть разделены между {{domxref("KeyframeEffect")}} объектов. Используя SharedKeyframeListобъекты, несколько KeyframeEffectобъектов могут повторно использовать одни и те же ключевые кадры , не заплатив стоимость разбора их несколько раз.
      {{domxref("AnimationEffectTimingProperties")}}
      @@ -58,7 +58,7 @@ translation_of: Web/API/Web_Animations_API

      Веб-анимация для чтения только интерфейсы

      -

      Следующие интерфейсы включены в спецификации для таких целей, как определение функции, используемые в нескольких других местах, или служить в качестве основы для нескольких интерфейсов, которые могут быть использованы в качестве значений одних и тех же свойств. Вы бы не напрямую использовать их в работе веб-разработки, но они могут быть интересны для авторов библиотеки, чтобы понять, как эта технология работает, так что их реализации могут быть более эффективными, или для инженеров браузеров, которые ищут более легкой ссылки, чем спецификация обеспечивает.

      +

      Следующие интерфейсы включены в спецификации для таких целей, как определение функции, используемые в нескольких других местах, или служить в качестве основы для нескольких интерфейсов, которые могут быть использованы в качестве значений одних и тех же свойств. Вы бы не напрямую использовать их в работе веб-разработки, но они могут быть интересны для авторов библиотеки, чтобы понять, как эта технология работает, так что их реализации могут быть более эффективными, или для инженеров браузеров, которые ищут более лёгкой ссылки, чем спецификация обеспечивает.

      {{Domxref("AnimationEffectTimingReadOnly")}}
      diff --git a/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html b/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html index d050b43cb8..e19524852d 100644 --- a/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html +++ b/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API ---

      {{DefaultAPISidebar("Web Animations")}}

      -

      Web Animations API позволяет нам создать анимацию и управлять её воспроизведением с помощью JavaScript. Эта статья будет правильным руководством для старта c веселыми демками и уроками с Алисой в Стране Чудес.

      +

      Web Animations API позволяет нам создать анимацию и управлять её воспроизведением с помощью JavaScript. Эта статья будет правильным руководством для старта c весёлыми демками и уроками с Алисой в Стране Чудес.

      Встречайте Web Animations API

      @@ -18,7 +18,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API

      Поддержка Браузеров

      -

      Основы и компоненты Web Animations API, описанные в этой статье доступны в Firefox 48+ и Chrome 36+. Webkit и Edge перешли на  API соответственно, но пока нет полной поддержки во всех браузерах, есть удобная служба проверки handy maintained polyfill которая тестирует и добавляет ее при необходимости.

      +

      Основы и компоненты Web Animations API, описанные в этой статье доступны в Firefox 48+ и Chrome 36+. Webkit и Edge перешли на  API соответственно, но пока нет полной поддержки во всех браузерах, есть удобная служба проверки handy maintained polyfill которая тестирует и добавляет её при необходимости.

      Написание CSS Animations вместе с Web Animations API

      @@ -26,11 +26,11 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API

      CSS версия

      -

      Вот такая анимация написана в CSS, показывающая, как Алиса падает в кроличью нору, которая ведет в страну чудес (см. полный код на Codepen):

      +

      Вот такая анимация написана в CSS, показывающая, как Алиса падает в кроличью нору, которая ведёт в страну чудес (см. полный код на Codepen):

      Alice Tumbling down the rabbit's hole.

      -

      Заметьте, что фон двигается, Алиса крутится и ее цвет меняется при вращении. Мы собираемся сосредоточиться только на Алисе в этом уроке. Вот упрощенный код CSS, который управляет движением Алисы.

      +

      Заметьте, что фон двигается, Алиса крутится и её цвет меняется при вращении. Мы собираемся сосредоточиться только на Алисе в этом уроке. Вот упрощённый код CSS, который управляет движением Алисы.

      #alice {
         animation: aliceTumbling infinite 3s linear;
      @@ -50,7 +50,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API
         }
       }
      -

      Изменение цвета Алисы и ее вращение в течение 3 секунд при постоянной (линейной) скорости и бесконечном цикле. В @keyframes блоке мы видим, что 30%  из всего цикла (около 9 секунд), цвет Алисы меняется от черного до насыщенного бордового, а потом снова в черный к концу цикла.

      +

      Изменение цвета Алисы и её вращение в течение 3 секунд при постоянной (линейной) скорости и бесконечном цикле. В @keyframes блоке мы видим, что 30%  из всего цикла (около 9 секунд), цвет Алисы меняется от чёрного до насыщенного бордового, а потом снова в чёрный к концу цикла.

      Движение в JavaScript

      @@ -66,13 +66,13 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' } ];
      -

      Здесь мы используем массив, содержащий несколько объектов. Каждый объект представляет собой код от оригинального CSS. Однако, в отличие от CSS, Web Animations API не нужно назначать точные проценты по анимации для каждого открывающего кода. Он автоматически разделит анимацию на равные части в соответствии с количеством кодов, которые вы ему даете. Это означает, что объект Keyframe с тремя кодами будет воспроизводить средний код 50% времени через каждый цикл анимации если не указано иное.

      +

      Здесь мы используем массив, содержащий несколько объектов. Каждый объект представляет собой код от оригинального CSS. Однако, в отличие от CSS, Web Animations API не нужно назначать точные проценты по анимации для каждого открывающего кода. Он автоматически разделит анимацию на равные части в соответствии с количеством кодов, которые вы ему даёте. Это означает, что объект Keyframe с тремя кодами будет воспроизводить средний код 50% времени через каждый цикл анимации если не указано иное.

      -

      Если мы хотим, чтобы определенный набор кода смещался относительного другого кода, мы можем указать смещение непосредственно на объекте который будет меняться, отделив значение запятой. В приведенном выше примере видно, чтобы цвет Алисы менялся на 30%, а не на 50% всего цикла, мы задаем смещение: 0,333.

      +

      Если мы хотим, чтобы определённый набор кода смещался относительного другого кода, мы можем указать смещение непосредственно на объекте который будет меняться, отделив значение запятой. В приведённом выше примере видно, чтобы цвет Алисы менялся на 30%, а не на 50% всего цикла, мы задаём смещение: 0,333.

      Там должно быть как минимум два кадра (представляющих начало и конец анимации). Если в вашем списке keyframe только одна запись, {{domxref("Element.animate()")}} то анимация выполняться не будет, вы получите ошибку NotSupportedError exception.

      -

      И так повторим, код равномерно распределен по умолчанию, если не указано смещение. Удобно, не так ли?

      +

      И так повторим, код равномерно распределён по умолчанию, если не указано смещение. Удобно, не так ли?

      Представление свойства времени.

      @@ -87,7 +87,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API
      • Во-первых, длительность в миллисекундах, в отличии от секунд - 3000, а не 3с. Как {{domxref("WindowTimers.setTimeout()")}} и {{domxref("Window.requestAnimationFrame()")}}, Web Animations API использует только миллисекунды.
      • -
      • Во-вторых, что вы заметили, что он итерационный (повторяется), а не счетчик повторений.
      • +
      • Во-вторых, что вы заметили, что он итерационный (повторяется), а не счётчик повторений.
      @@ -96,7 +96,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API

      Собираем части вместе.

      -

      Сейчас соберем все части вместе используя {{domxref("Element.animate()")}} метод:

      +

      Сейчас соберём все части вместе используя {{domxref("Element.animate()")}} метод:

      document.getElementById("alice").animate(
         aliceTumbling,
      @@ -105,7 +105,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API
       
       

      И вуаля, анимация работает(смотрите готовый вариант на version on Codepen).

      -

      The animate() метод может быть применен на любой DOM-элемент, который может быть анимирован с помощью CSS. И он может быть записан несколькими способами. Вместо того, чтобы делить объекты на ключевые кадры и временные характеристики, мы могли бы просто передать свои значения непосредственно вот так:

      +

      The animate() метод может быть применён на любой DOM-элемент, который может быть анимирован с помощью CSS. И он может быть записан несколькими способами. Вместо того, чтобы делить объекты на ключевые кадры и временные характеристики, мы могли бы просто передать свои значения непосредственно вот так:

      document.getElementById("alice").animate(
         [
      @@ -118,7 +118,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API
         }
       );
      -

      Более того, если мы хотели указать только длительность анимации, а не ее повторение (по умолчанию анимации повторяется один раз), мы могли бы пройтись только по миллисекундам:

      +

      Более того, если мы хотели указать только длительность анимации, а не её повторение (по умолчанию анимации повторяется один раз), мы могли бы пройтись только по миллисекундам:

      document.getElementById("alice").animate(
         [
      @@ -133,7 +133,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API
       
       

      Playing the growing and shrinking game with Alice.

      -

      В этой игре Алиса меняется в росте, она то растет, то уменьшается, а контролируем мы этот процесс с помощью  бутылки и кекса. Каждый из них имеют свою анимацию.

      +

      В этой игре Алиса меняется в росте, она то растёт, то уменьшается, а контролируем мы этот процесс с помощью  бутылки и кекса. Каждый из них имеют свою анимацию.

      Пауза и проигрывание анимации.

      @@ -149,7 +149,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API duration: aliceChange.effect.timing.duration / 2 });
      -

      Метод {{domxref("Element.animate()")}} будет выполняться сразу же как начнется игра. Чтобы предотвратить автоматическое поедание кекса до того, как пользователь на него нажмет, мы вызываем {{domxref("Animation.pause()")}} сразу же как игра открывается, например так:

      +

      Метод {{domxref("Element.animate()")}} будет выполняться сразу же как начнётся игра. Чтобы предотвратить автоматическое поедание кекса до того, как пользователь на него нажмёт, мы вызываем {{domxref("Animation.pause()")}} сразу же как игра открывается, например так:

      nommingCake.pause();
      @@ -180,11 +180,11 @@ cake.addEventListener("touchstart", growAlice, false);
      • {{domxref("Animation.finish()")}} перейти в конец анимации.
      • -
      • {{domxref("Animation.cancel()")}} прервать анимацию и удалить ее эффект.
      • -
      • {{domxref("Animation.reverse()")}} устанавливать скорость анимации если установить ({{domxref("Animation.playbackRate")}} отрицательное значение, то анимация пойдет в обратном порядке.
      • +
      • {{domxref("Animation.cancel()")}} прервать анимацию и удалить её эффект.
      • +
      • {{domxref("Animation.reverse()")}} устанавливать скорость анимации если установить ({{domxref("Animation.playbackRate")}} отрицательное значение, то анимация пойдёт в обратном порядке.
      -

      Давайте посмотрим на первый playbackRate— отрицательное значение будет запускать анимацию в обратном направлении. Когда Алиса пьет из бутылки, она становится меньше. Это происходит потому, что бутылка изменяет ее анимацию playbackRate от 1 до -1:

      +

      Давайте посмотрим на первый playbackRate— отрицательное значение будет запускать анимацию в обратном направлении. Когда Алиса пьёт из бутылки, она становится меньше. Это происходит потому, что бутылка изменяет её анимацию playbackRate от 1 до -1:

      var shrinkAlice = function() {
         aliceChange.playbackRate = -1;
      @@ -194,11 +194,11 @@ cake.addEventListener("touchstart", growAlice, false);
      bottle.addEventListener("mousedown", shrinkAlice, false); bottle.addEventListener("touchstart", shrinkAlice, false); -

      В Through the Looking-Glass, Алиса путешествует по миру, где должна бежать, чтобы оставаться на месте и бежать в двое быстрее, чтобы двигаться вперед. Например в гонке с Красной королевой, Алиса и Красная королева бегут, чтобы оставаться на месте (проверить полный код можно на full code on Codepen):

      +

      В Through the Looking-Glass, Алиса путешествует по миру, где должна бежать, чтобы оставаться на месте и бежать в двое быстрее, чтобы двигаться вперёд. Например в гонке с Красной королевой, Алиса и Красная королева бегут, чтобы оставаться на месте (проверить полный код можно на full code on Codepen):

      Alice and the Red Queen race to get to the next square in this game.

      -

      Так как маленькие дети легко устают, в отличии от шахматных фигур, Алиса постоянно замедляется. Мы отобразили это в коде путем ослабления (уменьшения скорости) playbackRate анимации.

      +

      Так как маленькие дети легко устают, в отличии от шахматных фигур, Алиса постоянно замедляется. Мы отобразили это в коде путём ослабления (уменьшения скорости) playbackRate анимации.

      setInterval( function() {
       
      @@ -209,7 +209,7 @@ bottle.addEventListener("touchstart", shrinkAlice, false);
      }, 3000); -

      Но постоянно нажимая на них мышью, мы заставляем их ускориться путем умножения playbackRate (скорости анимации)

      +

      Но постоянно нажимая на них мышью, мы заставляем их ускориться путём умножения playbackRate (скорости анимации)

      var goFaster = function() {
       
      @@ -224,7 +224,7 @@ document.addEventListener("touchstart", goFaster);

      Получение информации из анимации

      -

      Представьте, что мы могли бы использовать playbackRate, как улучшения доступности сайта для пользователей с вестибулярными расстройствами, позволяя им замедлить анимацию на всех страницах сайта. Это невозможно сделать с помощью CSS без пересчета длительности в каждом правиле CSS, но с веб-анимации API, мы могли бы использовать в будущем (пока не поддерживается в браузерах!) Метод {{domxref("document.getAnimations()")}} систему циклов по каждой анимации на странице и сократить скорость анимации вот так:

      +

      Представьте, что мы могли бы использовать playbackRate, как улучшения доступности сайта для пользователей с вестибулярными расстройствами, позволяя им замедлить анимацию на всех страницах сайта. Это невозможно сделать с помощью CSS без пересчёта длительности в каждом правиле CSS, но с веб-анимации API, мы могли бы использовать в будущем (пока не поддерживается в браузерах!) Метод {{domxref("document.getAnimations()")}} систему циклов по каждой анимации на странице и сократить скорость анимации вот так:

      document.getAnimations().forEach(
         function (animation) {
      @@ -250,21 +250,21 @@ document.addEventListener("touchstart", goFaster);
      fill: 'both' }); -

      Изменение размера Алисы в два раза происходит за 8 секунд. Затем мы останавливаем ее:

      +

      Изменение размера Алисы в два раза происходит за 8 секунд. Затем мы останавливаем её:

      aliceChange.pause();
      -

      Если бы оставили ее на паузе в начале анимации , то Алиса увеличилась бы в два раза, когда выпила бы всю бутылку. Мы хотим остановить ее анимацию "воспроизведение" в середине, когда она уже на половину выполнена. Мы могли бы это сделать, установив {{domxref("Animation.currentTime")}} 4 секунды, вот так:

      +

      Если бы оставили её на паузе в начале анимации , то Алиса увеличилась бы в два раза, когда выпила бы всю бутылку. Мы хотим остановить её анимацию "воспроизведение" в середине, когда она уже на половину выполнена. Мы могли бы это сделать, установив {{domxref("Animation.currentTime")}} 4 секунды, вот так:

      aliceChange.currentTime = 4000;
      -

      Но во время работы над этой анимацией мы можем сильно увеличить ее продолжительность. Разве не лучше установить динамическое изменение времени (currentTime), тогда нам не придется делать два обновления за один раз. Мы можем это сделать с помощью ссылки на изменение свойства размера Алисы (aliceChange) {{domxref("Animation.effect")}} который возвращает все детали и действующие эффекты, содержащиеся в объекте, на Алису:

      +

      Но во время работы над этой анимацией мы можем сильно увеличить её продолжительность. Разве не лучше установить динамическое изменение времени (currentTime), тогда нам не придётся делать два обновления за один раз. Мы можем это сделать с помощью ссылки на изменение свойства размера Алисы (aliceChange) {{domxref("Animation.effect")}} который возвращает все детали и действующие эффекты, содержащиеся в объекте, на Алису:

      aliceChange.currentTime = aliceChange.effect.timing.duration / 2;
      -

      эффекты позволяют нам получить доступ к анимации keyframe (кадров) и синхронности объектов - aliceChange.effect.timing , указывающий на время Алисиных элементов (которые имеют тип {{domxref("AnimationEffectTimingReadOnly")}}) — в этом содержится ее {{domxref("AnimationEffectTimingReadOnly.duration")}}. Мы можем распределить ее длительность на два раза, чтобы получить среднюю точку во временной шкале для установки нормального роста.

      +

      эффекты позволяют нам получить доступ к анимации keyframe (кадров) и синхронности объектов - aliceChange.effect.timing , указывающий на время Алисиных элементов (которые имеют тип {{domxref("AnimationEffectTimingReadOnly")}}) — в этом содержится её {{domxref("AnimationEffectTimingReadOnly.duration")}}. Мы можем распределить её длительность на два раза, чтобы получить среднюю точку во временной шкале для установки нормального роста.

      -

      Теперь мы можем запустить ее в обратном порядке и играться анимацией в любом направлении, чтобы заставить ее расти или уменьшаться

      +

      Теперь мы можем запустить её в обратном порядке и играться анимацией в любом направлении, чтобы заставить её расти или уменьшаться

      var drinking = document.getElementById('liquid').animate(
       [
      @@ -280,7 +280,7 @@ drinking.pause();

      Теперь все три анимации связаны только с одной продолжительности, и мы можем легко переходить из одного места.

      -

      Мы также можем использовать веб-анимации API, чтобы выяснить Текущее время анимации. Игра заканчивается, когда вы бежите от съеденного торта или выпитой бутылки. Изображение у игрока будет зависеть от анимации Алисы. Стала ли она слишком большой на фоне крошечной двери и не может в нее пройти или слишком маленькой и не может достать ключ, чтобы открыть дверь. Мы можем выяснить, стала она большой или маленький в конце ее анимация, получая текущее время ее анимации currentTime и разделив ее на activeDuration:

      +

      Мы также можем использовать веб-анимации API, чтобы выяснить Текущее время анимации. Игра заканчивается, когда вы бежите от съеденного торта или выпитой бутылки. Изображение у игрока будет зависеть от анимации Алисы. Стала ли она слишком большой на фоне крошечной двери и не может в неё пройти или слишком маленькой и не может достать ключ, чтобы открыть дверь. Мы можем выяснить, стала она большой или маленький в конце её анимация, получая текущее время её анимации currentTime и разделив её на activeDuration:

      var endGame = function() {
       
      @@ -334,7 +334,7 @@ aliceChange.onfinish = endGame;
       
       
      -

      Нравится перспектива? Web Animations API также дает две перспективы: onfinish и oncancel.

      +

      Нравится перспектива? Web Animations API также даёт две перспективы: onfinish и oncancel.

      Эти обещания не полностью поддерживаются в настоящий момент.

      diff --git a/files/ru/web/api/web_audio_api/index.html b/files/ru/web/api/web_audio_api/index.html index ba3df973e4..cb927ca206 100644 --- a/files/ru/web/api/web_audio_api/index.html +++ b/files/ru/web/api/web_audio_api/index.html @@ -12,7 +12,7 @@ tags: translation_of: Web/API/Web_Audio_API ---
      -

      Web audio API - мощный и многогранный инструмент для манипуляции звуковой составляющей на веб-странице, что дает возможность разработчикам выбрать источники, добавить к ним специальные звуковые эффекты (такие как panning), визуализировать их и многое другое.

      +

      Web audio API - мощный и многогранный инструмент для манипуляции звуковой составляющей на веб-странице, что даёт возможность разработчикам выбрать источники, добавить к ним специальные звуковые эффекты (такие как panning), визуализировать их и многое другое.

      Общие концепции и использование Web Audio

      @@ -52,7 +52,7 @@ translation_of: Web/API/Web_Audio_API
      {{domxref("AudioContext")}}
      -
      AudioContext представляет собой некий аудио обрабатывающий объект, сооруженный из аудио модулей связанных вместе, где каждый является экземпляром класса {{domxref("AudioNode")}}. AudioContext управляет созданием узлов, содержащихся в нём и выполняет обработку или декодирование аудио данных.
      +
      AudioContext представляет собой некий аудио обрабатывающий объект, сооружённый из аудио модулей связанных вместе, где каждый является экземпляром класса {{domxref("AudioNode")}}. AudioContext управляет созданием узлов, содержащихся в нём и выполняет обработку или декодирование аудио данных.
      {{domxref("AudioNode")}}
      Интерфейс AudioNode представляет собой некий обрабатывающий  модуль такой как источник аудио  (то есть HTML <audio> или <video> элемент), конечный аудио объект, модуль непосредственной обработки (например фильтр BiquadFilterNode или звуковой контроллер такой как GainNode).
      {{domxref("AudioParam")}}
      @@ -87,7 +87,7 @@ translation_of: Web/API/Web_Audio_API
      {{domxref("BiquadFilterNode")}}
      BiquadFilterNode представляет простой фильтр низкого порядка. Это {{domxref("AudioNode")}} представляющий различные виды фильтров такие как эквалайзер или управление тональностью. BiquadFilterNode имеет ровно один вход и один выход.
      {{domxref("ConvolverNode")}}
      -
      ConvolverNode это {{domxref("AudioNode")}} выполняющий линейную свертку AudioBuffer, часто применяется для достижения эффекта реверберации по заданной импульсной характеристике.
      +
      ConvolverNode это {{domxref("AudioNode")}} выполняющий линейную свёртку AudioBuffer, часто применяется для достижения эффекта реверберации по заданной импульсной характеристике.
      {{domxref("DelayNode")}}
      DelayNode представляет собой линию задержки (delay-line); содержит {{domxref("AudioNode")}} вызывающий задержку между выходным и входным сигналом.
      {{domxref("DynamicsCompressorNode")}}
      diff --git a/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html b/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html index cd2730006c..63e50078b7 100644 --- a/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html +++ b/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html @@ -27,10 +27,10 @@ analyser.connect(distortion); distortion.connect(audioCtx.destination);
      -

      Примечание: вам не нужно подключать вывод анализатора к другому узлу для его работы, пока его ввод подключен к источнику, либо напрямую, либо через другой узел.

      +

      Примечание: вам не нужно подключать вывод анализатора к другому узлу для его работы, пока его ввод подключён к источнику, либо напрямую, либо через другой узел.

      -

      Затем анализатор захватит аудиоданные, используя быстрое преобразование Фурье (БПФ) в определенной частотной области, в зависимости от того, что вы укажете как значение свойства {{ domxref("AnalyserNode.fftSize") }} (если свойство не задано, то значение по умолчанию равно 2048).

      +

      Затем анализатор захватит аудиоданные, используя быстрое преобразование Фурье (БПФ) в определённой частотной области, в зависимости от того, что вы укажете как значение свойства {{ domxref("AnalyserNode.fftSize") }} (если свойство не задано, то значение по умолчанию равно 2048).

      Примечание: Вы так же можете указать значения минимума и максимума для диапазона масштабирования данных БПФ, используя {{ domxref("AnalyserNode.minDecibels") }} и {{ domxref("AnalyserNode.maxDecibels") }}, и разные константы усреднения данных с помощью {{ domxref("AnalyserNode.smoothingTimeConstant") }}. Прочтите эти страницы, чтобы получить больше информации о том как их использовать.

      @@ -38,9 +38,9 @@ distortion.connect(audioCtx.destination);

      Чтобы получить данные, Вам нужно использовать методы {{ domxref("AnalyserNode.getFloatFrequencyData()") }} и {{ domxref("AnalyserNode.getByteFrequencyData()") }}, чтобы получить данные о частоте, и {{ domxref("AnalyserNode.getByteTimeDomainData()") }} и {{ domxref("AnalyserNode.getFloatTimeDomainData()") }} чтобы получить данные о форме волны.

      -

      Эти методы копируют данные в указанный массив, поэтому Вам необходимо создать новый массив для хранения данных, прежде чем вызывать эти функции . Результат первой из них - числа типа float32, второй и третьей - uint8, поэтому стандартный массив JavaScript не подойдет для их хранения — следует использовать массивы {{ domxref("Float32Array") }} или {{ domxref("Uint8Array") }}, в зависимости от нужных Вам данных.

      +

      Эти методы копируют данные в указанный массив, поэтому Вам необходимо создать новый массив для хранения данных, прежде чем вызывать эти функции . Результат первой из них - числа типа float32, второй и третьей - uint8, поэтому стандартный массив JavaScript не подойдёт для их хранения — следует использовать массивы {{ domxref("Float32Array") }} или {{ domxref("Uint8Array") }}, в зависимости от нужных Вам данных.

      -

      Например, если параметр AnalyserNode.fftSize установлен на 2048, мы возвращаем значение {{ domxref("AnalyserNode.frequencyBinCount") }}, равное половине fft, затем вызываем Uint8Array() с frequencyBinCount в качестве длины — столько измерений мы произведем для данного размера fft.

      +

      Например, если параметр AnalyserNode.fftSize установлен на 2048, мы возвращаем значение {{ domxref("AnalyserNode.frequencyBinCount") }}, равное половине fft, затем вызываем Uint8Array() с frequencyBinCount в качестве длины — столько измерений мы произведём для данного размера fft.

      analyser.fftSize = 2048;
       var bufferLength = analyser.frequencyBinCount;
      @@ -95,7 +95,7 @@ var dataArray = new Uint8Array(bufferLength);
            var sliceWidth = WIDTH * 1.0 / bufferLength;
             var x = 0;
      -

      В цикле, мы задаем позицию небольшого отрезка волны для каждой точки в буфере на высоте, основанной на значении массива в этой точке, а затем перемещаем линию туда, где должен быть нарисован следующий отрезок:

      +

      В цикле, мы задаём позицию небольшого отрезка волны для каждой точки в буфере на высоте, основанной на значении массива в этой точке, а затем перемещаем линию туда, где должен быть нарисован следующий отрезок:

            for(var i = 0; i < bufferLength; i++) {
       
      @@ -127,9 +127,9 @@ var dataArray = new Uint8Array(bufferLength);

      Создание частотной гистограммы

      -

      Еще одна визуализация, которую можно создать, - это частотные диаграммы (такие, как строит Winamp). В проекте Voice-change-O-matic есть реализация такой диаграммы. Давайте посмотрим на нее.

      +

      Ещё одна визуализация, которую можно создать, - это частотные диаграммы (такие, как строит Winamp). В проекте Voice-change-O-matic есть реализация такой диаграммы. Давайте посмотрим на нее.

      -

      Сначала мы снова создаем анализатор и массив для данных, затем очищаем холст при помощи clearRect(). Единственное отличие от того, что мы делали раньше - ы том, что мы можем установить намного меньший размер fft. Таким образом, каждый столбец в диаграмме будет выглядеть как столбец, а не как тонкая полоска.

      +

      Сначала мы снова создаём анализатор и массив для данных, затем очищаем холст при помощи clearRect(). Единственное отличие от того, что мы делали раньше - ы том, что мы можем установить намного меньший размер fft. Таким образом, каждый столбец в диаграмме будет выглядеть как столбец, а не как тонкая полоска.

          analyser.fftSize = 256;
           var bufferLength = analyser.frequencyBinCount;
      @@ -138,7 +138,7 @@ var dataArray = new Uint8Array(bufferLength);
      canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); -

      Затем мы запускаем функцию draw()  и задаем цикл при помощи requestAnimationFrame() таким образом, чтобы в каждом кадре анимации данные обновлялись.

      +

      Затем мы запускаем функцию draw()  и задаём цикл при помощи requestAnimationFrame() таким образом, чтобы в каждом кадре анимации данные обновлялись.

          function draw() {
             drawVisual = requestAnimationFrame(draw);
      @@ -148,9 +148,9 @@ var dataArray = new Uint8Array(bufferLength);
      canvasCtx.fillStyle = 'rgb(0, 0, 0)'; canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); -

      Затем мы устанавливаем значение barWidth , равное ширине холста, деленной на количество столбцов (длину буфера). Однако, мы домножаем ширину на 2.5, поскольку на большинстве частот звука не будет, поскольку большинство звуков, которые мы слышим в повседневной жизни, находятся в определенных, достаточно низких, диапазонах частот. Нам нет смысла показывать множество пустых частот, поэтому мы просто сдвигаем столбцы, соответствующие наиболее распространенным частотам.

      +

      Затем мы устанавливаем значение barWidth , равное ширине холста, делённой на количество столбцов (длину буфера). Однако, мы домножаем ширину на 2.5, поскольку на большинстве частот звука не будет, поскольку большинство звуков, которые мы слышим в повседневной жизни, находятся в определённых, достаточно низких, диапазонах частот. Нам нет смысла показывать множество пустых частот, поэтому мы просто сдвигаем столбцы, соответствующие наиболее распространённым частотам.

      -

      Мы также устанавливаем значение переменных barHeight и x , задающей то, где на холсте должен быть размещен каждый столбец.

      +

      Мы также устанавливаем значение переменных barHeight и x , задающей то, где на холсте должен быть размещён каждый столбец.

            var barWidth = (WIDTH / bufferLength) * 2.5;
             var barHeight;
      @@ -174,7 +174,7 @@ var dataArray = new Uint8Array(bufferLength);
          draw();
      -

      Этот код дает нам следующий результат:

      +

      Этот код даёт нам следующий результат:

      a series of red bars in a bar graph, showing intensity of different frequencies in an audio signal

      diff --git a/files/ru/web/api/web_authentication_api/index.html b/files/ru/web/api/web_authentication_api/index.html index d7951c18d6..4407249491 100644 --- a/files/ru/web/api/web_authentication_api/index.html +++ b/files/ru/web/api/web_authentication_api/index.html @@ -11,11 +11,11 @@ translation_of: Web/API/Web_Authentication_API

      API Web Authentication (также называемое WebAuthn) использует {{interwiki("wikipedia", "Public-key_cryptography", "ассиметричную криптографию (систему с открытым ключом)")}} вместо паролей или SMS-сообщений для регистрации, входа и {{interwiki("wikipedia", "Multi-factor_authentication", "двухфакторной аутентификации")}} на веб-сайтах. Это устраняет многие значительные проблемы безопасности, такие как {{interwiki("wikipedia", "Phishing", "фишинг")}}, {{interwiki("wikipedia", "Data_breach", "утечки данных")}} и атаки на SMS или иные методы двухфакторной аутентификации, при этом сильно упрощая использование, т.к. пользователям не нужно запоминать десятки сложных паролей.

      -

      На многих сайтах уже есть страницы для регистрации и входа в существующие учетные записи, и Web Authentication API может быть как заменой, так и дополнением для них. Как и остальные виды Credential Management API, Web Authentication API содержит два базовых метода: для регистрации и для входа:

      +

      На многих сайтах уже есть страницы для регистрации и входа в существующие учётные записи, и Web Authentication API может быть как заменой, так и дополнением для них. Как и остальные виды Credential Management API, Web Authentication API содержит два базовых метода: для регистрации и для входа:

        -
      • {{domxref("CredentialsContainer.create()", "navigator.credentials.create()")}} - при использовании с опцией publicKey создает новый набор учетных данных для регистрации нового аккаунта или добавления пары ключей к уже существующему.
      • -
      • {{domxref("CredentialsContainer.get()", "navigator.credentials.get()")}} - при использовании с опцией publicKey использует существующий набор учетных данных для аутентификации в сервисе в качестве основного способа входа или второго фактора.
      • +
      • {{domxref("CredentialsContainer.create()", "navigator.credentials.create()")}} - при использовании с опцией publicKey создаёт новый набор учётных данных для регистрации нового аккаунта или добавления пары ключей к уже существующему.
      • +
      • {{domxref("CredentialsContainer.get()", "navigator.credentials.get()")}} - при использовании с опцией publicKey использует существующий набор учётных данных для аутентификации в сервисе в качестве основного способа входа или второго фактора.

      Обратите внимание, и create(), и get() работают только в Secure Context (например, когда подключение к серверу происходит через https или сервер работает на localhost).

      @@ -43,8 +43,8 @@ translation_of: Web/API/Web_Authentication_API
    • Приложение запрашивает регистрацию - The application makes the initial registration request. The protocol and format of this request is outside of the scope of the Web Authentication API.
    • Server Sends Challenge, User Info, and Relying Party Info - The server sends a challenge, user information, and relying party information to the JavaScript program. The protocol for communicating with the server is not specified and is outside of the scope of the Web Authentication API. Typically, server communications would be REST over https (probably using XMLHttpRequest or Fetch), but they could also be SOAP, RFC 2549 or nearly any other protocol provided that the protocol is secure. The parameters received from the server will be passed to the create() call, typically with little or no modification and returns a Promise that will resolve to a {{domxref("PublicKeyCredential")}} containing an {{domxref("AuthenticatorAttestationResponse")}}. Note that it is absolutely critical that the challenge be a buffer of random information (at least 16 bytes) and it MUST be generated on the server in order to ensure the security of the registration process.
    • Браузер вызывает authenticatorMakeCredential() для аутентификатора - Internally, the browser will validate the parameters and fill in any defaults, which become the {{domxref("AuthenticatorResponse.clientDataJSON")}}. One of the most important parameters is the origin, which is recorded as part of the clientData so that the origin can be verified by the server later. The parameters to the create() call are passed to the authenticator, along with a SHA-256 hash of the clientDataJSON (only a hash is sent because the link to the authenticator may be a low-bandwidth NFC or Bluetooth link and the authenticator is just going to sign over the hash to ensure that it isn't tampered with).
    • -
    • Аутентификатор создает новую пару ключей и Attestation - Before doing anything, the authenticator will typically ask for some form of user verification. This could be entering a PIN, using a fingerprint, doing an iris scan, etc. to prove that the user is present and consenting to the registration. After the user verification, the authenticator will create a new asymmetric key pair and safely store the private key for future reference. The public key will become part of the attestation, which the authenticator will sign over with a private key that was burned into the authenticator during its manufacturing process and that has a certificate chain that can be validated back to a root of trust.
    • -
    • Аутентификатор передает информацию в браузер - The new public key, a globally unique credential id, and other attestation data are returned to the browser where they become the attestationObject.
    • +
    • Аутентификатор создаёт новую пару ключей и Attestation - Before doing anything, the authenticator will typically ask for some form of user verification. This could be entering a PIN, using a fingerprint, doing an iris scan, etc. to prove that the user is present and consenting to the registration. After the user verification, the authenticator will create a new asymmetric key pair and safely store the private key for future reference. The public key will become part of the attestation, which the authenticator will sign over with a private key that was burned into the authenticator during its manufacturing process and that has a certificate chain that can be validated back to a root of trust.
    • +
    • Аутентификатор передаёт информацию в браузер - The new public key, a globally unique credential id, and other attestation data are returned to the browser where they become the attestationObject.
    • Браузер создаёт итоговый набор данных, приложение отвечает серверу - The create() Promise resolves to an {{domxref("PublicKeyCredential")}}, which has a {{domxref("PublicKeyCredential.rawId")}} that is the globally unique credential id along with a response that is the {{domxref("AuthenticatorAttestationResponse")}} containing the {{domxref("AuthenticatorResponse.clientDataJSON")}} and {{domxref("AuthenticatorAttestationResponse.attestationObject")}}. The {{domxref("PublicKeyCredential")}} is sent back to the server using any desired formatting and protocol (note that the ArrayBuffer properties need to be be base64 encoded or similar).
    • Сервер проверят и завершает регистрацию - Finally, the server is required to perform a series of checks to ensure that the registration was complete and not tampered with. These include:
        @@ -67,8 +67,8 @@ translation_of: Web/API/Web_Authentication_API
      1. Приложение запрашивает аутентификацию - The application makes the initial authentication request. The protocol and format of this request is outside of the scope of the Web Authentication API.
      2. Server Sends Challenge - The server sends a challenge to the JavaScript program. The protocol for communicating with the server is not specified and is outside of the scope of the Web Authentication API. Typically, server communications would be REST over https (probably using XMLHttpRequest or Fetch), but they could also be SOAP, RFC 2549 or nearly any other protocol provided that the protocol is secure. The parameters received from the server will be passed to the get() call, typically with little or no modification. Note that it is absolutely critical that the challenge be a buffer of random information (at least 16 bytes) and it MUST be generated on the server in order to ensure the security of the authentication process.
      3. Браузер вызывает authenticatorGetCredential() для аутентификатора - Internally, the browser will validate the parameters and fill in any defaults, which become the {{domxref("AuthenticatorResponse.clientDataJSON")}}. One of the most important parameters is the origin, which recorded as part of the clientData so that the origin can be verified by the server later. The parameters to the get() call are passed to the authenticator, along with a SHA-256 hash of the clientDataJSON (only a hash is sent because the link to the authenticator may be a low-bandwidth NFC or Bluetooth link and the authenticator is just going to sign over the hash to ensure that it isn't tampered with).
      4. -
      5. Аутентификатор создает подпись - The authenticator finds a credential for this service that matches the Relying Party ID and prompts a user to consent to the authentication. Assuming both of those steps are successful, the authenticator will create a new assertion by signing over the clientDataHash and authenticatorData with the private key generated for this account during the registration call.
      6. -
      7. Аутентификатор передает информацию в браузер - The authenticator returns the authenticatorData and assertion signature back to the browser.
      8. +
      9. Аутентификатор создаёт подпись - The authenticator finds a credential for this service that matches the Relying Party ID and prompts a user to consent to the authentication. Assuming both of those steps are successful, the authenticator will create a new assertion by signing over the clientDataHash and authenticatorData with the private key generated for this account during the registration call.
      10. +
      11. Аутентификатор передаёт информацию в браузер - The authenticator returns the authenticatorData and assertion signature back to the browser.
      12. Браузер создаёт итоговый набор данных, приложение отвечает серверу - The browser resolves the Promise to a {{domxref("PublicKeyCredential")}} with a {{domxref("PublicKeyCredential.response")}} that contains the {{domxref("AuthenticatorAssertionResponse")}}. It is up to the JavaScript application to transmit this data back to the server using any protocol and format of its choice.
      13. Сервер проверят и завершает аутентификацию - Upon receiving the result of the authentication request, the server performs validation of the response such as:
          diff --git a/files/ru/web/api/web_speech_api/index.html b/files/ru/web/api/web_speech_api/index.html index 3398c86aad..1a844c744f 100644 --- a/files/ru/web/api/web_speech_api/index.html +++ b/files/ru/web/api/web_speech_api/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Web_Speech_API

          Web Speech API позволяет веб приложениям управлять голосовыми данными. Существует два компонента к этому API:

            -
          • Распознавание голоса. Доступ обеспечивается через {{domxref("SpeechRecognition")}} интерфейс, который в свою очередь обеспечивает возможность распознавать текст из входящего аудио потока (обычно через устройство распознавания речи в устройстве по умолчанию) и отвечать соответственно. Воспользовавшись конструктором интерфейса вы можете создать новый {{domxref("SpeechRecognition")}} объект, у которого есть ряд событий для обнаружения начала речи через микрофон устройства. {{domxref("SpeechGrammar")}} интерфейс предоставляет контейнер для определенного набора грамматики, которое ваше приложение должно использовать. Грамматика определяется с помощью JSpeech Grammar Format (JSGF.)
          • +
          • Распознавание голоса. Доступ обеспечивается через {{domxref("SpeechRecognition")}} интерфейс, который в свою очередь обеспечивает возможность распознавать текст из входящего аудио потока (обычно через устройство распознавания речи в устройстве по умолчанию) и отвечать соответственно. Воспользовавшись конструктором интерфейса вы можете создать новый {{domxref("SpeechRecognition")}} объект, у которого есть ряд событий для обнаружения начала речи через микрофон устройства. {{domxref("SpeechGrammar")}} интерфейс предоставляет контейнер для определённого набора грамматики, которое ваше приложение должно использовать. Грамматика определяется с помощью JSpeech Grammar Format (JSGF.)
          • Доступ к синтезу речи осуществляется с помощью {{domxref("SpeechSynthesis")}} интерфейса, компонент text-to-speech позволяет приложениям прочесть свой текстовый контент (обычно через дефолтный синтезатор речи устройства). В {{domxref("SpeechSynthesisVoice")}} объектах есть различные типы голоса, и различным частям текста можно назначать   {{domxref("SpeechSynthesisUtterance")}} объекты. Можно начать воспроизведение передав их методу {{domxref("SpeechSynthesis.speak()")}}.
          diff --git a/files/ru/web/api/web_speech_api/using_the_web_speech_api/index.html b/files/ru/web/api/web_speech_api/using_the_web_speech_api/index.html index 27aa08113f..c78a987ba5 100644 --- a/files/ru/web/api/web_speech_api/using_the_web_speech_api/index.html +++ b/files/ru/web/api/web_speech_api/using_the_web_speech_api/index.html @@ -9,11 +9,11 @@ tags: - Синтез речи translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API --- -

          Web Speech API предоставляет 2 основных типа функционала — распознавание речи пользователя и речевое воспроизведение текста. Это предоставляет новые возможности для взаимодействия с интерфейсом и открывает перед нами новые горизонты создания уникального пользовательского опыта. Эта статья дает краткое описание обоих направлений с примерами кода и ссылкой на работающее приложение онлайн.

          +

          Web Speech API предоставляет 2 основных типа функционала — распознавание речи пользователя и речевое воспроизведение текста. Это предоставляет новые возможности для взаимодействия с интерфейсом и открывает перед нами новые горизонты создания уникального пользовательского опыта. Эта статья даёт краткое описание обоих направлений с примерами кода и ссылкой на работающее приложение онлайн.

          Распознавание речи

          -

          Механизм распознавания речи способен принимать речевой поток через микрофон устройства, а затем проверять его, используя свои внутренние алгоритмы. Для более точной работы рекомендуется использовать интерфейс SpeechGrammar, предоставляющий контейнер для определенного набора грамматики, которое ваше приложение должно использовать. Грамматика определяется с помощью JSpeech Grammar Format(JSGF.).

          +

          Механизм распознавания речи способен принимать речевой поток через микрофон устройства, а затем проверять его, используя свои внутренние алгоритмы. Для более точной работы рекомендуется использовать интерфейс SpeechGrammar, предоставляющий контейнер для определённого набора грамматики, которое ваше приложение должно использовать. Грамматика определяется с помощью JSpeech Grammar Format(JSGF.).

          После того, как пользовательская речь была распознана, алгоритм возвращает результат (список результатов) в качестве текстовой строки, с которой мы можем продолжить работу.

          @@ -33,7 +33,7 @@ translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API

          Браузерная поддержка

          -

          Поддержка интерфейса еще только распространяется на основные браузеры, и на текущий момент ограничена следующим образом:

          +

          Поддержка интерфейса ещё только распространяется на основные браузеры, и на текущий момент ограничена следующим образом:

          • @@ -50,7 +50,7 @@ translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API

            Разметка и стили предельно просты. У нас есть значок микрофона, на который мы можем кликнуть для начала записи, анимация звукозаписи, которая включается после клика, и фоновый контейнер, который будет изменять свой цвет, в зависимости от того, что озвучит пользователь.

            -

            CSS задает простые отзывчивые стили, для корректного отображения и работы на всех устройствах

            +

            CSS задаёт простые отзывчивые стили, для корректного отображения и работы на всех устройствах

            JavaScript

            @@ -74,8 +74,8 @@ const SpeechRecognitionEvent = window.SpeechRecognitionEvent || window.webkitSpe
            const colors = {
               красный: 'red',
               оранжевый: 'orange',
            -  желтый: 'yellow',
            -  зеленый: 'green',
            +  жёлтый: 'yellow',
            +  зелёный: 'green',
               голубой: 'blue',
               синий: 'darkblue',
               фиолетовый: 'violet'
            @@ -100,7 +100,7 @@ const grammar = '#JSGF V1.0; grammar colors; public <color> = ' + colorsLi
               

            Вторая строка указывает значение, которое мы хотим распознать. public объявляет, что это общедоступное правило, строка в угловых скобках определяет распознанное имя для этого значения (цвет), а список элементов, следующих за знаком равенства, - это альтернативные варианты, которые будут распознаны и могут быть приняты в качестве возможного значения. Обратите внимание, как каждый из них разделяется вертикальной линией (“|” - “pipe character”).

          • -

            У вас может быть множество значений, определенных отдельно, как указано выше, и содержащих довольно сложные определения грамматики. Для нашего демонстрационного примера мы делаем все просто.

            +

            У вас может быть множество значений, определённых отдельно, как указано выше, и содержащих довольно сложные определения грамматики. Для нашего демонстрационного примера мы делаем все просто.

          @@ -108,7 +108,7 @@ const grammar = '#JSGF V1.0; grammar colors; public <color> = ' + colorsLi

          Следующее, что нужно сделать, это определить экземпляр объекта распознавания речи для управления записью нашего приложения.

          -

          Это делается с помощью конструктора SpeechRecognition(). Мы также создаем новый речевой грамматический список, чтобы содержать нашу грамматику, используя конструктор SpeechGrammarList().

          +

          Это делается с помощью конструктора SpeechRecognition(). Мы также создаём новый речевой грамматический список, чтобы содержать нашу грамматику, используя конструктор SpeechGrammarList().

          const recognition = new SpeechRecognition();
           const speechRecognitionList = new SpeechGrammarList();
          @@ -118,7 +118,7 @@ const speechRecognitionList = new SpeechGrammarList();
          speechRecognitionList.addFromString(grammar, 1);
           
          -

          Затем мы добавляем SpeechGrammarList к уже созданному объекту распознавания речи, присваивая его значение свойству SpeechRecognition.grammars. Также зададим еще несколько свойств объекту, прежде чем двигаться дальше:

          +

          Затем мы добавляем SpeechGrammarList к уже созданному объекту распознавания речи, присваивая его значение свойству SpeechRecognition.grammars. Также зададим ещё несколько свойств объекту, прежде чем двигаться дальше:

          • @@ -140,14 +140,14 @@ recognition.maxAlternatives = 1;
            -

            Внимание:  SpeechRecognition.continuous задает, отслеживаются ли продолжающиеся результаты или только 1 результат, каждый раз, когда запись начата. Это закомментировано, поскольку данное свойство в еще не реализовано в Gecko.

            +

            Внимание:  SpeechRecognition.continuous задаёт, отслеживаются ли продолжающиеся результаты или только 1 результат, каждый раз, когда запись начата. Это закомментировано, поскольку данное свойство в ещё не реализовано в Gecko.

            Вы можете получить аналогичный результат, просто прекратив распознавание после получения первого результата.

            Запуск распознавания речи

            -

            После получения ссылок на DOM-элементы, необходимые нам для обработки пользовательских событий и обновления цвета фона приложения, мы реализуем обработчик onclick, чтобы при нажатии на значок микрофона сервис распознавания речи начинал работу. Запуск происходит путем вызова функции SpeechRecognition.start().

            +

            После получения ссылок на DOM-элементы, необходимые нам для обработки пользовательских событий и обновления цвета фона приложения, мы реализуем обработчик onclick, чтобы при нажатии на значок микрофона сервис распознавания речи начинал работу. Запуск происходит путём вызова функции SpeechRecognition.start().

            microphoneIcon.onclick = function() {
               recognition.start();
            @@ -162,7 +162,7 @@ recognition.onaudiostart = function() {
             
             

            Получение и обработка результата

            -

            После того, как процесс распознавания речи был запущен, есть много обработчиков событий, которые могут быть использованы для работы с результатом и другой сопутствующей информацией (см. Список обработчиков событий SpeechRecognition.) Наиболее распространенный, который вы, вероятно, и будете использовать, это SpeechRecognition.onresult, который запускается сразу после получения успешного результата. Значение цвета получаем вызовом функции getColor()

            +

            После того, как процесс распознавания речи был запущен, есть много обработчиков событий, которые могут быть использованы для работы с результатом и другой сопутствующей информацией (см. Список обработчиков событий SpeechRecognition.) Наиболее распространённый, который вы, вероятно, и будете использовать, это SpeechRecognition.onresult, который запускается сразу после получения успешного результата. Значение цвета получаем вызовом функции getColor()

            function getColor(speechResult) {
               for (let index = 0; index < colorsList.length; index += 1) {
            @@ -182,7 +182,7 @@ recognition.onresult = function(event) {
               console.log('Confidence: ' + event.results[0][0].confidence);
             };
            -

            Третья строка здесь выглядит немного усложненной, поэтому давайте разберемся с ней подробнее. Свойство SpeechRecognitionEvent.results возвращает объект SpeechRecognitionResultList, содержащий в себе другие объекты типа SpeechRecognitionResult. У него есть геттер, поэтому он может быть доступен как массив, поэтому переменная last определяет ссылку на SpeechRecognitionResult из списка. Каждый объект SpeechRecognitionResult содержит объекты SpeechRecognitionAlternative, которые содержат отдельные распознанные слова. Они также имеют геттеры, поэтому к ним можно получить доступ как к массивам, поэтому логично, что [0] возвращает значение SpeechRecognitionAlternative по индексу 0. Затем мы возвращаем строку, содержащую индивидуально распознанный результат, используя который и можем установить цвет фона.

            +

            Третья строка здесь выглядит немного усложнённой, поэтому давайте разберёмся с ней подробнее. Свойство SpeechRecognitionEvent.results возвращает объект SpeechRecognitionResultList, содержащий в себе другие объекты типа SpeechRecognitionResult. У него есть геттер, поэтому он может быть доступен как массив, поэтому переменная last определяет ссылку на SpeechRecognitionResult из списка. Каждый объект SpeechRecognitionResult содержит объекты SpeechRecognitionAlternative, которые содержат отдельные распознанные слова. Они также имеют геттеры, поэтому к ним можно получить доступ как к массивам, поэтому логично, что [0] возвращает значение SpeechRecognitionAlternative по индексу 0. Затем мы возвращаем строку, содержащую индивидуально распознанный результат, используя который и можем установить цвет фона.

            Мы также используем свойство SpeechRecognition.speechend, чтобы задать обработчик на завершение работы распознавателя речи (вызов SpeechRecognition.stop() ), как только одно слово было распознано, и входящий речевой поток был остановлен.

            @@ -196,7 +196,7 @@ recognition.onresult = function(event) {

            Обработка ошибок

            -

            Последние два обработчика используются для отлова ошибок: когда речь была признана не в соответствии с определенной грамматикой или произошла ошибка. По логике, SpeechRecognition.onnomatch, должен обрабатывать первый случай, но обратите внимание, что на данный момент он не срабатывает правильно в Firefox или Chrome, он просто возвращает все, что было распознано в любом случае:

            +

            Последние два обработчика используются для отлова ошибок: когда речь была признана не в соответствии с определённой грамматикой или произошла ошибка. По логике, SpeechRecognition.onnomatch, должен обрабатывать первый случай, но обратите внимание, что на данный момент он не срабатывает правильно в Firefox или Chrome, он просто возвращает все, что было распознано в любом случае:

            recognition.onnomatch = function(event) {
               alert("I didn't recognise that color.");
            @@ -229,7 +229,7 @@ recognition.onresult = function(event) {
             
             

            Браузерная поддержка

            -

            Поддержка интерфейса еще только распространяется на основные браузеры, и на текущий момент ограничена следующим образом:

            +

            Поддержка интерфейса ещё только распространяется на основные браузеры, и на текущий момент ограничена следующим образом:

            • @@ -252,7 +252,7 @@ recognition.onresult = function(event) { Заголовок и форму с некоторыми простыми элементами управления.
              Элемент <select> изначально пуст, но заполняется с помощью <option> через JavaScript (см. ниже).

              -

              CSS задает простые отзывчивые стили, для корректного отображения и работы на всех устройствах

              +

              CSS задаёт простые отзывчивые стили, для корректного отображения и работы на всех устройствах

              <section>
                 <h1>Синтез речи</h1>
              @@ -292,7 +292,7 @@ recognition.onresult = function(event) {
               
               

              Задание переменных

              -

              Прежде всего, создаем ссылки на все нужные нам DOM-элементы.

              +

              Прежде всего, создаём ссылки на все нужные нам DOM-элементы.

              Входная точка API - window.speechSynthesis, возвращает экземпляр SpeechSynthesis, интерфейс контроллера для синтеза речи в вебе.

              @@ -308,9 +308,9 @@ let voices = [];

              Заполнение выпадающего списка

              -

              Чтобы заполнить элемент <select> различными вариантами голоса, доступных на устройстве, напишем функцию populateVoiceList(). Сначала мы вызываем SpeechSynthesis.getVoices(), который возвращает список всех доступных вариантов голосов, представленных объектами SpeechSynthesisVoice. Затем мы проходимся по списку, создавая элемент <option> для каждого отдельного случая, задаем его текстовое содержимое, соответствующее названию голоса (взято из SpeechSynthesisVoice.name), языка голоса (из SpeechSynthesisVoice.lang), и  “по умолчанию”, если голос является голосом по умолчанию для механизма синтеза (проверяется, если функция SpeechSynthesisVoice.default возвращает значение true.)

              +

              Чтобы заполнить элемент <select> различными вариантами голоса, доступных на устройстве, напишем функцию populateVoiceList(). Сначала мы вызываем SpeechSynthesis.getVoices(), который возвращает список всех доступных вариантов голосов, представленных объектами SpeechSynthesisVoice. Затем мы проходимся по списку, создавая элемент <option> для каждого отдельного случая, задаём его текстовое содержимое, соответствующее названию голоса (взято из SpeechSynthesisVoice.name), языка голоса (из SpeechSynthesisVoice.lang), и  “по умолчанию”, если голос является голосом по умолчанию для механизма синтеза (проверяется, если функция SpeechSynthesisVoice.default возвращает значение true.)

              -

              Мы также задаем data- атрибуты для каждого варианта, содержащие имя и язык связанного голоса, благодаря чему мы можем легко их собрать их позже, а затем вложить все варианты в качестве дочерних элементов нашего списка (<select>).

              +

              Мы также задаём data- атрибуты для каждого варианта, содержащие имя и язык связанного голоса, благодаря чему мы можем легко их собрать их позже, а затем вложить все варианты в качестве дочерних элементов нашего списка (<select>).

              function populateVoiceList() {
                 voices = synth.getVoices();
              @@ -340,11 +340,11 @@ let voices = [];
              speechSynthesis.onvoiceschanged = populateVoiceList; }
            -

            Озвучка введенного текста

            +

            Озвучка введённого текста

            -

            Затем мы создаем обработчик событий, чтобы начать “произносить” текст, введенный в текстовом поле, при нажатии на кнопку Enter/Return или на Play. Для этого используем обработчик onsubmit в html-формы. В функции-обработчике speak() мы создаем новый экземпляр SpeechSynthesisUtterance(), передавая значение текстового поля в конструктор.

            +

            Затем мы создаём обработчик событий, чтобы начать “произносить” текст, введённый в текстовом поле, при нажатии на кнопку Enter/Return или на Play. Для этого используем обработчик onsubmit в html-формы. В функции-обработчике speak() мы создаём новый экземпляр SpeechSynthesisUtterance(), передавая значение текстового поля в конструктор.

            -

            Затем нам нужно выяснить, какой голос использовать. Мы используем свойство HTMLSelectElement selectedOptions для получения выбранного элемента <option>, у которого берем атрибут data-name, и находим объект SpeechSynthesisVoice, имя которого соответствует значению имеющегося атрибута. После этого устанавливаем соответствующий “голосовой” объект как значение свойства SpeechSynthesisUtterance.voice.

            +

            Затем нам нужно выяснить, какой голос использовать. Мы используем свойство HTMLSelectElement selectedOptions для получения выбранного элемента <option>, у которого берём атрибут data-name, и находим объект SpeechSynthesisVoice, имя которого соответствует значению имеющегося атрибута. После этого устанавливаем соответствующий “голосовой” объект как значение свойства SpeechSynthesisUtterance.voice.

            Наконец, мы устанавливаем SpeechSynthesisUtterance.pitch (высота тона) и SpeechSynthesisUtterance.rate (скорость) в соответствии со значениями соответствующих элементов формы. Затем, после всего проделанного, мы запускаем произношение речи, вызывая SpeechSynthesis.speak(), и передавая ему экземпляр SpeechSynthesisUtterance в качестве аргумента.

            @@ -353,7 +353,7 @@ let voices = [];

            В последней части функции мы включаем обработчик SpeechSynthesisUtterance.onpause, чтобы показать пример применения SpeechSynthesisEvent в различных ситуациях. Вызов SpeechSynthesis.pause() возвращает сообщение с информацией о номере символа и слове, на котором была вызвана пауза.

            -

            Наконец, мы назовем blur() у текстового поля. Это, прежде всего, для того, чтобы скрыть клавиатуру в ОС Firefox.

            +

            Наконец, мы назовём blur() у текстового поля. Это, прежде всего, для того, чтобы скрыть клавиатуру в ОС Firefox.

            function speak() {
               if (synth.speaking) {
            diff --git a/files/ru/web/api/web_storage_api/index.html b/files/ru/web/api/web_storage_api/index.html
            index e162603b6b..63f15e9736 100644
            --- a/files/ru/web/api/web_storage_api/index.html
            +++ b/files/ru/web/api/web_storage_api/index.html
            @@ -14,14 +14,14 @@ translation_of: Web/API/Web_Storage_API
              
          • локальное хранилище (localStorage) делает то же самое, но сохраняет данные даже в случае, если переоткрыть браузер. 
          -

          Обе функции доступны через  {{domxref("Window.sessionStorage")}} и {{domxref("Window.localStorage")}} свойства (если быть более точным, в браузерах, поддерживающих хранилища объект Window  выполняет объекты WindowLocalStorage и WindowSessionStorage, которые содержат свойства localStorage и sessionStorage) — вызов одного из них создает представление объекта {{domxref("Storage")}}, через который можно устанавливать, редактировать и удалять данные. Для каждого из типа хранилищ и по каждому домену используется отдельное представление Storage объекта  - они функционируют и управляются отдельно друг от друга. 

          +

          Обе функции доступны через  {{domxref("Window.sessionStorage")}} и {{domxref("Window.localStorage")}} свойства (если быть более точным, в браузерах, поддерживающих хранилища объект Window  выполняет объекты WindowLocalStorage и WindowSessionStorage, которые содержат свойства localStorage и sessionStorage) — вызов одного из них создаёт представление объекта {{domxref("Storage")}}, через который можно устанавливать, редактировать и удалять данные. Для каждого из типа хранилищ и по каждому домену используется отдельное представление Storage объекта  - они функционируют и управляются отдельно друг от друга. 

          -

          Замечание: Начиная с версии 45 Firefox, когда браузер прекращает работу/перезагружается, объем данных, сохраненных для каждого источника, ограничивается 10 МБ. Это было сделано, чтобы избежать проблем с памятью, вызванных чрезмерным использованием веб-хранилища.

          +

          Замечание: Начиная с версии 45 Firefox, когда браузер прекращает работу/перезагружается, объем данных, сохранённых для каждого источника, ограничивается 10 МБ. Это было сделано, чтобы избежать проблем с памятью, вызванных чрезмерным использованием веб-хранилища.

          -

          Замечание: Доступ к веб хранилищу из iFrame третьей стороны запрещен, если пользователь отключил cookies третьих сторон (Firefox ведёт себя так с версии 43).

          +

          Замечание: Доступ к веб хранилищу из iFrame третьей стороны запрещён, если пользователь отключил cookies третьих сторон (Firefox ведёт себя так с версии 43).

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

          Примеры

          -

          Чтобы проиллюстрировать типичное использование веб хранилища, мы создали простейший пример и назвали его Web Storage Demo. На лендинге нашего примера вы найдете элементы управления для изменения фонового цвета, шрифта и изображения. Когда вы выбираете разные опции, страница мгновенно меняется. В дополнение, ваш выбор сохраняется в локальном хранилище, чтобы, если вы покинете страницу и потом загрузите ее снова, ваши настройки восстановились. 

          +

          Чтобы проиллюстрировать типичное использование веб хранилища, мы создали простейший пример и назвали его Web Storage Demo. На лендинге нашего примера вы найдёте элементы управления для изменения фонового цвета, шрифта и изображения. Когда вы выбираете разные опции, страница мгновенно меняется. В дополнение, ваш выбор сохраняется в локальном хранилище, чтобы, если вы покинете страницу и потом загрузите её снова, ваши настройки восстановились. 

          Также, мы сделали страницу вывода событий, которая выводит информацию о хранилище, каждый раз когда срабатывает событие {{domxref("StorageEvent")}}. Загрузите эту страницу в другой вкладке браузера, затем вернитесь на лендинг и поменяйте значения цвета, шрифта или изображения и понаблюдайте, как меняется выводимая информация.

          @@ -120,7 +120,7 @@ translation_of: Web/API/Web_Storage_API
          -

          У каждого браузера свои объемы localStorage и sessionStorage. Здесь об ограничениях размеров хранилищ для разных браузеров.

          +

          У каждого браузера свои объёмы localStorage и sessionStorage. Здесь об ограничениях размеров хранилищ для разных браузеров.

          Замечание:  Начиная с версии iOS 5.1, Safari Mobile хранит данные localStorage в cache директории, которая время от времени подчищается системой, в основном когда кончается место.

          @@ -128,11 +128,11 @@ translation_of: Web/API/Web_Storage_API

          Приватный режим/Инкогнито

          -

          Многие браузеры в наши дни поддерживают опции приватности, названные "Инкогнито" или "Приватный просмотр" и т.п., что позволяет быть уверенными, что следов приватной сессии не остается после закрытия браузера. Это фундаментальная несовместимость с Веб хранилищем по очевидным причинам. Таким образом, производители браузеров экспериментируют с различными сценариями, как справиться с этой несовместимостью.

          +

          Многие браузеры в наши дни поддерживают опции приватности, названные "Инкогнито" или "Приватный просмотр" и т.п., что позволяет быть уверенными, что следов приватной сессии не остаётся после закрытия браузера. Это фундаментальная несовместимость с Веб хранилищем по очевидным причинам. Таким образом, производители браузеров экспериментируют с различными сценариями, как справиться с этой несовместимостью.

          Многие браузеры выбрали стратегию, когда API хранилища доступно и кажется полностью функциональным, с одним большим отличием - все данные хранилища стираются после закрытия браузера. Для этих браузеров есть ещё другие интерпретации того, что следует делать с хранимыми данными (от обычного режима браузера). Следует ли им быть доступными в приватном режиме? Затем, есть несколько браузеров, особенно Safari, которые выбрали решение, в котором хранилище доступно, но пустое и имеет квоту 0 байт, фактически, делая невозможной запись туда данных.

          -

          Разработчики должны быть осведомлены об этих различных реализациях и принимать их во внимание при разработке веб-сайтов, зависящих от API Веб хранилища. Для получения более подробной информации, пожалуйста, посмотрите на этот пост блога WHATWG, специально посвященный этой теме.

          +

          Разработчики должны быть осведомлены об этих различных реализациях и принимать их во внимание при разработке веб-сайтов, зависящих от API Веб хранилища. Для получения более подробной информации, пожалуйста, посмотрите на этот пост блога WHATWG, специально посвящённый этой теме.

          Смотрите также

          diff --git a/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html b/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html index 2048019f7c..882f40200d 100644 --- a/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html +++ b/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html @@ -23,7 +23,7 @@ localStorage.setItem('colorSetting', '#a4509b');
        1. (localStorage) делает то же самое, но сохраняет данные даже в случае, если переоткрыть браузер. 
    -

    Оба механизма доступны через  {{domxref("Window.sessionStorage")}} и {{domxref("Window.localStorage")}} свойства (если быть более точным, в броузерах, поддерживающих хранилища объект Window  выполняет объекты WindowLocalStorageи WindowSessionStorage, которые содержат свойства localStorageи sessionStorage) — вызов одного из них создает экземпляр объекта Storage, через который можно устанавливать, редактировать и удалять данные. Разные Storage объекты будут использовать sessionStorage и localStorage поэтому они используются и управляются раздельно 

    +

    Оба механизма доступны через  {{domxref("Window.sessionStorage")}} и {{domxref("Window.localStorage")}} свойства (если быть более точным, в броузерах, поддерживающих хранилища объект Window  выполняет объекты WindowLocalStorageи WindowSessionStorage, которые содержат свойства localStorageи sessionStorage) — вызов одного из них создаёт экземпляр объекта Storage, через который можно устанавливать, редактировать и удалять данные. Разные Storage объекты будут использовать sessionStorage и localStorage поэтому они используются и управляются раздельно 

    Так, например, изначально вызов localStorage в документе возвращает {{domxref("Storage")}} объект; вызов sessionStorage в документе возвращает другой {{domxref("Storage")}} объект. Оба объекта могут управляться одинаково, но отдельно.

    @@ -33,7 +33,7 @@ localStorage.setItem('colorSetting', '#a4509b');

    Проверка на наличие

    -

    Браузеры поддерживаемые localStorage будут иметь свойство localStorage объекта window. Тем не менее по различным причинам, простое утверждение, что это свойство существует, может вызывать исключение. Если localStorage существует это еще не дает гарантии, что оно доступно,  т.к. различные броузеры обладают настройками которые отключают его. Поэтому браузер может поддерживать localStorage, но не делает его доступным для скриптов на странице. Один из таких примеров браузер Safari, который в Private Browsing mode возвращает нам пустой localStorage объект, фактически делая его непригодным для использования . Наша функция должна принимать во внимание этот сценарий. 

    +

    Браузеры поддерживаемые localStorage будут иметь свойство localStorage объекта window. Тем не менее по различным причинам, простое утверждение, что это свойство существует, может вызывать исключение. Если localStorage существует это ещё не даёт гарантии, что оно доступно,  т.к. различные броузеры обладают настройками которые отключают его. Поэтому браузер может поддерживать localStorage, но не делает его доступным для скриптов на странице. Один из таких примеров браузер Safari, который в Private Browsing mode возвращает нам пустой localStorage объект, фактически делая его непригодным для использования . Наша функция должна принимать во внимание этот сценарий. 

    Функция, которая проверяет браузеры на поддержку и доступность localStorage:

    @@ -65,19 +65,19 @@ else {

    Чтобы проиллюстрировать типичное использование Web storage, мы создали простой пример, назвав его Web Storage Demo. На целевой странице представлены элементы управления, которые можно использовать для настройки цвета, шрифта и декоративного изображения:

    -

    Когда вы выбираете различные опции, страница немедленно перезагружается; в дополнение, ваш выбор сохраняется в localStorage, таким образом когда вы покидаете страницу и загружаете ее снова спустя некоторое время, ваши параметры сохраняются.

    +

    Когда вы выбираете различные опции, страница немедленно перезагружается; в дополнение, ваш выбор сохраняется в localStorage, таким образом когда вы покидаете страницу и загружаете её снова спустя некоторое время, ваши параметры сохраняются.

    -

    Мы также предоставили страницу вывода событий - если вы загрузите эту страницу в другой вкладке, затем сделаете некоторые изменения в landing page, вы увидите обновленную информацию о хранилище.

    +

    Мы также предоставили страницу вывода событий - если вы загрузите эту страницу в другой вкладке, затем сделаете некоторые изменения в landing page, вы увидите обновлённую информацию о хранилище.

    -

    Примечание: Помимо просмотра примеров выше, используя приведенные ссылки выше , вы можете также просмотреть исходный код.

    +

    Примечание: Помимо просмотра примеров выше, используя приведённые ссылки выше , вы можете также просмотреть исходный код.

    Проверка на заполненность хранилища

    -

    Начнем с main.js, мы проверим был ли уже заполнен объект Storage (т.е страница была ранее доступна)

    +

    Начнём с main.js, мы проверим был ли уже заполнен объект Storage (т.е страница была ранее доступна)

    if(!localStorage.getItem('bgcolor')) {
       populateStorage();
    @@ -86,7 +86,7 @@ else {
     }
     
    -

    Метод {{domxref("Storage.getItem()")}} используется для получения данных из storage; в этом примере мы проверяем, чтобы увидеть существует ли bgcolor; если нет, мы запускаем populateStorage(), чтобы добавить значение по умолчанию в storage. Если значения уже есть там, мы запускаем setStyles(), для обновления стиля страница с сохраненными значениями.
    +

    Метод {{domxref("Storage.getItem()")}} используется для получения данных из storage; в этом примере мы проверяем, чтобы увидеть существует ли bgcolor; если нет, мы запускаем populateStorage(), чтобы добавить значение по умолчанию в storage. Если значения уже есть там, мы запускаем setStyles(), для обновления стиля страница с сохранёнными значениями.
    Примечание: Вы можете также использовать {{domxref("Storage.length")}} для проверки storage object.

    Получение данных из Storage

    @@ -147,7 +147,7 @@ imageForm.onchange = populateStorage;

    Удаление записанных данных

    -

    Web Storage также предоставляет несколько простых методов для удаления данных. Мы не используем эти методы в нашем дема, но они очень простые, чтобы добавить их в проект:

    +

    Web Storage также предоставляет несколько простых методов для удаления данных. Мы не используем эти методы в нашем дёма, но они очень простые, чтобы добавить их в проект:

    • {{domxref("Storage.removeItem()")}} принимает единственный аргумент - ключ элемента данных, который вы хотите удалить - и удаляет его из объекта хранения для этого домена. 
    • diff --git a/files/ru/web/api/web_workers_api/structured_clone_algorithm/index.html b/files/ru/web/api/web_workers_api/structured_clone_algorithm/index.html index e53a1144ba..c6e9737833 100644 --- a/files/ru/web/api/web_workers_api/structured_clone_algorithm/index.html +++ b/files/ru/web/api/web_workers_api/structured_clone_algorithm/index.html @@ -3,7 +3,7 @@ title: Алгоритм структурированного клонирова slug: Web/API/Web_Workers_API/Structured_clone_algorithm translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm --- -

      Алгоритм структурированного клонирования — это новый алгоритм, определенный спецификацией HTML5 для сериализации комплексных JavaScript объектов. Он более функционален, чем JSON в том что способен поддерживать сериализацию объектов содержащих циклические графы — первичные объекты, которые ссылаются на другие объекты у которых есть ссылка на первичные объекты в том же графе. В дополнение, в некоторых других случаях алгоритм структурированного клонирования может быть более эффективен, чем JSON.

      +

      Алгоритм структурированного клонирования — это новый алгоритм, определённый спецификацией HTML5 для сериализации комплексных JavaScript объектов. Он более функционален, чем JSON в том что способен поддерживать сериализацию объектов содержащих циклические графы — первичные объекты, которые ссылаются на другие объекты у которых есть ссылка на первичные объекты в том же графе. В дополнение, в некоторых других случаях алгоритм структурированного клонирования может быть более эффективен, чем JSON.

      Алгоритм, по существу, перебирает все поля оригинального объекта, дублируя значения каждого поля в новый объект. Если поле представляет из себя объект с собственными полями, то эти дочерние поля также перебираются рекурсивно, пока каждое поле и все дочерние поля не будут продублированы в новый объект.

      @@ -107,7 +107,7 @@ translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm

      Другой вариант: вложенное копирование‎

      -

      Если вы хотите сделать вложенную копию объекта (т.е рекурсивно копировать все вложенные свойства, проходя по прототипной цепи),  вы должны использовать другой подход. Ниже приведен возможный пример.

      +

      Если вы хотите сделать вложенную копию объекта (т.е рекурсивно копировать все вложенные свойства, проходя по прототипной цепи),  вы должны использовать другой подход. Ниже приведён возможный пример.

      function clone(objectToBeCloned) {
         // Basis.
      @@ -142,7 +142,7 @@ translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm
       
       
        Note: Этот алгоритм  реализован  только для  RegExp, Array, и Date специальных объектов. Вы можете реализовать другие условия, удовлетворяющие вашим потребностям.
      -

      Еще по теме

      +

      Ещё по теме

      • HTML5 Specification: Safe passing of structured data
      • diff --git a/files/ru/web/api/web_workers_api/using_web_workers/index.html b/files/ru/web/api/web_workers_api/using_web_workers/index.html index 9767a15c43..e54339bd17 100644 --- a/files/ru/web/api/web_workers_api/using_web_workers/index.html +++ b/files/ru/web/api/web_workers_api/using_web_workers/index.html @@ -9,11 +9,11 @@ original_slug: DOM/Using_web_workers ---
        {{DefaultAPISidebar("Web Workers API")}}
        -

        Web Worker-ы предоставляют простое средство для запуска скриптов в фоновом потоке. Поток Worker'а может выполнять задачи без вмешательства в пользовательский интерфейс. К тому же, они могут осуществлять ввод/вывод, используя XMLHttpRequest (хотя атрибуты responseXML и channel всегда будут равны null). Существующий Worker может отсылать сообщения JavaScript коду-создателю через обработчик событий, указанный этим кодом (и наоборот). Эта статья дает детальную инструкцию по использованию Web Workers.

        +

        Web Worker-ы предоставляют простое средство для запуска скриптов в фоновом потоке. Поток Worker'а может выполнять задачи без вмешательства в пользовательский интерфейс. К тому же, они могут осуществлять ввод/вывод, используя XMLHttpRequest (хотя атрибуты responseXML и channel всегда будут равны null). Существующий Worker может отсылать сообщения JavaScript коду-создателю через обработчик событий, указанный этим кодом (и наоборот). Эта статья даёт детальную инструкцию по использованию Web Workers.

        Web Workers API

        -

        Worker - это объект, создаваемый конструктором (например, {{domxref("Worker.Worker", "Worker()")}}) и запускающий именной JavaScript файл — этот файл содержит код, который будет выполнен в потоке Worker'а; объекты же Workers запускаются в другом глобальном контексте, отличающемся от текущего, - {{domxref("window")}}. Поэтому использование переменной {{domxref("window")}} для получения текущего глобального контекста (вместо {{domxref("window.self","self")}}) внутри {{domxref("Worker")}} вернет ошибку.

        +

        Worker - это объект, создаваемый конструктором (например, {{domxref("Worker.Worker", "Worker()")}}) и запускающий именной JavaScript файл — этот файл содержит код, который будет выполнен в потоке Worker'а; объекты же Workers запускаются в другом глобальном контексте, отличающемся от текущего, - {{domxref("window")}}. Поэтому использование переменной {{domxref("window")}} для получения текущего глобального контекста (вместо {{domxref("window.self","self")}}) внутри {{domxref("Worker")}} вернёт ошибку.

        Контекст Worker'а представлен объектом {{domxref("DedicatedWorkerGlobalScope")}} в случае выделенных Workers (обычные Workers используются одним скриптом; совместные Workers используют объект {{domxref("SharedWorkerGlobalScope")}}). Выделенный Worker доступен только из скрипта-родителя, в то время как совместные Workers могут быть доступны из нескольких сценариев.

        @@ -29,7 +29,7 @@ original_slug: DOM/Using_web_workers

        Выделенные Workers

        -

        Как уже упоминалось выше, выделенный Worker доступен только для скрипта, который его вызвал. В этом разделе речь пойдет о JavaScript, который можно найти в нашем основном примере выделенного Worker (запустить скрипт): этот пример позволяет ввести два числа для умножения. Эти числа отправляются в Worker, перемножаются, а результат возвращается на страницу и отображается.

        +

        Как уже упоминалось выше, выделенный Worker доступен только для скрипта, который его вызвал. В этом разделе речь пойдёт о JavaScript, который можно найти в нашем основном примере выделенного Worker (запустить скрипт): этот пример позволяет ввести два числа для умножения. Эти числа отправляются в Worker, перемножаются, а результат возвращается на страницу и отображается.

        Этот пример достаточно тривиален, но для ознакомления с базовыми концепциями worker-ов мы решили его упростить. Более продвинутые детали описаны далее в статье.

        @@ -66,7 +66,7 @@ second.onchange = function() { console.log('Message posted to worker'); }
      -

      В приведенном фрагменте кода мы имеем два {{htmlelement("input")}} элемента, представленных переменными first и second; когда значение любой из переменных изменяется, myWorker.postMessage([first.value,second.value]) используется для отправки обоих значений, представленных в виде массива, в worker. Посредством аргумента message возможна передача практически любых данных в worker.

      +

      В приведённом фрагменте кода мы имеем два {{htmlelement("input")}} элемента, представленных переменными first и second; когда значение любой из переменных изменяется, myWorker.postMessage([first.value,second.value]) используется для отправки обоих значений, представленных в виде массива, в worker. Посредством аргумента message возможна передача практически любых данных в worker.

      Внутри worker-a мы можем обрабатывать сообщения и отвечать на них при помощи добавления обработчика события onmessage подобным образом (worker.js):

      @@ -90,7 +90,7 @@ second.onchange = function() {

      Заметка: Обратите внимание, что onmessage()​ и postmessage() должны вызываться из экземпляра Worker в главном потоке, но не в потоке worker-а. Это связано с тем, что внутри потока worker-а, worker выступает в качестве глобального объекта.

      -

      Заметка: При передаче сообщения между основным потоком и потоком worker-а, оно копируется или "передается" (перемещается), не делится между потоками. Читайте {{anch("Transferring data to and from workers: further details")}} для более подробного объяснения.

      +

      Заметка: При передаче сообщения между основным потоком и потоком worker-а, оно копируется или "передаётся" (перемещается), не делится между потоками. Читайте {{anch("Transferring data to and from workers: further details")}} для более подробного объяснения.

      Завершение работы worker-а

      @@ -123,7 +123,7 @@ second.onchange = function() {

      Импорт скриптов и библиотек

      -

      Worker потоки имеют доступ к глобальной функции, importScripts(), которая позволяет импортировать скрипты с того же домена в их область видимости. Функция принимает ноль и более URI параметров, как список ссылок на ресурсы для импорта; все нижеприведенные примеры верны:

      +

      Worker потоки имеют доступ к глобальной функции, importScripts(), которая позволяет импортировать скрипты с того же домена в их область видимости. Функция принимает ноль и более URI параметров, как список ссылок на ресурсы для импорта; все нижеприведённые примеры верны:

      importScripts();                        /* imports nothing */
       importScripts('foo.js');                /* imports just "foo.js" */
      @@ -132,13 +132,13 @@ importScripts('foo.js', 'bar.js');      /* imports two scripts */
       
       

      Браузер загружает каждый указанный скрипт и исполняет его. Любые глобальные объекты, создаваемые каждым скриптом могут быть использованы в worker'е. Если скрипт не удалось загрузить, будет брошена ошибка NETWORK_ERROR, и последующий код не будет исполнен. Тем не менее код, исполненный ранее (включая отложенный при помощи {{domxref("window.setTimeout()")}}) останется функционален. Объявления функций идущие после вызова метода importScripts() также будут доступны, т.к. объявления функций всегда обрабатываются перед остальным кодом.

      -
      Заметка: Скрипты могут быть загружены в произвольном порядке, но их исполнение будет в  том порядке, в котором имена файлов были переданы в importScripts(). Функция выполняется синхронно; importScripts() не вернет исполнение, пока все скрипты не будут загружены и исполнены.
      +
      Заметка: Скрипты могут быть загружены в произвольном порядке, но их исполнение будет в  том порядке, в котором имена файлов были переданы в importScripts(). Функция выполняется синхронно; importScripts() не вернёт исполнение, пока все скрипты не будут загружены и исполнены.

      Разделяемые worker-ы (Shared workers)

      Разделяемый worker доступен нескольким разным скриптам — даже если они находятся в разных окнах, фреймах или даже worker-ах. В этом разделе мы обсудим JavaScript, который можно найти в нашем базовом примере разделяемых worker-ов (запустить разделяемый worker): Он очень похож на базовый пример выделенных worker-ов, за исключением двух функций, которые доступны из разных скриптовых файлов: умножение двух чисел или возведение числа в степень. Оба скрипта используют один и тот же worker для необходимых вычислений.

      -

      Здесь мы сосредоточимся на разнице между выделенными и разделенными worker-ами. Обратите внимание, что в данном примере есть две HTML страницы с JavaScript кодом, которые используют один и тот же файл worker-а.

      +

      Здесь мы сосредоточимся на разнице между выделенными и разделёнными worker-ами. Обратите внимание, что в данном примере есть две HTML страницы с JavaScript кодом, которые используют один и тот же файл worker-а.

      Заметка: Если разделяемый worker может быть доступен из нескольких контекстов просмотра, то все они должны иметь одно и то же происхождение (одни и те же протокол, хост и порт).

      @@ -168,7 +168,7 @@ importScripts('foo.js', 'bar.js'); /* imports two scripts */

      Передача сообщений в/из разделяемого worker-а

      -

      Теперь сообщения могут быть отправлены worker-у, как и прежде, но метод postMessage() должен вызываться из объекта port (еще раз, вы можете увидеть схожие конструкции в multiply.js и square.js):

      +

      Теперь сообщения могут быть отправлены worker-у, как и прежде, но метод postMessage() должен вызываться из объекта port (ещё раз, вы можете увидеть схожие конструкции в multiply.js и square.js):

      squareNumber.onchange = function() {
         myWorker.port.postMessage([squareNumber.value,squareNumber.value]);
      @@ -190,9 +190,9 @@ importScripts('foo.js', 'bar.js');      /* imports two scripts */
       
       

      Мы используем атрибут события ports, чтобы получить порт и сохранить его в переменной.

      -

      Второй этап — это обработчик события message на сохраненном порту. Он нужен для подсчета и вывода результата вычисления в основной поток. Установка обработчика message в потоке worker-а также открывает подключение к родительскому потоку, поэтому вызов на port.start() на самом деле не нужен (см. код обработчика onconnect).

      +

      Второй этап — это обработчик события message на сохранённом порту. Он нужен для подсчёта и вывода результата вычисления в основной поток. Установка обработчика message в потоке worker-а также открывает подключение к родительскому потоку, поэтому вызов на port.start() на самом деле не нужен (см. код обработчика onconnect).

      -

      Последний этап — возвращение в основной поток и обработка сообщения от worker‑а (еще раз, вы можете увидеть схожие конструкции в multiply.js и square.js):

      +

      Последний этап — возвращение в основной поток и обработка сообщения от worker‑а (ещё раз, вы можете увидеть схожие конструкции в multiply.js и square.js):

      myWorker.port.onmessage = function(e) {
         result2.textContent = e.data[0];
      @@ -209,7 +209,7 @@ importScripts('foo.js', 'bar.js');      /* imports two scripts */
       
       

      Передача данных в и из worker-ов: другие детали

      -

      Передача данных между главной страницей и worker-ом происходит путем копирования, а не передачи по ссылке. Объекты сериализуются при передаче и затем десериализуются на другом конце. Страница и worker не используют совместно одни и те же экземпляры, для каждого создается свой. Большинство браузеров реализуют это структурированным клонированием (structured cloning).

      +

      Передача данных между главной страницей и worker-ом происходит путём копирования, а не передачи по ссылке. Объекты сериализуются при передаче и затем десериализуются на другом конце. Страница и worker не используют совместно одни и те же экземпляры, для каждого создаётся свой. Большинство браузеров реализуют это структурированным клонированием (structured cloning).

      Для иллюстрации этого мы создадим функцию emulateMessage(), которая будет имитировать поведение значения, которое клонируется, но не используется совместно при переходе от worker-а к главной странице или наоборот.

      @@ -251,7 +251,7 @@ var example5 = new Animal("Cat", 3); alert(example5.constructor); // Animal alert(emulateMessage(example5).constructor); // Object
      -

      Значения, которые клонируются и совместно не используются, называются сообщениями. Как вы, возможно, знаете, сообщения могут быть отправлены в главную страницу и из нее, используя postMessage(), и {{domxref("MessageEvent.data", "data")}}, содержа данные, передаваемые из worker-а.

      +

      Значения, которые клонируются и совместно не используются, называются сообщениями. Как вы, возможно, знаете, сообщения могут быть отправлены в главную страницу и из неё, используя postMessage(), и {{domxref("MessageEvent.data", "data")}}, содержа данные, передаваемые из worker-а.

      example.html: (главная страница):

      @@ -279,7 +279,7 @@ onmessage = function (oEvent) {

      Если вам нужно передать сложные данные и вызвать множество различных функций как на главной странице, так и в worker-е, вы можете создать следующую систему.

      -

      В первую очередь мы создаем класс QueryableWorker, который принимает url worker-а, стандартный обработчик событий (defaultListener) и обработчик ошибок. Этот класс будет отслеживать всех обработчиков и поможет нам общаться с воркером.

      +

      В первую очередь мы создаём класс QueryableWorker, который принимает url worker-а, стандартный обработчик событий (defaultListener) и обработчик ошибок. Этот класс будет отслеживать всех обработчиков и поможет нам общаться с воркером.

      function QueryableWorker(url, defaultListener, onError) {
           var instance = this,
      @@ -516,7 +516,7 @@ onmessage = function(oEvent) {
       
       

      Передача данных с помощью передачи владения (передаваемые объекты)

      -

      Google Chrome 17+ and Firefox 18+ имеют дополнительную возможность передачи определенных типов объектов (передаваемые объекты реализующие {{domxref("Transferable")}} интерфейс) к или из worker-а с высокой производительностью. Эти объекты передаются из одного контекста в другой без операций копирования, что приводит к значительному повышению производительности при отправке больших наборов данных. Думайте об этом как о передаче по ссылке в мире C/C++. Однако в отличии от передачи по ссылке, "версия" из вызывающего контекста больше недоступна после передачи. Владельцем становится новый контекст.  Для примера, после передачи {{domxref("ArrayBuffer")}} из главной страницы к worker-у,  исходный {{domxref("ArrayBuffer")}} очищается и более недоступен для использования.  Его содержание (в буквальном смысле) переносится в рабочий контекст.

      +

      Google Chrome 17+ and Firefox 18+ имеют дополнительную возможность передачи определённых типов объектов (передаваемые объекты реализующие {{domxref("Transferable")}} интерфейс) к или из worker-а с высокой производительностью. Эти объекты передаются из одного контекста в другой без операций копирования, что приводит к значительному повышению производительности при отправке больших наборов данных. Думайте об этом как о передаче по ссылке в мире C/C++. Однако в отличии от передачи по ссылке, "версия" из вызывающего контекста больше недоступна после передачи. Владельцем становится новый контекст.  Для примера, после передачи {{domxref("ArrayBuffer")}} из главной страницы к worker-у,  исходный {{domxref("ArrayBuffer")}} очищается и более недоступен для использования.  Его содержание (в буквальном смысле) переносится в рабочий контекст.

      // Create a 32MB "file" and fill it.
       var uInt8Array = new Uint8Array(1024*1024*32); // 32MB
      @@ -533,7 +533,7 @@ worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
       
       

      Встроенные worker-ы

      -

      Не существует утвержденного способа встроить код worker-а в рамках веб-страницы, как элемент {{HTMLElement("script")}} делает для обычных скриптов. Но элемент {{HTMLElement("script")}}, который не имеет атрибута src и атрибута  type, которому не назначен выполняемый MIME type, можно считать блоком данных для использования JavaScript. Блок данных "Data blocks" — это более общее свойство HTML5, может содержать любые текстовые данные. Так, worker может быть встроен следующим образом:

      +

      Не существует утверждённого способа встроить код worker-а в рамках веб-страницы, как элемент {{HTMLElement("script")}} делает для обычных скриптов. Но элемент {{HTMLElement("script")}}, который не имеет атрибута src и атрибута  type, которому не назначен выполняемый MIME type, можно считать блоком данных для использования JavaScript. Блок данных "Data blocks" — это более общее свойство HTML5, может содержать любые текстовые данные. Так, worker может быть встроен следующим образом:

      <!DOCTYPE html>
       <html>
      @@ -543,7 +543,7 @@ worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
       <script type="text/js-worker">
         // Этот script НЕ БУДЕТ анализироваться JS движками, потому что  его MIME-тип text/js-worker.
         var myVar = 'Hello World!';
      -  // Остальная часть кода вашего воркера идет сюда.
      +  // Остальная часть кода вашего воркера идёт сюда.
       </script>
       <script type="text/javascript">
         // Этот script БУДЕТ проанализирован JS движкам, потому что его MIME-тип text/javascript.
      @@ -560,7 +560,7 @@ worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
         onmessage = function(oEvent) {
           postMessage(myVar);
         };
      -  // Остальная часть кода вашего воркера идет сюда.
      +  // Остальная часть кода вашего воркера идёт сюда.
       </script>
       <script type="text/javascript">
         // Этот script БУДЕТ проанализирован JS движкам, потому что его MIME-тип text/javascript.
      @@ -585,7 +585,7 @@ worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
       </html>
       
      -
      Встраиваемый worker теперь внесен в новое custom свойство document.worker
      +
      Встраиваемый worker теперь внесён в новое custom свойство document.worker
      @@ -599,11 +599,11 @@ worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);

      Другие примеры

      -

      В этой секции представлено еще несколько примеров как использовать worker-ы.

      +

      В этой секции представлено ещё несколько примеров как использовать worker-ы.

      Выполнение вычислений в фоне

      -

      Worker-ы в основном полезны для того, чтобы позволить вашему коду выполнять ресурсоемкие вычисления, не блокируя поток пользовательского интерфейса. В этом примере, worker используется для вычисления числа Фибоначчи.

      +

      Worker-ы в основном полезны для того, чтобы позволить вашему коду выполнять ресурсоёмкие вычисления, не блокируя поток пользовательского интерфейса. В этом примере, worker используется для вычисления числа Фибоначчи.

      Код JavaScript

      @@ -672,7 +672,7 @@ onmessage = function(event) { </body> </html>
      -

      Веб-страница создает элемент div с ID result , который используется для отображения результата, а затем порождает worker. После порождения worker-а, обработчик onmessage настроен для отображения результатов путем установки содержимого элемента div, и обработчик onerror настроен на выброс сообщения об ошибке.

      +

      Веб-страница создаёт элемент div с ID result , который используется для отображения результата, а затем порождает worker. После порождения worker-а, обработчик onmessage настроен для отображения результатов путём установки содержимого элемента div, и обработчик onerror настроен на выброс сообщения об ошибке.

      Наконец, сообщение отправляется worker-у, чтобы запустить его.

      @@ -684,7 +684,7 @@ onmessage = function(event) {

      Разделение задач между множественными worker-ами

      -

      Поскольку многоядерные компьютеры становятся все более распространенными, часто бывает полезно разделить вычислительно сложные задачи между несколькими worker-ами, которые затем могут выполнить эти задачи на многопроцессорных ядрах.

      +

      Поскольку многоядерные компьютеры становятся все более распространёнными, часто бывает полезно разделить вычислительно сложные задачи между несколькими worker-ами, которые затем могут выполнить эти задачи на многопроцессорных ядрах.

      Другие типы worker-ов

      diff --git a/files/ru/web/api/webgl_api/index.html b/files/ru/web/api/webgl_api/index.html index 6a35a2dda3..dc83c9b165 100644 --- a/files/ru/web/api/webgl_api/index.html +++ b/files/ru/web/api/webgl_api/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/WebGL_API ---
      {{WebGLSidebar}}
      -

      WebGL (Web Graphics Library) - программная библиотека для языка JavaScript предназначенная для визуализации интерактивной трехмерной графики и двухмерной графики в пределах совместимости веб-браузера без использования плагинов. WebGL приносит в веб трехмерную графику, вводя API, который построен на основе OpenGL ES 2.0, что позволяет его использовать в элементах canvas HTML5 .

      +

      WebGL (Web Graphics Library) - программная библиотека для языка JavaScript предназначенная для визуализации интерактивной трёхмерной графики и двухмерной графики в пределах совместимости веб-браузера без использования плагинов. WebGL приносит в веб трёхмерную графику, вводя API, который построен на основе OpenGL ES 2.0, что позволяет его использовать в элементах canvas HTML5 .

      Поддержка WebGL присутствует в Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ и Internet Explorer 11+. Однако помимо поддержки WebGL браузером, необходима также его поддержка графическим процессором клиента.

      @@ -51,11 +51,11 @@ translation_of: Web/API/WebGL_API
      Официальный сайт WebGL
      Веб-сайт разработчиков WebGL - Khronos Group.
      Изучение WebGL
      -
      Веб-сайт с уроками, посвященными использованию WebGL.
      +
      Веб-сайт с уроками, посвящёнными использованию WebGL.
      Основы WebGL
      Учебные материалы по основным возможностям WebGL.
      Матрицы в WebGL
      -
      Введение в использование матриц в двухмерной графике на WebGL. На этом ресурсе объясняется математическая основа перспективы в трехмерной графике.
      +
      Введение в использование матриц в двухмерной графике на WebGL. На этом ресурсе объясняется математическая основа перспективы в трёхмерной графике.
      Советы по использованию WebGL
      Веб-сайт с советами по написанию кода на WebGL.
      ewgl-matrices
      diff --git a/files/ru/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html b/files/ru/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html index 55ea7cad8c..4bafecab6d 100644 --- a/files/ru/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html +++ b/files/ru/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context

      Отрисовка сцены

      -

      На данном этапе очень важно понять одну вещь: не смотря на то, что мы в этом примере отрисовываем двухмерный объект, мы по-прежнему отрисовываем его в трехмерном пространстве. По существу, нам по-прежнему необходимо создать шейдеры, которые будут освещать нашу простую сцену,  и отрисовать наш объект. На данном шаге определим как квадрат будет освещаться.

      +

      На данном этапе очень важно понять одну вещь: не смотря на то, что мы в этом примере отрисовываем двухмерный объект, мы по-прежнему отрисовываем его в трёхмерном пространстве. По существу, нам по-прежнему необходимо создать шейдеры, которые будут освещать нашу простую сцену,  и отрисовать наш объект. На данном шаге определим как квадрат будет освещаться.

      Инициализация шейдеров

      @@ -44,11 +44,11 @@ translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context

      Этой процедурой загружаются две шейдерные программы. Первая - фрагментный шейдер, загружается из элемента script с ID "shader-fs". Вторая - вершинный шейдер, загружается из элемента script с ID "shader-vs". Мы рассмотрим функцию getShader() чуть ниже. Эта процедура фактически отвечает за извлечение шейдерных программ из DOM.

      -

      Затем мы создаем шейдерную программу, вызывая функцию createProgram() объекта WebGL, присоединяя два шейдера к нему, и связывая шейдерную программу. После выполнения этого, проверяется значение параметра LINK_STATUS объекта gl для того, чтобы убедиться, что программа успешно скомпонована. Если это так, мы активируем новую шейдерную программу.

      +

      Затем мы создаём шейдерную программу, вызывая функцию createProgram() объекта WebGL, присоединяя два шейдера к нему, и связывая шейдерную программу. После выполнения этого, проверяется значение параметра LINK_STATUS объекта gl для того, чтобы убедиться, что программа успешно скомпонована. Если это так, мы активируем новую шейдерную программу.

      Загрузка шейдеров из DOM

      -

      Функция getShader() получает из DOM шейдерную программу с определенным именем, возвращая скомпилированную шейдерную программу вызывающему, или значение null, если шейдерная программа не может быть загружена или скомпилирована.

      +

      Функция getShader() получает из DOM шейдерную программу с определённым именем, возвращая скомпилированную шейдерную программу вызывающему, или значение null, если шейдерная программа не может быть загружена или скомпилирована.

      function getShader(gl, id) {
         var shaderScript, theSource, currentChild, shader;
      @@ -82,7 +82,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
            return null;
         }
      -

      После того, как код для шейдера считан, мы проверяем MIME тип шейдерного объекта, чтобы определить является он вершинным (MIME type "x-shader/x-vertex") или фрагментным (MIME type "x-shader/x-fragment") шейдером, а затем создаем соответствующий тип шейдера из полученного исходного кода.

      +

      После того, как код для шейдера считан, мы проверяем MIME тип шейдерного объекта, чтобы определить является он вершинным (MIME type "x-shader/x-vertex") или фрагментным (MIME type "x-shader/x-fragment") шейдером, а затем создаём соответствующий тип шейдера из полученного исходного кода.

        gl.shaderSource(shader, theSource);
       
      @@ -109,7 +109,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
       
       

      Каждый пиксель в полигоне называется фрагментом в языке GL. Фрагментные шейдеры необходимы для назначения цвета для каждого пикселя. В данном случае, мы просто назначаем белый цвет каждому пикселю.

      -

      gl_FragColor - встроенная переменная GL, используемая для управления цветом фрагментов. Устанавливая ее значение назначаем цвет пикселям. Ниже приведен пример этого.

      +

      gl_FragColor - встроенная переменная GL, используемая для управления цветом фрагментов. Устанавливая её значение назначаем цвет пикселям. Ниже приведён пример этого.

      <script id="shader-fs" type="x-shader/x-fragment">
         void main(void) {
      @@ -136,7 +136,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
       
       

      Создание объекта

      -

      Перед тем, как мы отрисуем наш квадрат, нам необходимо создать буфер, который содержит его вершины. Мы сделаем это,  вызвав функцию initBuffers(). По мере ознакомления с другими концепциями WebGL, эта функция будет усложняться при создании более сложных трехмерных объектов.

      +

      Перед тем, как мы отрисуем наш квадрат, нам необходимо создать буфер, который содержит его вершины. Мы сделаем это,  вызвав функцию initBuffers(). По мере ознакомления с другими концепциями WebGL, эта функция будет усложняться при создании более сложных трёхмерных объектов.

      var horizAspect = 480.0/640.0;
       
      @@ -155,9 +155,9 @@ function initBuffers() {
       }
       
      -

      В этом примере эта функция упрощена и дает оценить основную суть сцены. Она начинает работу с вызова метода createBuffer() объекта gl для получения буфера, в котором мы будем хранить вершины. Затем он привязывается к контексту, вызовом метода bindBuffer().

      +

      В этом примере эта функция упрощена и даёт оценить основную суть сцены. Она начинает работу с вызова метода createBuffer() объекта gl для получения буфера, в котором мы будем хранить вершины. Затем он привязывается к контексту, вызовом метода bindBuffer().

      -

      После того, как мы это сделали, мы создаем JavaScript массив, содержащий координаты для каждой вершины квадрата. Затем этот массив преобразуется в массив вещественных чисел WebGL и передается в метод bufferData() объекта gl для назначения вершин объекту.

      +

      После того, как мы это сделали, мы создаём JavaScript массив, содержащий координаты для каждой вершины квадрата. Затем этот массив преобразуется в массив вещественных чисел WebGL и передаётся в метод bufferData() объекта gl для назначения вершин объекту.

      Отрисовка сцены

      @@ -180,17 +180,17 @@ function initBuffers() {

      Первый шаг - очистка цветом фона сцены контекста. Затем мы устанавливаем перспективу камеры. Мы устанавливаем угол обзора в 45°, с соотношением ширины к высоте равным 640/480 (размеры нашего объекта canvas). Мы также определяем, что мы хотим видеть отрисованными объекты на расстоянии от 0.1 до 100 единиц от камеры.

      -

      Затем мы устанавливаем позицию квадрата, загружая определенную позицию и размещая ее от камеры на 6 единиц. После этого, мы привязываем буфер, содержащий вершины квадрата к контексту, настраиваем его, и отрисовываем объект, вызывая метод drawArrays().

      +

      Затем мы устанавливаем позицию квадрата, загружая определённую позицию и размещая её от камеры на 6 единиц. После этого, мы привязываем буфер, содержащий вершины квадрата к контексту, настраиваем его, и отрисовываем объект, вызывая метод drawArrays().

      -

      Вы можете посмотреть как это работает щелкнув по этой ссылке. Но это только в том случае, если используемый браузер осуществляет поддержку WebGL.

      +

      Вы можете посмотреть как это работает щёлкнув по этой ссылке. Но это только в том случае, если используемый браузер осуществляет поддержку WebGL.

      Операции над матрицами

      Операции над матрицами достаточно сложны. Никому бы не хотелось самому писать весь код для работы с ними. К счастью, есть Sylvester - очень удобная библиотека для выполнения операций над векторами и матрицами, написанная на JavaScript.

      -

      Файл glUtils.js, используемый в этом примере, используется большинством примеров на WebGL, размещенных в сети интернет. Никто не знает точно откуда он появился. Он просто используется Sylvester и он даже пополняется методами для построения специальных типов матриц, а также вывода HTML для их отображения.

      +

      Файл glUtils.js, используемый в этом примере, используется большинством примеров на WebGL, размещённых в сети интернет. Никто не знает точно откуда он появился. Он просто используется Sylvester и он даже пополняется методами для построения специальных типов матриц, а также вывода HTML для их отображения.

      -

      Также, этот пример определяет несколько полезных процедур взаимодействия с этими библиотеками для выполнения определенных задач. Пояснения относительно того, что делает каждая из приведенных функций, выходят за рамки этого примера, но в сети есть много хороших материалов об операциях над матрицами. Чуть {{ anch("ниже") }} есть список некоторых из них.

      +

      Также, этот пример определяет несколько полезных процедур взаимодействия с этими библиотеками для выполнения определённых задач. Пояснения относительно того, что делает каждая из приведённых функций, выходят за рамки этого примера, но в сети есть много хороших материалов об операциях над матрицами. Чуть {{ anch("ниже") }} есть список некоторых из них.

      function loadIdentity() {
         mvMatrix = Matrix.I(4);
      diff --git a/files/ru/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html
      index 919d3fccff..af607e92cf 100644
      --- a/files/ru/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html
      +++ b/files/ru/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html
      @@ -18,7 +18,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
       
      var squareRotation = 0.0;
       
      -

      Теперь нам надо изменить процедуру drawScene() и добавить в неё код, который бы учитывал этот угол поворота при отрисовке квадрата в нашей сцене. После первоначального расчета матрицы положения для квадрата мы применяем условия поворота следующим образом:

      +

      Теперь нам надо изменить процедуру drawScene() и добавить в неё код, который бы учитывал этот угол поворота при отрисовке квадрата в нашей сцене. После первоначального расчёта матрицы положения для квадрата мы применяем условия поворота следующим образом:

      mvPushMatrix();
       mvRotate(squareRotation, [1, 0, 1]);
      diff --git a/files/ru/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html
      index 0684b89016..f9390f7fe2 100644
      --- a/files/ru/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html
      +++ b/files/ru/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html
      @@ -9,9 +9,9 @@ original_slug: Web/API/WebGL_API/Tutorial/Создание_3D_объектов_
       ---
       

      {{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}

      -

      Давайте поместим наш квадрат в трехмерное пространство, добавив еще 5 граней, чтобы получить куб. Чтобы сделать это наиболее продуктивно, вместо рисования вершин непосредственным вызовом метода {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}} , мы будем использовать массив вершин в виде таблицы и ссылаться на каждую вершину в этой таблице, чтобы определить положение каждой вершины грани, вызывая {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}.

      +

      Давайте поместим наш квадрат в трёхмерное пространство, добавив ещё 5 граней, чтобы получить куб. Чтобы сделать это наиболее продуктивно, вместо рисования вершин непосредственным вызовом метода {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}} , мы будем использовать массив вершин в виде таблицы и ссылаться на каждую вершину в этой таблице, чтобы определить положение каждой вершины грани, вызывая {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}.

      -

      Заметим: чтобы определить каждую грань необходимо четыре вершины, но каждая вершина принадлежит трем граням. Мы можем передавать намного меньше данных, построив список всех 24-х вершин, затем ссылаться на каждую из них в этом списке по её индексу, вместо того чтобы передавать все множество вершин. Если вы удивлены, почему нам нужны 24 вершины, а не только 8, так это потому, что каждое ребро принадлежит трем граням разных цветов, и каждая отдельная вершина должна иметь конкретный отдельный цвет - поэтому мы создадим 3 копии каждой вершины трех разных цветов, по одной для каждой грани.

      +

      Заметим: чтобы определить каждую грань необходимо четыре вершины, но каждая вершина принадлежит трём граням. Мы можем передавать намного меньше данных, построив список всех 24-х вершин, затем ссылаться на каждую из них в этом списке по её индексу, вместо того чтобы передавать все множество вершин. Если вы удивлены, почему нам нужны 24 вершины, а не только 8, так это потому, что каждое ребро принадлежит трём граням разных цветов, и каждая отдельная вершина должна иметь конкретный отдельный цвет - поэтому мы создадим 3 копии каждой вершины трёх разных цветов, по одной для каждой грани.

      Определение позиций вершин куба

      diff --git a/files/ru/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html index 0e50af82fa..c42db89750 100644 --- a/files/ru/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html +++ b/files/ru/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html @@ -7,9 +7,9 @@ translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL ---

      {{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}

      -

      WebGL позволяет веб-контенту использовать API, основанный на OpenGL ES 2.0, для визуализации трехмерной графики без использования плагинов в HTML элементе canvas в браузерах, которые осуществляют его поддержку. WebGL программы состоят из кода управления, написанном на JavaScript и кода специальных эффектов (шейдерного кода), который выполняется на графическом процессоре. WebGL элементы могут быть смешаны с другими HTML элементами и собраны с другими частями веб-страницы или фоном веб-страницы.

      +

      WebGL позволяет веб-контенту использовать API, основанный на OpenGL ES 2.0, для визуализации трёхмерной графики без использования плагинов в HTML элементе canvas в браузерах, которые осуществляют его поддержку. WebGL программы состоят из кода управления, написанном на JavaScript и кода специальных эффектов (шейдерного кода), который выполняется на графическом процессоре. WebGL элементы могут быть смешаны с другими HTML элементами и собраны с другими частями веб-страницы или фоном веб-страницы.

      -

      Эта статья знакомит вас с основами использования WebGL. Предполагается, что вы уже знакомы с математическими основами трехмерной графики. Данная статья не обучит вас OpenGL.

      +

      Эта статья знакомит вас с основами использования WebGL. Предполагается, что вы уже знакомы с математическими основами трёхмерной графики. Данная статья не обучит вас OpenGL.

      Подготовка к визуализации в 3D

      @@ -24,7 +24,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL

      Подготовка контекста WebGL

      -

      Функция start(), в нашем JavaScript коде вызывается после загрузки документа. Ее назначение - настройка контекста WebGL и начать отрисовку содержимого.

      +

      Функция start(), в нашем JavaScript коде вызывается после загрузки документа. Её назначение - настройка контекста WebGL и начать отрисовку содержимого.

      var gl; // глобальная переменная для контекста WebGL
       
      @@ -36,7 +36,7 @@ function start() {
         // продолжать только если WebGL доступен и работает
       
         if (gl) {
      -    gl.clearColor(0.0, 0.0, 0.0, 1.0);                      // установить в качестве цвета очистки буфера цвета черный, полная непрозрачность
      +    gl.clearColor(0.0, 0.0, 0.0, 1.0);                      // установить в качестве цвета очистки буфера цвета чёрный, полная непрозрачность
           gl.enable(gl.DEPTH_TEST);                               // включает использование буфера глубины
           gl.depthFunc(gl.LEQUAL);                                // определяет работу буфера глубины: более ближние объекты перекрывают дальние
           gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);      // очистить буфер цвета и буфер глубины.
      @@ -44,13 +44,13 @@ function start() {
       }
       
      -

      Первое, что мы здесь делаем - получаем ссылку на элемент canvas, помещаем ее в переменную canvas. Очевидно, что если вам не требуется многократно получать ссылку на canvas, вы должны избежать сохранения этого значения глобально, а только сохранить ее в локальной переменной или в поле объекта.

      +

      Первое, что мы здесь делаем - получаем ссылку на элемент canvas, помещаем её в переменную canvas. Очевидно, что если вам не требуется многократно получать ссылку на canvas, вы должны избежать сохранения этого значения глобально, а только сохранить её в локальной переменной или в поле объекта.

      -

      Как только мы получили ссылку на canvas, мы вызываем функцию initWebGL(); Эту функцию мы определяем незамедлительно, ее работа - инициализировать контекст WebGL.

      +

      Как только мы получили ссылку на canvas, мы вызываем функцию initWebGL(); Эту функцию мы определяем незамедлительно, её работа - инициализировать контекст WebGL.

      -

      Если контекст успешно инициализирован, в gl будет содержаться ссылка на него. В этом случае, мы устанавливаем цвет очистки буфера цвета (цвет фона) на черный, затем очищаем контекст этим цветом. После этого, контекст конфигурируется параметрами настройки. В данном случае, мы включаем буфер глубины и определяем, что более близкие объекты будут перекрывать более дальние.

      +

      Если контекст успешно инициализирован, в gl будет содержаться ссылка на него. В этом случае, мы устанавливаем цвет очистки буфера цвета (цвет фона) на чёрный, затем очищаем контекст этим цветом. После этого, контекст конфигурируется параметрами настройки. В данном случае, мы включаем буфер глубины и определяем, что более близкие объекты будут перекрывать более дальние.

      -

      Всё вышеперечисленное необходимо сделать только для первоначальной инициализации. Чуть позже мы увидим работу по визуализации трехмерных объектов.

      +

      Всё вышеперечисленное необходимо сделать только для первоначальной инициализации. Чуть позже мы увидим работу по визуализации трёхмерных объектов.

      Создание контекста WebGL

      @@ -80,19 +80,19 @@ function start() {
      Обратите внимание: Контекст, именуемый как "experimental-webgl" - это временное имя для контекста, используемое на время процесса разработки спецификации. После того, как спецификация будет полностью разработана будет использоваться только имя контекста "webgl".
      -

      На данном этапе этого кода достаточно, чтобы успешно инициализировать контекст WebGL, и вы увидите пустой черный блок, готовый к заполнению контентом.

      +

      На данном этапе этого кода достаточно, чтобы успешно инициализировать контекст WebGL, и вы увидите пустой чёрный блок, готовый к заполнению контентом.

      -

      Если ваш браузер поддерживает WebGL, то вы можете посмотреть результат выполнения приведенного выше кода, щелкнув по этой ссылке.

      +

      Если ваш браузер поддерживает WebGL, то вы можете посмотреть результат выполнения приведённого выше кода, щёлкнув по этой ссылке.

      Изменение размера контекста WebGL

      -

      Новый контекст WebGL будет иметь возможность задания размеров области отображения в момент получения контекста путем задания высоты и ширины элемента canvas, без использования CSS. Редактирование стиля элемента canvas будет изменять его отображаемый размер, без изменения размеров области отрисовки. Редактирование атрибутов ширины и высоты элемента canvas после создания контекста не будет также изменять число пикселей для отрисовки. Чтобы изменить размер области отрисовки, с которой WebGL производит работу, например, когда пользователь изменяет размер окна на весь экран или когда вам необходимо менять настройки графики в самом приложении, вам необходимо вызвать контекстную функцию WebGL viewport(), чтобы подтвердить изменения.

      +

      Новый контекст WebGL будет иметь возможность задания размеров области отображения в момент получения контекста путём задания высоты и ширины элемента canvas, без использования CSS. Редактирование стиля элемента canvas будет изменять его отображаемый размер, без изменения размеров области отрисовки. Редактирование атрибутов ширины и высоты элемента canvas после создания контекста не будет также изменять число пикселей для отрисовки. Чтобы изменить размер области отрисовки, с которой WebGL производит работу, например, когда пользователь изменяет размер окна на весь экран или когда вам необходимо менять настройки графики в самом приложении, вам необходимо вызвать контекстную функцию WebGL viewport(), чтобы подтвердить изменения.

      Чтобы изменить размер области отрисовки контекста WebGL с переменными gl и canvas, использующимися в примере выше:

      gl.viewport(0, 0, canvas.width, canvas.height);
      -

      Элемент canvas будет изменять размер, в случае, если его отрисовать с другими размерами области отрисовки, чем те, что указаны в его стилях CSS, согласно которым он занимает место на экране. Изменение размера с помощью CSS наиболее полезно для сохранения ресурсов, отрисовывая с низким разрешением и позволяя браузеру растягивать полученный результат; сжимать возможно при использовании эффекта избыточной выборки сглаживания ( super sample antialiasing - SSAA) (приводит к менее приемлемым результатам и серьезным потерям производительности). В большинстве случаев лучше полагаться на множественную выборку сглаживания (MSAA) и на реализацию алгоритмов фильтрации текстур, которые поддерживаются браузером пользователя, чем делать то же самое посредством грубой силы и надеяться, что алгоритм масштабирования изображений, используемый браузером, выдаст красивый результат.

      +

      Элемент canvas будет изменять размер, в случае, если его отрисовать с другими размерами области отрисовки, чем те, что указаны в его стилях CSS, согласно которым он занимает место на экране. Изменение размера с помощью CSS наиболее полезно для сохранения ресурсов, отрисовывая с низким разрешением и позволяя браузеру растягивать полученный результат; сжимать возможно при использовании эффекта избыточной выборки сглаживания ( super sample antialiasing - SSAA) (приводит к менее приемлемым результатам и серьёзным потерям производительности). В большинстве случаев лучше полагаться на множественную выборку сглаживания (MSAA) и на реализацию алгоритмов фильтрации текстур, которые поддерживаются браузером пользователя, чем делать то же самое посредством грубой силы и надеяться, что алгоритм масштабирования изображений, используемый браузером, выдаст красивый результат.

      Смотрите также

      diff --git a/files/ru/web/api/webgl_api/tutorial/index.html b/files/ru/web/api/webgl_api/tutorial/index.html index 9b0f0f75e6..88f55bf361 100644 --- a/files/ru/web/api/webgl_api/tutorial/index.html +++ b/files/ru/web/api/webgl_api/tutorial/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/WebGL_API/Tutorial

      Перед тем как начать

      -

      Использование элемента <canvas>  - это не сложно, но вы должны понимать основы HTML и JavaScript. <canvas> и WebGL не поддерживаются в некоторых старых браузерах, но поддерживаются в последних версиях всех основных. Чтобы рисовать графику на canvas нужно использовать объекты контекста JavaScript, который создает графику на лету.

      +

      Использование элемента <canvas>  - это не сложно, но вы должны понимать основы HTML и JavaScript. <canvas> и WebGL не поддерживаются в некоторых старых браузерах, но поддерживаются в последних версиях всех основных. Чтобы рисовать графику на canvas нужно использовать объекты контекста JavaScript, который создаёт графику на лету.

      В этом руководстве

      @@ -35,5 +35,5 @@ translation_of: Web/API/WebGL_API/Tutorial
      Освещение объектов в WebGL
      Как симулировать эффект света в контексте WebGL.
      Анимирование текстур в WebGL
      -
      Как анимировать текстуры; здесь путем отображения Ogg видео на поверхность вращающегося куба.
      +
      Как анимировать текстуры; здесь путём отображения Ogg видео на поверхность вращающегося куба.
      diff --git a/files/ru/web/api/webgl_api/tutorial/lighting_in_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/lighting_in_webgl/index.html index 57c1b21e35..f1645ba200 100644 --- a/files/ru/web/api/webgl_api/tutorial/lighting_in_webgl/index.html +++ b/files/ru/web/api/webgl_api/tutorial/lighting_in_webgl/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL

      Окружающий свет освещает всю сцену. Он не направленный и освещает все грани всех объектов одинаково, не зависимо от ориентации граней.

      -

      Направленный свет исходит из определенного направления. Этот свет приходит от настолько удаленного источника, что все фотоны летят параллельно друг другу. К примеру, солнечный свет можно считать.

      +

      Направленный свет исходит из определённого направления. Этот свет приходит от настолько удалённого источника, что все фотоны летят параллельно друг другу. К примеру, солнечный свет можно считать.

      Точечный свет исходит из одной точки во всех направлениях. В реальном мире многие источники освещения являются точечными, например электрическая лампочка.

      @@ -28,11 +28,11 @@ translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL
    • Нам нужно знать направление, в котором распространяется свет. Оно определяется вектором направления.
    • -

      Затем мы обновим вершинный шейдер, чтобы скорректировать цвет каждой вершины в зависимости от окружающего и направленного освещения с учетом угла падения на грань. Мы увидим, как это делается, когда посмотрим на код шейдера.

      +

      Затем мы обновим вершинный шейдер, чтобы скорректировать цвет каждой вершины в зависимости от окружающего и направленного освещения с учётом угла падения на грань. Мы увидим, как это делается, когда посмотрим на код шейдера.

      Построение нормали для вершин

      -

      Сначала нам нужно создать массив нормалей для всех вершин, из которых состоит наш куб. Это будет просто, потому что куб очень простой объект. Очевидно, что для более сложных объектов расчет нормалей будет более затратным.

      +

      Сначала нам нужно создать массив нормалей для всех вершин, из которых состоит наш куб. Это будет просто, потому что куб очень простой объект. Очевидно, что для более сложных объектов расчёт нормалей будет более затратным.

        const normalBuffer = gl.createBuffer();
         gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
      @@ -89,7 +89,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL
       
       
      -

      Код уже должен выглядеть узнаваемо. Мы создаем новый буфер, связываем его с рабочим буфером и записываем в него массив нормалей к вершинам при помощи bufferData().

      +

      Код уже должен выглядеть узнаваемо. Мы создаём новый буфер, связываем его с рабочим буфером и записываем в него массив нормалей к вершинам при помощи bufferData().

      Затем добавим в drawScene() код, который свяжет массив нормалей с атрибутом шейдера. Таким образом шейдер сможет получить к нему доступ:

      @@ -114,7 +114,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL   }
      -

      В конце нужно обновить код, который строит матрицы для uniform-переменных, чтобы создать и передать в шейдер матрицу нормалей, которая используется для трансформации нормалей при расчете ориентации куба относительно направления на источник света:

      +

      В конце нужно обновить код, который строит матрицы для uniform-переменных, чтобы создать и передать в шейдер матрицу нормалей, которая используется для трансформации нормалей при расчёте ориентации куба относительно направления на источник света:

        const normalMatrix = mat4.create();
         mat4.invert(normalMatrix, modelViewMatrix);
      @@ -166,15 +166,15 @@ translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL
         `;
       
      -

      После расчета позиции вершины мы передаем координаты текселя ({{Glossary("texel")}}), соответствующего вершине, во фрагментный шейдер, и начинаем расчет освещения вершины.

      +

      После расчёта позиции вершины мы передаём координаты текселя ({{Glossary("texel")}}), соответствующего вершине, во фрагментный шейдер, и начинаем расчёт освещения вершины.

      Сначала нужно преобразовать нормаль, основываясь на текущей ориентации куба - умножив нормаль вершины на матрицу нормалей. Затем мы можем рассчитать количество света от направленного источника, которое приходит в вершину, посчитав скалярное произведение преобразованной нормали и вектора направления (направления, с которого приходит свет). Если скалярное произведение меньше нуля, то мы принимаем его за ноль, потому что количество света не может быть меньше 0.

      -

      После расчета количества падающего направленного света мы можем посчитать финальное освещение, сложив окружающий свет и произведение количества направленного света на его цвет. В результате получается значение RGB, которое используется фрагментным шейдером для изменения цвета каждого пикселя.

      +

      После расчёта количества падающего направленного света мы можем посчитать финальное освещение, сложив окружающий свет и произведение количества направленного света на его цвет. В результате получается значение RGB, которое используется фрагментным шейдером для изменения цвета каждого пикселя.

      Фрагментный шейдер

      -

      Фрагментный шейдер должен быть обновлен таким образом, чтобы он учитывал в значение освещения, рассчитанное в вершинном шейдере:

      +

      Фрагментный шейдер должен быть обновлён таким образом, чтобы он учитывал в значение освещения, рассчитанное в вершинном шейдере:

        const fsSource = `
           varying highp vec2 vTextureCoord;
      diff --git a/files/ru/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html
      index 0c01467385..1e3a2c7358 100644
      --- a/files/ru/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html
      +++ b/files/ru/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html
      @@ -11,14 +11,14 @@ translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
       
       

      Задание цвета вершинам

      -

      В GL, объекты строятся с использованием наборов вершин, для каждой из которых задается положение в пространстве и цвет. По умолчанию, цвета всех остальных пикселей (и все их другие атрибуты, включая положение в пространстве) вычисляются с использованием линейной интерполяции, автоматически создавая плавный градиент. В прошлый раз наш вершинный шейдер не задавал определенных цветов вершинам, а фрагментный шейдер назначил фиксированный белый цвет каждому пикселю, поэтому квадрат целиком был отрисован белым цветом.

      +

      В GL, объекты строятся с использованием наборов вершин, для каждой из которых задаётся положение в пространстве и цвет. По умолчанию, цвета всех остальных пикселей (и все их другие атрибуты, включая положение в пространстве) вычисляются с использованием линейной интерполяции, автоматически создавая плавный градиент. В прошлый раз наш вершинный шейдер не задавал определённых цветов вершинам, а фрагментный шейдер назначил фиксированный белый цвет каждому пикселю, поэтому квадрат целиком был отрисован белым цветом.

      -

      Предположим, что мы хотим отрисовать градиент, в котором каждый угол квадрата разного цвета: красного, синего, зеленого и белый. Первое, что необходимо сделать - назначить эти цвета четырем вершинам. Чтобы сделать это, нам сначала необходимо создать массив цветов вершин, а затем сохранить его в WebGL буфер. Мы сделаем это, добавив следующий код в нашу функцию initBuffers():

      +

      Предположим, что мы хотим отрисовать градиент, в котором каждый угол квадрата разного цвета: красного, синего, зелёного и белый. Первое, что необходимо сделать - назначить эти цвета четырём вершинам. Чтобы сделать это, нам сначала необходимо создать массив цветов вершин, а затем сохранить его в WebGL буфер. Мы сделаем это, добавив следующий код в нашу функцию initBuffers():

        var colors = [
           1.0,  1.0,  1.0,  1.0,    // белый
           1.0,  0.0,  0.0,  1.0,    // красный
      -    0.0,  1.0,  0.0,  1.0,    // зеленый
      +    0.0,  1.0,  0.0,  1.0,    // зелёный
           0.0,  0.0,  1.0,  1.0     // синий
         ];
       
      @@ -48,11 +48,11 @@ translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
           </script>
       
      -

      Ключевым отличием здесь является то, что для каждой вершины, мы задаем цвет на соответствующее значение из массива цвета.

      +

      Ключевым отличием здесь является то, что для каждой вершины, мы задаём цвет на соответствующее значение из массива цвета.

      Окраска фрагментов

      -

      Чтобы напомнить, как фрагментный шейдер выглядел ранее, ниже приведен его код:

      +

      Чтобы напомнить, как фрагментный шейдер выглядел ранее, ниже приведён его код:

          <script id="shader-fs" type="x-shader/x-fragment">
             void main(void) {
      @@ -88,7 +88,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
         gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
       
      -

      На этом этапе, вы можете посмотреть результат работы написанного кода, если используете браузер, поддерживающий WebGL. Вы увидите нечто похожее на следующий рисунок (расположенный по центру в большом черном поле):

      +

      На этом этапе, вы можете посмотреть результат работы написанного кода, если используете браузер, поддерживающий WebGL. Вы увидите нечто похожее на следующий рисунок (расположенный по центру в большом чёрном поле):

      screenshot.png

      diff --git a/files/ru/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html index 706bf00786..5d3b79d1bc 100644 --- a/files/ru/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html +++ b/files/ru/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL ---

      {{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}

      -

      Сейчас наша программа рисует вращающийся объемный куб - давайте натянем на него текстуру вместо заливки граней одним цветом.

      +

      Сейчас наша программа рисует вращающийся объёмный куб - давайте натянем на него текстуру вместо заливки граней одним цветом.

      Загрузка текстур

      @@ -52,7 +52,7 @@ function loadTexture(gl, url) { // и к не имеющим размер степени 2, поэтому проверяем, что изображение   // имеет размер степени 2 в обеих измерениях. if (isPowerOf2(image.width) && isPowerOf2(image.height)) { - // Размер соответствует степени 2. Создаем MIP'ы. + // Размер соответствует степени 2. Создаём MIP'ы. gl.generateMipmap(gl.TEXTURE_2D); } else { // Размер не соответствует степени 2. @@ -71,15 +71,15 @@ function isPowerOf2(value) { return (value & (value - 1)) == 0; }
      -

      Функция loadTexture() начинается с создания объекта WebGL texture вызовом функции {{domxref("WebGLRenderingContext.createTexture()", "createTexture()")}}. Сначала функция создает текстуру из единственного голубого пикселя, используя {{domxref("WebGLRenderingContext.texImage2D()", "texImage2D()")}}. Таким образом текстура может быть использована сразу (как сплошной голубой цвет) при том, что загрузка изображения может занять некоторое время.

      +

      Функция loadTexture() начинается с создания объекта WebGL texture вызовом функции {{domxref("WebGLRenderingContext.createTexture()", "createTexture()")}}. Сначала функция создаёт текстуру из единственного голубого пикселя, используя {{domxref("WebGLRenderingContext.texImage2D()", "texImage2D()")}}. Таким образом текстура может быть использована сразу (как сплошной голубой цвет) при том, что загрузка изображения может занять некоторое время.

      -

      Чтобы загрузить текстуру из файла изображения, функция создает объект Image и присваивает атрибуту src адрес, с которого мы хотим загрузить текстуру. Функция, которую мы назначили на событие image.onload,будет вызвана после завершения загрузки изображения. В этот момент мы вызываем {{domxref("WebGLRenderingContext.texImage2D()", "texImage2D()")}}, используя загруженное изображение как исходник для текстуры. Затем мы устанавливаем фильтрацию и натяжение, исходя из того, является ли размер изображения степенью 2 или нет.

      +

      Чтобы загрузить текстуру из файла изображения, функция создаёт объект Image и присваивает атрибуту src адрес, с которого мы хотим загрузить текстуру. Функция, которую мы назначили на событие image.onload,будет вызвана после завершения загрузки изображения. В этот момент мы вызываем {{domxref("WebGLRenderingContext.texImage2D()", "texImage2D()")}}, используя загруженное изображение как исходник для текстуры. Затем мы устанавливаем фильтрацию и натяжение, исходя из того, является ли размер изображения степенью 2 или нет.

      В WebGL1 изображения размера, не являющегося степенью 2, могут использовать только NEAREST или LINEAR фильтрацию, и для них нельзя создать mipmap. Также для таких изображений мы должны установить натяжение CLAMP_TO_EDGE. С другой стороны, если изображение имеет размер степени 2 по обеим осям, WebGL может производить более качественную фильтрацию, использовать mipmap и режимы натяжения REPEAT или MIRRORED_REPEAT.

      Примером повторяющейся текстуры является изображение нескольких кирпичей, которое размножается для покрытия поверхности и создания изображения кирпичной стены.

      -

      Мипмаппинг и UV-повторение могут быть отключены с помощью {{domxref("WebGLRenderingContext.texParameter()", "texParameteri()")}}. Так вы сможете использовать текстуры с размером, не являющимся степенью 2 (NPOT - non-power-of-two), ценой отключения мипмаппинга, UV-натяжения, UV-повторения, и вам самому придется контролировать, как именно устройство будет обрабатывать текстуру.

      +

      Мипмаппинг и UV-повторение могут быть отключены с помощью {{domxref("WebGLRenderingContext.texParameter()", "texParameteri()")}}. Так вы сможете использовать текстуры с размером, не являющимся степенью 2 (NPOT - non-power-of-two), ценой отключения мипмаппинга, UV-натяжения, UV-повторения, и вам самому придётся контролировать, как именно устройство будет обрабатывать текстуру.

      // также разрешено gl.NEAREST вместо gl.LINEAR, но не mipmap.
       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
      @@ -88,7 +88,7 @@ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
       // Не допускаем повторения по t-координате.
       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
      -

      Повторим, что с этими параметрами совместимые WebGL устройства будут допускать использование текстур с любым разрешением (вплоть до максимального). Без подобной настройки WebGL потерпит неудачу при загрузке NPOT-текстур, и вернёт прозрачный черный цвет rgba(0,0,0,0).

      +

      Повторим, что с этими параметрами совместимые WebGL устройства будут допускать использование текстур с любым разрешением (вплоть до максимального). Без подобной настройки WebGL потерпит неудачу при загрузке NPOT-текстур, и вернёт прозрачный чёрный цвет rgba(0,0,0,0).

      Для загрузки изображения добавим вызов loadTexture() в функцию main(). Код можно разместить после вызова initBuffers(gl).

      @@ -145,7 +145,7 @@ const texture = loadTexture(gl, 'cubetexture.png');
      indices: indexBuffer, };
      -

      Сначала мы создаем WebGL буфер, в котором сохраняем координаты текстуры для каждой грани, затем связываем его с массивом, в который будем записывать значения.

      +

      Сначала мы создаём WebGL буфер, в котором сохраняем координаты текстуры для каждой грани, затем связываем его с массивом, в который будем записывать значения.

      Массив textureCoordinates определяет координаты текстуры, соответствующие каждой вершине каждой грани. Заметьте, что координаты текстуры лежат в промежутке между 0.0 и 1.0. Размерность текстуры нормализуется в пределах между 0.0 и 1.0, независимо от реального размера изображения.

      @@ -174,7 +174,7 @@ const texture = loadTexture(gl, 'cubetexture.png');
      } `;
      -

      Ключевое изменение в том, что вместо получения цвета вершины, мы получаем координаты текстуры и передаем их в вершинный шейдер, сообщая положение точки внутри текстуры, которая соответствует вершине.

      +

      Ключевое изменение в том, что вместо получения цвета вершины, мы получаем координаты текстуры и передаём их в вершинный шейдер, сообщая положение точки внутри текстуры, которая соответствует вершине.

      Фрагментный шейдер

      diff --git a/files/ru/web/api/webgl_api/webgl_best_practices/index.html b/files/ru/web/api/webgl_api/webgl_best_practices/index.html index 64dee04e13..eb5aef450a 100644 --- a/files/ru/web/api/webgl_api/webgl_best_practices/index.html +++ b/files/ru/web/api/webgl_api/webgl_best_practices/index.html @@ -10,9 +10,9 @@ translation_of: Web/API/WebGL_API/WebGL_best_practices

      Чего следует избегать

        -
      • Убедитесь, что ваше приложение не выдает какие-либо ошибки WebGL, возвращаемые функцией getError(). В Firefox при каждой ошибке (до определенного предела) или при любой другой проблеме в работе WebGL выводится JavaScript предупреждение с подробным описанием. Вам же не хочется, что бы ваше приложение выдавало множество ошибок в консоль, не так ли?
      • +
      • Убедитесь, что ваше приложение не выдаёт какие-либо ошибки WebGL, возвращаемые функцией getError(). В Firefox при каждой ошибке (до определённого предела) или при любой другой проблеме в работе WebGL выводится JavaScript предупреждение с подробным описанием. Вам же не хочется, что бы ваше приложение выдавало множество ошибок в консоль, не так ли?
      • Не следует использовать #ifdef GL_ES в шейдерах WebGL. Несмотря на то что в некоторых ранних примерах используются эти директивы, это не обязательно в том случае, если проверяемое условие всегда истинно.
      • -
      • Использование высокой точности (highp precision) во фрагментных шейдерах может приводить к несовместимости вашего приложения с некоторыми устаревшими мобильными устройствами. Вы можете использовать среднюю точность (mediump), но помните, что это может привести к некорректному результату отрисовки из-за потери данных на большинстве мобильных устройств, причем этот некорректный результат не будет заметен на обычном компьютере. В общем, только использование высокой точности (highp) в вершинном и фрагментном шейдерах является более надежными решением, если нет возможности тщательно проверить работу шейдеров на различных платформах. В Firefox версии 11 и выше реализована функция WebGL getShaderPrecisionFormat(), которая позволяет проверить, поддерживается ли высокая точность и, более того, запросить реальную точность всех поддерживаемых квалификаторов точности.
      • +
      • Использование высокой точности (highp precision) во фрагментных шейдерах может приводить к несовместимости вашего приложения с некоторыми устаревшими мобильными устройствами. Вы можете использовать среднюю точность (mediump), но помните, что это может привести к некорректному результату отрисовки из-за потери данных на большинстве мобильных устройств, причём этот некорректный результат не будет заметен на обычном компьютере. В общем, только использование высокой точности (highp) в вершинном и фрагментном шейдерах является более надёжными решением, если нет возможности тщательно проверить работу шейдеров на различных платформах. В Firefox версии 11 и выше реализована функция WebGL getShaderPrecisionFormat(), которая позволяет проверить, поддерживается ли высокая точность и, более того, запросить реальную точность всех поддерживаемых квалификаторов точности.

      О чем следует помнить.

      @@ -22,7 +22,7 @@ translation_of: Web/API/WebGL_API/WebGL_best_practices
    • В частности, использование текстур в вершинном шейдере возможно только если значение webgl.getParameter(webgl.MAX_VERTEX_TEXTURE_IMAGE_UNITS) больше ноля. Как правило, эта возможность не поддерживается на текущих мобильных устройствах.
    • Доступность большинства расширений WebGL зависит от клиента. Если это возможно, проектируйте приложение так, чтобы оно оставалось работоспособным даже в случае, когда используемое расширение недоступно. В Firefox версии 10 и выше есть настройка webgl.disable-extensions, позволяющая сымитировать отсутствие всех расширений для проверки переносимости приложения.
    • Рендеринг в floating-point текстуру может не выполняться даже если расширение OES_texture_float поддерживается. Обычно это случается на современных мобильных устройствах. Проверить эту возможность можно с помощью функции WebGL checkFramebufferStatus().
    • -
    • Вы можете выполнять отрисовку на холсте, реальные размеры которого отличается от значений, определенных в таблице стилей. При проблемах с производительностью рассмотрите возможность рендеринга в более низком разрешении. (Уменьшение области рендеринга ускорит обработку пиксельных шейдеров, например, эффектов постобработки, однако, на скорость работы вершинных шейдеров это не повлияет. прим. перев.).
    • +
    • Вы можете выполнять отрисовку на холсте, реальные размеры которого отличается от значений, определённых в таблице стилей. При проблемах с производительностью рассмотрите возможность рендеринга в более низком разрешении. (Уменьшение области рендеринга ускорит обработку пиксельных шейдеров, например, эффектов постобработки, однако, на скорость работы вершинных шейдеров это не повлияет. прим. перев.).

    Общие советы по повышению производительности

    @@ -30,7 +30,7 @@ translation_of: Web/API/WebGL_API/WebGL_best_practices
    • Все, что требует синхронизации ЦП и ГП потенциально приводит в уменьшению производительности. Поэтому избегайте в цикле отрисовки следующих вызовов функций WebGL: getError(), readPixels() и finish(). Вызовы функций, получающих значения, такие как getParameter() и getUniformLocation() тоже должны рассматриваться как медленные и их значения следует сохраняться в переменных JavaScript.
    • Несколько больших операций отрисовки выполняются быстрее, чем много мелких. Если вам нужно нарисовать 1000 спрайтов, попробуйте реализовать это одним вызовом функции drawArrays() или drawElements(). Вы также можете использовать вырожденные (плоские) треугольники для рисования нескольких объектов за один вызов drawArrays().
    • -
    • Уменьшение переключений состояний также увеличивает производительность. В частности, если есть возможность упаковать несколько изображений в одну текстуру (т.н. текстурный атлас, прим. перев.) и отображать требуемое изображение с помощью поправок текстурных координат, то это приведет к уменьшению переключений между текстурами, что увеличит производительность. +
    • Уменьшение переключений состояний также увеличивает производительность. В частности, если есть возможность упаковать несколько изображений в одну текстуру (т.н. текстурный атлас, прим. перев.) и отображать требуемое изображение с помощью поправок текстурных координат, то это приведёт к уменьшению переключений между текстурами, что увеличит производительность.
      • В некоторых редких случаях разные одноцветные изображения можно упаковать в разные цветовые каналы текстуры.
      diff --git a/files/ru/web/api/webglrenderingcontext/activetexture/index.html b/files/ru/web/api/webglrenderingcontext/activetexture/index.html index 4bbea586ed..b23d2c5b8d 100644 --- a/files/ru/web/api/webglrenderingcontext/activetexture/index.html +++ b/files/ru/web/api/webglrenderingcontext/activetexture/index.html @@ -43,7 +43,7 @@ translation_of: Web/API/WebGLRenderingContext/activeTexture
      gl.activeTexture(gl.TEXTURE0);
       gl.getParameter(gl.ACTIVE_TEXTURE);
      -// вернет "33984" (0x84C0, gl.TEXTURE0 enum value)
      +// вернёт "33984" (0x84C0, gl.TEXTURE0 enum value)
       

      Спецификация

      @@ -70,7 +70,7 @@ gl.getParameter(gl.ACTIVE_TEXTURE);

      Совместимость с браузерами

      - +

      {{Compat("api.WebGLRenderingContext.activeTexture")}}

      diff --git a/files/ru/web/api/webglrenderingcontext/bindtexture/index.html b/files/ru/web/api/webglrenderingcontext/bindtexture/index.html index 2a3fd529b3..38d9a3aaa0 100644 --- a/files/ru/web/api/webglrenderingcontext/bindtexture/index.html +++ b/files/ru/web/api/webglrenderingcontext/bindtexture/index.html @@ -22,7 +22,7 @@ translation_of: Web/API/WebGLRenderingContext/bindTexture
    • gl.TEXTURE_CUBE_MAP: кубическая текстура.
    • При использовании {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, дополнительно доступны:
        -
      • gl.TEXTURE_3D: трехмерная текстура.
      • +
      • gl.TEXTURE_3D: трёхмерная текстура.
      • gl.TEXTURE_2D_ARRAY: массив двумерных текстур.
    • @@ -93,7 +93,7 @@ gl.bindTexture(gl.TEXTURE_2D, texture);

      Совместимость с браузерами

      - +

      {{Compat("api.WebGLRenderingContext.bindTexture")}}

      diff --git a/files/ru/web/api/webglrenderingcontext/compileshader/index.html b/files/ru/web/api/webglrenderingcontext/compileshader/index.html index 9ecb9bd735..b68ba5b4be 100644 --- a/files/ru/web/api/webglrenderingcontext/compileshader/index.html +++ b/files/ru/web/api/webglrenderingcontext/compileshader/index.html @@ -50,7 +50,7 @@ gl.compileShader(shader);

      Совместимость с браузерами

      - +

      {{Compat("api.WebGLRenderingContext.compileShader")}}

      diff --git a/files/ru/web/api/webglrenderingcontext/enable/index.html b/files/ru/web/api/webglrenderingcontext/enable/index.html index d7cc40db94..fe955d5073 100644 --- a/files/ru/web/api/webglrenderingcontext/enable/index.html +++ b/files/ru/web/api/webglrenderingcontext/enable/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/WebGLRenderingContext/enable ---
      {{APIRef("WebGL")}}
      -

      Метод WebGLRenderingContext.enable() из WebGL API активирует определенные возможности WebGL для текущего контекста.

      +

      Метод WebGLRenderingContext.enable() из WebGL API активирует определённые возможности WebGL для текущего контекста.

      Синтаксис

      diff --git a/files/ru/web/api/webglrenderingcontext/getshaderinfolog/index.html b/files/ru/web/api/webglrenderingcontext/getshaderinfolog/index.html index e91fa4e851..e34cc75d94 100644 --- a/files/ru/web/api/webglrenderingcontext/getshaderinfolog/index.html +++ b/files/ru/web/api/webglrenderingcontext/getshaderinfolog/index.html @@ -65,7 +65,7 @@ if (message.length > 0) {

      Совместимость с браузерами

      - +

      {{Compat("api.WebGLRenderingContext.getShaderInfoLog")}}

      diff --git a/files/ru/web/api/webglrenderingcontext/index.html b/files/ru/web/api/webglrenderingcontext/index.html index 2db54961f0..550dc0f367 100644 --- a/files/ru/web/api/webglrenderingcontext/index.html +++ b/files/ru/web/api/webglrenderingcontext/index.html @@ -72,11 +72,11 @@ var gl = canvas.getContext('webgl');
      {{domxref("WebGLRenderingContext.blendFuncSeparate()")}}
      Определяет, какая арифметическая функция используется для смешивания пикселей для RGB и альфа-компонентов по отдельности.
      {{domxref("WebGLRenderingContext.clearColor()")}}
      -
      Задает значения цвета, используемые при очистке цветовых буферов.
      +
      Задаёт значения цвета, используемые при очистке цветовых буферов.
      {{domxref("WebGLRenderingContext.clearDepth()")}}
      -
      Задает значение глубины, используемый при очистке буфера глубины.
      +
      Задаёт значение глубины, используемый при очистке буфера глубины.
      {{domxref("WebGLRenderingContext.clearStencil()")}}
      -
      Задает значение шаблона, используемый при очистке буфера шаблона.
      +
      Задаёт значение шаблона, используемый при очистке буфера шаблона.
      {{domxref("WebGLRenderingContext.colorMask()")}}
      Устанавливает какие цветовые компоненты для включены или выключены при отрисовке или рендеринге на{{domxref("WebGLFramebuffer")}}.
      {{domxref("WebGLRenderingContext.cullFace()")}}
      @@ -98,7 +98,7 @@ var gl = canvas.getContext('webgl');
      {{domxref("WebGLRenderingContext.getError()")}}
      Возвращает информацию об ошибках.
      {{domxref("WebGLRenderingContext.hint()")}}
      -
      Указывает подсказки для определенного поведения. Интерпретация этих подсказок зависит от реализации.
      +
      Указывает подсказки для определённого поведения. Интерпретация этих подсказок зависит от реализации.
      {{domxref("WebGLRenderingContext.isEnabled()")}}
      Проверяет,  включена или нет конкретная способность WebG.
      {{domxref("WebGLRenderingContext.lineWidth()")}}
      @@ -106,7 +106,7 @@ var gl = canvas.getContext('webgl');
      {{domxref("WebGLRenderingContext.pixelStorei()")}}
      Определяет режимы хранилища пикселей
      {{domxref("WebGLRenderingContext.polygonOffset()")}}
      -
      Определяет факторы масштабирования  и единицы для расчета значения глубины.
      +
      Определяет факторы масштабирования  и единицы для расчёта значения глубины.
      {{domxref("WebGLRenderingContext.sampleCoverage()")}}
      Определяет составные параметры  для сглаживания эффектов.
      {{domxref("WebGLRenderingContext.stencilFunc()")}}
      diff --git a/files/ru/web/api/webglrenderingcontext/shadersource/index.html b/files/ru/web/api/webglrenderingcontext/shadersource/index.html index 86ac976ab8..c41d33671f 100644 --- a/files/ru/web/api/webglrenderingcontext/shadersource/index.html +++ b/files/ru/web/api/webglrenderingcontext/shadersource/index.html @@ -56,7 +56,7 @@ var source = gl.getShaderSource(shader);

      Совместимость с браузерами

      - +

      {{Compat("api.WebGLRenderingContext.shaderSource")}}

      diff --git a/files/ru/web/api/webglrenderingcontext/uniform/index.html b/files/ru/web/api/webglrenderingcontext/uniform/index.html index 91a02ac2b9..d1f8c30223 100644 --- a/files/ru/web/api/webglrenderingcontext/uniform/index.html +++ b/files/ru/web/api/webglrenderingcontext/uniform/index.html @@ -88,7 +88,7 @@ gl.uniform1iv(samplerCubeUniformLoc, [v]); // для samplerCube или масс

      Совместимость с браузерами

      - +

      {{Compat("api.WebGLRenderingContext.uniform1f")}}

      diff --git a/files/ru/web/api/webrtc_api/adapter.js/index.html b/files/ru/web/api/webrtc_api/adapter.js/index.html index efe5581fc2..575e045e1f 100644 --- a/files/ru/web/api/webrtc_api/adapter.js/index.html +++ b/files/ru/web/api/webrtc_api/adapter.js/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/WebRTC_API/adapter.js ---

      {{WebRTCSidebar}}

      -

      Несмотря на то, что WebRTC спецификация относительно стабильна, не все еще браузеры полностью реализуют её функциональность. Некоторые реализации в браузерах все еще содержат префиксы производителей в некоторых, или даже всех WebRTC интерфейсах, и разработчик может самостоятельно, в ручную, учесть вопросы несовместимости в своем коде. Но есть более простой выход. Организация WebRTC предлагает библиотеку adapter.js для обработки вопросов несовместимостей в различных браузерных реализациях WebRTC. Эта библиотека является JavaScript клином, позволяющим писать код в соответствии со спецификацией, чтобы он работал во всех браузерах с различным уровнем поддержки WebRTC. С ней нет необходимости условно использовать префиксные интерфейсы или реализовывать обходные пути

      +

      Несмотря на то, что WebRTC спецификация относительно стабильна, не все ещё браузеры полностью реализуют её функциональность. Некоторые реализации в браузерах все ещё содержат префиксы производителей в некоторых, или даже всех WebRTC интерфейсах, и разработчик может самостоятельно, в ручную, учесть вопросы несовместимости в своём коде. Но есть более простой выход. Организация WebRTC предлагает библиотеку adapter.js для обработки вопросов несовместимостей в различных браузерных реализациях WebRTC. Эта библиотека является JavaScript клином, позволяющим писать код в соответствии со спецификацией, чтобы он работал во всех браузерах с различным уровнем поддержки WebRTC. С ней нет необходимости условно использовать префиксные интерфейсы или реализовывать обходные пути

      Примечание : Поскольку функциональность и названия API-терминов в WebRTC и поддерживаемых браузерах постоянно изменяются, обычно рекомендуется использовать этот адаптер.

      diff --git a/files/ru/web/api/webrtc_api/index.html b/files/ru/web/api/webrtc_api/index.html index 1c3d082d99..e1563f8e4f 100644 --- a/files/ru/web/api/webrtc_api/index.html +++ b/files/ru/web/api/webrtc_api/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/WebRTC_API

      WebRTC (Web Real-Time Communications) - это технология, которая позволяет Web-приложениям и сайтам захватывать и выборочно передавать аудио и/или видео медиа-потоки, а также обмениваться произвольными данными между браузерами, без обязательного использования посредников. Набор стандартов, которые включает в себя технология WebRTC, позволяет обмениваться данными и проводить пиринговые телеконференции, без необходимости пользователю устанавливать плагины или любое другое стороннее программное обеспечение.

      -

      WebRTC состоит из нескольких взаимосвязанных программных интерфейсов (API) и протоколов, которые работают вместе. Документация, которую вы здесь найдете, поможет вам понять основы WebRTC, как настроить и использовать соединение для передачи данных и медиа-потока, и многое другое.

      +

      WebRTC состоит из нескольких взаимосвязанных программных интерфейсов (API) и протоколов, которые работают вместе. Документация, которую вы здесь найдёте, поможет вам понять основы WebRTC, как настроить и использовать соединение для передачи данных и медиа-потока, и многое другое.

      Совместимость

      @@ -39,7 +39,7 @@ translation_of: Web/API/WebRTC_API
      {{domxref("RTCPeerConnection")}}
      -
      Представляет  WebRTC соединение между локальным компьютером и удаленным узлом. Используется для обработки успешной передачи данных между двумя узлами.
      +
      Представляет  WebRTC соединение между локальным компьютером и удалённым узлом. Используется для обработки успешной передачи данных между двумя узлами.
      {{domxref("RTCSessionDescription")}}
      Представляет параметры сессии. Каждый RTCSessionDescription содержит описания типа, показывающего какую часть (предложение/ответ) процесса переговоров он описывает, и SDP-дескриптор сессии.
      {{domxref("RTCIceCandidate")}}
      @@ -47,7 +47,7 @@ translation_of: Web/API/WebRTC_API
      {{domxref("RTCIceTransport")}}
      Представляет информацию о средстве подключения к Интернету (ICE).
      {{domxref("RTCPeerConnectionIceEvent")}}
      -
      Представляет события, которые происходят в отношении кандидатов ICE, обычно {{domxref ("RTCPeerConnection")}}. Один тип передается данному объекту события: {{event ("icecandidate")}}.
      +
      Представляет события, которые происходят в отношении кандидатов ICE, обычно {{domxref ("RTCPeerConnection")}}. Один тип передаётся данному объекту события: {{event ("icecandidate")}}.
      {{domxref("RTCRtpSender")}}
      Управляет кодированием и передачей данных через объект типа  {{domxref("MediaStreamTrack")}} для объекта типа {{domxref("RTCPeerConnection")}}.
      {{domxref("RTCRtpReceiver")}}
      @@ -59,7 +59,7 @@ translation_of: Web/API/WebRTC_API
      {{domxref("RTCDataChannel")}}
      Представляет двунаправленный канал данных между двумя узлами соединения.
      {{domxref("RTCDataChannelEvent")}}
      -
      Представляет события, которые возникают при присоединении объекта типа  {{domxref("RTCDataChannel")}} к объекту типа {{domxref("RTCPeerConnection")}}. Один тип передается этому событию {{event("datachannel")}}.
      +
      Представляет события, которые возникают при присоединении объекта типа  {{domxref("RTCDataChannel")}} к объекту типа {{domxref("RTCPeerConnection")}}. Один тип передаётся этому событию {{event("datachannel")}}.
      {{domxref("RTCDTMFSender")}}
      Управляет кодированием и передачей  двухтональной мультичастотной  (DTMF) сигнализацией для объекта типа {{domxref("RTCPeerConnection")}}.
      {{domxref("RTCDTMFToneChangeEvent")}}
      @@ -71,9 +71,9 @@ translation_of: Web/API/WebRTC_API
      {{domxref("RTCIdentityProvider")}}
      Активирует возможность браузеру запросить создание или проверку объявления идентификации.
      {{domxref("RTCIdentityAssertion")}}
      -
      Представляет идентификатор удаленного узла текущего соединения. Если узел еще не установлен и подтвержден, ссылка на интерфейс вернет null. После установки не изменяется.
      +
      Представляет идентификатор удалённого узла текущего соединения. Если узел ещё не установлен и подтверждён, ссылка на интерфейс вернёт null. После установки не изменяется.
      {{domxref("RTCIdentityEvent")}}
      -
      Представляет объект события объявление идентификатора провайдером идентификации  (idP). Событие объекта типа  {{domxref("RTCPeerConnection")}}. Один тип передается этому событию {{event("identityresult")}}.
      +
      Представляет объект события объявление идентификатора провайдером идентификации  (idP). Событие объекта типа  {{domxref("RTCPeerConnection")}}. Один тип передаётся этому событию {{event("identityresult")}}.
      {{domxref("RTCIdentityErrorEvent")}}
      Представляет объект события ошибки, связанной с провайдером идентификации (idP). Событие объекта типа  {{domxref("RTCPeerConnection")}}. Два типа ошибки передаются этому событию : {{event("idpassertionerror")}} и {{event("idpvalidationerror")}}.
      @@ -84,11 +84,11 @@ translation_of: Web/API/WebRTC_API
      Обзор архитектуры WebRTC
      Под API, который применяют разработчики, чтобы создавать и использовать WebRTC, расположен набор сетевых протоколов и стандартов соединения. Этот обзор - витрина этих стандартов.
      Жизнь WebRTC-сессии
      -
      WebRTC позволяет вам организовать соединение в режиме узел-узел для передачи произвольных данных, аудио-, видео-потоков или любую их комбинацию в браузере. В этой статье мы взглянем на жизнь WebRTC-сессии, начиная с установки соединения и пройдем весь путь до его завершения, когда оно больше не нужно.
      +
      WebRTC позволяет вам организовать соединение в режиме узел-узел для передачи произвольных данных, аудио-, видео-потоков или любую их комбинацию в браузере. В этой статье мы взглянем на жизнь WebRTC-сессии, начиная с установки соединения и пройдём весь путь до его завершения, когда оно больше не нужно.
      Обзор WebRTC API
      WebRTC состоит из нескольких взаимосвязанных программных интерфейсов (API) и протоколов, которые работают вместе, чтобы обеспечить поддержку обмена данными и медиа-потоками между двумя и более узлами. В этой статье представлен краткий обзор каждого из этих API и какую цель он преследует.
      Основы WebRTC
      -
      Эта статья проведет вас через создание кросс-браузерного RTC-приложения. К концу этой статьи вы должны иметь работающий дата- и медиа-канал, работающий в режиме точка-точка.
      +
      Эта статья проведёт вас через создание кросс-браузерного RTC-приложения. К концу этой статьи вы должны иметь работающий дата- и медиа-канал, работающий в режиме точка-точка.
      Протоколы WebRTC
      В этой статье представлены протоколы, в дополнение к которым создан API WebRTC.
      @@ -113,7 +113,7 @@ translation_of: Web/API/WebRTC_API
      Простой пример канала данных RTCDataChannel
      Интерфейс {{domxref("RTCDataChannel")}}  - это функциональность, которая позволяет открыть канал передачи данных между двумя узлами, по которому можно предавать произвольные данные. Эти API намеренно подобны  WebSocket API, так, что бы в обоих могла использоваться единая модель программирования.
      Сигнализация и двухсторонние видео вызовы
      -
      Например, мы берем чат на веб сокете, который мы создали в другом примере, и добавляем в него способность создавать видео вызовы. Сервер чата расширяется функциональностью обработки WebRTC сигнализации.
      +
      Например, мы берём чат на веб сокете, который мы создали в другом примере, и добавляем в него способность создавать видео вызовы. Сервер чата расширяется функциональностью обработки WebRTC сигнализации.

      Ресурсы

      diff --git a/files/ru/web/api/webrtc_api/session_lifetime/index.html b/files/ru/web/api/webrtc_api/session_lifetime/index.html index 0b052b5475..adf957e2fd 100644 --- a/files/ru/web/api/webrtc_api/session_lifetime/index.html +++ b/files/ru/web/api/webrtc_api/session_lifetime/index.html @@ -7,11 +7,11 @@ translation_of: Web/API/WebRTC_API/Session_lifetime
      -
      WebRTC позволяет браузерным приложениям построить соединение в режиме узел-узел для передачи произвольных данных, аудио-, видео-потоков или любую их комбинацию. В этой статье мы увидим то, как живет WebRTC-сессия, начиная с установки соединения и пройдём через весь путь до его завершения, если соединение больше не нужно.
      +
      WebRTC позволяет браузерным приложениям построить соединение в режиме узел-узел для передачи произвольных данных, аудио-, видео-потоков или любую их комбинацию. В этой статье мы увидим то, как живёт WebRTC-сессия, начиная с установки соединения и пройдём через весь путь до его завершения, если соединение больше не нужно.
      -

      Эта статья не вдается в детали фактически использованных API в установке и обработке WebRTC-соединения. Это просто обзор процесса в целом с некоторой информацией о том, для чего нужен каждый шаг. Смотрите статью Signaling and video calling, чтобы получить пример с пошаговым объяснением того, что делает код.

      +

      Эта статья не вдаётся в детали фактически использованных API в установке и обработке WebRTC-соединения. Это просто обзор процесса в целом с некоторой информацией о том, для чего нужен каждый шаг. Смотрите статью Signaling and video calling, чтобы получить пример с пошаговым объяснением того, что делает код.

      Эта страница находится в стадии разработки, и некоторое из содержания будут перемещаться на другие страницы, как направляющий материал. 

      @@ -21,7 +21,7 @@ translation_of: Web/API/WebRTC_API/Session_lifetime

      Установка соединения

      -

      Интернет большой. Реально большой. Умные люди, несколько лет назад, заметив то, насколько он велик, каким большим он может стать и то как быстро растёт, а также ограничения 32-битной системы адресации протокола IP, и поняли, что нужно начать что-то делать, чтобы создать новую 64-битную систему адресации. Но в какой-то момент они так же пришли к выводу, что переход на новую систему займёт больше времени, чем продержатся 32-разрядные адреса. Затем другие умные люди придумали способ, позволяющий нескольким компьютерам использовать один и тот же 32-итный IP-адрес. Network Address Translation ({{Glossary("NAT")}}) - это стандарт, который поддерживает разделение адреса путем маршрутизации входящих и исходящих пакетов данных в и из локальной сети (LAN), которые разделяют единственный WAN (глобальный) адрес.

      +

      Интернет большой. Реально большой. Умные люди, несколько лет назад, заметив то, насколько он велик, каким большим он может стать и то как быстро растёт, а также ограничения 32-битной системы адресации протокола IP, и поняли, что нужно начать что-то делать, чтобы создать новую 64-битную систему адресации. Но в какой-то момент они так же пришли к выводу, что переход на новую систему займёт больше времени, чем продержатся 32-разрядные адреса. Затем другие умные люди придумали способ, позволяющий нескольким компьютерам использовать один и тот же 32-итный IP-адрес. Network Address Translation ({{Glossary("NAT")}}) - это стандарт, который поддерживает разделение адреса путём маршрутизации входящих и исходящих пакетов данных в и из локальной сети (LAN), которые разделяют единственный WAN (глобальный) адрес.

      Проблемой для пользователя является то, что каждый отдельный компьютер в сети Интернет не обязан иметь уникальный IP-адрес, и по сути, IP-адрес устройства может измениться не только тогда, когда оно перемещается из одной сети в другую, но и если их сетевой адрес был изменён {{Glossary("NAT")}} и/или {{interwiki("wikipedia", "DHCP")}}. Для разработчиков, пытающихся строить одноранговые сети, эта ситуация является хорошей головоломкой: без уникального идентификатора для каждого устройства, нет возможности моментально автоматически выяснить то, как подключиться к конкретному устройству в Интернет.  Если вызнаете, с кем вы хотите поговорить, вам не обязательно знать, какой адрес у вашего собеседника.

      @@ -31,7 +31,7 @@ translation_of: Web/API/WebRTC_API/Session_lifetime

      Процесс Сигнализации

      -

      Сигнализация - это процесс передачи управляющей информации между двумя устройствами для определения протоколов связи, каналов, кодирования и формата медиа-данных,  методов передачи данных, а также информации, необходимой для маршрутизации. Наиболее важная вещь, о которой нужно знать о процессе сигнализации для WebRTC - этот процесс не определен в спецификации.

      +

      Сигнализация - это процесс передачи управляющей информации между двумя устройствами для определения протоколов связи, каналов, кодирования и формата медиа-данных,  методов передачи данных, а также информации, необходимой для маршрутизации. Наиболее важная вещь, о которой нужно знать о процессе сигнализации для WebRTC - этот процесс не определён в спецификации.

      Вы можете задаться вопросом, почему нечто основоположное для процесса установки WebRTC-соединения вынесено из спецификации? Ответ прост: потому как два устройства не могут контактировать друг с другом, и спецификация не может предусмотреть все возможные способы использования WebRTC, также это приобретает ещё больший смысл с точки зрения предоставления разработчику возможности выбора наиболее подходящей сетевой технологии и протоколов передачи сообщений.

      @@ -58,18 +58,18 @@ translation_of: Web/API/WebRTC_API/Session_lifetime

      Существует последовательность действий, которую нужно выполнить, чтобы стало возможным начало WebRTC-сессии:

        -
      1. Каждый узел создает объект {{domxref("RTCPeerConnection")}}, представляющий собой WebRTC-сессию и сохраняющийся до её завершения.
      2. +
      3. Каждый узел создаёт объект {{domxref("RTCPeerConnection")}}, представляющий собой WebRTC-сессию и сохраняющийся до её завершения.
      4. Каждый узел устанавливает обработчик события {{event("icecandidate")}},которая занимается отправкой этих кандидатов в другую сторону по каналу сигнализации.
      5. -
      6. Каждый узел устанавливает обработчик события {{event("addstream")}}, которое срабатывает когда начинает приходить поток данных от удаленного узла. Этот обработчик должен подключить этот поток к потребителю, например к элементу {{HTMLElement("video")}}.
      7. -
      8. Вызывающий узел создает уникальный идентификатор, токен или нечто, что сможет идентифицировать вызов на сигнальном сервере, и обмениваться с принимающим узлом. Форма и содержимое идентификатора остается на усмотрение разработчика.
      9. +
      10. Каждый узел устанавливает обработчик события {{event("addstream")}}, которое срабатывает когда начинает приходить поток данных от удалённого узла. Этот обработчик должен подключить этот поток к потребителю, например к элементу {{HTMLElement("video")}}.
      11. +
      12. Вызывающий узел создаёт уникальный идентификатор, токен или нечто, что сможет идентифицировать вызов на сигнальном сервере, и обмениваться с принимающим узлом. Форма и содержимое идентификатора остаётся на усмотрение разработчика.
      13. Каждый узел подключается к согласованному сигнальному серверу, такому например как известный обоим WebSocket-сервер, для обмена сообщениями.
      14. -
      15. Каждый узел сообщает сигнальному серверу, что хочет подключиться к одной и той же WebRTC-сессии (идентифицируемой токеном, определенным на шаге 4)
      16. +
      17. Каждый узел сообщает сигнальному серверу, что хочет подключиться к одной и той же WebRTC-сессии (идентифицируемой токеном, определённым на шаге 4)
      18. descriptions, candidates, etc. -- more coming up

      Перезапуск сессии ICE агент

      -

      Иногда, во время срока службы WebRTC сессии, сетевые условия изменяются. Один из пользователей, возможно, перейдет от сотовой сети к сети WiFi или сеть может стать перегруженной. Например: когда это произойдет, ICE агент может перезапустить сессию. Это процесс, с помощью которого сетевое соединение перезапустится и восстановится, точно таким же образом выполняется начальная установка сессии, за одним исключением того пока не установится новая сессия. Тогда сессия сменяется и переходит к новому сетевому соединению, а старое соединение закрывается.

      +

      Иногда, во время срока службы WebRTC сессии, сетевые условия изменяются. Один из пользователей, возможно, перейдёт от сотовой сети к сети WiFi или сеть может стать перегруженной. Например: когда это произойдёт, ICE агент может перезапустить сессию. Это процесс, с помощью которого сетевое соединение перезапустится и восстановится, точно таким же образом выполняется начальная установка сессии, за одним исключением того пока не установится новая сессия. Тогда сессия сменяется и переходит к новому сетевому соединению, а старое соединение закрывается.

      Различные браузеры поддерживают перезапуск сессии при разных условиях. Не все браузеры будут выполнять перезапуск сессии из-за перегрузки сети, например:

      @@ -77,7 +77,7 @@ translation_of: Web/API/WebRTC_API/Session_lifetime

      Есть два уровня перезапуска сессии: полная перезагрузка сессии вызывает все мультимедийные потоки в сеансе и должны быть пересмотрены. Частичная перезагрузка сессии позволяет агенту сессии перезапустить конкретный медиапоток вместо того, чтобы перезапускать  все медиаданные. Некоторые браузеры пока не поддерживают частичную перезагрузку сессии, однако. <<< Все зависит от вашего кодерства... >>>

      -

      Если вам необходимо изменить конфигурацию соединения каким-либо образом (например, изменение к другому набору связи), вы можете сделать это перед RTCPeerConnection.setConfiguration()(перед назначением конфигурации) с обновленной RTCConfiguration(конфигурацией) перед повторным запуском движка.

      +

      Если вам необходимо изменить конфигурацию соединения каким-либо образом (например, изменение к другому набору связи), вы можете сделать это перед RTCPeerConnection.setConfiguration()(перед назначением конфигурации) с обновлённой RTCConfiguration(конфигурацией) перед повторным запуском движка.

      Чтобы явно вызвать перезапуск сессии, нужно начать переговорный процесс с помощью вызова RTCPeerConnection.createOffer(), указав параметр iceRestart(перезапуск сессии) со значением истины(true). Затем обработать процесс соединения так, как вы это обычно делаете.

      diff --git a/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html b/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html index 844c8e0d19..73db097039 100644 --- a/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html +++ b/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html @@ -5,9 +5,9 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling ---
      {{WebRTCSidebar}}
      -

      WebRTC позволяет обмениваться медиаданными между двумя устройствами напрямую (peer-to-peer) в режиме реального времени. Соединение устанавливается путем обнаружения и согласования, называемым сигнализацией (signaling). Эта статья объясняет, как сделать двусторонний видеозвонок.

      +

      WebRTC позволяет обмениваться медиаданными между двумя устройствами напрямую (peer-to-peer) в режиме реального времени. Соединение устанавливается путём обнаружения и согласования, называемым сигнализацией (signaling). Эта статья объясняет, как сделать двусторонний видеозвонок.

      -

      WebRTC это технология прямого обмена аудио-, видео- и другими данными в режиме реального времени с одним ключевым условием. Процесс обнаружения и согласования медиаформатов должен происходить так чтобы два устройства, подключенные к разным сетям, могли локализовать друг друга, как обсуждалось здесь. Этот процесс назван сигнализацией и подразумевает, что оба устройства подключаются к третьему, обоюдно согласованному серверу. Через третью сторону устройства определяют адреса друг друга и обмениваются согласующими сообщениями.

      +

      WebRTC это технология прямого обмена аудио-, видео- и другими данными в режиме реального времени с одним ключевым условием. Процесс обнаружения и согласования медиаформатов должен происходить так чтобы два устройства, подключённые к разным сетям, могли локализовать друг друга, как обсуждалось здесь. Этот процесс назван сигнализацией и подразумевает, что оба устройства подключаются к третьему, обоюдно согласованному серверу. Через третью сторону устройства определяют адреса друг друга и обмениваются согласующими сообщениями.

      В этой статье мы будем дорабатывать  WebSocket-чат, созданный для нашей документации к WebSocket, — добавим к нему двусторонний видеозвонок между двумя пользователями. Вы можете использовать этот пример на Glitch или клонировать его, чтобы поэкспериментировать самим. Весь проект можно посмотреть на GitHub.

      @@ -21,13 +21,13 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling

      Во-первых, нужен сам сервер сигнализации. Спецификация WebRTC не определяет, какой транспорт используется для передачи сигнальной информации. Можете использовать какой вам нравится, от WebSocket до {{domxref("XMLHttpRequest")}} и почтовых голубей, чтобы передать сигнальную информацию между пирами.

      -

      Важно, что серверу не нужно понимать или интерпретировать сигнальные данные. Хотя они в формате {{Glossary("SDP")}}, это не имеет особого значения: содержание сообщений, проходящих через сигнальный сервер - по сути, черный ящик. Значение имеет лишь то, что когда подсистема {{Glossary("ICE")}} дает команду передать данные другому пиру, вы просто это делаете, а уже пир знает, как получить эту информацию и доставить ее на свою подсистему ICE. Все что нужно - передавать сообщения туда и обратно. Содержание совершенно не важно для сигнального сервера.

      +

      Важно, что серверу не нужно понимать или интерпретировать сигнальные данные. Хотя они в формате {{Glossary("SDP")}}, это не имеет особого значения: содержание сообщений, проходящих через сигнальный сервер - по сути, чёрный ящик. Значение имеет лишь то, что когда подсистема {{Glossary("ICE")}} даёт команду передать данные другому пиру, вы просто это делаете, а уже пир знает, как получить эту информацию и доставить её на свою подсистему ICE. Все что нужно - передавать сообщения туда и обратно. Содержание совершенно не важно для сигнального сервера.

      Подготовка сервера чата к сигнализации

      -

      Наш сервер чата использует WebSocket API для отправки информации как {{Glossary("JSON")}}  между каждым клиентом и сервером. Сервер поддерживает несколько типов сообщений для нескольких задач : регистрация нового пользователя, установки имен пользователей, отправка сообщений чата.

      +

      Наш сервер чата использует WebSocket API для отправки информации как {{Glossary("JSON")}}  между каждым клиентом и сервером. Сервер поддерживает несколько типов сообщений для нескольких задач : регистрация нового пользователя, установки имён пользователей, отправка сообщений чата.

      -

      Для того, что бы сервер мог поддерживать функциональность сигнализации и согласование соединения, нам нужно обновить код. Нам нужно направлять сообщения одному конкретному пользователю вместо того, чтобы транслировать их всем подключенным пользователям, а также обеспечить передачу и доставку неизвестных типов сообщений, при этом серверу не нужно будет знать, что это такое. Это позволит нам посылать сигнальные сообщения, используя один и тот же сервер, вместо того, чтобы использовать отдельный сервер.

      +

      Для того, что бы сервер мог поддерживать функциональность сигнализации и согласование соединения, нам нужно обновить код. Нам нужно направлять сообщения одному конкретному пользователю вместо того, чтобы транслировать их всем подключённым пользователям, а также обеспечить передачу и доставку неизвестных типов сообщений, при этом серверу не нужно будет знать, что это такое. Это позволит нам посылать сигнальные сообщения, используя один и тот же сервер, вместо того, чтобы использовать отдельный сервер.

      Let's take a look which changes we need to make to the chat server support WebRTC signaling. This is in the file chatserver.js.

      diff --git a/files/ru/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html b/files/ru/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html index 4d02e4d5d4..8ed6944d59 100644 --- a/files/ru/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html +++ b/files/ru/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/WebRTC_API/Simple_RTCDataChannel_sample

      Интерфейс {{domxref("RTCDataChannel")}} является функциональностью  WebRTC API , который позволяет открыть канал между узлами соединения, по которому можно отправлять и получать произвольные данные. Эти  API намеренно сходны с  WebSocket API, для использования единой программной модели.

      -

      В этом примере мы откроем соединение {{domxref ("RTCDataChannel")}}, связывающее два элемента на одной странице. Хотя это явно надуманный сценарий, он полезен для демонстрации последовательности соединения двух узлов. Мы расскажем о механизме выполнения соединения, передачи и получения данных, но оставим немного информации о поиске и подключении к удаленному компьютеру для другого примера.

      +

      В этом примере мы откроем соединение {{domxref ("RTCDataChannel")}}, связывающее два элемента на одной странице. Хотя это явно надуманный сценарий, он полезен для демонстрации последовательности соединения двух узлов. Мы расскажем о механизме выполнения соединения, передачи и получения данных, но оставим немного информации о поиске и подключении к удалённому компьютеру для другого примера.

      Разметка HTML

      diff --git a/files/ru/web/api/webrtc_api/taking_still_photos/index.html b/files/ru/web/api/webrtc_api/taking_still_photos/index.html index a15d916a7e..c690fafe2a 100644 --- a/files/ru/web/api/webrtc_api/taking_still_photos/index.html +++ b/files/ru/web/api/webrtc_api/taking_still_photos/index.html @@ -40,11 +40,11 @@ translation_of: Web/API/WebRTC_API/Taking_still_photos

      Код JavaScript

      -

      Посмотрим на  JavaScript code. Разобьем его на части, для упрощения объяснения.

      +

      Посмотрим на  JavaScript code. Разобьём его на части, для упрощения объяснения.

      Инициализация

      -

      Начнем с обертки всего скрипта в анонимную функцию, во избежании конфликтов глобальных переменных, затем инициализируем различные нужные  переменные.

      +

      Начнём с обёртки всего скрипта в анонимную функцию, во избежании конфликтов глобальных переменных, затем инициализируем различные нужные  переменные.

      (function() {
         var width = 320;    // Этим создадим ширину фотографии
      @@ -106,7 +106,7 @@ translation_of: Web/API/WebRTC_API/Taking_still_photos
       
       

      Здесь мы называем метод  {{domxref("MediaDevices.getUserMedia()")}} , запрашивая медиапоток без аудиопотока (audio : false). Он возвращает промис, на котором мы определяем методы успешного и не успешного выполнений.

      -

      Успешное выполнение промиса передает объект потока( stream ) в качестве параметра функции метода then()., который присваивается свойству srcObject элемента {{HTMLElement("video")}}, направляя поток в него.

      +

      Успешное выполнение промиса передаёт объект потока( stream ) в качестве параметра функции метода then()., который присваивается свойству srcObject элемента {{HTMLElement("video")}}, направляя поток в него.

      Как только поток связан с элементом <video> ,  запускаем его воспроизведение, вызовом метода HTMLMediaElement.play().

      @@ -114,7 +114,7 @@ translation_of: Web/API/WebRTC_API/Taking_still_photos

      Обработка события начала воспроизведения

      -

      После момента вызова метода  HTMLMediaElement.play() на элементе {{HTMLElement("video")}}, возникает промежуток времени до начала воспроизведения видеопотока. Для недопущения блокирования интерфейса пользователя в это промежуток, нужно установить обработчик события {{event("canplay")}} элемента video , который сработает, когда элемент начнет воспроизведение видеопотока. В этот момент все свойства элемента video конфигурируются на основе формата потока.

      +

      После момента вызова метода  HTMLMediaElement.play() на элементе {{HTMLElement("video")}}, возникает промежуток времени до начала воспроизведения видеопотока. Для недопущения блокирования интерфейса пользователя в это промежуток, нужно установить обработчик события {{event("canplay")}} элемента video , который сработает, когда элемент начнёт воспроизведение видеопотока. В этот момент все свойства элемента video конфигурируются на основе формата потока.

          video.addEventListener('canplay', function(ev){
             if (!streaming) {
      @@ -147,7 +147,7 @@ translation_of: Web/API/WebRTC_API/Taking_still_photos
       
       

      Завершение метода  startup() 

      -

      Еще пара строк кода в методе startup():

      +

      Ещё пара строк кода в методе startup():

          clearphoto();
         }
      @@ -167,7 +167,7 @@ translation_of: Web/API/WebRTC_API/Taking_still_photos photo.setAttribute('src', data); }
      -

      Начнем с получения ссылки на скрытый элемент {{HTMLElement ("canvas")}}, который мы используем для рендеринга за пределами экрана. Затем мы устанавливаем свойство fillStyle в  #AAA ( светло-серый) и заполняем весь холст этим цветом, вызывая метод {{domxref("CanvasRenderingContext2D.fillRect()","fillRect()")}}.

      +

      Начнём с получения ссылки на скрытый элемент {{HTMLElement ("canvas")}}, который мы используем для рендеринга за пределами экрана. Затем мы устанавливаем свойство fillStyle в  #AAA ( светло-серый) и заполняем весь холст этим цветом, вызывая метод {{domxref("CanvasRenderingContext2D.fillRect()","fillRect()")}}.

      Наконец, в этой функции мы конвертируем canvas в изображение PNG и вызываем метод {{domxref("Element.setAttribute", "photo.setAttribute()")}} отображая захваченный цветовой фон в элементе изображения (бокса для фотографии).

      @@ -207,9 +207,9 @@ translation_of: Web/API/WebRTC_API/Taking_still_photos

      Вы можете экспериментировать с этими эффектами, используя, например, инструмент разработчика FirefoxYou  редактор стилей; смотрим Редактирование с CSS фильтрами о подробностях выполнения.

      -

      Использование определенных устройств

      +

      Использование определённых устройств

      -

      При необходимости вы можете ограничить набор разрешенных источников видео, определенным устройством или набором устройств. Для этого нужно вызвать метод {{domxref("navigator.mediaDevices.enumerateDevices()")}}. Когда промис разрешиться массивом объектов {{domxref("MediaDeviceInfo")}} , описывающих доступные устройства , выберите те, которым хотите разрешить доступ и укажите соответствующий идентификатор устройства {{domxref("MediaTrackConstraints.deviceId", "deviceId")}} или несколько deviceId в объекте  {{domxref("MediaTrackConstraints")}} , переданном в  {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}.

      +

      При необходимости вы можете ограничить набор разрешённых источников видео, определённым устройством или набором устройств. Для этого нужно вызвать метод {{domxref("navigator.mediaDevices.enumerateDevices()")}}. Когда промис разрешиться массивом объектов {{domxref("MediaDeviceInfo")}} , описывающих доступные устройства , выберите те, которым хотите разрешить доступ и укажите соответствующий идентификатор устройства {{domxref("MediaTrackConstraints.deviceId", "deviceId")}} или несколько deviceId в объекте  {{domxref("MediaTrackConstraints")}} , переданном в  {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}.

      Смотри так же

      diff --git a/files/ru/web/api/webrtc_api/using_data_channels/index.html b/files/ru/web/api/webrtc_api/using_data_channels/index.html index cbb64c54bb..1c2e5b2521 100644 --- a/files/ru/web/api/webrtc_api/using_data_channels/index.html +++ b/files/ru/web/api/webrtc_api/using_data_channels/index.html @@ -16,15 +16,15 @@ translation_of: Web/API/WebRTC_API/Using_data_channels

      Основной транспорт передачи данных, использующийся объектом типа {{domxref("RTCDataChannel")}} может быть создан двумя способами:

        -
      • Позволить WebRTC создать транспорт и сообщить об этом удаленному узлу (вызвав у него событие типа  {{event("datachannel")}} ). Это простой способ, и он подходит для многих случаев, но не достаточно гибок для широких нужд.
      • +
      • Позволить WebRTC создать транспорт и сообщить об этом удалённому узлу (вызвав у него событие типа  {{event("datachannel")}} ). Это простой способ, и он подходит для многих случаев, но не достаточно гибок для широких нужд.
      • Написать свои скрипты по согласованию транспорта данных, и сигнализированию другому узлу о необходимости присоединения к новому каналу данных.
      -

      Разберем оба случая, начиная с первого, как с наиболее распространенного.

      +

      Разберём оба случая, начиная с первого, как с наиболее распространенного.

      Автоматический режим согласования

      -

      Зачастую, разработчик может позволить объекту соединения обработать согласование  {{domxref("RTCDataChannel")}} соединения за него. Для этого нужно вызвать метод {{domxref("RTCPeerConnection.createDataChannel", "createDataChannel()")}} без определения значения свойства {{domxref("RTCDataChannelInit.negotiated", "negotiated")}}, или определить свойство значением false. Это автоматически активирует RTCPeerConnection на обработку согласования соединения за разработчика, вызывая событие создание канала данных у удаленного узла, связывая два узла вместе по сети.

      +

      Зачастую, разработчик может позволить объекту соединения обработать согласование  {{domxref("RTCDataChannel")}} соединения за него. Для этого нужно вызвать метод {{domxref("RTCPeerConnection.createDataChannel", "createDataChannel()")}} без определения значения свойства {{domxref("RTCDataChannelInit.negotiated", "negotiated")}}, или определить свойство значением false. Это автоматически активирует RTCPeerConnection на обработку согласования соединения за разработчика, вызывая событие создание канала данных у удалённого узла, связывая два узла вместе по сети.

      Вызов метода createDataChannel() немедленно возвращает объект типа RTCDataChannel. Подписываясь на событие  {{domxref("RTCDataChannel.open_event", "open")}} , можно будет точно определить когда соединение успешно откроется.

      @@ -39,7 +39,7 @@ dataChannel.addEventListener("open", (event) => {

      Для ручного согласования соединения, сначала необходимо создать новый объект типа {{domxref("RTCDataChannel")}}, используя метод  {{domxref("RTCPeerConnection.createDataChannel", "createDataChannel()")}} объекта {{domxref("RTCPeerConnection")}}, определяя свойство  {{domxref("RTCDataChannelInit.negotiated", "negotiated")}} в значение true. Это сигнализирует объекту соединения не пытаться согласовать соединение автоматически.

      -

      Затем нужно согласовать соединение, используя веб сервер или иные средства коммуникации. Этот процесс должен сигнализировать удаленному узлу, что нужно создать собственный объект типа RTCDataChannel со свойством  negotiated, установленным в значение  true, используя тот же идентификатор канала {{domxref("RTCDataChannel.id", "id")}}. Это свяжет два объекта типа  RTCDataChannel через объект типа RTCPeerConnection.

      +

      Затем нужно согласовать соединение, используя веб сервер или иные средства коммуникации. Этот процесс должен сигнализировать удалённому узлу, что нужно создать собственный объект типа RTCDataChannel со свойством  negotiated, установленным в значение  true, используя тот же идентификатор канала {{domxref("RTCDataChannel.id", "id")}}. Это свяжет два объекта типа  RTCDataChannel через объект типа RTCPeerConnection.

      let dataChannel = pc.createDataChannel("MyApp Channel", {
         negotiated: true
      @@ -51,7 +51,7 @@ dataChannel.addEventListener("open", (event) => {
       
       requestRemoteChannel(dataChannel.id);
      -

      В данном примере канал создается установкой значения свойства negotiated в true, затем вызывается функция  requestRemoteChannel() , запуская согласование соединения для создания удаленного канала с тем же идентификатором как у локального канала. Таким образом создание каналов данных позволяет использовать различные свойства, создавая их декларативно, используя одно и тоже значение идентификатора канала  id.

      +

      В данном примере канал создаётся установкой значения свойства negotiated в true, затем вызывается функция  requestRemoteChannel() , запуская согласование соединения для создания удалённого канала с тем же идентификатором как у локального канала. Таким образом создание каналов данных позволяет использовать различные свойства, создавая их декларативно, используя одно и тоже значение идентификатора канала  id.

      Буферизация

      @@ -63,11 +63,11 @@ requestRemoteChannel(dataChannel.id);

      Ограничения размеров сообщений

      -

      Для любых данных, передаваемых по сети, существуют ограничения по размеру. На фундаментальном уровне отдельные сетевые пакеты не могут быть больше определенного значения (точное число зависит от сети и используемого транспортного уровня).  На уровне приложения, то есть в пределах {{Glossary("user agent", "user agent's")}} реализация WebRTC, в которой работает ваш код, реализует функции поддержки сообщений, размер которых превышает максимальный размер пакета на транспортном уровне сети.

      +

      Для любых данных, передаваемых по сети, существуют ограничения по размеру. На фундаментальном уровне отдельные сетевые пакеты не могут быть больше определённого значения (точное число зависит от сети и используемого транспортного уровня).  На уровне приложения, то есть в пределах {{Glossary("user agent", "user agent's")}} реализация WebRTC, в которой работает ваш код, реализует функции поддержки сообщений, размер которых превышает максимальный размер пакета на транспортном уровне сети.

      -

      Это может усложнить ситуацию, поскольку вы не знаете, каковы ограничения по размеру для различных пользовательских агентов и как они реагируют на отправку или получение сообщения большего размера. Даже когда пользовательские агенты совместно используют одну и ту же базовую библиотеку для обработки данных протокола управления потоком (SCTP), могут существовать различия в зависимости от того, как используется библиотека. Например, и Firefox, и Google Chrome используют библиотеку usrsctp для реализации SCTP, но все еще существуют ситуации, в которых передача данных по RTCDataChannel каналу может завершиться сбоем из-за различий в том, как они вызывают библиотеку и обрабатывают ошибки, которые она возвращает.

      +

      Это может усложнить ситуацию, поскольку вы не знаете, каковы ограничения по размеру для различных пользовательских агентов и как они реагируют на отправку или получение сообщения большего размера. Даже когда пользовательские агенты совместно используют одну и ту же базовую библиотеку для обработки данных протокола управления потоком (SCTP), могут существовать различия в зависимости от того, как используется библиотека. Например, и Firefox, и Google Chrome используют библиотеку usrsctp для реализации SCTP, но все ещё существуют ситуации, в которых передача данных по RTCDataChannel каналу может завершиться сбоем из-за различий в том, как они вызывают библиотеку и обрабатывают ошибки, которые она возвращает.

      -

      Когда два пользователя, использующие Firefox, обмениваются данными по каналу данных, ограничение размера сообщения намного больше, чем когда Firefox и Chrome обмениваются данными, потому что Firefox реализует устаревшую технику для отправки больших сообщений в нескольких сообщениях SCTP, чего нет в Chrome. Вместо этого Chrome увидит серию сообщений, которые он считает завершенными, и доставит их получающему RTCDataChannel каналу в виде нескольких сообщений

      +

      Когда два пользователя, использующие Firefox, обмениваются данными по каналу данных, ограничение размера сообщения намного больше, чем когда Firefox и Chrome обмениваются данными, потому что Firefox реализует устаревшую технику для отправки больших сообщений в нескольких сообщениях SCTP, чего нет в Chrome. Вместо этого Chrome увидит серию сообщений, которые он считает завершёнными, и доставит их получающему RTCDataChannel каналу в виде нескольких сообщений

      Сообщения размером менее 16 КБ могут отправляться без проблем, поскольку все основные пользовательские агенты обрабатывают их одинаково.

      @@ -77,9 +77,9 @@ requestRemoteChannel(dataChannel.id);

      В конечном итоге это стало проблемой. Со временем различные приложения (в том числе внедряющие WebRTC) начали использовать SCTP для передачи больших и больших сообщений. В конце концов стало ясно, что когда сообщения становятся слишком большими, передача большого сообщения может блокировать все другие передачи данных в этом канале данных, включая критические сообщения сигнализации.

      -

      Это станет проблемой, когда браузеры будут должным образом поддерживать текущий стандарт поддержки больших сообщений - флаг конца записи (EOR), который указывает, когда сообщение является последним в серии, которое следует рассматривать как одну полезную нагрузку. Это реализовано в Firefox 57, но еще не реализовано в Chrome (см. Chromium Bug 7774). С поддержкой EOR полезная нагрузка RTCDataChannel может быть намного больше (официально до 256 КБ, но реализация Firefox ограничивает их колоссальным 1 ГБ). Даже при 256 кБ этого достаточно, чтобы вызвать заметные задержки при обработке срочного трафика.

      +

      Это станет проблемой, когда браузеры будут должным образом поддерживать текущий стандарт поддержки больших сообщений - флаг конца записи (EOR), который указывает, когда сообщение является последним в серии, которое следует рассматривать как одну полезную нагрузку. Это реализовано в Firefox 57, но ещё не реализовано в Chrome (см. Chromium Bug 7774). С поддержкой EOR полезная нагрузка RTCDataChannel может быть намного больше (официально до 256 КБ, но реализация Firefox ограничивает их колоссальным 1 ГБ). Даже при 256 кБ этого достаточно, чтобы вызвать заметные задержки при обработке срочного трафика.

      -

      Чтобы решить эту проблему, была разработана новая система планировщиков потоков (обычно называемая «спецификацией данных SCTP»), позволяющая чередовать сообщения, отправленные в разных потоках, включая потоки, используемые для реализации каналов данных WebRTC. Это предложение предложение все еще находится в черновой форме IETF, но после его реализации оно позволит отправлять сообщения практически без ограничений по размеру, поскольку уровень SCTP автоматически чередует лежащие в основе под-сообщения, чтобы обеспечить возможность получения данных каждого канала.

      +

      Чтобы решить эту проблему, была разработана новая система планировщиков потоков (обычно называемая «спецификацией данных SCTP»), позволяющая чередовать сообщения, отправленные в разных потоках, включая потоки, используемые для реализации каналов данных WebRTC. Это предложение предложение все ещё находится в черновой форме IETF, но после его реализации оно позволит отправлять сообщения практически без ограничений по размеру, поскольку уровень SCTP автоматически чередует лежащие в основе под-сообщения, чтобы обеспечить возможность получения данных каждого канала.

      Поддержка Firefox для ndata находится в процессе реализации. Команда Chrome отслеживает реализацию поддержки ndata в Chrome Bug 5696.

      diff --git a/files/ru/web/api/websocket/index.html b/files/ru/web/api/websocket/index.html index 2d53a55c5c..4cc3326a7f 100644 --- a/files/ru/web/api/websocket/index.html +++ b/files/ru/web/api/websocket/index.html @@ -69,7 +69,7 @@ WebSocket WebSocket( bufferedAmount unsigned long - Количество байтов данных, которые были поставлены в очередь, используя вызовы {{ manch("send") }}, но еще не переданные в сеть. Это значение не сбрасывается в ноль, при закрытии соединения; если продолжить вызывать  {{ manch("send") }}, значение будет расти. Только чтение. + Количество байтов данных, которые были поставлены в очередь, используя вызовы {{ manch("send") }}, но ещё не переданные в сеть. Это значение не сбрасывается в ноль, при закрытии соединения; если продолжить вызывать  {{ manch("send") }}, значение будет расти. Только чтение. extensions @@ -178,7 +178,7 @@ WebSocket WebSocket(
      code {{ optional_inline() }}
      -
      Числовое значение, обозначающее статус-код, описывающий почему подключение будет закрыто. Если параметр не указан, значение по умолчанию равно 1000(обозначает "обмен завершен"). Смотрите list of status codes для CloseEvent, чтобы узнать разрешенные значения.
      +
      Числовое значение, обозначающее статус-код, описывающий почему подключение будет закрыто. Если параметр не указан, значение по умолчанию равно 1000(обозначает "обмен завершён"). Смотрите list of status codes для CloseEvent, чтобы узнать разрешённые значения.
      reason {{ optional_inline() }}
      Читаемая человеком строка, объясняющая, почему подключение закрывается. Строка должна быть не длиннее, чем 123 байта UTF-8 текста (не символов). 
      @@ -198,7 +198,7 @@ WebSocket WebSocket(

      send()

      -

      Передает данные на сервер через WebSocket - соединение.

      +

      Передаёт данные на сервер через WebSocket - соединение.

      void send(
         in DOMString data
      @@ -224,7 +224,7 @@ void send(
       
       
      INVALID_STATE_ERR
      -
      Соединение еще не открыто.
      +
      Соединение ещё не открыто.
      SYNTAX_ERR
      Строка data содержит непарные суррогаты
      @@ -252,7 +252,7 @@ void send(

      Пример

      -
      // Создает WebSocket - подключение.
      +
      // Создаёт WebSocket - подключение.
       const socket = new WebSocket('ws://localhost:8080');
       
       // Соединение открыто
      diff --git a/files/ru/web/api/websockets_api/index.html b/files/ru/web/api/websockets_api/index.html
      index 7b0156b5a7..83672bc3d4 100644
      --- a/files/ru/web/api/websockets_api/index.html
      +++ b/files/ru/web/api/websockets_api/index.html
      @@ -10,7 +10,7 @@ tags:
       translation_of: Web/API/WebSockets_API
       original_slug: WebSockets
       ---
      -

      Веб-сокеты это продвинутая технология, позволяющая открыть постоянное двунаправленное сетевое соединение между браузером пользователя и сервером. С помощью его API вы можете отправить сообщение на сервер и получить ответ без выполнения http запроса, причем этот процесс будет событийно-управляемым.

      +

      Веб-сокеты это продвинутая технология, позволяющая открыть постоянное двунаправленное сетевое соединение между браузером пользователя и сервером. С помощью его API вы можете отправить сообщение на сервер и получить ответ без выполнения http запроса, причём этот процесс будет событийно-управляемым.

      diff --git a/files/ru/web/api/websockets_api/writing_websocket_client_applications/index.html b/files/ru/web/api/websockets_api/writing_websocket_client_applications/index.html index d5729bf6a4..7a6e602c2c 100644 --- a/files/ru/web/api/websockets_api/writing_websocket_client_applications/index.html +++ b/files/ru/web/api/websockets_api/writing_websocket_client_applications/index.html @@ -58,7 +58,7 @@ WebSocket WebSocket(

      Примеры

      -

      Этот простой пример создает новый WebSocket, подключаемый к серверу ws://www.example.com/socketserver. В данном примере в конструктор сокета в качестве дополнительного параметра передается пользовательский протокол "protocolOne", хотя эта часть может быть опущена.

      +

      Этот простой пример создаёт новый WebSocket, подключаемый к серверу ws://www.example.com/socketserver. В данном примере в конструктор сокета в качестве дополнительного параметра передаётся пользовательский протокол "protocolOne", хотя эта часть может быть опущена.

      var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");
       
      diff --git a/files/ru/web/api/webvr_api/index.html b/files/ru/web/api/webvr_api/index.html index e53532700d..a1dd13cbc9 100644 --- a/files/ru/web/api/webvr_api/index.html +++ b/files/ru/web/api/webvr_api/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/WebVR_API

      Концепция и использование

      -

      Любые VR-устройства, подключенные к вашему компьютеру, будут возвращены методом {{domxref("Navigator.getVRDisplays()")}}; каждое из которых будет представлено  {{domxref("VRDisplay")}} объектом.

      +

      Любые VR-устройства, подключённые к вашему компьютеру, будут возвращены методом {{domxref("Navigator.getVRDisplays()")}}; каждое из которых будет представлено  {{domxref("VRDisplay")}} объектом.

      Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labelled "Position sensor"

      @@ -60,7 +60,7 @@ translation_of: Web/API/WebVR_API
      {{domxref("VREyeParameters")}}
      Предоставляет доступ ко все информации, необходимой для корректного отображения сцены для каждого заднего глаза, включая информацию о поле зрения.
      {{domxref("VRFieldOfView")}}
      -
      Представляет поле зрения, определенное четырьмя различными значениями степени, описывающими представление из центральной точки.
      +
      Представляет поле зрения, определённое четырьмя различными значениями степени, описывающими представление из центральной точки.
      {{domxref("VRLayerInit")}}
      Представляет слой, который должен быть представлен в {{domxref("VRDisplay")}}.
      {{domxref("VRStageParameters")}}
      @@ -84,7 +84,7 @@ translation_of: Web/API/WebVR_API
      {{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}
      Возвращает массив, содержащий каждый {{domxref("VRDisplay")}} объект, который в настоящее время отображается ({{domxref("VRDisplay.ispresenting")}} является true).
      {{domxref("Navigator.getVRDisplays()")}}
      -
      Возвращает обещание, которое преобразуется в массив {{domxref("VRDisplay")}} объектов,  представляющих любые доступные VR-дисплеи, подключенные к компьютеру.
      +
      Возвращает обещание, которое преобразуется в массив {{domxref("VRDisplay")}} объектов,  представляющих любые доступные VR-дисплеи, подключённые к компьютеру.

      Window события

      @@ -93,7 +93,7 @@ translation_of: Web/API/WebVR_API
      {{domxref("Window.onvrdisplaypresentchange")}}
      Представляет обработчик событий, который будет выполняться, при изменении состояния отображения VR-дисплея — т.е. идёт от отображения до неотображения, или наоборот (когда {{event("vrdisplaypresentchange")}} событие срабатывает).
      {{domxref("Window.onvrdisplayconnect")}}
      -
      Представляет обработчик событий, который будет запускаться, когда к компьютеру подключен совместимый VR-дисплей (когда {{event("vrdisplayconnect")}} событие срабатывает).
      +
      Представляет обработчик событий, который будет запускаться, когда к компьютеру подключён совместимый VR-дисплей (когда {{event("vrdisplayconnect")}} событие срабатывает).
      {{domxref("Window.onvrdisplaydisconnect")}}
      Представляет обработчик событий, который будет запускаться, когда совместимый VR-дисплей был отключён от компьютера (когда {{event("vrdisplaydisconnect")}} событие срабатывает).
      {{domxref("Window.onvrdisplayactivate")}}
      diff --git a/files/ru/web/api/webvr_api/using_the_webvr_api/index.html b/files/ru/web/api/webvr_api/using_the_webvr_api/index.html index 78aed3b7b7..51cdf502b8 100644 --- a/files/ru/web/api/webvr_api/using_the_webvr_api/index.html +++ b/files/ru/web/api/webvr_api/using_the_webvr_api/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/WebVR_API/Using_the_WebVR_API
      • Устройство с поддержкой VR.
          -
        • Самым дешевым вариантом будет использовать мобильное устройство, какое-нибудь крепление (например, Google Cardboard) и подходящий браузер. Ощущения будут не такие яркие, как от специализированного устройства, но зато Вам не понадобится приобретать мощный компьютер или отдельный VR дисплей.
        • +
        • Самым дешёвым вариантом будет использовать мобильное устройство, какое-нибудь крепление (например, Google Cardboard) и подходящий браузер. Ощущения будут не такие яркие, как от специализированного устройства, но зато Вам не понадобится приобретать мощный компьютер или отдельный VR дисплей.
        • Специализированное устройство может быть дорогим, но зато ощущения будут лучше. Наиболее WebVR-совместимые устройства на данный момент: HTC VIVE, The Oculus Rift. Дополнительную информацию о доступных устройствах и их поддержке браузерами можно найти на webvr.info.
      • diff --git a/files/ru/web/api/webvtt_api/index.html b/files/ru/web/api/webvtt_api/index.html index 11db07532a..1927c7927f 100644 --- a/files/ru/web/api/webvtt_api/index.html +++ b/files/ru/web/api/webvtt_api/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/WebVTT_API Никогда не пейте жидкий азот. 00:05.000 --> 00:09.000 -- Это пробьет ваш желудок. +- Это пробьёт ваш желудок. - Вы можете умереть.
      @@ -73,7 +73,7 @@ translation_of: Web/API/WebVTT_API

      Внутренняя структура файла WebVTT

      -

      Давайте вернемся к одному из наших предыдущих примеров и рассмотрим структуру реплик более подробно.

      +

      Давайте вернёмся к одному из наших предыдущих примеров и рассмотрим структуру реплик более подробно.

      WEBVTT
       
      @@ -171,7 +171,7 @@ video::cue(b) {
       
       

      В данном примере фоном видео будет серый градиент, с цветом текста papayawhip. Также, текст, выделенный жирным шрифтом с помощью элемента {{HTMLElement("b")}}, имеет цвет peachpuff.

      -

      Фрагмент HTML, приведенный ниже, отображает видео.

      +

      Фрагмент HTML, приведённый ниже, отображает видео.

      <video controls autoplay src="video.webm">
        <track default src="track.vtt">
      diff --git a/files/ru/web/api/webxr_device_api/index.html b/files/ru/web/api/webxr_device_api/index.html
      index 913ea6fcf9..7a1ce319e1 100644
      --- a/files/ru/web/api/webxr_device_api/index.html
      +++ b/files/ru/web/api/webxr_device_api/index.html
      @@ -95,7 +95,7 @@ translation_of: Web/API/WebXR_Device_API
       
       
      {{domxref("WebGLRenderingContextBase.makeXRCompatibile","WebGLRenderingContextBase.makeXRCompatibile()")}}
      -
      Настраивает контекст WebGL для совместимости с WebXR. Если при создании контекста опция {{domxref("WebGLContextAttributes.xrCompatible", "xrCompatible")}} не была установлена как true, необходимо вызвать метод makeXRCompatible() до использования контекста WebGL для рендеринга WebXR. Возвращает {{jsxref("Promise")}}, выполняющийся, когда контекст был подготовлен, или отклонен, если контекст не может быть настроен для работы с WebXR.
      +
      Настраивает контекст WebGL для совместимости с WebXR. Если при создании контекста опция {{domxref("WebGLContextAttributes.xrCompatible", "xrCompatible")}} не была установлена как true, необходимо вызвать метод makeXRCompatible() до использования контекста WebGL для рендеринга WebXR. Возвращает {{jsxref("Promise")}}, выполняющийся, когда контекст был подготовлен, или отклонён, если контекст не может быть настроен для работы с WebXR.

      Руководства и уроки

      diff --git a/files/ru/web/api/window/beforeunload_event/index.html b/files/ru/web/api/window/beforeunload_event/index.html index 1273c5de18..757ea14c3b 100644 --- a/files/ru/web/api/window/beforeunload_event/index.html +++ b/files/ru/web/api/window/beforeunload_event/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Window/beforeunload_event ---
      {{APIRef}}
      -

      Событие beforeunload запускается, когда окно, документ и его ресурсы вот-вот будут выгружены. Документ все еще виден, и событие в этот момент может быть отменено.

      +

      Событие beforeunload запускается, когда окно, документ и его ресурсы вот-вот будут выгружены. Документ все ещё виден, и событие в этот момент может быть отменено.

      diff --git a/files/ru/web/api/window/close/index.html b/files/ru/web/api/window/close/index.html index 860ba52331..c4b4dc2357 100644 --- a/files/ru/web/api/window/close/index.html +++ b/files/ru/web/api/window/close/index.html @@ -33,7 +33,7 @@ function closeOpenedWindow() {

      Закрытие текущего окна

      -

      В прошлом, если бы вы вызвали функцию close() объекта window, вместо вызова функции close() для созданного окна, браузер закрыл бы текущее окно, создал ли его ваш скрипт или нет. В текущее время этого не произойдет; по причинам безопасности, скриптам больше не разрешено закрывать окна, которые они не открыли. (Firefox 46.0.1: scripts can not close windows, they had not opened)

      +

      В прошлом, если бы вы вызвали функцию close() объекта window, вместо вызова функции close() для созданного окна, браузер закрыл бы текущее окно, создал ли его ваш скрипт или нет. В текущее время этого не произойдёт; по причинам безопасности, скриптам больше не разрешено закрывать окна, которые они не открыли. (Firefox 46.0.1: scripts can not close windows, they had not opened)

      function closeCurrentWindow() {
         window.close();
      diff --git a/files/ru/web/api/window/closed/index.html b/files/ru/web/api/window/closed/index.html
      index fc1cf46867..c5cbbd98df 100644
      --- a/files/ru/web/api/window/closed/index.html
      +++ b/files/ru/web/api/window/closed/index.html
      @@ -39,7 +39,7 @@ if (window.opener && !window.opener.closed) {
       
       

      Обновление ранее открытого всплывающего окна

      -

      В данном примере функция refreshPopupWindow() вызывает метод reload у объекта локации всплывающего окна для обновления его данных. Если всплывающее окно еще не было открыто или пользователь его закрыл, открывает новое окно.

      +

      В данном примере функция refreshPopupWindow() вызывает метод reload у объекта локации всплывающего окна для обновления его данных. Если всплывающее окно ещё не было открыто или пользователь его закрыл, открывает новое окно.

      var popupWindow = null;
       
      diff --git a/files/ru/web/api/window/console/index.html b/files/ru/web/api/window/console/index.html
      index d6fac2ad19..6901458922 100644
      --- a/files/ru/web/api/window/console/index.html
      +++ b/files/ru/web/api/window/console/index.html
      @@ -5,7 +5,7 @@ translation_of: Web/API/Window/console
       ---
       

      {{ APIRef }}

      -

      Свойство window.console дает доступ к интерфейсу {{domxref("Console")}}, предоставляющий методы для вывода информации в консоль браузера. Данные методы предназначены для отладки приложения, и не должны использоваться конечными пользователями.

      +

      Свойство window.console даёт доступ к интерфейсу {{domxref("Console")}}, предоставляющий методы для вывода информации в консоль браузера. Данные методы предназначены для отладки приложения, и не должны использоваться конечными пользователями.

      Синтаксис

      diff --git a/files/ru/web/api/window/crypto/index.html b/files/ru/web/api/window/crypto/index.html index f103f43f97..e70c15e507 100644 --- a/files/ru/web/api/window/crypto/index.html +++ b/files/ru/web/api/window/crypto/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/Window/crypto ---

      {{APIRef}}

      -

      {{domxref("Window.crypto")}} дает доступ к интерфейсу {{domxref("Crypto")}}. Этот интерфейс предоставляет веб-странице доступ к встроенным в браузер возможностям криптографии.

      +

      {{domxref("Window.crypto")}} даёт доступ к интерфейсу {{domxref("Crypto")}}. Этот интерфейс предоставляет веб-странице доступ к встроенным в браузер возможностям криптографии.

      Синтаксис

      diff --git a/files/ru/web/api/window/frameelement/index.html b/files/ru/web/api/window/frameelement/index.html index bd901523fb..9b1900a74e 100644 --- a/files/ru/web/api/window/frameelement/index.html +++ b/files/ru/web/api/window/frameelement/index.html @@ -31,7 +31,7 @@ if (frameEl) {

      Примечания

      -

      Заметьте, что несмотря на свое имя, свойство также работает для документов внутри <object> и других встраиваемых элементов.

      +

      Заметьте, что несмотря на своё имя, свойство также работает для документов внутри <object> и других встраиваемых элементов.

      Спецификация

      diff --git a/files/ru/web/api/window/getcomputedstyle/index.html b/files/ru/web/api/window/getcomputedstyle/index.html index 85080b7fa7..bb728217ab 100644 --- a/files/ru/web/api/window/getcomputedstyle/index.html +++ b/files/ru/web/api/window/getcomputedstyle/index.html @@ -17,11 +17,11 @@ translation_of: Web/API/Window/getComputedStyle
      Строка указывающая на найденный псевдо-элемент. Опускается (или null) для не псевдо-элементов.
      -

      Возвращенный style живой {{domxref("CSSStyleDeclaration")}} объект, который обновляется автоматически когда элемент стилей изменяется.

      +

      Возвращённый style живой {{domxref("CSSStyleDeclaration")}} объект, который обновляется автоматически когда элемент стилей изменяется.

      Выводы

      -

      Метод Window.getComputedStyle() предоставляет все значения CSS свойств элементов после применения текущей таблицы стилей или базового расчета каких-либо значений, которые могут быть.

      +

      Метод Window.getComputedStyle() предоставляет все значения CSS свойств элементов после применения текущей таблицы стилей или базового расчёта каких-либо значений, которые могут быть.

      Пример

      @@ -73,7 +73,7 @@ var style = window.getComputedStyle(elem1, null);

      Описание

      -

      Возвращенный объект - это такой же объект, который возвращается из свойства элемента {{domxref("HTMLElement.style", "style")}}; Так или иначе, эти два объекта имеют разные назначения. Объект который возвращается из getComputedStyle только для чтения и может быть использован для инспектирования стиля элемента (включая описание из <style> элемента или внешней таблицы стилей). Объект element.style следует использовать для установки стилей на специфических элементах.

      +

      Возвращённый объект - это такой же объект, который возвращается из свойства элемента {{domxref("HTMLElement.style", "style")}}; Так или иначе, эти два объекта имеют разные назначения. Объект который возвращается из getComputedStyle только для чтения и может быть использован для инспектирования стиля элемента (включая описание из <style> элемента или внешней таблицы стилей). Объект element.style следует использовать для установки стилей на специфических элементах.

      Первый аргумент должен быть элементом (вставка узлов которые не являются элементами, например #text выдаст ошибку).

      diff --git a/files/ru/web/api/window/getselection/index.html b/files/ru/web/api/window/getselection/index.html index c70c51e40c..e8f6f3fa73 100644 --- a/files/ru/web/api/window/getselection/index.html +++ b/files/ru/web/api/window/getselection/index.html @@ -25,7 +25,7 @@ translation_of: Web/API/Window/getSelection var selObj = window.getSelection(); alert(selObj); var selRange = selObj.getRangeAt(0); - // вернет диапазон Range + // вернёт диапазон Range }

      Заметки

      @@ -34,7 +34,7 @@ translation_of: Web/API/Window/getSelection

      В JavaScript при попытке передать в функцию, принимающую строку (как на пример {{ Domxref("window.alert()") }} или же {{ Domxref("document.write()") }}), функция попробует сделать из любого параметра строку, даже если этот параметр является объектом, функцией со своими методами и свойствами.

      -

      В приведенном выше примере selObj.toString() автоматически задействуется, когда мы передаем в {{domxref("window.alert()")}} переменную selObj как параметр, который должен быть строкой. Однако мы не можем использовать свойства и метода объекта String, как на пример : length, substr. В следствии чего, вам необходимо будет применить вручную метод   toString(), как тут:

      +

      В приведённом выше примере selObj.toString() автоматически задействуется, когда мы передаём в {{domxref("window.alert()")}} переменную selObj как параметр, который должен быть строкой. Однако мы не можем использовать свойства и метода объекта String, как на пример : length, substr. В следствии чего, вам необходимо будет применить вручную метод   toString(), как тут:

      var selectedText = selObj.toString();
      @@ -49,7 +49,7 @@ translation_of: Web/API/Window/getSelection

      Поля ввода HTML (inputs) предоставляют более удобный API для работы с выделенным текстом (смотрите {{domxref("HTMLInputElement.setSelectionRange()")}}).

      -

      На заметку, разница между selection и focus. {{domxref("Document.activeElement")}}  - это то, что вернется элемент, который выделен (focused) .

      +

      На заметку, разница между selection и focus. {{domxref("Document.activeElement")}}  - это то, что вернётся элемент, который выделен (focused) .

      Спецификации

      diff --git a/files/ru/web/api/window/history/index.html b/files/ru/web/api/window/history/index.html index fb679f5282..130637f6d3 100644 --- a/files/ru/web/api/window/history/index.html +++ b/files/ru/web/api/window/history/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Window/history ---

      {{ APIRef }}

      -

      Window.history является свойством только для чтения, ссылающимся на объект {{domxref("History")}}, который предоставляет интерфейс для манипулирования историей сессии браузера (страницы, посещенные в текущей вкладке или фрейме, который был загружен на текущей странице).

      +

      Window.history является свойством только для чтения, ссылающимся на объект {{domxref("History")}}, который предоставляет интерфейс для манипулирования историей сессии браузера (страницы, посещённые в текущей вкладке или фрейме, который был загружен на текущей странице).

      Смотрите Управление историей браузера для примеров и подробностей. В частности, та статья объясняет особенности безопасности методов pushState() и replaceState(), о которых вы должны быть в курсе перед их использованием.

      @@ -22,11 +22,11 @@ history.go(-1); // эквивалент history.back();

      Замечания

      -

      Для последней загруженной страницы вы можете увидеть список предыдущих страниц, которые доступны через объект History, в выпадающем списке к кнопкам "назад" и "вперед".

      +

      Для последней загруженной страницы вы можете увидеть список предыдущих страниц, которые доступны через объект History, в выпадающем списке к кнопкам "назад" и "вперёд".

      По причинам безопасности объект History не позволяет непривилегированному коду получать доступ к URL других страниц, но позволяет осуществлять навигацию по истории сессии.

      -

      Не существует способа очистить историю сессии или выключить навигацию посредствам кнопок "назад"/"вперед" из непривилегированного кода. Наиболее близкое решение использовать метод location.replace(), который заменяет текущий пункт в истории сессии на предоставленный URL.

      +

      Не существует способа очистить историю сессии или выключить навигацию посредствам кнопок "назад"/"вперёд" из непривилегированного кода. Наиболее близкое решение использовать метод location.replace(), который заменяет текущий пункт в истории сессии на предоставленный URL.

      Спецификации

      diff --git a/files/ru/web/api/window/index.html b/files/ru/web/api/window/index.html index 38048b3bfa..ad213b866e 100644 --- a/files/ru/web/api/window/index.html +++ b/files/ru/web/api/window/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/Window

      Объект window представляет собой окно, содержащее DOM документ; свойство document указывает на DOM document, загруженный в данном окне. Окно текущего документа может быть получено с помощью свойства {{Domxref("document.defaultView")}}.

      -

      Данный раздел содержит описание всех методов, свойств и событий, доступных через объект window DOM. Объект window реализует интерфейс Window, который наследуется от интерфейса AbstractView. Некоторые дополнительные глобальные функции, пространства имен объектов, интерфейсы и конструкторы, как правило, не связанные с окном, но доступные в нем, перечислены в JavaScript ссылки и DOM ссылки.

      +

      Данный раздел содержит описание всех методов, свойств и событий, доступных через объект window DOM. Объект window реализует интерфейс Window, который наследуется от интерфейса AbstractView. Некоторые дополнительные глобальные функции, пространства имён объектов, интерфейсы и конструкторы, как правило, не связанные с окном, но доступные в нем, перечислены в JavaScript ссылки и DOM ссылки.

      В браузерах, поддерживающих вкладки, таком как Firefox, каждая вкладка содержит свой собственный объект window (и если вы пишете расширение, окно браузера тоже является отдельным объектом window - см. Работа с окнами в chrome коде). Таким образом, объект window не разделяется между разными вкладками в одном и том же окне. Некоторые методы,  а именно {{Domxref("window.resizeTo")}} и {{Domxref("window.resizeBy")}} применяется для всего окна и не принадлежат объекту window отдельной вкладки. Как правило, если что-то логически нельзя отнести ко вкладке, это относят к окну.

      @@ -27,7 +27,7 @@ translation_of: Web/API/Window
      {{domxref("console","Window.console")}} {{Non-standard_inline}} {{ReadOnlyInline}}
      Возвращает ссылку на объект консоли, обеспечивающего доступ к консоли браузера.
      {{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}
      -
      Возвращает ссылку на элемент содержимого в текущем окне. Устаревший вариант в нижним подчеркиванием более не доступен для Web-содержимого.
      +
      Возвращает ссылку на элемент содержимого в текущем окне. Устаревший вариант в нижним подчёркиванием более не доступен для Web-содержимого.
      {{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}
      Возвращает XUL контроллер объектов для текущего окна chrome.
      {{domxref("Window.crypto")}} {{readOnlyInline}}
      @@ -77,7 +77,7 @@ translation_of: Web/API/Window
      {{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
      Возвращает вертикальные (Y) координаты верхнего левого угла окна просмотра в экранных координатах. Значение возвращается в CSS-пикселях. Смотри mozScreenPixelsPerCSSPixel для конвертирования и адаптирования к экранным пикселям, если необходимо.
      {{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}
      -
      Возвращает количество раз, за которые текущий документ был отрендерен для текущего экрана в этом окне. Может быть использовано для подсчета скорости преобразования.
      +
      Возвращает количество раз, за которые текущий документ был отрендерен для текущего экрана в этом окне. Может быть использовано для подсчёта скорости преобразования.
      {{domxref("Window.name")}}
      Получает/устанавливает имя для окна.
      {{domxref("Window.navigator")}} {{readOnlyInline}}
      @@ -154,7 +154,7 @@ translation_of: Web/API/Window
      {{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}
      Возвращает булевское значение, указывающее является ли текущий контент безопасным (true) или нет (false).
      {{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}
      -
      Возвращает источник глобального объекта, преобразованного в строку. (Это свойство пока еще не существует, поэтому не может быть использовано в браузерах.)
      +
      Возвращает источник глобального объекта, преобразованного в строку. (Это свойство пока ещё не существует, поэтому не может быть использовано в браузерах.)

      Методы

      @@ -169,9 +169,9 @@ translation_of: Web/API/Window
      {{domxref("Window.blur()")}}
      Убирает фокус с окна.
      {{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}
      -
      Позволяет отменить колбэк-функцию прежде чем определить расписание ее вызова с {{domxref("Window.requestIdleCallback")}}.
      +
      Позволяет отменить колбэк-функцию прежде чем определить расписание её вызова с {{domxref("Window.requestIdleCallback")}}.
      {{domxref("Window.captureEvents()")}} {{Deprecated_inline}}
      -
      Регистрирует окно, которое будет перехватывать все события определенного типа.
      +
      Регистрирует окно, которое будет перехватывать все события определённого типа.
      {{domxref("Window.clearImmediate()")}}
      Отменяет повторяющееся исполнение, установленное с помощью setImmediate.
      {{domxref("WindowTimers.clearInterval()")}}
      @@ -195,15 +195,15 @@ translation_of: Web/API/Window
      {{domxref("Window.focus()")}}
      Устанавливает фокус на текущем окне.
      {{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}
      -
      Переходит на один документ вперед в текущей истории окна.
      +
      Переходит на один документ вперёд в текущей истории окна.
      {{domxref("Window.getAttention()")}}
      Заставляет мигать иконку приложения.
      {{domxref("Window.getAttentionWithCycleCount()")}}
      {{todo("NeedsContents")}}
      {{domxref("Window.getComputedStyle()")}}
      -
      Получает подсчитанные стили для определенного элемента. Подсчитанные стили включают подсчитанные значения всех CSS свойств элемента.
      +
      Получает подсчитанные стили для определённого элемента. Подсчитанные стили включают подсчитанные значения всех CSS свойств элемента.
      {{domxref("Window.getDefaulComputedStyle()")}}
      -
      Получает подсчитанные стили по умолчанию для определенного элемента, игнорируя авторские стили.
      +
      Получает подсчитанные стили по умолчанию для определённого элемента, игнорируя авторские стили.
      {{domxref("Window.getSelection()")}}
      Возвращает выбранный объект, представляющий выбранный элемент(ы).
      {{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}
      @@ -215,11 +215,11 @@ translation_of: Web/API/Window
      {{domxref("Window.minimize()")}} (top-level XUL windows only)
      Минимизирует окно.
      {{domxref("Window.moveBy()")}}
      -
      Сдвигает текущее окно на определенное значение.
      +
      Сдвигает текущее окно на определённое значение.
      {{domxref("Window.moveTo()")}}
      -
      Сдвигает окно до определенных координат.
      +
      Сдвигает окно до определённых координат.
      {{domxref("Window.mozRequestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}
      -
      Сообщает браузеру, что анимация находится в прогрессе, требуя, чтобы браузер определил время перерисовки окна для следующего анимационного фрейма. Это вызовет событие  MozBeforePaint, прежде чем произойдет перерисовка .
      +
      Сообщает браузеру, что анимация находится в прогрессе, требуя, чтобы браузер определил время перерисовки окна для следующего анимационного фрейма. Это вызовет событие  MozBeforePaint, прежде чем произойдёт перерисовка .
      {{domxref("Window.open()")}}
      Открывает новое окно.
      {{domxref("Window.openDialog()")}}
      @@ -229,15 +229,15 @@ translation_of: Web/API/Window
      {{domxref("Window.print()")}}
      Открывает Print Dialog для распечатки текущего документа.
      {{domxref("Window.prompt()")}}
      -
      Возвращает текст, введенный пользователем в диалоге подсказки.
      +
      Возвращает текст, введённый пользователем в диалоге подсказки.
      {{domxref("Window.releaseEvents()")}} {{Deprecated_inline}}
      -
      Возвращает окно с захваченных событий определенного типа.
      +
      Возвращает окно с захваченных событий определённого типа.
      {{domxref("element.removeEventListener","Window.removeEventListener()")}}
      Удаляет обработчик события из окна.
      {{domxref("Window.requestIdleCallback()")}}  {{experimental_inline}}
      Позволяет назначить расписание задачи во время периода простоя браузера.
      {{domxref("Window.resizeBy()")}}
      -
      Меняет размер текущего окна на определенное число.
      +
      Меняет размер текущего окна на определённое число.
      {{domxref("Window.resizeTo()")}}
      Динамически меняет размер окна.
      {{domxref("Window.restore()")}}
      @@ -257,7 +257,7 @@ translation_of: Web/API/Window
      {{domxref("Window.setCursor()")}}
      Меняет курсор для текущего окна.
      {{domxref("Window.setImmediate()")}}
      -
      Исполняет функцию после того, как браузер некую тяжелую задачу.
      +
      Исполняет функцию после того, как браузер некую тяжёлую задачу.
      {{domxref("WindowTimers.setInterval()")}}
      Назначает выполнение функции каждые X миллисекунд.
      {{domxref("Window.setResizable")}}
      @@ -276,7 +276,7 @@ translation_of: Web/API/Window

      Методы, реализованные из других мест

      {{domxref("EventTarget.addEventListener()")}}
      -
      Регистрирует обработчики определенного типа событий в окне.
      +
      Регистрирует обработчики определённого типа событий в окне.
      {{domxref("WindowOrWorkerGlobalScope.atob()")}}
      Декодирует строку данных, которая была закодирована, используя кодировку base-64.
      {{domxref("WindowOrWorkerGlobalScope.btoa()")}}
      @@ -361,7 +361,7 @@ translation_of: Web/API/Window
      {{domxref("GlobalEventHandlers.onload")}}
      Свойство обработчика событий для загрузки окна.
      {{domxref("WindowEventHandlers.onmessage")}}
      -
      {{domxref("EventHandler")}}, представляющий собой код, который будет вызван, когда произойдет событие {{event("message")}}.
      +
      {{domxref("EventHandler")}}, представляющий собой код, который будет вызван, когда произойдёт событие {{event("message")}}.
      {{domxref("GlobalEventHandlers.onmousedown")}}
      Свойство обработчика событий для события mousedown в окне.
      {{domxref("GlobalEventHandlers.onmousemove")}}
      @@ -395,11 +395,11 @@ translation_of: Web/API/Window
      {{domxref("GlobalEventHandlers.onscroll")}}
      Свойство обработчика событий для прокрутки окна.
      {{domxref("GlobalEventHandlers.onwheel")}}
      -
      Вызывается, когда было прокручено колесико мыши в любую сторону.
      +
      Вызывается, когда было прокручено колёсико мыши в любую сторону.
      {{domxref("GlobalEventHandlers.onselect")}}
      Свойство обработчика событий для события выбора в окне.
      {{domxref("GlobalEventHandlers.onselectionchange")}}
      -
      {{domxref("EventHandler")}}, представляющий собой код, который будет вызван, когда произойдет событие {{event("selectionchange")}}.
      +
      {{domxref("EventHandler")}}, представляющий собой код, который будет вызван, когда произойдёт событие {{event("selectionchange")}}.
      {{domxref("GlobalEventHandlers.onsubmit")}}
      Свойство обработчика событий для события submits в окне формы.
      {{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}
      @@ -413,7 +413,7 @@ translation_of: Web/API/Window
      {{domxref("Window.onvrdisplaydisconnected")}} {{experimental_inline}}
      Представляет обработчик события, который будет запущен, когда подходящее устройство виртуальной реальности было отсоединено от компьютера (когда запускается событие {{event("vrdisplaydisconnected")}}).
      {{domxref("Window.onvrdisplaypresentchange")}} {{experimental_inline}}
      -
      Представляет обработчик события, который будет запущен, когда изменится состояние устройства виртуальной реальности — т.е. перейдет от  представленного к непредставленному или наоборот (когда будет запущено событие {{event("onvrdisplaypresentchange")}}).
      +
      Представляет обработчик события, который будет запущен, когда изменится состояние устройства виртуальной реальности — т.е. перейдёт от  представленного к непредставленному или наоборот (когда будет запущено событие {{event("onvrdisplaypresentchange")}}).

      Конструкторы

      @@ -422,7 +422,7 @@ translation_of: Web/API/Window
      {{domxref("Window.ConstantSourceNode")}}
      -
      Создает экземпляр {{domxref("ConstantSourceNode")}}
      +
      Создаёт экземпляр {{domxref("ConstantSourceNode")}}
      @@ -431,9 +431,9 @@ translation_of: Web/API/Window
      {{domxref("Window.GeckoActiveXObject")}}
      {{todo("NeedsContents")}}
      {{domxref("Image")}}
      -
      Создает {{domxref("HTMLImageElement")}}.
      +
      Создаёт {{domxref("HTMLImageElement")}}.
      {{domxref("Option")}}
      -
      Создает {{domxref("HTMLOptionElement")}}
      +
      Создаёт {{domxref("HTMLOptionElement")}}
      {{domxref("Window.QueryInterface")}}
      {{todo("NeedsContents")}}
      {{domxref("Window.XMLSerializer")}}
      diff --git a/files/ru/web/api/window/innerheight/index.html b/files/ru/web/api/window/innerheight/index.html index 5207cf8536..a9ab800401 100644 --- a/files/ru/web/api/window/innerheight/index.html +++ b/files/ru/web/api/window/innerheight/index.html @@ -33,7 +33,7 @@ translation_of: Web/API/Window/innerHeight
      var intFrameHeight = window.innerHeight; // or
       
       var intFrameHeight = self.innerHeight;
      -// вернет высоту окна просмотра кадра в наборе кадров
      +// вернёт высоту окна просмотра кадра в наборе кадров
       
       var intFramesetHeight = parent.innerHeight;
       // will return the height of the viewport of the closest frameset
      diff --git a/files/ru/web/api/window/localstorage/index.html b/files/ru/web/api/window/localstorage/index.html
      index d16b779f35..b5143f7ccf 100644
      --- a/files/ru/web/api/window/localstorage/index.html
      +++ b/files/ru/web/api/window/localstorage/index.html
      @@ -17,7 +17,7 @@ translation_of: Web/API/Window/localStorage
       
       

      Свойство localStorage позволяет получить доступ к {{domxref("Storage")}} объекту. localStorage аналогично свойству sessionStorage. Разница только в том, что свойство sessionStorage хранит данные в течение сеанса (до закрытия браузера), в отличие от данных,  находящихся в свойстве localStorage, которые не имеют ограничений по времени хранения и могут быть удалены только с помощью JavaScript.

      -

      Следует отметить, что данные, сохраненные как в localStorage, так и в sessionStorage, являться специфичными для протокола страницы.

      +

      Следует отметить, что данные, сохранённые как в localStorage, так и в sessionStorage, являться специфичными для протокола страницы.

      Ключи и значения всегда строки (так же, как и объекты, целочисленные ключи автоматически будут преобразованы в строки).

      @@ -42,7 +42,7 @@ translation_of: Web/API/Window/localStorage
      localStorage.setItem('myCat', 'Tom');
      -

      Считывать данные из localStorage для определенного ключа, можно следующим образом:

      +

      Считывать данные из localStorage для определённого ключа, можно следующим образом:

      let cat = localStorage.getItem('myCat');
       
      @@ -83,7 +83,7 @@ translation_of: Web/API/Window/localStorage

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

      -

      Все браузеры имеют различный уровень объема для localStorage и sessionStorage. Здесь подробное описание объема хранилищ для разных браузеров.

      +

      Все браузеры имеют различный уровень объёма для localStorage и sessionStorage. Здесь подробное описание объёма хранилищ для разных браузеров.

      Смотрите также

      diff --git a/files/ru/web/api/window/location/index.html b/files/ru/web/api/window/location/index.html index d14951e9d3..26f2f2cd00 100644 --- a/files/ru/web/api/window/location/index.html +++ b/files/ru/web/api/window/location/index.html @@ -29,7 +29,7 @@ location = newLocation;

      Пример №1: Переход на новую страницу

      -

      Каждый раз, когда объекту location присвоено новое значение, документ будет загружен используя URL как если бы был вызван location.assign() с измененным URL. Отметим, что настройки безопасности, подобные CORS, могут препятствовать этому эффекту.

      +

      Каждый раз, когда объекту location присвоено новое значение, документ будет загружен используя URL как если бы был вызван location.assign() с изменённым URL. Отметим, что настройки безопасности, подобные CORS, могут препятствовать этому эффекту.

      location.assign("http://www.mozilla.org"); // или
       location = "http://www.mozilla.org";
      @@ -73,7 +73,7 @@ location = "http://www.mozilla.org";
       // в html: <button onclick="sendData('Some data');">Отправить данные</button>
       
      -

      Текущий URL с добавлением "?Some%20data" отправляется на сервер (если сервером не предпринимается никаких действий, то текущий документ перезагружается за счет изменения строки search).

      +

      Текущий URL с добавлением "?Some%20data" отправляется на сервер (если сервером не предпринимается никаких действий, то текущий документ перезагружается за счёт изменения строки search).

      Пример №6: Использование закладок без изменения свойства hash

      diff --git a/files/ru/web/api/window/mozanimationstarttime/index.html b/files/ru/web/api/window/mozanimationstarttime/index.html index 372a07f62e..52c4ce128c 100644 --- a/files/ru/web/api/window/mozanimationstarttime/index.html +++ b/files/ru/web/api/window/mozanimationstarttime/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Window/mozAnimationStartTime

      Summary

      -

      Возвращает время в миллисекундах с начала эпохи UNIX, начиная с которого анимации, начавшиеся в определенный момент, должны быть сочтены уже начавшимися. Это значение должно быть использовано вместо, например, Date.now(), потому что оно будет тем же самым для анимаций, начавшихся в этом окне в течение этого интервала, позволяя им синхронизироваться между собой.

      +

      Возвращает время в миллисекундах с начала эпохи UNIX, начиная с которого анимации, начавшиеся в определённый момент, должны быть сочтены уже начавшимися. Это значение должно быть использовано вместо, например, Date.now(), потому что оно будет тем же самым для анимаций, начавшихся в этом окне в течение этого интервала, позволяя им синхронизироваться между собой.

      Это также позволяет анимациям JavaScript оставаться синхронизированными с CSS переходами и SMIL анимациями, запущенными в течение того же интервала обновления.

      diff --git a/files/ru/web/api/window/pageyoffset/index.html b/files/ru/web/api/window/pageyoffset/index.html index 2ecd37d8a1..d2267fe9e8 100644 --- a/files/ru/web/api/window/pageyoffset/index.html +++ b/files/ru/web/api/window/pageyoffset/index.html @@ -25,7 +25,7 @@ translation_of: Web/API/Window/pageYOffset

      Значение

      -

      Количество пикселей, на которое документ {{domxref("Document")}} прокручен вертикально в рамках окна {{domxref("Window")}}, выражено числом с плавающей запятой. Оно рассчитывается с субпиксельной точностью и, таким образом, не обязательно будет целым числом. Значение равное 0.0 означает, что вертикальная прокрутка еще не была совершена, и верхний край документа сейчас соответствует верхнему краю области содержимого окна.

      +

      Количество пикселей, на которое документ {{domxref("Document")}} прокручен вертикально в рамках окна {{domxref("Window")}}, выражено числом с плавающей запятой. Оно рассчитывается с субпиксельной точностью и, таким образом, не обязательно будет целым числом. Значение равное 0.0 означает, что вертикальная прокрутка ещё не была совершена, и верхний край документа сейчас соответствует верхнему краю области содержимого окна.

      Т.к. данное свойство соответствует {{domxref("Window.scrollY")}}, обратитесь к его описанию за более детальной информацией о значении и использовании.

      @@ -81,7 +81,7 @@ document.getElementById("frame").contentDocument
      -

      В данном примере создается элемент {{HTMLElement("iframe")}}, и задается его содержимое, затем определенный элемент этого документа прокручивается в область рамки. Как только это произошло, выясняется положение вертикальной прокрутки с помощью значения pageYOffset  у элемента {{domxref("HTMLIFrameElement.contentWindow", "contentWindow")}} в рамке.

      +

      В данном примере создаётся элемент {{HTMLElement("iframe")}}, и задаётся его содержимое, затем определённый элемент этого документа прокручивается в область рамки. Как только это произошло, выясняется положение вертикальной прокрутки с помощью значения pageYOffset  у элемента {{domxref("HTMLIFrameElement.contentWindow", "contentWindow")}} в рамке.

      HTML

      diff --git a/files/ru/web/api/window/popstate_event/index.html b/files/ru/web/api/window/popstate_event/index.html index 65c7ef6a93..c2f07004b4 100644 --- a/files/ru/web/api/window/popstate_event/index.html +++ b/files/ru/web/api/window/popstate_event/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Window/popstate_event ---

      Событие popstate вызывается, когда изменяется активная запись истории. Если изменение записи истории было вызвано методом history.pushState() или history.replaceState(), то состояние события popstate будет содержать state копии входящего в историю объекта

      -

      Обратите внимание,  history.pushState() или history.replaceState() не вызывают событие popstate. Событие popstate будет вызвано при совершении действий в браузере, таких как нажатие кнопок "Вперед" или "Назад" (или при вызове history.back() или history.forward() из JavaScript).

      +

      Обратите внимание,  history.pushState() или history.replaceState() не вызывают событие popstate. Событие popstate будет вызвано при совершении действий в браузере, таких как нажатие кнопок "Вперёд" или "Назад" (или при вызове history.back() или history.forward() из JavaScript).

      Браузеры работают с  событием popstate по разному. Chrome (prior to v34) и Safari всегда вызывают popstate по окончании загрузки страницы, а Firefox не делает этого.

      diff --git a/files/ru/web/api/window/postmessage/index.html b/files/ru/web/api/window/postmessage/index.html index d6db0cff3a..749e388816 100644 --- a/files/ru/web/api/window/postmessage/index.html +++ b/files/ru/web/api/window/postmessage/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Window/postMessage ---
      {{ApiRef("HTML DOM")}}
      -

      Window.postMessage() - этот метод позволяет безопасно отправлять кроссдоменные запросы. Обычно сценариям на разных страницах разрешен доступ друг к другу только если страницы, которые их выполняли, передаются по одному  протоколу (обычно это https), номер порта (443 — по умолчанию для https) и хост (modulo {{domxref("Document.domain")}} установленный страницами на одно и тоже значение). window.postMessage() предоставляет контролируемый механизм, чтобы обойти это ограничение способом, который безопасен при правильном использовании.

      +

      Window.postMessage() - этот метод позволяет безопасно отправлять кроссдоменные запросы. Обычно сценариям на разных страницах разрешён доступ друг к другу только если страницы, которые их выполняли, передаются по одному  протоколу (обычно это https), номер порта (443 — по умолчанию для https) и хост (modulo {{domxref("Document.domain")}} установленный страницами на одно и тоже значение). window.postMessage() предоставляет контролируемый механизм, чтобы обойти это ограничение способом, который безопасен при правильном использовании.

      При вызове метода window.postMessage() он вызывает {{domxref("MessageEvent")}} для отправки в целевом окне, когда завершается любой ожидающий сценарий, который должен быть выполнен (например, оставшиеся обработчики событий, если window.postMessage() вызывается из обработчика событий ранее заданных ожидающих таймаутов). {{domxref("MessageEvent")}} имеет тип  messagedata-свойство которого устанавливает значение первого аргумента в методе window.postMessage(), свойство origin  соответствует адресу основного документа в вызове window.postMessage во время  вызова window.postMessage(), свойство source указывает на окно, из которого window.postMessage() вызвали. (Другие стандартные свойства событий имеют ожидаемые значения)

      @@ -54,7 +54,7 @@ function receiveMessage(event)

      Если вы не ожидаете получения сообщения от других сайтов, не добавляйте обработчики событий message. Это гарантированный способ избежать проблем с безопасностью.

      -

      Если же вы хотите получать сообщения от других сайтов, то всегда необходимо идентифицировать отправителя, используя origin и возможно source свойства. Любой сайт (включая, например, http://evil.example.com) может отправлять сообщения любым другим, и у вас нет гарантии, что неизвестный отправитель не пошлет вредоносные сообщения. Однако даже если отправитель известен, вам все равно необходимо всегда подтверждать синтаксис получаемого сообщения. Иначе, дыра в безопасности сайта, которому вы доверяете, может открыть дыру для межсайтового скриптинга на вашем сайте.

      +

      Если же вы хотите получать сообщения от других сайтов, то всегда необходимо идентифицировать отправителя, используя origin и возможно source свойства. Любой сайт (включая, например, http://evil.example.com) может отправлять сообщения любым другим, и у вас нет гарантии, что неизвестный отправитель не пошлёт вредоносные сообщения. Однако даже если отправитель известен, вам все равно необходимо всегда подтверждать синтаксис получаемого сообщения. Иначе, дыра в безопасности сайта, которому вы доверяете, может открыть дыру для межсайтового скриптинга на вашем сайте.

      Всегда конкретизируйте целевой первоисточник, а не просто *, когда вы используете postMessage для отправки данных другим окнам. Вредоносный сайт может изменить локацию окна без вашего ведома и затем перехватить данные, посылаемые с использованием postMessage.

      diff --git a/files/ru/web/api/window/prompt/index.html b/files/ru/web/api/window/prompt/index.html index 14c240a49a..643ae4685e 100644 --- a/files/ru/web/api/window/prompt/index.html +++ b/files/ru/web/api/window/prompt/index.html @@ -32,7 +32,7 @@ var sign = prompt(); // открывается пустое окошко var sign = window.prompt('Are you feeling lucky'); // открывается окошко с текстом "Are you feeling lucky" var sign = window.prompt('Are you feeling lucky', 'sure'); // открывается окошко с текстом "Are you feeling lucky" и значением по умолчанию "sure"
      -

      Когда пользователь нажимает кнопку OK, функция возвращает текст, введенный в поле. Если пользователь нажимает кнопку OK, без ввода какого-либо текста - возвращается пустая строка. Если пользователь нажимает кнопку Cancel, то функция возвращает null.

      +

      Когда пользователь нажимает кнопку OK, функция возвращает текст, введённый в поле. Если пользователь нажимает кнопку OK, без ввода какого-либо текста - возвращается пустая строка. Если пользователь нажимает кнопку Cancel, то функция возвращает null.

      Вышеописанный prompt будет выглядеть следующим образом (в Chrome на OS X):

      @@ -40,7 +40,7 @@ var sign = window.prompt('Are you feeling lucky', 'sure'); // открывает

      Примечания

      -

      prompt диалог содержит однострочное текстовое поле, кнопку Cancel и кнопку OK, и возвращает (возможно пустой) текст введенный пользователем в текстовое поле.

      +

      prompt диалог содержит однострочное текстовое поле, кнопку Cancel и кнопку OK, и возвращает (возможно пустой) текст введённый пользователем в текстовое поле.

      The following text is shared between this article, DOM:window.confirm and DOM:window.alertДиалоговые окна являются модальными; они блокируют доступ пользователя к остальному интерфейсу программы, пока диалоговое окно не будет закрыто. По этой причине вы не должны злоупотреблять функциями, которые создают диалоговое окно (или модальное окно).

      diff --git a/files/ru/web/api/window/requestanimationframe/index.html b/files/ru/web/api/window/requestanimationframe/index.html index e0a03b8dad..ae4dfb12d5 100644 --- a/files/ru/web/api/window/requestanimationframe/index.html +++ b/files/ru/web/api/window/requestanimationframe/index.html @@ -51,7 +51,7 @@ window.requestAnimationFrame(step);

      Примечание

      -

      В Edge версиях младше 17 и в Internet Explorer не надежно запускать requestAnimationFrame перед циклом рисования.

      +

      В Edge версиях младше 17 и в Internet Explorer не надёжно запускать requestAnimationFrame перед циклом рисования.

      Спецификация

      diff --git a/files/ru/web/api/window/self/index.html b/files/ru/web/api/window/self/index.html index 327e29d143..b564cfc1d4 100644 --- a/files/ru/web/api/window/self/index.html +++ b/files/ru/web/api/window/self/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Window/self ---

      {{ APIRef() }}

      -

      Свойство Window.self доступно только для чтения и возвращает объект window в виде объекта {{domxref("WindowProxy")}}. Для доступа к данному свойству возможно использовать точечную нотацию и объект window (window.self) или переменную self. Преимущество доступа через переменную self заключается в том, что ее можно использовать в окружениях, в которых нет window, например {{domxref("Worker", "Web Workers")}}. Использование self дает возможность обращаться к глобальному объекту не только в окружениях где есть window (в таком случае self эквивалентна window.self), но также в воркерах (в случае воркера self эквивалентна {{domxref("WorkerGlobalScope.self")}}).

      +

      Свойство Window.self доступно только для чтения и возвращает объект window в виде объекта {{domxref("WindowProxy")}}. Для доступа к данному свойству возможно использовать точечную нотацию и объект window (window.self) или переменную self. Преимущество доступа через переменную self заключается в том, что её можно использовать в окружениях, в которых нет window, например {{domxref("Worker", "Web Workers")}}. Использование self даёт возможность обращаться к глобальному объекту не только в окружениях где есть window (в таком случае self эквивалентна window.self), но также в воркерах (в случае воркера self эквивалентна {{domxref("WorkerGlobalScope.self")}}).

      Пример

      diff --git a/files/ru/web/api/window/sessionstorage/index.html b/files/ru/web/api/window/sessionstorage/index.html index 787b2f308d..720db502de 100644 --- a/files/ru/web/api/window/sessionstorage/index.html +++ b/files/ru/web/api/window/sessionstorage/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Window/sessionStorage ---

      {{APIRef()}}

      -

      Свойство sessionStorage позволяет получить доступ к объекту {{domxref("Storage")}} текущей сессии. Свойство sessionStorage очень похоже на свойство {{domxref("Window.localStorage")}}, единственное различие заключается в том, что все данные, сохраненные в localStorage не имеют определенного времени жизни, а данные в sessionStorage очищаются в момент окончания сессии текущий страницы. Сессия страницы остается активной все время пока окно браузера открыто и сохраняется между перезагрузками страниц. Открытие той же страницы в новом окне браузера или новой вкладке приводит к созданию новой сессии страницы, что отличается от поведения session cookies.

      +

      Свойство sessionStorage позволяет получить доступ к объекту {{domxref("Storage")}} текущей сессии. Свойство sessionStorage очень похоже на свойство {{domxref("Window.localStorage")}}, единственное различие заключается в том, что все данные, сохранённые в localStorage не имеют определённого времени жизни, а данные в sessionStorage очищаются в момент окончания сессии текущий страницы. Сессия страницы остаётся активной все время пока окно браузера открыто и сохраняется между перезагрузками страниц. Открытие той же страницы в новом окне браузера или новой вкладке приводит к созданию новой сессии страницы, что отличается от поведения session cookies.

      Синтаксис

      @@ -25,7 +25,7 @@ var data = sessionStorage.getItem('key');
      sessionStorage.setItem('myCat', 'Tom');
      -

      Следующий пример автоматически сохраняет содержимое текстового поля. Если страница случайно будет обновлена значение  текстового поля будет восстановлено. Таким образом ничего из введенного пользователем не потеряется даже в этом случае.

      +

      Следующий пример автоматически сохраняет содержимое текстового поля. Если страница случайно будет обновлена значение  текстового поля будет восстановлено. Таким образом ничего из введённого пользователем не потеряется даже в этом случае.

      // Получаем ссылку на текстовое поле,
       // изменение которого будем отслеживать.
      diff --git a/files/ru/web/api/window/unhandledrejection_event/index.html b/files/ru/web/api/window/unhandledrejection_event/index.html
      index c32838dc9c..cd1996b7b2 100644
      --- a/files/ru/web/api/window/unhandledrejection_event/index.html
      +++ b/files/ru/web/api/window/unhandledrejection_event/index.html
      @@ -4,7 +4,7 @@ slug: Web/API/Window/unhandledrejection_event
       translation_of: Web/API/Window/unhandledrejection_event
       original_slug: Web/Events/unhandledrejection
       ---
      -

      Событие unhandledrejection происходит, когда {{jsxref("Promise")}} завершен с ошибкой, но на данную ошибку не установлен обработчик.

      +

      Событие unhandledrejection происходит, когда {{jsxref("Promise")}} завершён с ошибкой, но на данную ошибку не установлен обработчик.

      @@ -37,7 +37,7 @@ original_slug: Web/Events/unhandledrejection

      Inheritance

      -

      Событие unhandledrejection реализует {{domxref("PromiseRejectionEvent")}} интерфейс, который наследуется от {{domxref("Event")}}. Вы можете использовать свойства и методы, определенные в данных интерфейсах.

      +

      Событие unhandledrejection реализует {{domxref("PromiseRejectionEvent")}} интерфейс, который наследуется от {{domxref("Event")}}. Вы можете использовать свойства и методы, определённые в данных интерфейсах.

      {{InheritanceDiagram('','','', 'PromiseRejectionEvent')}}

      diff --git a/files/ru/web/api/windoweventhandlers/onpopstate/index.html b/files/ru/web/api/windoweventhandlers/onpopstate/index.html index 62d82bd693..049f842c4f 100644 --- a/files/ru/web/api/windoweventhandlers/onpopstate/index.html +++ b/files/ru/web/api/windoweventhandlers/onpopstate/index.html @@ -38,7 +38,7 @@ history.back(); // alerts "location: http://example.com/example.html, state: nul history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3} -

      Обратите внимание, что даже несмотря на то, что первоначальная запись истории (для http://example.com/example.html) не имеет объекта события, связанного с ней, событие popstate все равно произойдет, когда мы активируем эту запись после второго вызова history.back().

      +

      Обратите внимание, что даже несмотря на то, что первоначальная запись истории (для http://example.com/example.html) не имеет объекта события, связанного с ней, событие popstate все равно произойдёт, когда мы активируем эту запись после второго вызова history.back().

      Спецификация

      diff --git a/files/ru/web/api/windoworworkerglobalscope/atob/index.html b/files/ru/web/api/windoworworkerglobalscope/atob/index.html index 28d58a52f1..b158668263 100644 --- a/files/ru/web/api/windoworworkerglobalscope/atob/index.html +++ b/files/ru/web/api/windoworworkerglobalscope/atob/index.html @@ -117,7 +117,7 @@ var decodedData = window.atob(encodedData); // декодирует строку

      [2] Начиная с Firefox 27, atob() игнорирует все символы пробелов в аргументе, чтобы соответствовать последним  HTML5 спецификациям (смотри {{bug(711180)}}).

      -

      [3] atob() теперь определен в  миксине {{domxref("WindowOrWorkerGlobalScope")}}.

      +

      [3] atob() теперь определён в  миксине {{domxref("WindowOrWorkerGlobalScope")}}.

      Смотри также

      diff --git a/files/ru/web/api/windoworworkerglobalscope/btoa/index.html b/files/ru/web/api/windoworworkerglobalscope/btoa/index.html index fdb51cfb15..3ccd17db68 100644 --- a/files/ru/web/api/windoworworkerglobalscope/btoa/index.html +++ b/files/ru/web/api/windoworworkerglobalscope/btoa/index.html @@ -6,7 +6,7 @@ original_slug: Web/API/WindowBase64/btoa ---
      {{APIRef("HTML DOM")}}
      -

      Создает ASCII строку закодированную в base-64 из "строки" бинарных данных.

      +

      Создаёт ASCII строку закодированную в base-64 из "строки" бинарных данных.

      Будьте внимательней этот способ не подходит для Unicode строк! Описание работы с Unicode в секции ниже.

      diff --git a/files/ru/web/api/windoworworkerglobalscope/cleartimeout/index.html b/files/ru/web/api/windoworworkerglobalscope/cleartimeout/index.html index 8d398013ce..aeedb7435c 100644 --- a/files/ru/web/api/windoworworkerglobalscope/cleartimeout/index.html +++ b/files/ru/web/api/windoworworkerglobalscope/cleartimeout/index.html @@ -17,14 +17,14 @@ translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout
      timeoutID
      -
      Идентификатор таймаута, который вы хотите отменить. Этот идентификатор был возвращен соответствующим вызовом setTimeout().
      +
      Идентификатор таймаута, который вы хотите отменить. Этот идентификатор был возвращён соответствующим вызовом setTimeout().

      It's worth noting that the pool of IDs used by {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} and {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} are shared, which means you can technically use clearTimeout() and {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} interchangeably. However, for clarity, you should avoid doing so.

      Пример использования:

      -

      Запустите приведенный ниже скрипт в контакте веб-страницы и кликните один раз. Вы увидите всплывающее сообщение через 1 секунду. Если вы щелкните страницу несколько раз за одну секунду, предупреждение появится только один раз.

      +

      Запустите приведённый ниже скрипт в контакте веб-страницы и кликните один раз. Вы увидите всплывающее сообщение через 1 секунду. Если вы щёлкните страницу несколько раз за одну секунду, предупреждение появится только один раз.

      var alarm = {
         remind: function(aMessage) {
      @@ -51,7 +51,7 @@ window.onclick = function() { alarm.setup(); };
       
       

      Примечания

      -

      Передача недействительного ID clearTimeout() ни к чему не приведет. Исключение не создается.

      +

      Передача недействительного ID clearTimeout() ни к чему не приведёт. Исключение не создается.

      Спецификация

      diff --git a/files/ru/web/api/windoworworkerglobalscope/fetch/index.html b/files/ru/web/api/windoworworkerglobalscope/fetch/index.html index d95c0b77ec..cffef51d3e 100644 --- a/files/ru/web/api/windoworworkerglobalscope/fetch/index.html +++ b/files/ru/web/api/windoworworkerglobalscope/fetch/index.html @@ -70,7 +70,7 @@ translation_of: Web/API/WindowOrWorkerGlobalScope/fetch
      - + @@ -81,7 +81,7 @@ translation_of: Web/API/WindowOrWorkerGlobalScope/fetch

      Пример

      -

      В нашем Fetch Request примере (см. Fetch Request live) мы создаем новый объект {{domxref("Request")}} (запроса), используя релевантный конструктор, а затем получаем его вызовом fetch(). Так как запрашиваемый ресурс - изображение, для того, чтобы присвоить ему подходящий MIME тип и обработать должным образом, мы применяем к ответу метод {{domxref("Body.blob()")}}, после чего создаем для него Object URL и передаем ее в элемент {{htmlelement("img")}}.

      +

      В нашем Fetch Request примере (см. Fetch Request live) мы создаём новый объект {{domxref("Request")}} (запроса), используя релевантный конструктор, а затем получаем его вызовом fetch(). Так как запрашиваемый ресурс - изображение, для того, чтобы присвоить ему подходящий MIME тип и обработать должным образом, мы применяем к ответу метод {{domxref("Body.blob()")}}, после чего создаём для него Object URL и передаём её в элемент {{htmlelement("img")}}.

      var myImage = document.querySelector('img');
       
      @@ -94,7 +94,7 @@ fetch(myRequest).then(function(response) {
         myImage.src = objectURL;
       });
      -

      В нашем Fetch with init then Request примере (см. Fetch Request init live) мы делаем тоже самое, за исключением того, что передаем в качестве аргумента для fetch() объект init:

      +

      В нашем Fetch with init then Request примере (см. Fetch Request init live) мы делаем тоже самое, за исключением того, что передаём в качестве аргумента для fetch() объект init:

      var myImage = document.querySelector('img');
       
      diff --git a/files/ru/web/api/windoworworkerglobalscope/index.html b/files/ru/web/api/windoworworkerglobalscope/index.html
      index 8f38321cb1..0a7bacf45b 100644
      --- a/files/ru/web/api/windoworworkerglobalscope/index.html
      +++ b/files/ru/web/api/windoworworkerglobalscope/index.html
      @@ -47,7 +47,7 @@ translation_of: Web/API/WindowOrWorkerGlobalScope
        
      {{domxref("WindowOrWorkerGlobalScope.atob()")}}
      Декодирует строку данных, которая была закодирована с использованием кодировки base-64.
      {{domxref("WindowOrWorkerGlobalScope.btoa()")}}
      -
      Создает ASCII строку в кодировке base-64 из строки бинарных данных.
      +
      Создаёт ASCII строку в кодировке base-64 из строки бинарных данных.
      {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}
      Отменяет набор для повторного выполнения, используя {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.
      {{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}
      diff --git a/files/ru/web/api/windoworworkerglobalscope/setinterval/index.html b/files/ru/web/api/windoworworkerglobalscope/setinterval/index.html index aa4ba76d3a..c77c422bf1 100644 --- a/files/ru/web/api/windoworworkerglobalscope/setinterval/index.html +++ b/files/ru/web/api/windoworworkerglobalscope/setinterval/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval ---
      {{APIRef("HTML DOM")}}
      -

      Метод setInterval() предложен для {{domxref("Window")}} и {{domxref("Worker")}} интерфейсов. Он циклически вызывает функцию или участок кода с фиксированной паузой между каждым вызовом. Уникальный идентификатор intervalID, возвращаемый методом, позволяет впоследствии удалить запущенный setInterval c помощью {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}}. Метод определен с помощью миксина {{domxref("WindowOrWorkerGlobalScope")}}.

      +

      Метод setInterval() предложен для {{domxref("Window")}} и {{domxref("Worker")}} интерфейсов. Он циклически вызывает функцию или участок кода с фиксированной паузой между каждым вызовом. Уникальный идентификатор intervalID, возвращаемый методом, позволяет впоследствии удалить запущенный setInterval c помощью {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}}. Метод определён с помощью миксина {{domxref("WindowOrWorkerGlobalScope")}}.

      Синтаксис

      diff --git a/files/ru/web/api/windoworworkerglobalscope/settimeout/index.html b/files/ru/web/api/windoworworkerglobalscope/settimeout/index.html index 8c115986b0..cd1851db1e 100644 --- a/files/ru/web/api/windoworworkerglobalscope/settimeout/index.html +++ b/files/ru/web/api/windoworworkerglobalscope/settimeout/index.html @@ -31,7 +31,7 @@ original_slug: Web/API/WindowTimers/setTimeout

      Пример

      -

      В следующем примере на веб странице создаются две простые кнопки, к которым привязываются действия setTimeout и clearTimeout. Нажатие на первую кнопку установит таймаут, который вызовет диалоговое окно через две секунды. Также будет сохранен id для clearTimeout. Таймаут также может быть отменен по нажатию на вторую кнопку.

      +

      В следующем примере на веб странице создаются две простые кнопки, к которым привязываются действия setTimeout и clearTimeout. Нажатие на первую кнопку установит таймаут, который вызовет диалоговое окно через две секунды. Также будет сохранён id для clearTimeout. Таймаут также может быть отменён по нажатию на вторую кнопку.

      HTML Content

      @@ -143,7 +143,7 @@ var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}

      Проблема с "this"

      -

      Когда вы передаете метод в setTimeout() (или в любую другую функцию, если на то пошло), то вызов будет осуществлен с неправильным значением this. Эта проблема разъясняется детально в JavaScript reference.

      +

      Когда вы передаёте метод в setTimeout() (или в любую другую функцию, если на то пошло), то вызов будет осуществлён с неправильным значением this. Эта проблема разъясняется детально в JavaScript reference.

      Объяснение

      diff --git a/files/ru/web/api/worker/onmessage/index.html b/files/ru/web/api/worker/onmessage/index.html index 86db26c45f..c51c30e041 100644 --- a/files/ru/web/api/worker/onmessage/index.html +++ b/files/ru/web/api/worker/onmessage/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Worker/onmessage ---

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

      -

      Свойство onmessage  интерфейса {{domxref("Worker")}} представляет собой обработчик {{domxref("EventHandler")}}, который будет вызван когда произойдет событие {{event("message")}}. Тип этого события {{domxref("MessageEvent")}} и оно будет вызвано когда worker-объект получит сообщение из выполняемого им кода (т.е из метода {{domxref("DedicatedWorkerGlobalScope.postMessage")}} .

      +

      Свойство onmessage  интерфейса {{domxref("Worker")}} представляет собой обработчик {{domxref("EventHandler")}}, который будет вызван когда произойдёт событие {{event("message")}}. Тип этого события {{domxref("MessageEvent")}} и оно будет вызвано когда worker-объект получит сообщение из выполняемого им кода (т.е из метода {{domxref("DedicatedWorkerGlobalScope.postMessage")}} .

      Примечание: Данные события доступны в свойстве data события {{event("message")}}.

      diff --git a/files/ru/web/api/worker/postmessage/index.html b/files/ru/web/api/worker/postmessage/index.html index 47ea7ce99f..6523a0cb64 100644 --- a/files/ru/web/api/worker/postmessage/index.html +++ b/files/ru/web/api/worker/postmessage/index.html @@ -27,7 +27,7 @@ translation_of: Web/API/Worker/postMessage
      message
      Object передаваемый в worker. Будет содержаться в поле data описания события обработчика {{domxref("DedicatedWorkerGlobalScope.onmessage")}}. Это может быть любое значение или объект JavaScript, которые может обработать алгоритм структурированного клонирования, поддерживающий циклические ссылки.
      transfer {{optional_inline}}
      -
      Необязательный array с передаваемыми ({{domxref("Transferable")}}) объектами (из тех, что были указаны в message) на которые передаются права собственности. Если право на объект передается, он становится непригодным (neutered) в контексте, из которого был отправлен, и становится доступным только в worker, которому он был отправлен.
      +
      Необязательный array с передаваемыми ({{domxref("Transferable")}}) объектами (из тех, что были указаны в message) на которые передаются права собственности. Если право на объект передаётся, он становится непригодным (neutered) в контексте, из которого был отправлен, и становится доступным только в worker, которому он был отправлен.
      Переданные (transferable) объекты могут быть экземплярами классов {{domxref("ArrayBuffer")}}, {{domxref("MessagePort")}} или {{domxref("ImageBitmap")}}. null не является допустимым значением для передачи прав.
      @@ -60,7 +60,7 @@ second.onchange = function() {

      Пример с Transfer

      -

      В этом примере показано дополнение Firefox, которое передает ArrayBuffer из основного потока в ChromeWorker, а затем ChromeWorker передает его обратно в основной поток.

      +

      В этом примере показано дополнение Firefox, которое передаёт ArrayBuffer из основного потока в ChromeWorker, а затем ChromeWorker передаёт его обратно в основной поток.

      Код основного потока:

      @@ -86,7 +86,7 @@ console.info('arrBuf.byteLength, ДО передачи:', arrBuf.byteLength); myWorker.postMessage(     {         aTopic: 'do_sendWorkerArrBuff', -        aBuf: arrBuf // буфер который передается 3 строками ниже +        aBuf: arrBuf // буфер который передаётся 3 строками ниже     },     [         arrBuf // буфер созданный на строке 9 @@ -150,7 +150,7 @@ arrBuf.byteLength, ПОСЛЕ передачи: 0 boo

      Совместимость с браузерами

      - +

      {{Compat("api.Worker.postMessage")}}

      diff --git a/files/ru/web/api/worker/terminate/index.html b/files/ru/web/api/worker/terminate/index.html index 68c93a7b08..21682c32ce 100644 --- a/files/ru/web/api/worker/terminate/index.html +++ b/files/ru/web/api/worker/terminate/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Worker/terminate ---

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

      -

      Метод terminate() интерфейса {{domxref("Worker")}} немедленно завершает работу worker. Работнику не дается возможность завершить свою работу, он останавливается сразу.

      +

      Метод terminate() интерфейса {{domxref("Worker")}} немедленно завершает работу worker. Работнику не даётся возможность завершить свою работу, он останавливается сразу.

      Синтаксис

      @@ -55,7 +55,7 @@ myWorker.terminate();

      Совместимость с браузерами

      - +

      {{Compat("api.Worker.terminate")}}

      diff --git a/files/ru/web/api/worker/worker/index.html b/files/ru/web/api/worker/worker/index.html index 625841b703..0c7a6fcbe2 100644 --- a/files/ru/web/api/worker/worker/index.html +++ b/files/ru/web/api/worker/worker/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Worker/Worker ---

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

      -

      Конструктор Worker() создает объект {{domxref ("Worker")}}, который выполняет скрипт по указанному URL-адресу. Этот скрипт должен подчиняться политике одного источника (same-origin policy).

      +

      Конструктор Worker() создаёт объект {{domxref ("Worker")}}, который выполняет скрипт по указанному URL-адресу. Этот скрипт должен подчиняться политике одного источника (same-origin policy).

      Если URL имеет недопустимый синтаксис или нарушена политика одного источника, то будет вызвано {{domxref("DOMException")}} типа SECURITY_ERR.

      diff --git a/files/ru/web/api/workerglobalscope/importscripts/index.html b/files/ru/web/api/workerglobalscope/importscripts/index.html index ef51b14243..bb59c304c6 100644 --- a/files/ru/web/api/workerglobalscope/importscripts/index.html +++ b/files/ru/web/api/workerglobalscope/importscripts/index.html @@ -14,7 +14,7 @@ self.importScripts('foo.js', 'bar.js', ...);

      Параметры

      -

      Разделенный запятыми объект {{domxref("DOMString")}} скриптов, которые должны быть импортированы. Пути к скриптам указываются относительно URL HTML документа.

      +

      Разделённый запятыми объект {{domxref("DOMString")}} скриптов, которые должны быть импортированы. Пути к скриптам указываются относительно URL HTML документа.

      Возвращаемое значение

      @@ -39,7 +39,7 @@ self.importScripts('foo.js', 'bar.js', ...);

      Пример

      -

      Если вы хотите использовать некоторую функциональность, определенную файлом foo.js, необходимо сделать следующее:

      +

      Если вы хотите использовать некоторую функциональность, определённую файлом foo.js, необходимо сделать следующее:

      importScripts('foo.js');
      diff --git a/files/ru/web/api/xmlhttprequest/index.html b/files/ru/web/api/xmlhttprequest/index.html index 8ad7841fec..ad4b1b2090 100644 --- a/files/ru/web/api/xmlhttprequest/index.html +++ b/files/ru/web/api/xmlhttprequest/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/XMLHttpRequest

      XMLHttpRequest это API, который предоставляет клиенту функциональность для обмена данными между клиентом и сервером. Данный API предоставляет простой способ получения данных по ссылке без перезагрузки страницы. Это позволяет обновлять только часть веб-страницы не прерывая пользователя.  XMLHttpRequest используется в AJAX запросах и особенно в single-page приложениях.

      -

      XMLHttpRequest изначально был разработан Microsoft и позже заимствован Mozilla, Apple, и Google. Сейчас он стандартизирован WHATWG. Несмотря на свое название, XMLHttpRequest может быть использован для получения любых типов данных, не только XML, и поддерживает протоколы помимо HTTP (включая file и ftp).

      +

      XMLHttpRequest изначально был разработан Microsoft и позже заимствован Mozilla, Apple, и Google. Сейчас он стандартизирован WHATWG. Несмотря на своё название, XMLHttpRequest может быть использован для получения любых типов данных, не только XML, и поддерживает протоколы помимо HTTP (включая file и ftp).

      Чтобы начать работать с XMLHttpRequest, выполните этот код:

      @@ -92,7 +92,7 @@ translation_of: Web/API/XMLHttpRequest @@ -113,7 +113,7 @@ translation_of: Web/API/XMLHttpRequest - + @@ -143,13 +143,13 @@ translation_of: Web/API/XMLHttpRequest - + @@ -181,7 +181,7 @@ translation_of: Web/API/XMLHttpRequest - + @@ -240,7 +240,7 @@ translation_of: Web/API/XMLHttpRequest @@ -339,9 +339,9 @@ translation_of: Web/API/XMLHttpRequest

      XMLHttpRequest()

      -

      Конструктор создает объект XMLHttpRequest. Он должен быть вызван перед обращением к любому методу класса.

      +

      Конструктор создаёт объект XMLHttpRequest. Он должен быть вызван перед обращением к любому методу класса.

      -

      Gecko/Firefox 16 добавляет нестандартные параметры в конструктор, для лучшего взаимодействия с режимом инкогнито, (смотри Bug 692677). Установка флага mozAnon в значение true создает сущность AnonXMLHttpRequest() описанную в XMLHttpRequest спецификации, но не реализованную не в одном из браузеров (информация сентября 2012).

      +

      Gecko/Firefox 16 добавляет нестандартные параметры в конструктор, для лучшего взаимодействия с режимом инкогнито, (смотри Bug 692677). Установка флага mozAnon в значение true создаёт сущность AnonXMLHttpRequest() описанную в XMLHttpRequest спецификации, но не реализованную не в одном из браузеров (информация сентября 2012).

      XMLHttpRequest (
         JSObject objParameters
      @@ -354,7 +354,7 @@ translation_of: Web/API/XMLHttpRequest
        
      Вы можете использовать два флага:
      mozAnon
      -
      Boolean: Использование этого флага уберет из запроса заголовки origin, и user credentials. Кроме этого, куки не будут отправлены в запросе, если только они не будут добавлены к запросу специально, через метод setRequestHeader.
      +
      Boolean: Использование этого флага уберёт из запроса заголовки origin, и user credentials. Кроме этого, куки не будут отправлены в запросе, если только они не будут добавлены к запросу специально, через метод setRequestHeader.
      mozSystem
      Boolean: Если выставить этот флаг в значение true то это позволит делать cross-доменные запросы без необходимости получения специальных заголовков со стороны сервера (CORS). Для использования этого флага необходимо использовать дополнительный флаг mozAnon: true, поскольку для отправки запроса на другой домен, нельзя использовать куки и креды пользователя. Этот флаг работает только с привилегированными (одобренными) приложениями; он не сработает с произвольно загруженными страницами.
      @@ -380,7 +380,7 @@ translation_of: Web/API/XMLHttpRequest

      Возвращает значение указанного заголовка из полученного ответа, или null в случает если ответ не получен, или такого заголовка в ответе нет. Возвращаемая строка имеет кодировку UTF.

      -

      Примечание: Если в ответе есть заголовки с одни названием, то значения этих заголовков будут объеденены в одну строку, разделенную запятой и пробелом.

      +

      Примечание: Если в ответе есть заголовки с одни названием, то значения этих заголовков будут объеденены в одну строку, разделённую запятой и пробелом.

      open()

      @@ -406,7 +406,7 @@ translation_of: Web/API/XMLHttpRequest
      url
      URL адрес, на который будет отправлено сообщение.
      async
      -
      Необязательный boolean параметр, по умолчанию равный true. Определяет, будет ли запрос отправлен асинхронно. Если значение равно false, метод send() вернет ответ в общем потоке работы приложения (иначе говоря, приложение зависнет на некоторое время), в противном случае, ответ может быть получен только при помощи определенных  обработчиков событий. В случае, если используется отправка multipart запроса, то этот атрибут должен быть true, или будет выброшено исключение. +
      Необязательный boolean параметр, по умолчанию равный true. Определяет, будет ли запрос отправлен асинхронно. Если значение равно false, метод send() вернёт ответ в общем потоке работы приложения (иначе говоря, приложение зависнет на некоторое время), в противном случае, ответ может быть получен только при помощи определённых  обработчиков событий. В случае, если используется отправка multipart запроса, то этот атрибут должен быть true, или будет выброшено исключение.
      Примечание: Начиная с Gecko 30.0 {{ geckoRelease("30.0") }}, синхронные запросы объявлены как deprecated, в силу того что все пользователи недовольны тем, что приложение "зависает".
      user
      @@ -423,13 +423,13 @@ translation_of: Web/API/XMLHttpRequest

      send()

      -

      Отправляет запрос. Если запрос асинхронный (а по умолчанию это так), этот метод вернет значение сразу после того как метод вызван.

      +

      Отправляет запрос. Если запрос асинхронный (а по умолчанию это так), этот метод вернёт значение сразу после того как метод вызван.

      -

      Примечание переводчика: в этом случае, в ответе не будет содержаться информации, которая пришла с сервера, поскольку она еще не пришла. Для того чтобы получить эту информацию, нужно слушать события загрузки, или использовать promise.

      +

      Примечание переводчика: в этом случае, в ответе не будет содержаться информации, которая пришла с сервера, поскольку она ещё не пришла. Для того чтобы получить эту информацию, нужно слушать события загрузки, или использовать promise.

      -

      Если запрос синхронный, то метод вернет значение только после того, как придет запрос от сервера.

      +

      Если запрос синхронный, то метод вернёт значение только после того, как придёт запрос от сервера.

      Примечание: все необходимые обработчики событий должны быть установлены перед вызовом send().
      @@ -510,7 +510,7 @@ void send(FormData data);

      Вариант метода send() который посылает бинарные данные.

      -
      Примечание: Этот нестандартный метод считается устарелым по состоянию на Gecko 31 {{ geckoRelease(31) }}, и со временем будет удален. Взамен может использоваться стандарт метода send(Blob data). 
      +
      Примечание: Этот нестандартный метод считается устарелым по состоянию на Gecko 31 {{ geckoRelease(31) }}, и со временем будет удалён. Взамен может использоваться стандарт метода send(Blob data). 
      void sendAsBinary(
          in DOMString body
      diff --git a/files/ru/web/api/xmlhttprequest/response/index.html b/files/ru/web/api/xmlhttprequest/response/index.html
      index 383596f34d..7c07373f4f 100644
      --- a/files/ru/web/api/xmlhttprequest/response/index.html
      +++ b/files/ru/web/api/xmlhttprequest/response/index.html
      @@ -20,9 +20,9 @@ translation_of: Web/API/XMLHttpRequest/response
       
       

       

      -

      Соответствующий объект, основанный на значении responseType. Вы можете попытаться запросить данные в определенном формате, установив значение responseType после вызова open() для инициализации запроса, но перед вызовом send() для отправки запроса на сервер.

      +

      Соответствующий объект, основанный на значении responseType. Вы можете попытаться запросить данные в определённом формате, установив значение responseType после вызова open() для инициализации запроса, но перед вызовом send() для отправки запроса на сервер.

      -

      Значение равно null, если запрос еще не завершен или был неудачным, за исключением того, что при чтении текстовых данных с использованием responseType "text" или пустой строки (""), ответ может содержать ответ до тех пор, пока запрос все еще находится в состоянии LOADING readyState (3).

      +

      Значение равно null, если запрос ещё не завершён или был неудачным, за исключением того, что при чтении текстовых данных с использованием responseType "text" или пустой строки (""), ответ может содержать ответ до тех пор, пока запрос все ещё находится в состоянии LOADING readyState (3).

      Типы ответов описаны ниже.

      @@ -58,7 +58,7 @@ translation_of: Web/API/XMLHttpRequest/response
      - + @@ -78,7 +78,7 @@ translation_of: Web/API/XMLHttpRequest/response - +
      AbortErrorЗапрос был отменен (используя {{domxref("AbortController.abort()")}}).Запрос был отменён (используя {{domxref("AbortController.abort()")}}).
      TypeError Function? -

      Callback - функция, которая вызывается всякий раз, когда поле readyState меняет свое значение. Callback выполняется в потоке работы приложения.

      +

      Callback - функция, которая вызывается всякий раз, когда поле readyState меняет своё значение. Callback выполняется в потоке работы приложения.

      Внимание: Он не должен использоваться в синхронных запросах, и не должен выполняться из нативного кода (? must not be used from native code).
      0 UNSENTКлиент создан. Метод open() еще не вызван.Клиент создан. Метод open() ещё не вызван.
      1response varies -

      Тело сущности запроса. Согласно полю responseType, может быть ArrayBuffer, Blob, {{ domxref("Document") }}, JavaScript объектом (для "json"), или строкой. Равно null если запрос не завершен или окончен с ошибкой.

      +

      Тело сущности запроса. Согласно полю responseType, может быть ArrayBuffer, Blob, {{ domxref("Document") }}, JavaScript объектом (для "json"), или строкой. Равно null если запрос не завершён или окончен с ошибкой.

      responseText {{ReadOnlyInline()}} DOMStringОтвет на запрос в виде строки или null в случае если запрос не успешен или ответ еще не получен.Ответ на запрос в виде строки или null в случае если запрос не успешен или ответ ещё не получен.
      responseType
      "json"JavaScript объект, полученный путем парсинга JSON строки, полученной с сервера.JavaScript объект, полученный путём парсинга JSON строки, полученной с сервера.
      "text"timeout unsigned long -

      Время в миллисекундах, после которого запрос будет отменен. Значение 0 (по умолчанию) значит что таймаута не будет. Никогда.

      +

      Время в миллисекундах, после которого запрос будет отменён. Значение 0 (по умолчанию) значит что таймаута не будет. Никогда.

      Примечание: Вы можете не использовать поле timeout для синхронных запросов из owning window.
      "json"response является JavaScript object, созданный путем анализа содержимого полученных данных как JSON.response является JavaScript object, созданный путём анализа содержимого полученных данных как JSON.
      "text"
      "ms-stream" response является частью потоковой загрузки; этот тип ответа разрешен только для запросов на загрузку и поддерживается только Internet Explorer.response является частью потоковой загрузки; этот тип ответа разрешён только для запросов на загрузку и поддерживается только Internet Explorer.
      @@ -89,7 +89,7 @@ translation_of: Web/API/XMLHttpRequest/response

       

      -

      В этом примере представлена функция load(), которая загружает и обрабатывает страницу с сервера. Он работает путем создания объекта XMLHttpRequest и создания обработчика события с событием readystatechange, чтобы при изменении readyState на DONE (4) response получался и передавался в колбэк-функцию, предоставляемую load().

      +

      В этом примере представлена функция load(), которая загружает и обрабатывает страницу с сервера. Он работает путём создания объекта XMLHttpRequest и создания обработчика события с событием readystatechange, чтобы при изменении readyState на DONE (4) response получался и передавался в колбэк-функцию, предоставляемую load().

      Содержимое обрабатывается как необработанные текстовые данные (поскольку здесь ничто не переопределяет responseType по умолчанию).

      diff --git a/files/ru/web/api/xmlhttprequest/responsetext/index.html b/files/ru/web/api/xmlhttprequest/responsetext/index.html index 67421dc290..d80a4572c0 100644 --- a/files/ru/web/api/xmlhttprequest/responsetext/index.html +++ b/files/ru/web/api/xmlhttprequest/responsetext/index.html @@ -15,9 +15,9 @@ translation_of: Web/API/XMLHttpRequest/responseText

      Значение

      -

      Строка {{domxref("DOMString")}} содержащая либо текстовые данные, полученные при использовании XMLHttpRequest, либо null в случае, когда вопрос возвратил ошибку, или же еще не был  отослан на сервер вызовом функции {{domxref("XMLHttpRequest.send", "send()")}}.

      +

      Строка {{domxref("DOMString")}} содержащая либо текстовые данные, полученные при использовании XMLHttpRequest, либо null в случае, когда вопрос возвратил ошибку, или же ещё не был  отослан на сервер вызовом функции {{domxref("XMLHttpRequest.send", "send()")}}.

      -

      Во время выполнения асинхронных запросов, в значении responseText всегда находится текущее содержимое, полученное от сервера, даже если запрос еще не завершен, и данные от сервера не получены полностью.

      +

      Во время выполнения асинхронных запросов, в значении responseText всегда находится текущее содержимое, полученное от сервера, даже если запрос ещё не завершён, и данные от сервера не получены полностью.

      Понять, что ответ получен полностью, можно когда значение {{domxref("XMLHttpRequest.readyState", "readyState")}} становится {{domxref("XMLHttpRequest.DONE", "XMLHttpRequest.DONE")}} (4), а значение {{domxref("XMLHttpRequest.status", "status")}} становится 200 ("OK").

      diff --git a/files/ru/web/api/xmlhttprequest/responsetype/index.html b/files/ru/web/api/xmlhttprequest/responsetype/index.html index 91e38522bf..80d5b3bf9f 100644 --- a/files/ru/web/api/xmlhttprequest/responsetype/index.html +++ b/files/ru/web/api/xmlhttprequest/responsetype/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/XMLHttpRequest/responseType ---

      {{APIRef('XMLHttpRequest')}}

      -

      XMLHttpRequest.responseType Свойство является перечислимым значением, которое возвращает тип ответа. Он также позволяет автору изменять тип ответа. Если значение не задано, будет использовано значение по умолчанию textУстановка значения responseType в «document» игнорируется, если выполняется в  рабочей среде. При настройке responseType на определенное значение автор должен убедиться, что сервер действительно отправляет ответ, совместимый с этим форматом. Если сервер возвращает данные, которые не совместимы с установленным responseType, значение response будет nullКроме того, установка responseType для синхронных запросов вызовет исключение InvalidAccessError.

      +

      XMLHttpRequest.responseType Свойство является перечислимым значением, которое возвращает тип ответа. Он также позволяет автору изменять тип ответа. Если значение не задано, будет использовано значение по умолчанию textУстановка значения responseType в «document» игнорируется, если выполняется в  рабочей среде. При настройке responseType на определённое значение автор должен убедиться, что сервер действительно отправляет ответ, совместимый с этим форматом. Если сервер возвращает данные, которые не совместимы с установленным responseType, значение response будет nullКроме того, установка responseType для синхронных запросов вызовет исключение InvalidAccessError.

      Поддерживаемые значения responseType:

      diff --git a/files/ru/web/api/xmlhttprequest/responseurl/index.html b/files/ru/web/api/xmlhttprequest/responseurl/index.html index ed61b3451b..635d27ddc1 100644 --- a/files/ru/web/api/xmlhttprequest/responseurl/index.html +++ b/files/ru/web/api/xmlhttprequest/responseurl/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/XMLHttpRequest/responseURL ---
      {{APIRef('XMLHttpRequest')}}
      -

      Свойство XMLHttpRequest.responseURL доступно только для чтения, возвращает сериализованный URL ответа или пустую строку,  если URL равен null. Если URL возвращен, любой URL фрагмент в URL будет стерт. Значение responseURL станет окончательным URL, получаемым после любых редиректов.

      +

      Свойство XMLHttpRequest.responseURL доступно только для чтения, возвращает сериализованный URL ответа или пустую строку,  если URL равен null. Если URL возвращён, любой URL фрагмент в URL будет стёрт. Значение responseURL станет окончательным URL, получаемым после любых редиректов.

      Пример

      diff --git a/files/ru/web/api/xmlhttprequest/send/index.html b/files/ru/web/api/xmlhttprequest/send/index.html index a7c82474a7..34736d0716 100644 --- a/files/ru/web/api/xmlhttprequest/send/index.html +++ b/files/ru/web/api/xmlhttprequest/send/index.html @@ -78,7 +78,7 @@ translation_of: Web/API/XMLHttpRequest/send xhr.open('GET', '/server', true); xhr.onload = function () { - // Запрос завершен. Здесь можно обрабатывать результат. + // Запрос завершён. Здесь можно обрабатывать результат. }; xhr.send(null); @@ -94,12 +94,12 @@ xhr.send(null);
      var xhr = new XMLHttpRequest();
       xhr.open("POST", '/server', true);
       
      -//Передает правильный заголовок в запросе
      +//Передаёт правильный заголовок в запросе
       xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
       
       xhr.onreadystatechange = function() {//Вызывает функцию при смене состояния.
           if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
      -        // Запрос завершен. Здесь можно обрабатывать результат.
      +        // Запрос завершён. Здесь можно обрабатывать результат.
           }
       }
       xhr.send("foo=bar&lorem=ipsum");
      diff --git a/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html b/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html
      index 527dfe1f5a..454bc054db 100644
      --- a/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html
      +++ b/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html
      @@ -5,9 +5,9 @@ translation_of: Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data
       ---
       

      Получение бинарных данных используя JavaScript arrays 

      -

      Свойство responseType объекта XMLHttpRequest можно задать для изменения ожидаемого типа ответа с сервера. Возможные значения: пустая строка (по умолчанию), "arraybuffer", "blob", "document", "json" и "text". Свойство response будет содержать тело сущности в соответствии с типом ответа, как ArrayBuffer, Blob, Document, JSON или string. Это значение равно null, если запрос не завершен или не был успешным.

      +

      Свойство responseType объекта XMLHttpRequest можно задать для изменения ожидаемого типа ответа с сервера. Возможные значения: пустая строка (по умолчанию), "arraybuffer", "blob", "document", "json" и "text". Свойство response будет содержать тело сущности в соответствии с типом ответа, как ArrayBuffer, Blob, Document, JSON или string. Это значение равно null, если запрос не завершён или не был успешным.

      -

      В этом примере изображение считывается как двоичный файл и создается 8-разрядный массив целых чисел без знака из необработанных байтов. Обратите внимание, что это не будет декодировать изображение и читать пиксели. Для этого вам понадобится библиотека декодирования png.

      +

      В этом примере изображение считывается как двоичный файл и создаётся 8-разрядный массив целых чисел без знака из необработанных байтов. Обратите внимание, что это не будет декодировать изображение и читать пиксели. Для этого вам понадобится библиотека декодирования png.

      var oReq = new XMLHttpRequest();
       oReq.open("GET", "/myfile.png", true);
      @@ -90,9 +90,9 @@ var abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte (
       
       

      Отправка бинарных данных

      -

      Метод send объекта XMLHttpRequest был расширен, чтобы обеспечить легкую передачу бинарных данных - теперь он принимает объекты ArrayBuffer, {{domxref("Blob")}}, или {{domxref("File")}}.

      +

      Метод send объекта XMLHttpRequest был расширен, чтобы обеспечить лёгкую передачу бинарных данных - теперь он принимает объекты ArrayBuffer, {{domxref("Blob")}}, или {{domxref("File")}}.

      -

      В примере ниже на лету создается текстовый файл и отправляется методом POST на сервер. Здесь используется обычный текст, но нетрудно представить себе пример с бинарным файлом.

      +

      В примере ниже на лету создаётся текстовый файл и отправляется методом POST на сервер. Здесь используется обычный текст, но нетрудно представить себе пример с бинарным файлом.

      var oReq = new XMLHttpRequest();
       oReq.open("POST", url, true);
      @@ -121,7 +121,7 @@ xhr.open("POST", url, false);
       xhr.send(myArray);
       
      -

      Здесь создается и отправляется 512-ти байтовый массив из 8-битных целых чисел, н, разумеется, можно использовать любые двоичные данные.

      +

      Здесь создаётся и отправляется 512-ти байтовый массив из 8-битных целых чисел, н, разумеется, можно использовать любые двоичные данные.

      Примечание: Поддержка передачи объектов ArrayBuffer с помощью XMLHttpRequest появилась в Gecko 9.0 {{geckoRelease("9.0")}}. Add information about other browsers' support here.
      @@ -144,7 +144,7 @@ req.sendAsBinary(aBody);

      В строке 5 метод sendAsBinary() начинает запрос.

      -
      Примечание: Нестандартный метод sendAsBinary начиная с Gecko 31 {{ geckoRelease(31) }} считается устаревшим и скоро будет удален. Вместо него, как показывалось выше, можно использовать стандартный метод send(Blob data).
      +
      Примечание: Нестандартный метод sendAsBinary начиная с Gecko 31 {{ geckoRelease(31) }} считается устаревшим и скоро будет удалён. Вместо него, как показывалось выше, можно использовать стандартный метод send(Blob data).

      Кроме того, чтобы отправить бинарные данные можно передать экземпляр {{interface("nsIFileInputStream")}} в метод send(). В этом случае заголовок Content-Length заполнять явно необязательно, поскольку информация получается из потока автоматически:

      diff --git a/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html index 4304530ac7..0a7d0f9cf4 100644 --- a/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html +++ b/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html @@ -226,7 +226,7 @@ The second line.

      Небольшой классический фреймворк

      -

      Все данные эффекты достигаются с помощью веб браузера, когда вы отправляете {{ HTMLElement("form") }}. Но если вам требуется выполнить все операции с помощью лишь JavaScript, то вам придется проинструктировать интерпретатор обо всех выполняемых операциях. Для, того чтобы отправлять формы с помощью чистого AJAX, потребуется слишком комплексное описание, чтобы тут рассуждать о нем во всех подробностях. В связи с этим, мы опубликовали здесь полный(но все еще дидактический) фреймворк, который все же способен использовать все четыре способа отправки и, так же поддерживает файловую загрузку.

      +

      Все данные эффекты достигаются с помощью веб браузера, когда вы отправляете {{ HTMLElement("form") }}. Но если вам требуется выполнить все операции с помощью лишь JavaScript, то вам придётся проинструктировать интерпретатор обо всех выполняемых операциях. Для, того чтобы отправлять формы с помощью чистого AJAX, потребуется слишком комплексное описание, чтобы тут рассуждать о нем во всех подробностях. В связи с этим, мы опубликовали здесь полный(но все ещё дидактический) фреймворк, который все же способен использовать все четыре способа отправки и, так же поддерживает файловую загрузку.

      <!doctype html>
      diff --git a/files/ru/web/api/xmlhttprequest/xmlhttprequest/index.html b/files/ru/web/api/xmlhttprequest/xmlhttprequest/index.html
      index 53fb283a75..bcd89a4530 100644
      --- a/files/ru/web/api/xmlhttprequest/xmlhttprequest/index.html
      +++ b/files/ru/web/api/xmlhttprequest/xmlhttprequest/index.html
      @@ -43,9 +43,9 @@ translation_of: Web/API/XMLHttpRequest/XMLHttpRequest
        
      Существует два флага, которые можно установить:
      mozAnon
      -
      Boolean: Установка этого флага в значение true приведет к тому, что браузер не будет раскрывать {{Glossary("origin")}} и учётные данные пользователя при получении ресурсов. Главным образом это означает, что файлы {{Glossary("Cookie", "cookies")}} не будут отправлены, если они не добавлены явно с использованием setRequestHeader.
      +
      Boolean: Установка этого флага в значение true приведёт к тому, что браузер не будет раскрывать {{Glossary("origin")}} и учётные данные пользователя при получении ресурсов. Главным образом это означает, что файлы {{Glossary("Cookie", "cookies")}} не будут отправлены, если они не добавлены явно с использованием setRequestHeader.
      mozSystem
      -
      Boolean: Установка этого флага в значение true позволяет устанавливать межсайтовые соединения не требуя подключения сервера с помощью {{Glossary("CORS")}}. Требует установки флага mozAnon: true, т.к. это нельзя сочетать с отправкой файлов cookie или других учетных данных пользователя. Это работает только в привилегированных (проверенных) приложениях ({{Bug ("692677")}}));  не работает на произвольных веб-страницах, загруженных в Firefox.
      +
      Boolean: Установка этого флага в значение true позволяет устанавливать межсайтовые соединения не требуя подключения сервера с помощью {{Glossary("CORS")}}. Требует установки флага mozAnon: true, т.к. это нельзя сочетать с отправкой файлов cookie или других учётных данных пользователя. Это работает только в привилегированных (проверенных) приложениях ({{Bug ("692677")}}));  не работает на произвольных веб-страницах, загруженных в Firefox.
      diff --git a/files/ru/web/api/xmlserializer/index.html b/files/ru/web/api/xmlserializer/index.html index 7df04c7f6d..9e8823e80c 100644 --- a/files/ru/web/api/xmlserializer/index.html +++ b/files/ru/web/api/xmlserializer/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/XMLSerializer
      XMLSerializer.serializeToString()
      Возвращает сериализованное дерево или ветку в виде строки
      XMLSerializer.serializeToStream() {{ non-standard_inline() }}{{ deprecated_inline() }}
      -
      Поддерево, обернутое в указанный элемент, сериализуется в поток байтов с использованием указанной кодировки.
      +
      Поддерево, обёрнутое в указанный элемент, сериализуется в поток байтов с использованием указанной кодировки.

      Примеры

      -- cgit v1.2.3-54-g00ecf