diff options
Diffstat (limited to 'files/ru/web')
-rw-r--r-- | files/ru/web/accessibility/веб-разработка/index.html | 51 | ||||
-rw-r--r-- | files/ru/web/api/baseaudiocontext/createpanner/index.html (renamed from files/ru/web/api/audiocontext/createpanner/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/baseaudiocontext/currenttime/index.html (renamed from files/ru/web/api/audiocontext/currenttime/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/baseaudiocontext/decodeaudiodata/index.html (renamed from files/ru/web/api/audiocontext/decodeaudiodata/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html (renamed from files/ru/web/api/canvas_api/tutorial/применение_стилей_и_цветов/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/canvas_api/tutorial/basic_animations/index.html (renamed from files/ru/web/api/canvas_api/tutorial/основы_анимации/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/canvas_api/tutorial/compositing/index.html (renamed from files/ru/web/api/canvas_api/tutorial/композиции/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html (renamed from files/ru/web/api/canvas_api/tutorial/рисование_фигур/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/canvas_api/tutorial/drawing_text/index.html (renamed from files/ru/web/api/canvas_api/tutorial/рисование_текста/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/canvas_api/tutorial/using_images/index.html (renamed from files/ru/web/api/canvas_api/tutorial/использование_изображений/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/crypto/getrandomvalues/index.html (renamed from files/ru/web/api/randomsource/getrandomvalues/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/css_object_model/managing_screen_orientation/index.html (renamed from files/ru/web/api/css_object_model/ориентация_экрана/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/document/createelement/index.html | 82 | ||||
-rw-r--r-- | files/ru/web/api/document/images/index.html | 29 | ||||
-rw-r--r-- | files/ru/web/api/document/readystatechange_event/index.html (renamed from files/ru/web/events/readystatechange/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/document_object_model/events/index.html | 80 | ||||
-rw-r--r-- | files/ru/web/api/document_object_model/examples/index.html | 382 | ||||
-rw-r--r-- | files/ru/web/api/document_object_model/index.html | 387 | ||||
-rw-r--r-- | files/ru/web/api/document_object_model/introduction/index.html | 230 | ||||
-rw-r--r-- | files/ru/web/api/document_object_model/locating_dom_elements_using_selectors/index.html | 50 | ||||
-rw-r--r-- | files/ru/web/api/documentorshadowroot/activeelement/index.html (renamed from files/ru/web/api/document/activeelement/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/documentorshadowroot/getselection/index.html (renamed from files/ru/web/api/document/getselection/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/element/blur_event/index.html (renamed from files/ru/web/events/blur/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/element/error_event/index.html (renamed from files/ru/web/events/error/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/element/focusin_event/index.html (renamed from files/ru/web/events/focusin/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/element/focusout_event/index.html (renamed from files/ru/web/events/focusout/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/elementcssinlinestyle/style/index.html (renamed from files/ru/web/api/htmlelement/style/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/eventtarget/attachevent/index.html | 9 | ||||
-rw-r--r-- | files/ru/web/api/eventtarget/detachevent/index.html | 92 | ||||
-rw-r--r-- | files/ru/web/api/file_and_directory_entries_api/introduction/index.html (renamed from files/ru/web/api/file_and_directory_entries_api/введение/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/fullscreen_api/index.html | 198 | ||||
-rw-r--r-- | files/ru/web/api/geolocation_api/index.html (renamed from files/ru/web/api/geolocation/using_geolocation/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/geolocation_api/using_the_geolocation_api/index.html (renamed from files/ru/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/html_drag_and_drop_api/drag_operations/index.html (renamed from files/ru/web/guide/html/drag_and_drop/drag_operations/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/html_drag_and_drop_api/index.html (renamed from files/ru/web/guide/html/drag_and_drop/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/htmlaudioelement/audio/index.html (renamed from files/ru/web/api/htmlaudioelement/audio()/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/htmlelement/accesskey/index.html (renamed from files/ru/web/api/element/accesskey/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/htmlelement/innertext/index.html (renamed from files/ru/web/api/node/innertext/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/htmlelement/transitionend_event/index.html (renamed from files/ru/web/events/transitionend/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/htmlmediaelement/seeking_event/index.html (renamed from files/ru/web/html/element/video/seeking_event/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/htmlorforeignelement/dataset/index.html (renamed from files/ru/web/api/htmlelement/dataset/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/htmlorforeignelement/nonce/index.html (renamed from files/ru/web/api/htmlelement/nonce/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/htmlorforeignelement/tabindex/index.html (renamed from files/ru/web/api/htmlelement/tabindex/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/mediatrackconstraints/echocancellation/index.html (renamed from files/ru/web/api/mediatrackconstraints/эхоподавление/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/navigator/connection/index.html (renamed from files/ru/web/api/networkinformation/connection/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/navigatorgeolocation/index.html | 103 | ||||
-rw-r--r-- | files/ru/web/api/node/baseuriobject/index.html | 26 | ||||
-rw-r--r-- | files/ru/web/api/node/nodeprincipal/index.html | 29 | ||||
-rw-r--r-- | files/ru/web/api/node/replacechild/index.html (renamed from files/ru/web/api/node.replacechild/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/nondocumenttypechildnode/nextelementsibling/index.html (renamed from files/ru/web/api/nondocumenttypechildnode/nondocumenttypechildnode.nextelementsibling/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/notation/index.html (renamed from files/ru/web/api/нотация/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/page_visibility_api/index.html (renamed from files/ru/web/api/видимость_страницы_api/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/push_api/using_the_push_api/index.html | 420 | ||||
-rw-r--r-- | files/ru/web/api/randomsource/index.html | 111 | ||||
-rw-r--r-- | files/ru/web/api/slotable/index.html | 45 | ||||
-rw-r--r-- | files/ru/web/api/storage/localstorage/index.html | 146 | ||||
-rw-r--r-- | files/ru/web/api/svgaelement/svgalement.target/index.html | 107 | ||||
-rw-r--r-- | files/ru/web/api/web_crypto_api/checking_authenticity_with_password/index.html | 33 | ||||
-rw-r--r-- | files/ru/web/api/web_workers_api/using_web_workers/index.html | 871 | ||||
-rw-r--r-- | files/ru/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html (renamed from files/ru/web/api/webgl_api/tutorial/создание_3d_объектов_с_помощью_webgl/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/webrtc_api/connectivity/index.html (renamed from files/ru/web/api/webrtc_api/связь/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/webrtc_api/protocols/index.html (renamed from files/ru/web/api/webrtc_api/протоколы/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/webrtc_api/webrtc_basics/index.html | 351 | ||||
-rw-r--r-- | files/ru/web/api/websockets_api/index.html | 58 | ||||
-rw-r--r-- | files/ru/web/api/websockets_api/writing_websocket_client_applications/index.html | 195 | ||||
-rw-r--r-- | files/ru/web/api/window/domcontentloaded_event/index.html (renamed from files/ru/web/events/domcontentloaded/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/window/load_event/index.html (renamed from files/ru/web/events/load/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/window/requestanimationframe/index.html | 92 | ||||
-rw-r--r-- | files/ru/web/api/window/unhandledrejection_event/index.html (renamed from files/ru/web/events/unhandledrejection/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/windowbase64/base64_encoding_and_decoding/index.html | 138 | ||||
-rw-r--r-- | files/ru/web/api/windowbase64/index.html | 121 | ||||
-rw-r--r-- | files/ru/web/api/windoworworkerglobalscope/btoa/index.html (renamed from files/ru/web/api/windowbase64/btoa/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/windoworworkerglobalscope/settimeout/index.html (renamed from files/ru/web/api/windowtimers/settimeout/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/windowtimers/index.html | 120 | ||||
-rw-r--r-- | files/ru/web/api/xmldocument/async/index.html (renamed from files/ru/web/api/document/async/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/api/xmlhttprequest/loadstart_event/index.html (renamed from files/ru/web/events/loadstart/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/@viewport/user-zoom/index.html | 106 | ||||
-rw-r--r-- | files/ru/web/css/_colon_any/index.html | 190 | ||||
-rw-r--r-- | files/ru/web/css/actual_value/index.html (renamed from files/ru/web/css/действительное_значение/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/comments/index.html (renamed from files/ru/web/css/тихий/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/common_css_questions/index.html | 182 | ||||
-rw-r--r-- | files/ru/web/css/css_animations/using_css_animations/index.html (renamed from files/ru/web/css/css_animations/ispolzovanie_css_animatciy/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/css_background_and_borders/border-radius_generator/index.html (renamed from files/ru/web/css/css_background_and_borders/border-radius_генератор/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/css_background_and_borders/box-shadow_generator/index.html (renamed from files/ru/web/css/css_box_model/box-shadow_generator/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/css_backgrounds_and_borders/index.html (renamed from files/ru/web/css/css_background_and_borders/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html (renamed from files/ru/web/css/css_background_and_borders/множественные_фоны/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html (renamed from files/ru/web/css/css_basic_user_interface/использование_url_значений_для_свойства_cursor/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/css_box_model/introduction_to_the_css_box_model/index.html (renamed from files/ru/web/css/box_model/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/css_color/index.html (renamed from files/ru/web/css/css_colors/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/css_columns/using_multi-column_layouts/index.html (renamed from files/ru/web/guide/css/using_multi-column_layouts/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html (renamed from files/ru/web/css/css_flexible_box_layout/выравнивание_элементов_в_flex_контейнере/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html (renamed from files/ru/web/css/css_flexible_box_layout/контролирование_соотношения_элементов_вдоль_главной_оси/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html | 379 | ||||
-rw-r--r-- | files/ru/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html (renamed from files/ru/web/css/css_flow_layout/блочное_и_строчное_размещение_в_нормальном_потоке/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/css_flow_layout/intro_to_formatting_contexts/index.html (renamed from files/ru/web/css/css_flow_layout/введение_в_контексты_форматирования/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html (renamed from files/ru/web/css/css_grid_layout/css_grid,_logical_values_and_writing_modes/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/css_grid_layout/grid_template_areas/index.html (renamed from files/ru/web/css/css_grid_layout/грид-области/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html (renamed from files/ru/web/css/css_grid_layout/расположение_элементов_по_грид-линиям_с_помощью_css_grid/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/css_positioning/understanding_z_index/adding_z-index/index.html (renamed from files/ru/web/guide/css/understanding_z_index/adding_z-index/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/css_positioning/understanding_z_index/index.html (renamed from files/ru/web/guide/css/understanding_z_index/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html (renamed from files/ru/web/guide/css/understanding_z_index/stacking_without_z-index/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/css_selectors/index.html (renamed from files/ru/web/css/css_селекторы/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html (renamed from files/ru/web/css/css_селекторы/using_the__colon_target_pseudo-class_in_selectors/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/css_user_interface/index.html | 119 | ||||
-rw-r--r-- | files/ru/web/css/filter-function/url/index.html | 35 | ||||
-rw-r--r-- | files/ru/web/css/grid-gap/index.html | 194 | ||||
-rw-r--r-- | files/ru/web/css/layout_mode/index.html (renamed from files/ru/web/css/способ_расположения/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/length/index.html (renamed from files/ru/web/css/размер/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/media_queries/testing_media_queries/index.html (renamed from files/ru/web/css/media_queries/тестирование_медиа_запросы/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/pseudo-classes/index.html (renamed from files/ru/web/css/псевдо-классы/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/replaced_element/index.html (renamed from files/ru/web/css/замещаемый_элемент/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/specified_value/index.html (renamed from files/ru/web/css/указанное_значение/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/syntax/index.html (renamed from files/ru/web/css/синтаксис/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/css/url/index.html | 94 | ||||
-rw-r--r-- | files/ru/web/css/visual_formatting_model/index.html (renamed from files/ru/web/guide/css/visual_formatting_model/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/events/abort/index.html | 70 | ||||
-rw-r--r-- | files/ru/web/guide/ajax/getting_started/index.html (renamed from files/ru/web/guide/ajax/с_чего_начать/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/guide/ajax/с_чего_начать_question_/index.html | 6 | ||||
-rw-r--r-- | files/ru/web/guide/api/dom/index.html | 38 | ||||
-rw-r--r-- | files/ru/web/guide/api/dom/storage/index.html | 368 | ||||
-rw-r--r-- | files/ru/web/guide/api/webrtc/index.html | 35 | ||||
-rw-r--r-- | files/ru/web/guide/css/getting_started/cascading_and_inheritance/index.html | 152 | ||||
-rw-r--r-- | files/ru/web/guide/css/getting_started/color/index.html | 345 | ||||
-rw-r--r-- | files/ru/web/guide/css/getting_started/how_css_works/index.html | 122 | ||||
-rw-r--r-- | files/ru/web/guide/css/getting_started/index.html | 60 | ||||
-rw-r--r-- | files/ru/web/guide/css/getting_started/readable_css/index.html | 166 | ||||
-rw-r--r-- | files/ru/web/guide/css/getting_started/selectors/index.html | 434 | ||||
-rw-r--r-- | files/ru/web/guide/css/getting_started/text_styles/index.html | 152 | ||||
-rw-r--r-- | files/ru/web/guide/css/getting_started/what_is_css/index.html | 120 | ||||
-rw-r--r-- | files/ru/web/guide/css/getting_started/why_use_css/index.html | 110 | ||||
-rw-r--r-- | files/ru/web/guide/css/getting_started/таблицы/index.html | 525 | ||||
-rw-r--r-- | files/ru/web/guide/css/index.html | 12 | ||||
-rw-r--r-- | files/ru/web/guide/events/creating_and_triggering_events/index.html (renamed from files/ru/web/guide/events/создание_и_вызов_событий/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/guide/graphics/index.html (renamed from files/ru/web/guide/графика/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/guide/html/html5/constraint_validation/index.html | 343 | ||||
-rw-r--r-- | files/ru/web/guide/html/html5/index.html | 171 | ||||
-rw-r--r-- | files/ru/web/guide/html/html5/introduction_to_html5/index.html | 26 | ||||
-rw-r--r-- | files/ru/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html | 204 | ||||
-rw-r--r-- | files/ru/web/guide/html/using_data_attributes/index.html | 129 | ||||
-rw-r--r-- | files/ru/web/guide/html/using_html_sections_and_outlines/index.html (renamed from files/ru/web/guide/html/sections_and_outlines_of_an_html5_document/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/guide/html/формы_в_html/index.html | 149 | ||||
-rw-r--r-- | files/ru/web/guide/performance/index.html (renamed from files/ru/web/guide/производительность/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/html/attributes/crossorigin/index.html (renamed from files/ru/web/html/cors_settings_attributes/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/html/element/button/index.html (renamed from files/ru/web/html/element/кнопка/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/html/element/element/index.html | 112 | ||||
-rw-r--r-- | files/ru/web/html/element/link/index.html (renamed from files/ru/web/html/element/ссылка/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/html/global_attributes/dropzone/index.html | 43 | ||||
-rw-r--r-- | files/ru/web/html/inline_elements/index.html (renamed from files/ru/web/html/строчные_элементы/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/html/link_types/index.html (renamed from files/ru/web/html/типы_ссылок/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/html/optimizing_your_pages_for_speculative_parsing/index.html | 33 | ||||
-rw-r--r-- | files/ru/web/html/reference/index.html (renamed from files/ru/web/html/ссылки/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/html/using_the_application_cache/index.html (renamed from files/ru/web/html/использование_кэширования_приложений/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/html/поддерживаемые_медиа_форматы/index.html | 517 | ||||
-rw-r--r-- | files/ru/web/http/authentication/index.html (renamed from files/ru/web/http/авторизация/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/basics_of_http/identifying_resources_on_the_web/index.html (renamed from files/ru/web/http/basics_of_http/identifying_resources_on_the_web_ru/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/caching/index.html (renamed from files/ru/web/http/кэширование/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/cookies/index.html (renamed from files/ru/web/http/куки/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/accept-charset/index.html (renamed from files/ru/web/http/заголовки/accept-charset/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/accept-language/index.html (renamed from files/ru/web/http/заголовки/accept-language/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/accept-patch/index.html (renamed from files/ru/web/http/заголовки/accept-patch/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/accept-ranges/index.html (renamed from files/ru/web/http/заголовки/accept-ranges/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/accept/index.html (renamed from files/ru/web/http/заголовки/accept/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/access-control-allow-headers/index.html (renamed from files/ru/web/http/заголовки/access-control-allow-headers/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/access-control-allow-methods/index.html (renamed from files/ru/web/http/заголовки/access-control-allow-methods/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/access-control-allow-origin/index.html (renamed from files/ru/web/http/заголовки/access-control-allow-origin/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/access-control-max-age/index.html (renamed from files/ru/web/http/заголовки/access-control-max-age/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/authorization/index.html (renamed from files/ru/web/http/заголовки/authorization/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/cache-control/index.html (renamed from files/ru/web/http/заголовки/cache-control/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/connection/index.html (renamed from files/ru/web/http/заголовки/connection/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/content-disposition/index.html (renamed from files/ru/web/http/заголовки/content-disposition/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/content-encoding/index.html (renamed from files/ru/web/http/заголовки/content-encoding/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/content-language/index.html (renamed from files/ru/web/http/заголовки/content-language/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/content-length/index.html (renamed from files/ru/web/http/заголовки/content-length/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/content-type/index.html (renamed from files/ru/web/http/заголовки/content-type/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/date/index.html (renamed from files/ru/web/http/заголовки/date/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/dnt/index.html (renamed from files/ru/web/http/заголовки/dnt/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/etag/index.html (renamed from files/ru/web/http/заголовки/etag/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/expect/index.html (renamed from files/ru/web/http/заголовки/expect/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/expires/index.html (renamed from files/ru/web/http/заголовки/expires/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/host/index.html (renamed from files/ru/web/http/заголовки/host/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/if-match/index.html (renamed from files/ru/web/http/заголовки/if-match/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/if-modified-since/index.html (renamed from files/ru/web/http/заголовки/if-modified-since/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/if-unmodified-since/index.html (renamed from files/ru/web/http/заголовки/if-unmodified-since/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/index.html (renamed from files/ru/web/http/заголовки/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/last-modified/index.html (renamed from files/ru/web/http/заголовки/last-modified/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/origin/index.html (renamed from files/ru/web/http/заголовки/origin/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/pragma/index.html (renamed from files/ru/web/http/заголовки/pragma/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/range/index.html (renamed from files/ru/web/http/заголовки/range/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/referer/index.html (renamed from files/ru/web/http/заголовки/referer/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/retry-after/index.html (renamed from files/ru/web/http/заголовки/retry-after/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/set-cookie/index.html (renamed from files/ru/web/http/заголовки/set-cookie/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/strict-transport-security/index.html (renamed from files/ru/web/http/заголовки/strict-transport-security/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/vary/index.html (renamed from files/ru/web/http/заголовки/vary/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/x-content-type-options/index.html (renamed from files/ru/web/http/заголовки/x-content-type-options/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/x-forwarded-for/index.html (renamed from files/ru/web/http/заголовки/x-forwarded-for/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/headers/x-xss-protection/index.html (renamed from files/ru/web/http/заголовки/x-xss-protection/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/http/server-side_access_control/index.html | 213 | ||||
-rw-r--r-- | files/ru/web/javascript/about_javascript/index.html (renamed from files/ru/web/javascript/о_javascript/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/javascript/guide/about/index.html | 159 | ||||
-rw-r--r-- | files/ru/web/javascript/guide/introduction/index.html (renamed from files/ru/web/javascript/guide/введение_в_javascript/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/javascript/guide/javascript_overview/index.html | 142 | ||||
-rw-r--r-- | files/ru/web/javascript/guide/loops_and_iteration/index.html (renamed from files/ru/web/javascript/guide/циклы_и_итерации/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/javascript/guide/predefined_core_objects/index.html | 923 | ||||
-rw-r--r-- | files/ru/web/javascript/guide/using_promises/index.html (renamed from files/ru/web/javascript/guide/ispolzovanie_promisov/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/javascript/guide/об_этом_руководстве/index.html | 68 | ||||
-rw-r--r-- | files/ru/web/javascript/introduction_to_object-oriented_javascript/index.html | 356 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/about/index.html (renamed from files/ru/web/javascript/reference/об/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/classes/private_class_fields/index.html (renamed from files/ru/web/javascript/reference/classes/приватные_поля_класса/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/classes/public_class_fields/index.html (renamed from files/ru/web/javascript/reference/classes/class_fields/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/errors/var_hides_argument/index.html (renamed from files/ru/web/javascript/reference/errors/переменные_скрывают_аргумент/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/functions/method_definitions/index.html (renamed from files/ru/web/javascript/reference/functions/определиние_методов/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/array/prototype/index.html | 171 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/asyncfunction/prototype/index.html | 55 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/boolean/prototype/index.html | 113 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/date/prototype/index.html | 229 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/error/prototype/index.html | 155 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/evalerror/prototype/index.html | 122 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/function/prototype/index.html | 152 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/generatorfunction/prototype/index.html | 59 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/internalerror/prototype/index.html | 100 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/intl/collator/prototype/index.html | 109 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html | 109 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html | 109 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/map/prototype/index.html | 126 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/math/метод_math.max()_/index.html | 136 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/number/prototype/index.html | 124 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/object/prototype/index.html | 205 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/promise/prototype/index.html | 67 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/proxy/handler/index.html | 135 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.html (renamed from files/ru/web/javascript/reference/global_objects/proxy/handler/deleteproperty/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/proxy/proxy/set/index.html (renamed from files/ru/web/javascript/reference/global_objects/proxy/handler/set/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/rangeerror/prototype/index.html | 123 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/referenceerror/prototype/index.html | 123 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/regexp/prototype/index.html | 141 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/set/prototype/index.html | 81 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/string/prototype/index.html | 230 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/string/trimend/index.html (renamed from files/ru/web/javascript/reference/global_objects/string/trimright/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/string/trimstart/index.html (renamed from files/ru/web/javascript/reference/global_objects/string/trimleft/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/symbol/prototype/index.html | 107 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/syntaxerror/prototype/index.html | 123 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/typedarray/prototype/index.html | 129 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/typeerror/prototype/index.html | 123 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/urierror/prototype/index.html | 123 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/weakmap/prototype/index.html | 75 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/global_objects/weakset/prototype/index.html | 142 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/operators/arithmetic_operators/index.html | 291 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/operators/assignment/index.html (renamed from files/ru/web/javascript/reference/operators/присваивание/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/operators/assignment_operators/index.html | 431 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/operators/bitwise_operators/index.html | 626 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/operators/comma_operator/index.html (renamed from files/ru/web/javascript/reference/operators/оператор_запятая/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/operators/conditional_operator/index.html (renamed from files/ru/web/javascript/reference/operators/условный_оператор/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/operators/grouping/index.html (renamed from files/ru/web/javascript/reference/operators/группировка/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/operators/pipeline_operator/index.html (renamed from files/ru/web/javascript/reference/operators/конвейерный_оператор/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/operators/логические_операторы/index.html | 300 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/operators/операторы_сравнения/index.html | 286 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/statements/block/index.html (renamed from files/ru/web/javascript/reference/statements/блок/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/statements/default/index.html | 117 | ||||
-rw-r--r-- | files/ru/web/javascript/reference/template_literals/index.html (renamed from files/ru/web/javascript/reference/template_strings/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/javascript/shells/index.html (renamed from files/ru/web/javascript/javascript_шеллы/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/manifest/serviceworker/index.html | 91 | ||||
-rw-r--r-- | files/ru/web/mathml/attribute/index.html (renamed from files/ru/web/mathml/атрибут/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/mathml/examples/deriving_the_quadratic_formula/index.html (renamed from files/ru/web/mathml/примеры/deriving_the_quadratic_formula/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/mathml/examples/index.html (renamed from files/ru/web/mathml/примеры/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/mathml/examples/mathml_pythagorean_theorem/index.html (renamed from files/ru/web/mathml/примеры/mathml_pythagorean_theorem/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/media/formats/webrtc_codecs/index.html (renamed from files/ru/web/media/formats/webrtc_кодеки/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/performance/animation_performance_and_frame_rate/index.html (renamed from files/ru/web/performance/производительность_анимации/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/performance/fundamentals/index.html (renamed from files/ru/web/performance/основы/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/progressive_web_apps/заметный/index.html | 64 | ||||
-rw-r--r-- | files/ru/web/security/csp/index.html | 43 | ||||
-rw-r--r-- | files/ru/web/security/information_security_basics/index.html | 30 | ||||
-rw-r--r-- | files/ru/web/svg/attribute/onload/index.html | 5 | ||||
-rw-r--r-- | files/ru/web/svg/element/a/index.html (renamed from files/ru/web/svg/элемент/a/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/animate/index.html (renamed from files/ru/web/svg/элемент/animate/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/animatemotion/index.html (renamed from files/ru/web/svg/элемент/animatemotion/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/circle/index.html (renamed from files/ru/web/svg/элемент/circle/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/defs/index.html (renamed from files/ru/web/svg/элемент/defs/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/ellipse/index.html (renamed from files/ru/web/svg/элемент/ellipse/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/feblend/index.html (renamed from files/ru/web/svg/элемент/feblend/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/foreignobject/index.html (renamed from files/ru/web/svg/элемент/foreignobject/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/g/index.html (renamed from files/ru/web/svg/элемент/g/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/image/index.html (renamed from files/ru/web/svg/элемент/image/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/index.html (renamed from files/ru/web/svg/элемент/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/line/index.html (renamed from files/ru/web/svg/элемент/line/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/lineargradient/index.html (renamed from files/ru/web/svg/элемент/lineargradient/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/path/index.html (renamed from files/ru/web/svg/элемент/path/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/pattern/index.html (renamed from files/ru/web/svg/элемент/pattern/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/polygon/index.html (renamed from files/ru/web/svg/элемент/polygon/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/radialgradient/index.html (renamed from files/ru/web/svg/элемент/radialgradient/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/rect/index.html (renamed from files/ru/web/svg/элемент/rect/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/svg/index.html (renamed from files/ru/web/svg/элемент/svg/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/text/index.html (renamed from files/ru/web/svg/элемент/text/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/use/index.html (renamed from files/ru/web/svg/элемент/use/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/tutorial/basic_shapes/index.html (renamed from files/ru/web/svg/tutorial/основные_фигуры/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/tutorial/basic_transformations/index.html (renamed from files/ru/web/svg/tutorial/базовые_преобразования/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/tutorial/introduction/index.html (renamed from files/ru/web/svg/tutorial/введение/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/tutorial/positions/index.html (renamed from files/ru/web/svg/tutorial/позиции/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/tutorial/svg_and_css/index.html (renamed from files/ru/web/guide/css/getting_started/svg_и_css/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/web_components/using_custom_elements/index.html (renamed from files/ru/web/web_components/использование_пользовательских_элементов/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/webapi/index.html | 131 | ||||
-rw-r--r-- | files/ru/web/xpath/functions/floor/index.html (renamed from files/ru/web/xpath/funkcje/floor/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/xpath/functions/index.html (renamed from files/ru/web/xpath/funkcje/index.html) | 0 |
301 files changed, 3194 insertions, 15175 deletions
diff --git a/files/ru/web/accessibility/веб-разработка/index.html b/files/ru/web/accessibility/веб-разработка/index.html deleted file mode 100644 index ce48a75de2..0000000000 --- a/files/ru/web/accessibility/веб-разработка/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Веб-разработка -slug: Web/Accessibility/Веб-разработка -tags: - - ARIA - - Web Development - - XUL - - доступность -translation_of: Web/Accessibility -translation_of_original: Web/Accessibility/Web_Development ---- -<p class="summary"><span class="seoSummary">Здесь ссылки на более подробную информацию для разработчиков о доступности (<span lang="en">accessibility</span>) в Веб и в XUL.</span></p> - -<table> - <tbody> - <tr> - <td style="vertical-align: top;"> - <h2 id="Доступность_в_Вебе">Доступность в Вебе</h2> - - <dl> - <dt><a href="/ru/docs/Accessibility/ARIA" title="http://developer.mozilla.org/ru/docs/Accessibility/ARIA">ARIA для разработчиков</a></dt> - <dd style="">ARIA позволяет делать доступным динамический HTML-контент. Examples are live content regions and JavaScript widgets.</dd> - <dt><a href="/ru/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en/Accessibility/Keyboard-navigable JavaScript widgets">Keyboard-navigable JavaScript widgets</a></dt> - <dd>До недавнего времени у веб-разработчиков, желавших сделать свои виджеты на основе <div>, <span> и стилей доступными с клавиатуры, не было the proper techniques. Управляемость с клавиатуры — одно из минимальных требований accessibility, о которых должен знать каждый разработчик.</dd> - </dl> - - <h2 id="Доступность_XUL">Доступность XUL</h2> - - <dl> - <dt> </dt> - <dt><a href="/ru/Building_accessible_custom_components_in_XUL" title="en/Building_accessible_custom_components_in_XUL">Building accessible custom components in XUL</a></dt> - <dd>How to use DHTML Accessibility techniques to add accessibility to your custom XUL components.</dd> - <dt><a href="/ru/XUL_accessibility_guidelines" title="ru/XUL_accessibility_guidelines">Accessible XUL authoring guidelines</a></dt> - <dd>When authored according to these guidelines, XUL is capable of generating accessible user interfaces. Coders, reviewers, designers and QA engineers should be familiar with these guidelines.</dd> - </dl> - </td> - <td style="vertical-align: top;"> - <h2 id="Внешние_ресурсы">Внешние ресурсы</h2> - - <dl> - <dt><a class="external" href="http://diveintoaccessibility.info/">Dive into Accessibility</a></dt> - <dd><small>Эта книга отвечает на два вопроса. Первый — «Зачем мне делать мой сайт более доступным?» Второй — «Как мне сделать мой сайт более доступным?»</small></dd> - <dt><a class="external" href="http://www-306.ibm.com/able/guidelines/web/accessweb.html">Accessible Web Page Authoring</a></dt> - <dd>A handy web accessibility checklist, from IBM.</dd> - </dl> - </td> - </tr> - </tbody> -</table> - -<p> </p> diff --git a/files/ru/web/api/audiocontext/createpanner/index.html b/files/ru/web/api/baseaudiocontext/createpanner/index.html index 0a4d5db32b..0a4d5db32b 100644 --- a/files/ru/web/api/audiocontext/createpanner/index.html +++ b/files/ru/web/api/baseaudiocontext/createpanner/index.html diff --git a/files/ru/web/api/audiocontext/currenttime/index.html b/files/ru/web/api/baseaudiocontext/currenttime/index.html index 51370701f4..51370701f4 100644 --- a/files/ru/web/api/audiocontext/currenttime/index.html +++ b/files/ru/web/api/baseaudiocontext/currenttime/index.html diff --git a/files/ru/web/api/audiocontext/decodeaudiodata/index.html b/files/ru/web/api/baseaudiocontext/decodeaudiodata/index.html index faae982eae..faae982eae 100644 --- a/files/ru/web/api/audiocontext/decodeaudiodata/index.html +++ b/files/ru/web/api/baseaudiocontext/decodeaudiodata/index.html diff --git a/files/ru/web/api/canvas_api/tutorial/применение_стилей_и_цветов/index.html b/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html index 2c9eeaae78..2c9eeaae78 100644 --- a/files/ru/web/api/canvas_api/tutorial/применение_стилей_и_цветов/index.html +++ b/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html diff --git a/files/ru/web/api/canvas_api/tutorial/основы_анимации/index.html b/files/ru/web/api/canvas_api/tutorial/basic_animations/index.html index a47b8b734e..a47b8b734e 100644 --- a/files/ru/web/api/canvas_api/tutorial/основы_анимации/index.html +++ b/files/ru/web/api/canvas_api/tutorial/basic_animations/index.html diff --git a/files/ru/web/api/canvas_api/tutorial/композиции/index.html b/files/ru/web/api/canvas_api/tutorial/compositing/index.html index 264cc7e544..264cc7e544 100644 --- a/files/ru/web/api/canvas_api/tutorial/композиции/index.html +++ b/files/ru/web/api/canvas_api/tutorial/compositing/index.html diff --git a/files/ru/web/api/canvas_api/tutorial/рисование_фигур/index.html b/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html index f6ca6c23ef..f6ca6c23ef 100644 --- a/files/ru/web/api/canvas_api/tutorial/рисование_фигур/index.html +++ b/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html diff --git a/files/ru/web/api/canvas_api/tutorial/рисование_текста/index.html b/files/ru/web/api/canvas_api/tutorial/drawing_text/index.html index 90915c5e09..90915c5e09 100644 --- a/files/ru/web/api/canvas_api/tutorial/рисование_текста/index.html +++ b/files/ru/web/api/canvas_api/tutorial/drawing_text/index.html diff --git a/files/ru/web/api/canvas_api/tutorial/использование_изображений/index.html b/files/ru/web/api/canvas_api/tutorial/using_images/index.html index 3ce4b8384e..3ce4b8384e 100644 --- a/files/ru/web/api/canvas_api/tutorial/использование_изображений/index.html +++ b/files/ru/web/api/canvas_api/tutorial/using_images/index.html diff --git a/files/ru/web/api/randomsource/getrandomvalues/index.html b/files/ru/web/api/crypto/getrandomvalues/index.html index c59f5dde54..c59f5dde54 100644 --- a/files/ru/web/api/randomsource/getrandomvalues/index.html +++ b/files/ru/web/api/crypto/getrandomvalues/index.html diff --git a/files/ru/web/api/css_object_model/ориентация_экрана/index.html b/files/ru/web/api/css_object_model/managing_screen_orientation/index.html index a6b16cba4a..a6b16cba4a 100644 --- a/files/ru/web/api/css_object_model/ориентация_экрана/index.html +++ b/files/ru/web/api/css_object_model/managing_screen_orientation/index.html diff --git a/files/ru/web/api/document/createelement/index.html b/files/ru/web/api/document/createelement/index.html new file mode 100644 index 0000000000..15542d751d --- /dev/null +++ b/files/ru/web/api/document/createelement/index.html @@ -0,0 +1,82 @@ +--- +title: document.createElement +slug: DOM/document.createElement +tags: + - DOM + - Gecko +translation_of: Web/API/Document/createElement +--- +<p>{{ ApiRef() }}</p> + +<h3 id=".D0.9E.D0.B1.D1.89.D0.B0.D1.8F_.D0.B8.D0.BD.D1.84.D0.BE.D1.80.D0.BC.D0.B0.D1.86.D0.B8.D1.8F" name=".D0.9E.D0.B1.D1.89.D0.B0.D1.8F_.D0.B8.D0.BD.D1.84.D0.BE.D1.80.D0.BC.D0.B0.D1.86.D0.B8.D1.8F">Общая информация</h3> + +<p>В HTML-документах создает элемент c тем тегом, что указан в аргументе или <code>HTMLUnknownElement</code>, если имя тега не распознаётся.</p> + +<p>В XUL-документах создает указанный в аргументе элемент XUL.</p> + +<p>В остальных случаях создаёт элемент с нулевым <span id="result_box" lang="ru"><span class="hps"><em>NamespaceURI</em>.</span></span></p> + +<h3 id=".D0.A1.D0.B8.D0.BD.D1.82.D0.B0.D0.BA.D1.81.D0.B8.D1.81" name=".D0.A1.D0.B8.D0.BD.D1.82.D0.B0.D0.BA.D1.81.D0.B8.D1.81">Параметры</h3> + +<pre class="eval"><var>var element</var> = <var>document</var>.createElement(<var>tagName, [options]</var>); +</pre> + +<ul> + <li><code>element</code> — созданый объект <a href="../Web/API/Element">элемента</a>.</li> + <li><code>tagName</code> — строка, указывающая элемент какого типа должен быть создан. <a href="ru/DOM/element.nodeName">nodeName</a> создается и инициализируется со значением <code>tagName</code>.</li> + <li> + <p><code>options</code> — необязательный параметр, объект <code>ElementCreationOptions</code>, который может содержать только поле <code>is</code>, указывающее имя пользовательского элемента, созданного с помощью <code>customElements.define()</code> (см. <a href="/ru/docs/Web/Web_Components">Веб-компоненты</a>).</p> + </li> +</ul> + +<h3 id=".D0.9F.D1.80.D0.B8.D0.BC.D0.B5.D1.80.D1.8B" name=".D0.9F.D1.80.D0.B8.D0.BC.D0.B5.D1.80.D1.8B">Пример</h3> + +<p>Данный пример создает новый элемент <code><div></code> и вставляет его перед элементом с идентификатором <code>org_div1</code>:</p> + +<pre class="brush: js"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>||Работа с элементами||<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">> +</span></span><div><h1>Привет!</h1></div> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span>'org_div1'</span><span class="punctuation token">></span></span>Текст выше сгенерирован автоматически.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">> + +<script> +<code class="language-html"><code class="language-javascript"> document.body.onload = addElement; +</code></code> var my_div = newDiv = null; + + function addElement() { + + // Создаем новый элемент div + // и добавляем в него немного контента + + var newDiv = document.createElement("div"); + newDiv.innerHTML = "<h1>Привет!</h1>"; + + // Добавляем только что созданый элемент в дерево DOM + + my_div = document.getElementById("org_div1"); + document.body.insertBefore(newDiv, my_div); + } +</script> +</html></span></span> +</code></pre> + +<h3 id=".D0.97.D0.B0.D0.BC.D0.B5.D1.87.D0.B0.D0.BD.D0.B8.D1.8F" name=".D0.97.D0.B0.D0.BC.D0.B5.D1.87.D0.B0.D0.BD.D0.B8.D1.8F">Заметки</h3> + +<p>Если существуют атрибуты со значениями по умолчанию, атрибуты узлов предоставляющие их создаются автоматически и применяются к элементу.</p> + +<p>Для создания элементов с заданым пространством имен используйте метод <a href="ru/DOM/document.createElementNS">createElementNS</a>.</p> + +<p>Реализация <code>createElement </code>в Gecko не соответствует DOM спецификации для XUL и XHTML документов: <code>localName</code> и <code>namespaceURI</code> не устанавливаются в <code>null</code> в созданном документе. Смотрите {{ Bug(280692) }} для подробностей.</p> + +<p>Для обратной совместимости с предыдущими версиями спецификации пользовательских элементов некоторые браузеры позволяют передавать здесь строку вместо объекта, где значением строки является имя тега пользовательского элемента.</p> + +<h3 id=".D0.A1.D0.BF.D0.B5.D1.86.D0.B8.D1.84.D0.B8.D0.BA.D0.B0.D1.86.D0.B8.D0.B8" name=".D0.A1.D0.BF.D0.B5.D1.86.D0.B8.D1.84.D0.B8.D0.BA.D0.B0.D1.86.D0.B8.D0.B8">Спецификации</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-2141741547">DOM 2 Модуль: createElement</a></p> + +<p>{{ languages( { "fr": "fr/DOM/document.createElement", "it": "it/DOM/document.createElement", "pl": "pl/DOM/document.createElement" } ) }}</p> diff --git a/files/ru/web/api/document/images/index.html b/files/ru/web/api/document/images/index.html new file mode 100644 index 0000000000..c9ba4ac1e2 --- /dev/null +++ b/files/ru/web/api/document/images/index.html @@ -0,0 +1,29 @@ +--- +title: document.images +slug: DOM/document.images +tags: + - DOM + - JavaScript +translation_of: Web/API/Document/images +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">Кратко об обьекте</h3> +<p><code>document.images</code> возвращает коллекцию <a href="/ru/Web/API/HTMLImageElement" title="en/DOM/Image">изображений</a> в текущем HTML документе.</p> +<h3 id="Syntax" name="Syntax">Синтаксис</h3> +<pre class="eval"><em>var htmlCollection</em> = document.images; +</pre> +<h3 id="Example" name="Example">Пример</h3> +<pre class="eval">var images = document.images; + +for(var i = 0; i < images.length; i++) { + if(images[i].src == "banner.gif") { + alert('Баннер найден!'); + }; +}; +</pre> +<h3 id="Notes" name="Notes">Примечания</h3> +<p><code>document.images.length</code> — возвращает количество изображений на странице.</p> +<p><code>document.images</code> является частью DOM HTML, и работает только в HTML документах.</p> +<h3 id="Specification" name="Specification">Спецификация</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-90379117">DOM Level 2 HTML: HTMLDocument.images</a></p> +<p>{{ languages( { "en": "en/DOM/document.images", "fr": "fr/DOM/document.images", "pl": "pl/DOM/document.images","ru":"ru/DOM/document.images" } ) }}</p> diff --git a/files/ru/web/events/readystatechange/index.html b/files/ru/web/api/document/readystatechange_event/index.html index 5a268b033f..5a268b033f 100644 --- a/files/ru/web/events/readystatechange/index.html +++ b/files/ru/web/api/document/readystatechange_event/index.html diff --git a/files/ru/web/api/document_object_model/events/index.html b/files/ru/web/api/document_object_model/events/index.html new file mode 100644 index 0000000000..eeadb57328 --- /dev/null +++ b/files/ru/web/api/document_object_model/events/index.html @@ -0,0 +1,80 @@ +--- +title: Events and the DOM +slug: DOM/DOM_Reference/Events +translation_of: Web/API/Document_Object_Model/Events +--- +<p>Вступление</p> + +<h2 id="Вступление">Вступление</h2> + +<p>В этой главе описывается модель событий DOM. <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">Топ скрыть</a> Интерфейс сам по себе описано, а также интерфейсы для регистрации событий на узлах в DOM, Также а <a href="/ru/docs/Web/API/EventTarget.addEventListener">слушатели события</a> Главного , Также а Несколько больше Примеры, которые показывают, как Различные интерфейсы связаны друг события Главного с другом.</p> + +<p>Существует отличная диаграмма, которая четко объясняет события трех этапов через DOM в проекте <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM Level 3 Events</a> .</p> + +<p>Также см. <a href="/ru/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation">Пример 5: Распространение событий</a> в главе «Примеры» для более подробного примера.</p> + +<h2 id="Регистрация_слушателей_событий">Регистрация слушателей событий</h2> + +<p>Есть 3 способа регистрации обработанных событий для элемента DOM.</p> + +<h3 id="EventTarget.addEventListener"><a href="/ru/docs/Web/API/EventTarget.addEventListener"><code>EventTarget.addEventListener</code></a></h3> + +<pre class="brush: js">// Предполагая, что myButton является элементом кнопки +myButton.addEventListener ('click', greet, false); +function greet (event) { + // распечатать и посмотреть на объект события + // всегда печатать аргументы в случае пропуска любых других аргументов + console.log ('greet:', arguments); + оповещение («Привет, мир»); +} +</pre> + +<p>Это метод, который вы должны использовать на современных веб-страницах.</p> + +<p>Примечание. Internet Explorer 6-8 не поддерживает этот метод, предлагая аналогичный {{domxref ("EventTarget.attachEvent")}} API. Для кросс-браузерной совместимости используйте одну из множества доступных библиотек JavaScript.</p> + +<p>Дополнительную информацию можно найти на справочной странице {{domxref ("EventTarget.addEventListener")}}.</p> + +<h3 id="Атрибут_HTML"><a href="/ru/docs/Web/Guide/HTML/Event_attributes">Атрибут HTML</a></h3> + +<pre class="brush: html"><button onclick = "alert ('Hello world!')"> +</pre> + +<p>Код JavaScript в атрибуте передается объекту Event через <code>event</code>параметр. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">Возвращаемое значение обрабатывается особым образом, описанным в спецификации HTML</a> .</p> + +<p>Этого пути следует избегать. Это делает разметку больше и менее читаемой. Проблемы содержания / структуры и поведения плохо разделены, что затрудняет поиск ошибки.</p> + +<h3 id="Свойства_элемента_DOM">Свойства элемента DOM</h3> + +<pre class="brush: js">// Предполагая, что myButton является элементом кнопки +<code>myButton.onclick = function(event){alert('Hello world');};</code> +</pre> + +<p>Функция может быть определена для получения <code>event</code>параметра. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">Возвращаемое значение обрабатывается особым образом, описанным в спецификации HTML</a> .</p> + +<p>Проблема этого метода в том, что для каждого элемента и для каждого события может быть установлен только один обработчик.</p> + +<h2 id="Доступ_к_интерфейсам_событий">Доступ к интерфейсам событий</h2> + +<p>Обработчики событий могут быть присоединены к различным объектам, включая элементы DOM, документ, <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects">объект окна</a> и т. Д. Когда происходит событие, объект события создается и последовательно передается слушателям события.</p> + +<p>Интерфейс {{domxref ("Event")}} доступен из функции-обработчика через объект события, переданный в качестве первого аргумента. В следующем простом примере показано, как объект события передается в функцию-обработчик события и может использоваться из одной такой функции.</p> + +<pre class="brush: js"><code>function print(evt) {</code> + // параметру evt автоматически назначается объект события + // позаботимся о различиях в console.log и alert + <code>console.log('print:', evt); + alert(evt); +}</code> +// любая функция должна иметь подходящее имя, это то, что называется семантическим +<code>table_el.onclick = print; </code> +</pre> + +<h2 id="Subnav">Subnav</h2> + +<ul> + <li><a href="/ru/docs/Web/API/Document_Object_Model">DOM Ссылка</a></li> + <li><a href="/ru/docs/Web/API/Document_Object_Model/Introduction">Введение в DOM</a></li> + <li><a href="/ru/docs/Web/API/Document_Object_Model/Events">События и ДОМ</a></li> + <li><a href="/ru/docs/Web/API/Document_Object_Model/Examples">Примеры</a></li> +</ul> diff --git a/files/ru/web/api/document_object_model/examples/index.html b/files/ru/web/api/document_object_model/examples/index.html new file mode 100644 index 0000000000..a3332f7585 --- /dev/null +++ b/files/ru/web/api/document_object_model/examples/index.html @@ -0,0 +1,382 @@ +--- +title: Examples of web and XML development using the DOM +slug: DOM/DOM_Reference/Examples +translation_of: Web/API/Document_Object_Model/Examples +--- +<p>В этой главе представлены более длинные примеры разработки веб-сайтов и XML с использованием DOM. По возможности, примеры используют общие API, трюки и шаблоны в JavaScript для управления объектом документа.</p> + +<h2 id="Example_1_height_and_width" name="Example_1:_height_and_width">Пример 1: высота и ширина</h2> + +<p>В следующем примере показано использование свойств высоты и ширины для изображений разных размеров:<br> + </p> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>width/height example</title> +<script> +function init() { + var arrImages = new Array(3); + + arrImages[0] = document.getElementById("image1"); + arrImages[1] = document.getElementById("image2"); + arrImages[2] = document.getElementById("image3"); + + var objOutput = document.getElementById("output"); + var strHtml = "<ul>"; + + for (var i = 0; i < arrImages.length; i++) { + strHtml += "<li>image" + (i+1) + + ": height=" + arrImages[i].height + + ", width=" + arrImages[i].width + + ", style.height=" + arrImages[i].style.height + + ", style.width=" + arrImages[i].style.width + + "<\/li>"; + } + + strHtml += "<\/ul>"; + + objOutput.innerHTML = strHtml; +} +</script> +</head> +<body onload="init();"> + +<p>Image 1: no height, width, or style + <img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif"> +</p> + +<p>Image 2: height="50", width="500", but no style + <img id="image2" + src="http://www.mozilla.org/images/mozilla-banner.gif" + height="50" width="500"> +</p> + +<p>Image 3: no height, width, but style="height: 50px; width: 500px;" + <img id="image3" + src="http://www.mozilla.org/images/mozilla-banner.gif" + style="height: 50px; width: 500px;"> +</p> + +<div id="output"> </div> +</body> +</html> +</pre> + +<h2 id="Example_2_Image_Attributes" name="Example_2:_Image_Attributes">Пример 2: Аттрибуты Изображения</h2> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>Modifying an image border</title> + +<script> +function setBorderWidth(width) { + document.getElementById("img1").style.borderWidth = width + "px"; +} +</script> +</head> + +<body> +<p> + <img id="img1" + src="image1.gif" + style="border: 5px solid green;" + width="100" height="100" alt="border test"> +</p> + +<form name="FormName"> + <input type="button" value="Make border 20px-wide" onclick="setBorderWidth(20);" /> + <input type="button" value="Make border 5px-wide" onclick="setBorderWidth(5);" /> +</form> + +</body> +</html> +</pre> + +<h2 id="Example_3_Manipulating_Styles" name="Example_3:_Manipulating_Styles">Пример 3: Управление Стилями</h2> + +<p>В этом простом примере, некоторые базовые свойства стиля элемента абзаца HTML доступны с помощью объекта стиля элемента и свойств стиля CSS этого объекта, который можно получить и установить из DOM. В этом случае вы напрямую управляете отдельными стилями. В следующем примере (см. Пример 4), вы можете использовать таблицы стилей и их правила для изменения стилей для целых документов.</p> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>Changing color and font-size example</title> + +<script> +function changeText() { + var p = document.getElementById("pid"); + + p.style.color = "blue" + p.style.fontSize = "18pt" +} +</script> +</head> +<body> + +<p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> + +<form> + <p><input value="rec" type="button" onclick="changeText();" /></p> +</form> + +</body> +</html> +</pre> + +<h2 id="Example_4_Using_Stylesheets" name="Example_4:_Using_Stylesheets">Пример 4: Использование Стилей</h2> + +<p>Свойство styleSheets объекта документа возвращает список таблиц стилей, которые были загружены в этот документ. Вы можете получить доступ к этим таблицам стилей и их правилам индивидуально, используя объекты таблицы стилей, стилей и CSS правил объекта, как показано в этом примере, который выводит все селектора правил стиля в консоль.</p> + +<pre class="brush:js">var ss = document.styleSheets; + +for(var i = 0; i < ss.length; i++) { + for(var j = 0; j < ss[i].cssRules.length; j++) { + dump( ss[i].cssRules[j].selectorText + "\n" ); + } +}</pre> + +<p>Для документа с единой таблицей стилей, в которой определены следующие три правила:</p> + +<pre class="brush:css">body { background-color: darkblue; } +p { font-face: Arial; font-size: 10pt; margin-left: .125in; } +#lumpy { display: none; } +</pre> + +<p>Этот скрипт выводит следующее:</p> + +<pre>BODY +P +#LUMPY +</pre> + +<h2 id="Example_5_Event_Propagation" name="Example_5:_Event_Propagation">Пример 5: Распространение Событий</h2> + +<p>Этот пример демонстрирует, как события срабатывают и обрабатываются в DOM очень простым путём. Когда загружается BODY в составе HTML-документа, обработчик событий регистрируется в верхней строке таблицы TABLE. Обработчик событий реагирует на событие запуском функции stopEvent, изменяющей значение в нижней ячейке.</p> + +<p>Однако, stopEvent также вызывает метод объекта событий, {{domxref("event.stopPropagation")}}, что препятствует дальнейшему всплытию события в DOM. Обратите внимание, что сама таблица имеет {{domxref("element.onclick","onclick")}} обработчик событий, который должен отображать сообщение при нажатии на таблицу. Но метод stopEvent метод прекратил распространение, и поэтому после обновления данных в таблице фаза события эффективно завершается, и отображается окно предупреждения для подтверждения.</p> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>Event Propagation</title> + +<style> +#t-daddy { border: 1px solid red } +#c1 { background-color: pink; } +</style> + +<script> +function stopEvent(ev) { + c2 = document.getElementById("c2"); + c2.innerHTML = "hello"; + + // this ought to keep t-daddy from getting the click. + ev.stopPropagation(); + alert("event propagation halted."); +} + +function load() { + elem = document.getElementById("tbl1"); + elem.addEventListener("click", stopEvent, false); +} +</script> +</head> + +<body onload="load();"> + +<table id="t-daddy" onclick="alert('hi');"> + <tr id="tbl1"> + <td id="c1">one</td> + </tr> + <tr> + <td id="c2">two</td> + </tr> +</table> + +</body> +</html> +</pre> + +<h2 id="Example_6_getComputedStyle" name="Example_6:_getComputedStyle">Пример 6: getComputedStyle</h2> + +<p>Этот пример показывает как {{domxref("window.getComputedStyle")}} метод может использоваться для получения стилей элемента, которые не заданы с помощью атрибута style или с помощью JavaScript (e.g., <code>elt.style.backgroundColor="rgb(173, 216, 230)"</code>). Эти последние типы стилей можно получить с помощью более прямых {{domxref("element.style", "elt.style")}} свойств, которые указаны в <a href="/en-US/docs/Web/CSS/Reference">DOM CSS Properties List</a>.</p> + +<p>getComputedStyle () возвращает объект ComputedCSSStyleDeclaration, свойства индивидуального стиля которого могут ссылаться на метод getPropertyValue () этого объекта, как показано в следующем примере документа.</p> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> + +<title>getComputedStyle example</title> + +<script> +function cStyles() { + var RefDiv = document.getElementById("d1"); + var txtHeight = document.getElementById("t1"); + var h_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height"); + + txtHeight.value = h_style; + + var txtWidth = document.getElementById("t2"); + var w_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width"); + + txtWidth.value = w_style; + + var txtBackgroundColor = document.getElementById("t3"); + var b_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("background-color"); + + txtBackgroundColor.value = b_style; +} +</script> + +<style> +#d1 { + margin-left: 10px; + background-color: rgb(173, 216, 230); + height: 20px; + max-width: 20px; +} +</style> + +</head> + +<body> + +<div id="d1">&nbsp;</div> + +<form action=""> + <p> + <button type="button" onclick="cStyles();">getComputedStyle</button> + height<input id="t1" type="text" value="1" /> + max-width<input id="t2" type="text" value="2" /> + bg-color<input id="t3" type="text" value="3" /> + </p> +</form> + +</body> +</html> +</pre> + +<h2 id="Example_7_Displaying_Event_Object_Properties" name="Example_7:_Displaying_Event_Object_Properties">Пример 7: Отображение Свойств Событий Объекта</h2> + + + +<p>В этом примере используются методы DOM для отображения всех свойств объекта {{domxref ("window.onload")}} {{domxref ("event")}} и их значений в таблице. Он также показывает полезный метод использования цикла for..in для итерации по свойствам объекта для получения их значений.</p> + +<p>Свойства объектов событий сильно различаются между браузерами, WHATWG DOM Standard перечисляет стандартные свойства, однако многие браузеры значительно расширили их.</p> + +<p>Поместите следующий код в пустой текстовый файл и загрузите его в различные браузеры, вы будете удивлены различным количеством и именами свойств. Вы также можете добавить некоторые элементы на страницу и вызвать эту функцию из разных обработчиков событий.</p> + + + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>Show Event properties</title> + +<style> +table { border-collapse: collapse; } +thead { font-weight: bold; } +td { padding: 2px 10px 2px 10px; } + +.odd { background-color: #efdfef; } +.even { background-color: #ffffff; } +</style> + +<script> + +function showEventProperties(e) { + function addCell(row, text) { + var cell = row.insertCell(-1); + cell.appendChild(document.createTextNode(text)); + } + + var e = e || window.event; + document.getElementById('eventType').innerHTML = e.type; + + var table = document.createElement('table'); + var thead = table.createTHead(); + var row = thead.insertRow(-1); + var lableList = ['#', 'Property', 'Value']; + var len = lableList.length; + + for (var i=0; i<len; i++) { + addCell(row, lableList[i]); + } + + var tbody = document.createElement('tbody'); + table.appendChild(tbody); + + for (var p in e) { + row = tbody.insertRow(-1); + row.className = (row.rowIndex % 2)? 'odd':'even'; + addCell(row, row.rowIndex); + addCell(row, p); + addCell(row, e[p]); + } + + document.body.appendChild(table); +} + +window.onload = function(event){ + showEventProperties(event); +} +</script> +</head> + +<body> +<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1> +</body> + +</html> +</pre> + +<h2 id="Example_8_Using_the_DOM_Table_Interface" name="Example_8:_Using_the_DOM_Table_Interface">Пример 8: Использование интерфейса таблицы DOM</h2> + + + +<p>Интерфейс DOM HTMLTableElement предоставляет некоторые удобные методы для создания и управления таблицами. Два часто используемых метода: {{domxref ("HTMLTableElement.insertRow")}} и {{domxref ("tableRow.insertCell")}}.</p> + +<p>Чтобы добавить строку и некоторые ячейки в существующую таблицу:</p> + + + +<pre class="brush:html"><table id="table0"> + <tr> + <td>Row 0 Cell 0</td> + <td>Row 0 Cell 1</td> + </tr> +</table> + +<script> +var table = document.getElementById('table0'); +var row = table.insertRow(-1); +var cell, + text; + +for (var i = 0; i < 2; i++) { + cell = row.insertCell(-1); + text = 'Row ' + row.rowIndex + ' Cell ' + i; + cell.appendChild(document.createTextNode(text)); +} +</script> +</pre> + +<h3 id="Notes" name="Notes">Заметки</h3> + +<ul> + <li>Свойство таблицы {{domxref ("element.innerHTML", "innerHTML")}} никогда не должно использоваться для изменения таблицы, хотя вы можете использовать ее для записи всей таблицы или содержимого ячейки.</li> + <li>Если для создания строк и ячеек используются методы DOM Core {{domxref ("document.createElement")}} и {{domxref ("Node.appendChild")}}, IE требует, чтобы они были добавлены к элементу tbody, тогда как другие браузеры позволят добавлять к элементу таблицы (строки будут добавлены к последнему элементу tbody).</li> + <li>Существует ряд других методов, относящихся к интерфейсу таблицы, которые могут использоваться для создания и изменения таблиц.</li> +</ul> + +<h2 id="Subnav">Subnav</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li> +</ul> diff --git a/files/ru/web/api/document_object_model/index.html b/files/ru/web/api/document_object_model/index.html new file mode 100644 index 0000000000..db06b01dd8 --- /dev/null +++ b/files/ru/web/api/document_object_model/index.html @@ -0,0 +1,387 @@ +--- +title: Руководство по DOM +slug: DOM/DOM_Reference +tags: + - DOM + - DOM Reference + - DOM интерфейс + - Intermediate + - Руководство +translation_of: Web/API/Document_Object_Model +--- +<p><strong>Объектная Модель Документа (<em>DOM</em>)</strong> является программным интерфейсом для HTML, XML и SVG документов. Это обеспечивает структурированное представление документа (дерева), и определяет способ, по которому структура может быть доступна для программы, для изменения структуры документа, его стиля и содержания. DOM обеспечивает представление документа в виде структурированной группы узлов и объектов, которые имеют свойства и методы. По сути, она связывает веб -страницы со скриптами или языками программирования.</p> + +<p>DOM чаще всего используется в JavaScript, но не является его частью, поэтому иногда с DOM работают в других языках.</p> + +<p><a href="/ru/docs/DOM/DOM_Reference/Введение">Введение</a> в DOM доступно.</p> + +<h2 id="DOM_интерфейсы">DOM интерфейсы</h2> + +<div class="index"> +<ul> + <li>{{domxref("Attr")}}</li> + <li>{{domxref("CharacterData")}}</li> + <li>{{domxref("ChildNode")}} {{experimental_inline}}</li> + <li>{{domxref("Comment")}}</li> + <li>{{domxref("CustomEvent")}}</li> + <li>{{domxref("Document")}}</li> + <li>{{domxref("DocumentFragment")}}</li> + <li>{{domxref("DocumentType")}}</li> + <li>{{domxref("DOMError")}}</li> + <li>{{domxref("DOMException")}}</li> + <li>{{domxref("DOMImplementation")}}</li> + <li>{{domxref("DOMString")}}</li> + <li>{{domxref("DOMTimeStamp")}}</li> + <li>{{domxref("DOMSettableTokenList")}}</li> + <li>{{domxref("DOMStringList")}}</li> + <li>{{domxref("DOMTokenList")}}</li> + <li>{{domxref("Element")}}</li> + <li>{{domxref("Event")}}</li> + <li>{{domxref("EventTarget")}}</li> + <li>{{domxref("HTMLCollection")}}</li> + <li>{{domxref("MutationObserver")}}</li> + <li>{{domxref("MutationRecord")}}</li> + <li>{{domxref("Node")}}</li> + <li>{{domxref("NodeFilter")}}</li> + <li>{{domxref("NodeIterator")}}</li> + <li>{{domxref("NodeList")}}</li> + <li>{{domxref("ParentNode")}} {{experimental_inline}}</li> + <li>{{domxref("ProcessingInstruction")}}</li> + <li>{{domxref("Promise")}} {{experimental_inline}}</li> + <li>{{domxref("PromiseResolver")}} {{experimental_inline}}</li> + <li>{{domxref("Range")}}</li> + <li>{{domxref("Text")}}</li> + <li>{{domxref("TreeWalker")}}</li> + <li>{{domxref("URL")}}</li> + <li>{{domxref("Window")}}</li> + <li>{{domxref("Worker")}}</li> + <li>{{domxref("XMLDocument")}} {{experimental_inline}}</li> +</ul> +</div> + +<h2 id="Устаревшие_интерфейсы">Устаревшие интерфейсы</h2> + +<p><span id="result_box" lang="ru"><span class="hps">Объектная модель документа</span> <span class="hps">находится в</span> <span class="hps">процессе</span><span class="hps"> значительного упрощения</span><span>.</span> <span class="hps">Для того,</span> <span class="hps">чтобы достигнуть этого</span> <span class="hps">следующие интерфейсы</span><span>, присутствующие на</span> <span class="hps">различных</span> <span class="hps">DOM</span> level <span class="hps">3</span> <span class="hps">или</span> <span class="hps">более ранних</span> <span class="hps">спецификациях</span> <span class="hps">были удалены</span><span>.</span> <span class="hps">До сих пор неясно</span><span>, будут ли</span> <span class="hps">некоторые из них возвращены</span><span>,</span> <span class="hps">но на данный момент</span> <span class="hps">они</span> <span class="hps">должны быть рассмотрены</span> <span class="hps">как устаревшие,</span> <span class="hps">и их использования следует избегать</span><span>:</span></span></p> + +<div class="index"> +<ul> + <li>{{domxref("CDATASection")}}</li> + <li>{{domxref("DOMConfiguration")}}</li> + <li>{{domxref("DOMErrorHandler")}}</li> + <li>{{domxref("DOMImplementationList")}}</li> + <li>{{domxref("DOMImplementationRegistry")}}</li> + <li>{{domxref("DOMImplementationSource")}}</li> + <li>{{domxref("DOMLocator")}}</li> + <li>{{domxref("DOMObject")}}</li> + <li>{{domxref("DOMUserData")}}</li> + <li>{{domxref("Entity")}}</li> + <li>{{domxref("EntityReference")}}</li> + <li>{{domxref("NamedNodeMap")}}</li> + <li>{{domxref("NameList")}}</li> + <li>{{domxref("Notation")}}</li> + <li>{{domxref("TypeInfo")}}</li> + <li>{{domxref("UserDataHandler")}}</li> +</ul> +</div> + +<h2 id="HTML_интерфейсы">HTML интерфейсы</h2> + +<p>Документ, содержащий HTML описывается с помощью {{domxref("HTMLDocument")}} интерфейса. Обратите внимание, что HTML спецификация также расширяет {{domxref("Document")}} интерфейс.</p> + +<p><code><font face="Open Sans, Arial, sans-serif">Объект </font>HTMLDocument</code> также даёт доступ к следующим возможностям браузера: вкладки, окна, в которых отрисовывается страница, используя интерфейс {{domxref("Window")}}, асcоциированный с ним {{domxref("window.style", "Style")}} (обычно CSS), история браузера, относящаяся к контексту, {{domxref("window.history", "History")}}, в конце концов, {{domxref("Selection")}} в документе.</p> + +<h3 id="Интерфейсы_HTML_элементов">Интерфейсы HTML элементов</h3> + +<div class="index"> +<ul> + <li>{{domxref("HTMLAnchorElement")}}</li> + <li>{{domxref("HTMLAppletElement")}}</li> + <li>{{domxref("HTMLAreaElement")}}</li> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLBaseElement")}}</li> + <li>{{domxref("HTMLBodyElement")}}</li> + <li>{{domxref("HTMLBRElement")}}</li> + <li>{{domxref("HTMLButtonElement")}}</li> + <li>{{domxref("HTMLCanvasElement")}}</li> + <li>{{domxref("HTMLDataElement")}}</li> + <li>{{domxref("HTMLDataListElement")}}</li> + <li>{{domxref("HTMLDirectoryElement")}}</li> + <li>{{domxref("HTMLDivElement")}}</li> + <li>{{domxref("HTMLDListElement")}}</li> + <li>{{domxref("HTMLElement")}}</li> + <li>{{domxref("HTMLEmbedElement")}}</li> + <li>{{domxref("HTMLFieldSetElement")}}</li> + <li>{{domxref("HTMLFontElement")}}</li> + <li>{{domxref("HTMLFormElement")}}</li> + <li>{{domxref("HTMLFrameElement")}}</li> + <li>{{domxref("HTMLFrameSetElement")}}</li> + <li>{{domxref("HTMLHeadElement")}}</li> + <li>{{domxref("HTMLHeadingElement")}}</li> + <li>{{domxref("HTMLHtmlElement")}}</li> + <li>{{domxref("HTMLHRElement")}}</li> + <li>{{domxref("HTMLIFrameElement")}}</li> + <li>{{domxref("HTMLImageElement")}}</li> + <li>{{domxref("HTMLInputElement")}}</li> + <li>{{domxref("HTMLKeygenElement")}}</li> + <li>{{domxref("HTMLLabelElement")}}</li> + <li>{{domxref("HTMLLegendElement")}}</li> + <li>{{domxref("HTMLLIElement")}}</li> + <li>{{domxref("HTMLLinkElement")}}</li> + <li>{{domxref("HTMLMapElement")}}</li> + <li>{{domxref("HTMLMediaElement")}}</li> + <li>{{domxref("HTMLMenuElement")}}</li> + <li>{{domxref("HTMLMetaElement")}}</li> + <li>{{domxref("HTMLMeterElement")}}</li> + <li>{{domxref("HTMLModElement")}}</li> + <li>{{domxref("HTMLObjectElement")}}</li> + <li>{{domxref("HTMLOListElement")}}</li> + <li>{{domxref("HTMLOptGroupElement")}}</li> + <li>{{domxref("HTMLOptionElement")}}</li> + <li>{{domxref("HTMLOutputElement")}}</li> + <li>{{domxref("HTMLParagraphElement")}}</li> + <li>{{domxref("HTMLParamElement")}}</li> + <li>{{domxref("HTMLPreElement")}}</li> + <li>{{domxref("HTMLProgressElement")}}</li> + <li>{{domxref("HTMLQuoteElement")}}</li> + <li>{{domxref("HTMLScriptElement")}}</li> + <li>{{domxref("HTMLSelectElement")}}</li> + <li>{{domxref("HTMLSourceElement")}}</li> + <li>{{domxref("HTMLSpanElement")}}</li> + <li>{{domxref("HTMLStyleElement")}}</li> + <li>{{domxref("HTMLTableElement")}}</li> + <li>{{domxref("HTMLTableCaptionElement")}}</li> + <li>{{domxref("HTMLTableCellElement")}}</li> + <li>{{domxref("HTMLTableDataCellElement")}}</li> + <li>{{domxref("HTMLTableHeaderCellElement")}}</li> + <li>{{domxref("HTMLTableColElement")}}</li> + <li>{{domxref("HTMLTableRowElement")}}</li> + <li>{{domxref("HTMLTableSectionElement")}}</li> + <li>{{domxref("HTMLTextAreaElement")}}</li> + <li>{{domxref("HTMLTimeElement")}}</li> + <li>{{domxref("HTMLTitleElement")}}</li> + <li>{{domxref("HTMLTrackElement")}}</li> + <li>{{domxref("HTMLUListElement")}}</li> + <li>{{domxref("HTMLUnknownElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> +</ul> +</div> + +<h3 id="Другие_интерфейсы">Другие интерфейсы</h3> + +<div class="index"> +<ul> + <li>{{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasGradient")}}</li> + <li>{{domxref("CanvasPattern")}}</li> + <li>{{domxref("TextMetrics")}}</li> + <li>{{domxref("ImageData")}}</li> + <li>{{domxref("CanvasPixelArray")}}</li> + <li>{{domxref("NotifyAudioAvailableEvent")}}</li> + <li>{{domxref("HTMLAllCollection")}}</li> + <li>{{domxref("HTMLFormControlsCollection")}}</li> + <li>{{domxref("HTMLOptionsCollection")}}</li> + <li>{{domxref("HTMLPropertiesCollection")}}</li> + <li>{{domxref("DOMStringMap")}}</li> + <li>{{domxref("RadioNodeList")}}</li> + <li>{{domxref("MediaError")}}</li> +</ul> +</div> + +<h3 id="Устаревшие_HTML_интерфейсы">Устаревшие HTML интерфейсы</h3> + +<div class="index"> +<ul> + <li>{{domxref("HTMLBaseFontElement")}}</li> + <li>{{domxref("HTMLIsIndexElement")}}</li> +</ul> +</div> + +<h2 id="SVG_интерфейсы">SVG интерфейсы</h2> + +<h3 id="Интерфейсы_SVG_элементов">Интерфейсы SVG элементов</h3> + +<div class="index"> +<ul> + <li>{{domxref("SVGAElement")}}</li> + <li>{{domxref("SVGAltGlyphElement")}}</li> + <li>{{domxref("SVGAltGlyphDefElement")}}</li> + <li>{{domxref("SVGAltGlyphItemElement")}}</li> + <li>{{domxref("SVGAnimationElement")}}</li> + <li>{{domxref("SVGAnimateElement")}}</li> + <li>{{domxref("SVGAnimateColorElement")}}</li> + <li>{{domxref("SVGAnimateMotionElement")}}</li> + <li>{{domxref("SVGAnimateTransformElement")}}</li> + <li>{{domxref("SVGCircleElement")}}</li> + <li>{{domxref("SVGClipPathElement")}}</li> + <li>{{domxref("SVGColorProfileElement")}}</li> + <li>{{domxref("SVGComponentTransferFunctionElement")}}</li> + <li>{{domxref("SVGCursorElement")}}</li> + <li>{{domxref("SVGDefsElement")}}</li> + <li>{{domxref("SVGDescElement")}}</li> + <li>{{domxref("SVGElement")}}</li> + <li>{{domxref("SVGEllipseElement")}}</li> + <li>{{domxref("SVGFEBlendElement")}}</li> + <li>{{domxref("SVGFEColorMatrixElement")}}</li> + <li>{{domxref("SVGFEComponentTransferElement")}}</li> + <li>{{domxref("SVGFECompositeElement")}}</li> + <li>{{domxref("SVGFEConvolveMatrixElement")}}</li> + <li>{{domxref("SVGFEDiffuseLightingElement")}}</li> + <li>{{domxref("SVGFEDisplacementMapElement")}}</li> + <li>{{domxref("SVGFEDistantLightElement")}}</li> + <li>{{domxref("SVGFEFloodElement")}}</li> + <li>{{domxref("SVGFEGaussianBlurElement")}}</li> + <li>{{domxref("SVGFEImageElement")}}</li> + <li>{{domxref("SVGFEMergeElement")}}</li> + <li>{{domxref("SVGFEMergeNodeElement")}}</li> + <li>{{domxref("SVGFEMorphologyElement")}}</li> + <li>{{domxref("SVGFEOffsetElement")}}</li> + <li>{{domxref("SVGFEPointLightElement")}}</li> + <li>{{domxref("SVGFESpecularLightingElement")}}</li> + <li>{{domxref("SVGFESpotLightElement")}}</li> + <li>{{domxref("SVGFETileElement")}}</li> + <li>{{domxref("SVGFETurbulenceElement")}}</li> + <li>{{domxref("SVGFEFuncRElement")}}</li> + <li>{{domxref("SVGFEFuncGElement")}}</li> + <li>{{domxref("SVGFEFuncBElement")}}</li> + <li>{{domxref("SVGFEFuncAElement")}}</li> + <li>{{domxref("SVGFilterElement")}}</li> + <li>{{domxref("SVGFilterPrimitiveStandardAttributes")}}</li> + <li>{{domxref("SVGFontElement")}}</li> + <li>{{domxref("SVGFontFaceElement")}}</li> + <li>{{domxref("SVGFontFaceFormatElement")}}</li> + <li>{{domxref("SVGFontFaceNameElement")}}</li> + <li>{{domxref("SVGFontFaceSrcElement")}}</li> + <li>{{domxref("SVGFontFaceUriElement")}}</li> + <li>{{domxref("SVGForeignObjectElement")}}</li> + <li>{{domxref("SVGGElement")}}</li> + <li>{{domxref("SVGGlyphElement")}}</li> + <li>{{domxref("SVGGlyphRefElement")}}</li> + <li>{{domxref("SVGGradientElement")}}</li> + <li>{{domxref("SVGHKernElement")}}</li> + <li>{{domxref("SVGImageElement")}}</li> + <li>{{domxref("SVGLinearGradientElement")}}</li> + <li>{{domxref("SVGLineElement")}}</li> + <li>{{domxref("SVGMarkerElement")}}</li> + <li>{{domxref("SVGMaskElement")}}</li> + <li>{{domxref("SVGMetadataElement")}}</li> + <li>{{domxref("SVGMissingGlyphElement")}}</li> + <li>{{domxref("SVGMPathElement")}}</li> + <li>{{domxref("SVGPathElement")}}</li> + <li>{{domxref("SVGPatternElement")}}</li> + <li>{{domxref("SVGPolylineElement")}}</li> + <li>{{domxref("SVGPolygonElement")}}</li> + <li>{{domxref("SVGRadialGradientElement")}}</li> + <li>{{domxref("SVGRectElement")}}</li> + <li>{{domxref("SVGScriptElement")}}</li> + <li>{{domxref("SVGSetElement")}}</li> + <li>{{domxref("SVGStopElement")}}</li> + <li>{{domxref("SVGStyleElement")}}</li> + <li>{{domxref("SVGSVGElement")}}</li> + <li>{{domxref("SVGSwitchElement")}}</li> + <li>{{domxref("SVGSymbolElement")}}</li> + <li>{{domxref("SVGTextElement")}}</li> + <li>{{domxref("SVGTextPathElement")}}</li> + <li>{{domxref("SVGTitleElement")}}</li> + <li>{{domxref("SVGTRefElement")}}</li> + <li>{{domxref("SVGTSpanElement")}}</li> + <li>{{domxref("SVGUseElement")}}</li> + <li>{{domxref("SVGViewElement")}}</li> + <li>{{domxref("SVGVKernElement")}}</li> +</ul> +</div> + +<h3 id="Интерфейсы_SVG_данных">Интерфейсы SVG данных</h3> + +<p>DOM API для типов данных, используемых в определениях SVG свойств и атрибутов.</p> + +<div class="note"> +<p><strong>Замечание:</strong> Начиная с {{Gecko("5.0")}}, следующие относящиеся к SVG DOM интерфейсы, представляя списки объектов, индексируются и к ним можно иметь доступ как к массивам; к тому же, у них есть свойство длины, обозначающее количество элементов в списках: {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}} и {{domxref("SVGPointList")}}.</p> +</div> + +<h4 id="Статический_тип">Статический тип</h4> + +<div class="index"> +<ul> + <li>{{domxref("SVGAngle")}}</li> + <li>{{domxref("SVGColor")}}</li> + <li>{{domxref("SVGICCColor")}}</li> + <li>{{domxref("SVGElementInstance")}}</li> + <li>{{domxref("SVGElementInstanceList")}}</li> + <li>{{domxref("SVGLength")}}</li> + <li>{{domxref("SVGLengthList")}}</li> + <li>{{domxref("SVGMatrix")}}</li> + <li>{{domxref("SVGNumber")}}</li> + <li>{{domxref("SVGNumberList")}}</li> + <li>{{domxref("SVGPaint")}}</li> + <li>{{domxref("SVGPoint")}}</li> + <li>{{domxref("SVGPointList")}}</li> + <li>{{domxref("SVGPreserveAspectRatio")}}</li> + <li>{{domxref("SVGRect")}}</li> + <li>{{domxref("SVGStringList")}}</li> + <li>{{domxref("SVGTransform")}}</li> + <li>{{domxref("SVGTransformList")}}</li> +</ul> +</div> + +<h4 id="Анимированный_тип">Анимированный тип</h4> + +<div class="index"> +<ul> + <li>{{domxref("SVGAnimatedAngle")}}</li> + <li>{{domxref("SVGAnimatedBoolean")}}</li> + <li>{{domxref("SVGAnimatedEnumeration")}}</li> + <li>{{domxref("SVGAnimatedInteger")}}</li> + <li>{{domxref("SVGAnimatedLength")}}</li> + <li>{{domxref("SVGAnimatedLengthList")}}</li> + <li>{{domxref("SVGAnimatedNumber")}}</li> + <li>{{domxref("SVGAnimatedNumberList")}}</li> + <li>{{domxref("SVGAnimatedPreserveAspectRatio")}}</li> + <li>{{domxref("SVGAnimatedRect")}}</li> + <li>{{domxref("SVGAnimatedString")}}</li> + <li>{{domxref("SVGAnimatedTransformList")}}</li> +</ul> +</div> + +<h3 id="Относящиеся_к_SMIL">Относящиеся к SMIL</h3> + +<div class="index"> +<ul> + <li>{{domxref("ElementTimeControl")}}</li> + <li>{{domxref("TimeEvent")}}</li> +</ul> +</div> + +<h3 id="Другие_SVG_интерфейсы">Другие SVG интерфейсы</h3> + +<div class="index"> +<ul> + <li>{{domxref("SVGAnimatedPathData")}}</li> + <li>{{domxref("SVGAnimatedPoints")}}</li> + <li>{{domxref("SVGColorProfileRule")}}</li> + <li>{{domxref("SVGCSSRule")}}</li> + <li>{{domxref("SVGExternalResourcesRequired")}}</li> + <li>{{domxref("SVGFitToViewBox")}}</li> + <li>{{domxref("SVGLangSpace")}}</li> + <li>{{domxref("SVGLocatable")}}</li> + <li>{{domxref("SVGRenderingIntent")}}</li> + <li>{{domxref("SVGStylable")}}</li> + <li>{{domxref("SVGTests")}}</li> + <li>{{domxref("SVGTextContentElement")}}</li> + <li>{{domxref("SVGTextPositioningElement")}}</li> + <li>{{domxref("SVGTransformable")}}</li> + <li>{{domxref("SVGUnitTypes")}}</li> + <li>{{domxref("SVGURIReference")}}</li> + <li>{{domxref("SVGViewSpec")}}</li> + <li>{{domxref("SVGZoomAndPan")}}</li> +</ul> +</div> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference/Examples">Примеры DOM</a></li> +</ul> + +<div id="gtx-trans" style="position: absolute; left: 4px; top: 245px;"> +<div class="gtx-trans-icon"></div> +</div> diff --git a/files/ru/web/api/document_object_model/introduction/index.html b/files/ru/web/api/document_object_model/introduction/index.html new file mode 100644 index 0000000000..3c02e5799f --- /dev/null +++ b/files/ru/web/api/document_object_model/introduction/index.html @@ -0,0 +1,230 @@ +--- +title: Введение +slug: DOM/DOM_Reference/Введение +tags: + - DOM +translation_of: Web/API/Document_Object_Model/Introduction +--- +<div> +<p><span style="line-height: 1.5;">Этот раздел представляет краткое знакомство с Объектной Моделью Документа (DOM) - что такое DOM, каким образом предоставляются структуры HTML и XML документов, и как взаимодействовать с ними. Данный раздел содержит справочную информацию и примеры.</span></p> + +<h2 id="Что_такое_Объектная_Модель_Документа_DOM">Что такое Объектная Модель Документа (DOM)?</h2> + +<p>Объектная Модель Документа (DOM) – это программный интерфейс (API) для HTML и XML документов. DOM предоставляет структурированное представление документа и определяет то, как эта структура может быть доступна из программ, которые могут изменять содержимое, стиль и структуру документа. Представление DOM состоит из структурированной группы узлов и объектов, которые имеют свойства и методы. По существу, DOM соединяет веб-страницу с языками описания сценариев либо языками программирования.<br> + <br> + Веб-страница – это документ. Документ может быть представлен как в окне браузера, так и в самом HTML-коде. В любом случае, это один и тот же документ. DOM предоставляет другой способ представления, хранения и управления этого документа. DOM полностью поддерживает объектно-ориентированнное представление веб-страницы, делая возможным её изменение при помощи языка описания сценариев наподобие JavaScript.<br> + <br> + Стандарты <a class="external external-icon" href="http://www.w3.org/DOM/">W3C DOM</a> и <a class="external external-icon" href="https://dom.spec.whatwg.org/">WHATWG DOM </a>формируют основы DOM, реализованные в большинстве современных браузеров. Многие браузеры предлагают расширения за пределами данного стандарта, поэтому необходимо проверять работоспособность тех или иных возможностей DOM для каждого конкретного браузера.</p> + +<p>Например: стандарт DOM описывает, что метод <code>getElementsByTagName </code>в коде, указанном ниже, должен возращать список всех элементов <p> в документе.</p> + +<pre class="brush: js language-js" style="font-size: 14px;"><code class="language-js">paragraphs <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName<span class="punctuation token">(</span></span><span class="string token">"P"</span><span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token"> +// paragraphs[0] это первый <p> элемент +</span><span class="comment token">// paragraphs[1] это второй <p> элемент и т.д. +</span><span class="function token">alert<span class="punctuation token">(</span></span>paragraphs<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span>nodeName<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Все свойства, методы и события, доступные для управления и создания новых страниц, организованы в виде объектов. Например, объект <code>document</code>, который представляет сам документ, объект <code>table</code>, который реализует специальный интерфейс DOM<code style="font-style: normal; line-height: 1.5;"> HTMLTableElement,</code> необходимый для доступа к HTML-таблицам, и так далее. Данная документация даёт справку об объектах DOM, реализованных Gecko-подобных браузерах.</p> + +<h2 id="DOM_и_JavaScript">DOM и JavaScript</h2> + +<p>Небольшой пример выше, как почти все примеры в этой справке – это JavaScript. То есть пример <em>написан </em>на JavaScript, но при этом <em>используется </em>DOM для доступа к документу и его элементам. DOM не является языком программирования, но без него JavaScript не имел бы никакой модели или представления о веб-странице, HTML-документе, XML-документе и их элементах. Каждый элемент в документе - весь документ в целом, заголовок, таблицы внутри документа, заголовки таблицы, текст внутри ячеек таблицы - это части объектной документной модели для этого документа, поэтому все они могут быть доступны и могут изменяться с помощью DOM и скриптового языка наподобие JavaScript.</p> + +<p>Вначале JavaScript и DOM были тесно связаны, но впоследствии они развились в различные сущности. Содержимое страницы хранится в DOM и может быть доступно и изменяться с использованием JavaScript, поэтому мы можем записать это в виде приблизительного равенства:</p> + +<p>API (веб либо XML страница) = DOM + JS (язык описания скриптов)</p> + +<p>DOM спроектирован таким образом, чтобы быть независимым от любого конкретного языка программирования, обеспечивая структурное представление документа согласно единому и последовательному API. Хотя мы всецело сфокусированы на JavaScript в этой справочной документации, реализация DOM может быть построена для любого языка, как в следующем примере на Python:</p> +</div> + +<pre class="brush: python language-html"><code class="language-html"># Пример DOM на языке Python +import xml.dom.minidom as m +doc = m.parse("C:\\Projects\\Py\\chap1.xml"); +doc.nodeName # Свойство объекта документа DOM; +p_list = doc.getElementsByTagName("para");</code></pre> + +<p>Для подробной информации о том, какие технологии участвуют в написании JavaScript для веб, смотрите обзорную статью <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/JavaScript_technologies_overview" style="line-height: 1.5;">JavaScript technologies overview.</a></p> + +<h2 id="Каким_образом_доступен_DOM">Каким образом доступен DOM? </h2> + +<p>Вы не должны делать ничего особенного для работы с DOM. Различные браузеры имеют различную реализацию DOM, эти реализации показывают различную степень соответсвия с действительным стандартом DOM (это тема, которую мы пытались не затрагивать в данной документации), но каждый браузер использует свой DOM, чтобы сделать веб страницы доступными для взаимодествия с языками сценариев.</p> + +<p>При создании сценария с использованием элемента <script>, либо включая в веб страницу инструкцию для загрузки скрипта, вы можете немедленно приступить к использованию программного интерфейса (API), используя элементы <code><a href="https://developer.mozilla.org/en-US/docs/DOM/document">document</a> </code>или <code><a href="https://developer.mozilla.org/en-US/docs/DOM/window">window</a></code> для взаимодействия с самим документом, либо для получения потомков этого документа, т.е. различных элементов на странице. Ваше программирование DOM может быть чем-то простым, например, вывод сообщения с использованием функции <code><a href="https://developer.mozilla.org/en-US/docs/DOM/window.alert">alert()</a></code> объекта <code><a href="https://developer.mozilla.org/en-US/docs/DOM/window">window</a></code>, или использовать более сложные методы DOM, которые создают новое содержимое, как показанно в следующем примере:</p> + +<pre class="language-html"><body onload="window.alert('добро пожаловать на мою домашнюю страницу!');"> +</pre> + +<p>В следующем примере внутри элемента <code><script></code> определен код JavaScript, данный код устанавливает функцию при загрузке документа (когда весь DOM доступен для использования). Эта функция создает новый элемент H1, добавляет текст в данный элемент, а затем добавляет H1 в дерево документа:</p> + +<pre class="brush: html language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> + <span class="script token"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span> + <span class="comment token"> // запуск данной функции при загрузке документа +</span> window<span class="punctuation token">.</span>onload <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token"> // создание нескольких элементов +</span> <span class="comment token"> // в пустой HTML странице +</span> heading <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement<span class="punctuation token">(</span></span><span class="string token">"h1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + heading_text <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode<span class="punctuation token">(</span></span><span class="string token">"Big Head!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + heading<span class="punctuation token">.</span><span class="function token">appendChild<span class="punctuation token">(</span></span>heading_text<span class="punctuation token">)</span><span class="punctuation token">;</span> + document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild<span class="punctuation token">(</span></span>heading<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> + +<h2 id="Важные_типы_данных">Важные типы данных</h2> + +<p>Данный раздел предназначен для краткого описания различных типов и объектов в простой и доступной манере. Существует некоторое количество различных типов данных, которые используются в API, на которые вы должны обратить внимание. Для простоты, синтаксис примеров в данном разделе обычно ссылается на узлы как на <code>element</code>s, на массивы узлов как на <code>nodeList</code>s ( либо просто <code>element</code>s ) и на атрибуты узла, просто как на <code>attribute</code>s.</p> + +<p>Ниже таблица с кратким описанием этих типов данных.</p> + +<table class="standard-table"> + <tbody> + <tr> + <td>document</td> + <td>Когда член возвращает объект типа document (например, свойство элемента ownerDocument возвращает документ к которому он относится), этот обьект document является собственным корневым обьектом. В DOM document Reference разделе описан объект document.<br> + element </td> + </tr> + <tr> + <td>element</td> + <td>обозначает элемент или узел типа element, возвращаемый членом DOM API. Вместо того, чтобы говорить, что метод document.createElement() возвращает ссылку на node, мы просто скажем, что этот элемент возвращает element, который просто был создан в DOM. Объекты element реализуют DOM element интерфейс и также более общий Node интерфейс. Оба интерфейса включены в эту справку.<br> + nodeList</td> + </tr> + <tr> + <td>NodeList</td> + <td> + <p>массив элементов, как тот, что возвращается методом Document.getElementsByTagName(). Конкретные элементы в массиве доступны по индексу двумя способами:</p> + + <ul> + <li> list.item(1)</li> + <li> list[1]</li> + </ul> + + <p>Эти способы эквивалентны. В первом способе item() - единственный метод объекта NodeList. Последний использует обычный синтаксис массивов, чтобы получить второе значение в списке.</p> + </td> + </tr> + <tr> + <td>attribute</td> + <td>Когда attribute возвращается членом API (например, метод createAttribute()) - это будет ссылка на объект, который предоставляет специальный (хоть и небольшой) интерфейс для атрибутов. Атрибуты - это узлы в DOM, как и элементы, хотя вы можете редко использовать их в таком виде.</td> + </tr> + <tr> + <td>namedNodeMap</td> + <td>namedNodeMap подобна массиву, но элементы доступны по имени или индексу. Доступ по индексу - это лишь для удобства перечисления, т.к. элементы не имеют определенног порядка в списке. Этот тип данных имеет метод item() для этих целей и вы можете также добавлять и удалять элементы из namedNodeMap</td> + </tr> + </tbody> +</table> + + + +<h2 id="DOM-интерфейсы_DOM_interfaces">DOM-интерфейсы (DOM interfaces)</h2> + + + +<p>Это руководство об объектах и реальных вещах, которые вы можете использовать для управления DOM-иерархией. Есть много моментов, где понимание того, как это работает, может удивлять. Например, объект, представляющий <code>HTML form</code> элемент, берет своё свойство <code><strong>name </strong></code>из интерфейса <code>HTMLFormElement, </code>а свойство <code><strong>className - </strong></code>из интерфейса <code>HTMLElement. </code>В обоих случаях свойство, которое вы хотите, находится в этом объекте формы.</p> + +<p>Кроме того, отношение между объектами и интерфейсами, которые они реализуют в DOM может быть удивительным и этот раздел пытается рассказать немного о существующих интерфейсах в DOM и о том, как они могут быть доступны.</p> + +<h3 id="Интерфейсы_и_объекты_Interfaces_and_objects">Интерфейсы и объекты (Interfaces and objects)</h3> + +<p>Многие объекты реализуют действия из нескольких интерфейсов. Объект таблицы, например, реализует специальный <a href="https://developer.mozilla.org/en-US/docs/DOM/HTMLTableElement/ru/docs/">HTML Table Element Interface</a>, который включает такие методы как <code>createCaption</code> и <code>insertRow</code>. Но так как это таблица - это ещё и HTML-элемент, <code>table</code> реализует интерфейс <code>Element</code>, описанный в разделе <a href="https://developer.mozilla.org/en-US/docs/DOM/element/ru/docs/">DOM <code>element</code> Reference</a>. Наконец, так как HTML-элемент (в смысле DOM) - это узел (<code>node)</code> в дереве, которое составляет объектную модель для HTML- или XML-страницы, табличный элемент также реализует более общий интерфейс <code>Node</code>, из которого происходит <code>Element</code>.</p> + +<p>Когда вы получаете ссылку на объект <code>table</code>, как в следующем примере, вы обычно используете все три интерфейса этого объекта, вероятно, даже не зная этого.</p> + +<pre class="brush: js">var table = document.getElementById("table"); +var tableAttrs = table.attributes; // Node/Element interface +for (var i = 0; i < tableAttrs.length; i++) { + // HTMLTableElement interface: border attribute + if(tableAttrs[i].nodeName.toLowerCase() == "border") + table.border = "1"; +} +// HTMLTableElement interface: summary attribute +table.summary = "note: increased border";</pre> + +<h3 id="Основные_интерфейсы_в_DOM_Core_interfaces_in_the_DOM">Основные интерфейсы в DOM (Core interfaces in the DOM)</h3> + +<p>Этот раздел перечисляет несколько самых распространенных интерфейсов в DOM. Идея не в том чтобы описать, что делают эти методы API, но в том чтобы дать вам несколько мыслей насчет видов методов и свойств, которые вы будете часто видеть, используя DOM. Эти распространенные части API использованы в большинстве примеров раздела <a href="https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference/Examples">DOM Examples</a> в конце этой справки.</p> + +<p><code>Document, window</code> - это объекты, чьи интерфейсы вы, как правило, очень часто используете в программировании DOM. Говоря простыми словами, объект <code>window</code> представляет что-то вроде браузера, а объект <code>document</code> - корень самого документа. <code>Element</code> наследуется от общего интерфейса <code>Node</code>, и эти интерфейсы вместе предоставляют много методов и свойств, которые можно применять у отдельных элементов. Эти элементы также могут иметь отдельные интерфейсы для работы с типами данных, которые эти элементы содержат, как в примере с объектом <code>table</code> в предыдущем случае.</p> + +<p>Ниже представлен краткий список распространненых членов API, используемых в программировании веб- и XML-страниц с использованием DOM:</p> + +<ul> + <li><code><a href="/ru/docs/Web/API/Document/getElementById">document.getElementById</a>(id)</code></li> + <li><code><a href="/ru/docs/Web/API/Document/getElementsByTagName">document.getElementsByTagName</a>(name)</code></li> + <li><code><a href="/ru/docs/DOM/document.createElement">document.createElement</a>(name)</code></li> + <li><code>parentNode.<a href="/ru/docs/Web/API/Node/appendChild">appendChild</a>(node)</code></li> + <li><code>element.<a href="/ru/docs/Web/API/Element/innerHTML">innerHTML</a></code></li> + <li><code>element.<a href="/ru/docs/Web/API/HTMLElement/style">style</a>.left</code></li> + <li><code>element.<a href="/ru/docs/Web/API/Element/setAttribute">setAttribute</a></code></li> + <li><code>element.<a href="/ru/docs/Web/API/Element/getAttribute">getAttribute</a></code></li> + <li><code>element.<a href="/ru/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code></li> + <li><code><a href="/en-US/docs/DOM/window.content">window.content</a></code></li> + <li><code><a href="/en-US/docs/DOM/window.onload">window.onload</a></code></li> + <li><code><a href="/en-US/docs/DOM/window.dump">window.dump</a></code></li> + <li><code><a href="/ru/docs/Web/API/Window/scrollTo">window.scrollTo</a></code></li> +</ul> + +<h2 id="Тестирование_DOM_API">Тестирование DOM API</h2> + +<p>Этот документ содержит примеры для каждого интерфейса, который вы можете использовать в своей разработке. В некоторых случаях примеры - полноценные веб-страницы с доступом к DOM в элементе <code><script>,</code> также перечислены элементы, необходимые чтобы запустить скрипт в форме, и HTML-элементы, над которыми будут производиться операции DOM. Когда встречается такой случай, можно просто копировать и вставить пример в новый HTML-документ, сохранить и запустить его в браузере.</p> + +<p>Есть случаи, однако, где примеры более лаконичные. Чтобы запустить примеры, которые лишь демонстрируют основы взаимодействия интерфейсов с HTML-элементами, вы можете подготовить тестовую страницу, в которую будете помещать функции внутрь скриптов. Следующая очень простая веб-страница содержит элемент <code><script></code> в заголовке, в который вы можете поместить функции, чтобы протестировать интерфейс. Страница содержит несколько элементов с атрибутами, которые можно возвращать, устанавливать или, другими словами, манипулировать и содержит пользовательский интерфейс, необходимый, чтобы вызывать нужные функции из браузера.</p> + +<p>Вы можете использовать эту тестовую страницу или похожую для проверки интерфейсов DOM, которые вас интересуют и просмотра того, как они работают в браузерах. Вы можете обновить содержмое функции <code>test()</code> при необходимости, создать больше кнопок или добавить элементы при необходимости.</p> + +<pre><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>DOM Tests<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>application/javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="language-javascript script token"> + <span class="keyword token">function</span> <span class="function token">setBodyAttr</span><span class="punctuation token">(</span>attr<span class="punctuation token">,</span> value<span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>document<span class="punctuation token">.</span>body<span class="punctuation token">)</span> <span class="function token">eval</span><span class="punctuation token">(</span><span class="string token">'document.body.'</span><span class="operator token">+</span>attr<span class="operator token">+</span><span class="string token">'="'</span><span class="operator token">+</span>value<span class="operator token">+</span><span class="string token">'"'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">else</span> <span class="function token">notSupported</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + </span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">.5</span>in<span class="punctuation token">;</span> <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">400</span><span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>b</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tt</span><span class="punctuation token">></span></span>text<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tt</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>b</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>select</span> <span class="attr-name token">onChange</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>setBodyAttr(<span class="punctuation token">'</span>text<span class="punctuation token">'</span>, + this.options[this.selectedIndex].value);<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>black<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>black + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>darkblue<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>darkblue + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>select</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>b</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tt</span><span class="punctuation token">></span></span>bgColor<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tt</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>b</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>select</span> <span class="attr-name token">onChange</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>setBodyAttr(<span class="punctuation token">'</span>bgColor<span class="punctuation token">'</span>, + this.options[this.selectedIndex].value);<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>white + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>lightgrey<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>gray + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>select</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>b</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tt</span><span class="punctuation token">></span></span>link<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tt</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>b</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>select</span> <span class="attr-name token">onChange</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>setBodyAttr(<span class="punctuation token">'</span>link<span class="punctuation token">'</span>, + this.options[this.selectedIndex].value);<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>blue<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>blue + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>green<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>green + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>select</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>small</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.brownhen.com/dom_api_top.html<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>sample<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + (sample link)<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>small</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>version<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>ver()<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> + +<p>Чтобы протестировать много интерфейсов на одной странице, набор свойств, которые изменяют цвета веб-страницы, можно создать похожую веб-страницу с целой "консолью" кнопок, текстовых полей и других элементов. Следующий скриншот даёт идею, как интерфейсы могут быть сгруппированы вместе для тестирования</p> + +<p><img alt="" src="https://developer.mozilla.org/@api/deki/files/173/=DOM_Ref_Introduction_to_the_DOM.gif" style="height: 375px; width: 199px;"></p> + +<p>В этом примере выпадающее меню динамически обновляет доступные из DOM части веб-страницы (например, фоновый цвет, цвет ссылок и цвет текста). Однако при разработке тестовых страниц, тестирование интерфейсов, как вы об этом прочитали, важная часть изучения эффективной работы с DOM.</p> + +<h2 id="Другие_статьи">Другие статьи</h2> + +<ul> + <li><a href="/ru/docs/DOM/DOM_Reference">DOM Reference</a></li> + <li><a href="/ru/docs/DOM/DOM_Reference/Введение">Введение в DOM</a></li> + <li><a href="/ru/docs/DOM/DOM_Reference/Events">События и DOM (Events and the DOM)</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Примеры (Examples)</a></li> +</ul> diff --git a/files/ru/web/api/document_object_model/locating_dom_elements_using_selectors/index.html b/files/ru/web/api/document_object_model/locating_dom_elements_using_selectors/index.html new file mode 100644 index 0000000000..73538e8616 --- /dev/null +++ b/files/ru/web/api/document_object_model/locating_dom_elements_using_selectors/index.html @@ -0,0 +1,50 @@ +--- +title: Locating DOM elements using selectors +slug: DOM/DOM_Reference/Locating_DOM_elements_using_selectors +translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors +--- +<div>{{ gecko_minversion_header("1.9.1") }}</div> + +<div>Selectors API предоставляет методы, с помощью которых можно быстро и просто получить доступ к узлам <code><a href="/en-US/docs/DOM/element">Element</a></code> из DOM путем сопоставления с набором селекторов. Это намного быстрее, чем прошлые техники, где надо было, например, использовать цикл в JS-коде, чтобы найти конкретные элементы.</div> + +<div> </div> + +<h2 id="Интерфейс_NodeSelector_(The_NodeSelector_interface)">Интерфейс NodeSelector (The NodeSelector interface)</h2> + +<p>Эта спецификация добавляет два новых метода к любым объектам, реализующим интерфейс <a class="internal" href="/en-US/docs/DOM/document" title="en-US/docs/DOM/Document"><code>Document</code></a>, <a class="internal" href="/en-US/docs/DOM/DocumentFragment" title="en-US/docs/DOM/DocumentFragment"><code>DocumentFragment</code></a>, или <a class="internal" href="/en-US/docs/DOM/element" title="en-US/docs/DOM/Element"><code>Element</code></a>:</p> + +<dl> + <dt><code>querySelector</code></dt> + <dd>Возвращает первый совпадающий узел <a class="internal" href="/en-US/docs/DOM/element" title="en-US/docs/DOM/Element"><code>Element</code></a> внутри поддерева. Если совпадающих узлов нет, будет возвращен <code>null</code>.</dd> + <dt><code>querySelectorAll</code></dt> + <dd>Возвращает <a class="internal" href="/en-US/docs/DOM/NodeList" title="en-US/docs/DOM/NodeList"><code>NodeList</code></a><code>, </code>содержащий все подходящие узлы <code>Element</code> внутри поддерева узлов. Или возвращает пустой <code>NodeList</code>, если совпадений не найдено.</dd> +</dl> + +<div class="note"><strong>Замечание: </strong><code><a class="internal" href="/en-US/docs/DOM/NodeList" title="en-US/docs/DOM/NodeList">NodeList</a></code>, возвращаемый методом <code><a class="internal" href="/en-US/docs/DOM/Element.querySelectorAll" title="en-US/docs/DOM/Element.querySelectorAll">querySelectorAll()</a>, </code>не настоящий. Этот список отличается от других методов поиска DOM, которые возвращают настоящие (живые) узлы.</div> + +<p>Вы можете найти примеры и детали, прочитав документацию для методов <a class="internal" href="/en-US/docs/DOM/Element.querySelector" title="en-US/docs/DOM/Element.querySelector"><code>querySelector()</code></a> и <a class="internal" href="/en-US/docs/DOM/Element.querySelectorAll" title="en-US/docs/DOM/Element.querySelectorAll"><code>querySelectorAll()</code></a><code>, </code>а также в статье <a class="internal" href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Code snippets for querySelector</a>.</p> + +<h2 id="Selectors">Selectors</h2> + +<p>Селекторные методы принимают один или больше селекторов, разделенных запятыми, чтобы определить, какие элементы должны быть возвращены. Например, чтобы все параграфы в документе, которые имеют классы <code>warning </code>или <code>note</code>, можно сделать следующее:</p> + +<pre><code>var special = document.querySelectorAll( "p.warning, p.note" );</code></pre> + +<p>Также можно искать по ID. Например:</p> + +<pre><code>var el = document.querySelector( "#main, #basic, #exclamation" );</code></pre> + +<p>После выполнения кода выше, <code>el</code> будет содержать первый элемент в документе, чей ID <code>main, basic</code> или <code>exclamation</code></p> + +<p>Вы можете использовать любые CSS-селекторы в методах <code>querySelector(), querySelectorAll()</code></p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/selectors-api/" title="http://www.w3.org/TR/selectors-api/">Selectors API</a></li> + <li><a href="/en-US/docs/DOM/Element.querySelector" title="en-US/docs/DOM/Element.querySelector"><code>element.querySelector</code></a></li> + <li><a href="/en-US/docs/DOM/Element.querySelectorAll" title="en-US/docs/DOM/element.querySelectorAll"><code>element.querySelectorAll</code></a></li> + <li><a href="/en-US/docs/DOM/Document.querySelector" title="en-US/docs/DOM/document.querySelector"><code>document.querySelector</code></a></li> + <li><a href="/en-US/docs/DOM/Document.querySelectorAll" title="en-US/docs/DOM/document.querySelectorAll"><code>document.querySelectorAll</code></a></li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li> +</ul> diff --git a/files/ru/web/api/document/activeelement/index.html b/files/ru/web/api/documentorshadowroot/activeelement/index.html index 71db5bc678..71db5bc678 100644 --- a/files/ru/web/api/document/activeelement/index.html +++ b/files/ru/web/api/documentorshadowroot/activeelement/index.html diff --git a/files/ru/web/api/document/getselection/index.html b/files/ru/web/api/documentorshadowroot/getselection/index.html index c57695e055..c57695e055 100644 --- a/files/ru/web/api/document/getselection/index.html +++ b/files/ru/web/api/documentorshadowroot/getselection/index.html diff --git a/files/ru/web/events/blur/index.html b/files/ru/web/api/element/blur_event/index.html index a29fa0debc..a29fa0debc 100644 --- a/files/ru/web/events/blur/index.html +++ b/files/ru/web/api/element/blur_event/index.html diff --git a/files/ru/web/events/error/index.html b/files/ru/web/api/element/error_event/index.html index 787fb9a4fa..787fb9a4fa 100644 --- a/files/ru/web/events/error/index.html +++ b/files/ru/web/api/element/error_event/index.html diff --git a/files/ru/web/events/focusin/index.html b/files/ru/web/api/element/focusin_event/index.html index 02f27b66fb..02f27b66fb 100644 --- a/files/ru/web/events/focusin/index.html +++ b/files/ru/web/api/element/focusin_event/index.html diff --git a/files/ru/web/events/focusout/index.html b/files/ru/web/api/element/focusout_event/index.html index 742f52af03..742f52af03 100644 --- a/files/ru/web/events/focusout/index.html +++ b/files/ru/web/api/element/focusout_event/index.html diff --git a/files/ru/web/api/htmlelement/style/index.html b/files/ru/web/api/elementcssinlinestyle/style/index.html index 683bfa1101..683bfa1101 100644 --- a/files/ru/web/api/htmlelement/style/index.html +++ b/files/ru/web/api/elementcssinlinestyle/style/index.html diff --git a/files/ru/web/api/eventtarget/attachevent/index.html b/files/ru/web/api/eventtarget/attachevent/index.html deleted file mode 100644 index a428f9724c..0000000000 --- a/files/ru/web/api/eventtarget/attachevent/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: EventTarget.attachEvent() -slug: Web/API/EventTarget/attachEvent -tags: - - Junk -translation_of: Web/API/EventTarget/addEventListener -translation_of_original: Web/API/EventTarget/attachEvent ---- -<p>{{DOMxRef("EventTarget.addEventListener","EventTarget.addEventListener()")}}</p> diff --git a/files/ru/web/api/eventtarget/detachevent/index.html b/files/ru/web/api/eventtarget/detachevent/index.html deleted file mode 100644 index 9a62ecb63c..0000000000 --- a/files/ru/web/api/eventtarget/detachevent/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: EventTarget.detachEvent() -slug: Web/API/EventTarget/detachEvent -translation_of: Web/API/EventTarget/removeEventListener -translation_of_original: Web/API/EventTarget/detachEvent ---- -<p>{{APIRef("DOM Events")}}</p> - -<p>{{ Non-standard_header() }}</p> - -<h2 id="Кратко">Кратко</h2> - -<p>Это проприетарная альтернатива методу {{domxref("EventTarget.removeEventListener()")}} в Microsoft Internet Explorer.</p> - -<h2 id="Syntax" name="Syntax">Синтаксис</h2> - -<pre class="syntaxbox"><em>target</em>.detachEvent(<em>eventNameWithOn</em>, <em>callback</em>) -</pre> - -<dl> - <dt>target</dt> - <dd>DOM елемент, для которого надо убрать обработчик.</dd> - <dt>eventNameWithOn</dt> - <dd>Название ивента, начинающийся на "on" (так если бы это был колбэк атрибут), чей обработчик должен быть убран. Например, вам следует использовать <code>"onclick" для удаления обработчика для данного "click" ивента.</code></dd> - <dt>callback</dt> - <dd>Функция, которую стоит убрать.</dd> -</dl> - -<h2 id="Спецификация">Спецификация</h2> - -<p>Не является частью спецификации.</p> - -<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms536411(v=vs.85).aspx">содержит описание на MSDN</a>.</p> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Поддержка браузерами</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6 thru 10 [1]</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1]: <code>detachEvent()</code> больше не поддерживается в IE11+. {{domxref("EventTarget.removeEventListener()")}} поддерживается в IE9+.</p> - -<h2 id="Смотрите_так-же">Смотрите так-же</h2> - -<ul> - <li>{{ domxref("EventTarget.attachEvent()") }}</li> - <li>{{ domxref("EventTarget.fireEvent()") }}</li> -</ul> diff --git a/files/ru/web/api/file_and_directory_entries_api/введение/index.html b/files/ru/web/api/file_and_directory_entries_api/introduction/index.html index e5c76758c1..e5c76758c1 100644 --- a/files/ru/web/api/file_and_directory_entries_api/введение/index.html +++ b/files/ru/web/api/file_and_directory_entries_api/introduction/index.html diff --git a/files/ru/web/api/fullscreen_api/index.html b/files/ru/web/api/fullscreen_api/index.html new file mode 100644 index 0000000000..ad21d6d20e --- /dev/null +++ b/files/ru/web/api/fullscreen_api/index.html @@ -0,0 +1,198 @@ +--- +title: Fullscreen API +slug: DOM/Using_fullscreen_mode +translation_of: Web/API/Fullscreen_API +--- +<div>{{DefaultAPISidebar("Fullscreen API")}}</div> + +<p>The <strong>Fullscreen API</strong> adds methods to present a specific {{DOMxRef("Element")}} (and its descendants) in full-screen mode, and to exit full-screen mode once it is no longer needed. This makes it possible to present desired content—such as an online game—using the user's entire screen, removing all browser user interface elements and other applications from the screen until full-screen mode is shut off.</p> + +<p>See the article <a href="/en-US/docs/Web/API/Fullscreen_API/Guide">Guide to the Fullscreen API</a> for details on how to use the API.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Support for this API varies somewhat across browsers, with many requiring vendor prefixes and/or not implementing the latest specification. See the {{anch("Browser compatibility")}} section below for details on support for this API. You may wish to consider using a library such as <a href="https://github.com/rafrex/fscreen">Fscreen</a> for vendor agnostic access to the Fullscreen API.</p> +</div> + +<h2 id="Interfaces">Interfaces</h2> + +<p><em>The Fullscreen API has no interfaces of its own. Instead, it augments several other interfaces to add the methods, properties, and event handlers needed to provide full-screen functionality. These are listed in the following sections.</em></p> + +<h2 id="Methods">Methods</h2> + +<p>The Fullscreen API adds methods to the {{DOMxRef("Document")}} and {{DOMxRef("Element")}} interfaces to allow turning off and on full-screen mode.</p> + +<h3 id="Methods_on_the_Document_interface">Methods on the Document interface</h3> + +<dl> + <dt>{{DOMxRef("Document.exitFullscreen()")}}</dt> + <dd>Requests that the {{Glossary("user agent")}} switch from full-screen mode back to windowed mode. Returns a {{jsxref("Promise")}} which is resolved once full-screen mode has been completely shut off.</dd> +</dl> + +<h3 id="Methods_on_the_Element_interface">Methods on the Element interface</h3> + +<dl> + <dt>{{DOMxRef("Element.requestFullscreen()")}}</dt> + <dd>Asks the user agent to place the specified element (and, by extension, its descendants) into full-screen mode, removing all of the browser's UI elements as well as all other applications from the screen. Returns a {{jsxref("Promise")}} which is resolved once full-screen mode has been activated.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<p><em>The {{DOMxRef("Document")}} interface provides properties that can be used to determine if full-screen mode is supported and available, and if full-screen mode is currently active, which element is using the screen.</em></p> + +<dl> + <dt>{{DOMxRef("DocumentOrShadowRoot.fullscreenElement")}}</dt> + <dd>The <code>fullscreenElement</code> property tells you the {{DOMxRef("Element")}} that's currently being displayed in full-screen mode on the DOM (or shadow DOM). If this is <code>null</code>, the document is not in full-screen mode.</dd> + <dt>{{DOMxRef("Document.fullscreenEnabled")}}</dt> + <dd>The <code>fullscreenEnabled</code> property tells you whether or not it is possible to engage full-screen mode. This is <code>false</code> if full-screen mode is not available for any reason (such as the <code>"fullscreen"</code> feature not being allowed, or full-screen mode not being supported).</dd> +</dl> + +<h3 id="Event_handlers">Event handlers</h3> + +<p><em>The Fullscreen API defines two events which can be used to detect when full-screen mode is turned on and off, as well as when errors occur during the process of changing between full-screen and windowed modes. Event handlers for these events are available on the {{DOMxRef("Document")}} and {{DOMxRef("Element")}} interfaces.</em></p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> These event handler properties are <em>not</em> available as HTML content attributes. In other words, you cannot specify event handlers for {{Event("fullscreenchange")}} and {{Event("fullscreenerror")}} in the HTML content. They must be added by JavaScript code.</p> +</div> + +<h4 id="Event_handlers_on_documents">Event handlers on documents</h4> + +<dl> + <dt>{{DOMxRef("Document.onfullscreenchange")}}</dt> + <dd>An event handler for the {{Event("fullscreenchange")}} event that's sent to a {{DOMxRef("Document")}} when that document is placed into full-screen mode, or when that document exits full-screen mode. This handler is called only when the entire document is presented in full-screen mode.</dd> + <dt>{{DOMxRef("Document.onfullscreenerror")}}</dt> + <dd>An event handler for the {{Event("fullscreenerror")}} event that gets sent to a {{DOMxRef("Document")}} when an error occurs while trying to enable or disable full-screen mode for the entire document.</dd> +</dl> + +<h4 id="Event_handlers_on_elements">Event handlers on elements</h4> + +<dl> + <dt>{{DOMxRef("Element.onfullscreenchange")}}</dt> + <dd>An event handler which is called when the {{Event("fullscreenchange")}} event is sent to the element, indicating that the element has been placed into, or removed from, full-screen mode.</dd> + <dt>{{DOMxRef("Element.onfullscreenerror")}}</dt> + <dd>An event handler for the {{Event("fullscreenerror")}} event when sent to an element which has encountered an error while transitioning into or out of full-screen mode.</dd> +</dl> + +<h3 id="Obsolete_properties">Obsolete properties</h3> + +<dl> + <dt>{{DOMxRef("Document.fullscreen")}} {{Deprecated_Inline}}</dt> + <dd>A Boolean value which is <code>true</code> if the document has an element currently being displayed in full-screen mode; otherwise, this returns <code>false</code>. + <div class="note"><strong>Note:</strong> Use the {{DOMxRef("Document.fullscreenElement", "fullscreenElement")}} property on the {{DOMxRef("Document")}} or {{DOMxRef("ShadowRoot")}} instead; if it's not <code>null</code>, then it's an {{DOMxRef("Element")}} currently being displayed in full-screen mode.</div> + </dd> +</dl> + +<h2 id="Events" name="Events">Events</h2> + +<p><em>The Fullscreen API defines two events which can be used to detect when full-screen mode is turned on and off, as well as when errors occur during the process of changing between full-screen and windowed modes.</em></p> + +<dl> + <dt>{{Event("fullscreenchange")}}</dt> + <dd>Sent to a {{DOMxRef("Document")}} or {{DOMxRef("Element")}} when it transitions into or out of full-screen mode.</dd> + <dt>{{Event("fullscreenerror")}}</dt> + <dd>Sent to a <code>Document</code> or <code>Element</code> if an error occurs while attempting to switch it into or out of full-screen mode.</dd> +</dl> + +<h2 id="Dictionaries">Dictionaries</h2> + +<dl> + <dt>{{DOMxRef("FullscreenOptions")}}</dt> + <dd>Provides optional settings you can specify when calling {{DOMxRef("Element.requestFullscreen", "requestFullscreen()")}}.</dd> +</dl> + +<h2 id="Controlling_access">Controlling access</h2> + +<p>The availability of full-screen mode can be controlled using <a href="/en-US/docs/Web/HTTP/Feature_Policy">Feature Policy</a>. The full-screen mode feature is identified by the string <code>"fullscreen"</code>, with a default allow-list value of <code>"self"</code>, meaning that full-screen mode is permitted in top-level document contexts, as well as to nested browsing contexts loaded from the same origin as the top-most document.</p> + +<p>See <a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Using Feature Policy</a> to learn more about using Feature Policy to control access to an API.</p> + +<h2 id="Usage_notes" name="Usage_notes">Usage notes</h2> + +<p>Users can choose to exit full-screen mode simply by pressing the <kbd>ESC</kbd> (or <kbd>F11</kbd>) key, rather than waiting for the site or app to programmatically do so. Make sure you provide, somewhere in your user interface, appropriate user interface elements that inform the user that this option is available to them.</p> + +<div class="note"> +<p><strong>Note:</strong> Navigating to another page, changing tabs, or switching to another application using any application switcher (or <kbd>Alt</kbd>-<kbd>Tab</kbd>) will likewise exit full-screen mode.</p> +</div> + +<h2 id="Example">Example</h2> + +<p>In this example, a video is presented in a web page. Pressing the <kbd>Return</kbd> or <kbd>Enter</kbd> key lets the user toggle between windowed and full-screen presentation of the video.</p> + +<p><a href="/samples/domref/fullscreen.html">View Live Examples</a></p> + +<h3 id="Watching_for_the_Enter_key">Watching for the Enter key</h3> + +<p>When the page is loaded, this code is run to set up an event listener to watch for the <kbd>Enter</kbd> key.</p> + +<pre class="brush: js">document.addEventListener("keypress", function(e) { + if (e.keyCode === 13) { + toggleFullScreen(); + } +}, false); +</pre> + +<h3 id="Toggling_full-screen_mode">Toggling full-screen mode</h3> + +<p>This code is called by the event handler above when the user hits the <kbd>Enter</kbd> key.</p> + +<pre class="brush: js">function toggleFullScreen() { + if (!document.fullscreenElement) { + document.documentElement.requestFullscreen(); + } else { + if (document.exitFullscreen) { + document.exitFullscreen(); + } + } +}</pre> + +<p>This starts by looking at the value of the {{DOMxRef("Document", "document")}}'s <code>fullscreenElement</code> attribute. In a real-world deployment, at this time, you'll want to check for prefixed versions of this (<code>mozFullScreenElement</code>, <code>msFullscreenElement</code>, or <code>webkitFullscreenElement</code>, for example). If the value is <code>null</code>, the document is currently in windowed mode, so we need to switch to full-screen mode; otherwise, it's the element that's currently in full-screen mode. Switching to full-screen mode is done by calling {{DOMxRef("Element.requestFullscreen()")}} on the {{HTMLElement("video")}} element.</p> + +<p>If full-screen mode is already active (<code>fullscreenElement</code> is not <code>null</code>), we call {{DOMxRef("Document.exitFullscreen", "exitFullscreen()")}} on the <code>document</code> to shut off full-screen mode.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Fullscreen")}}</td> + <td>{{Spec2("Fullscreen")}}</td> + <td>Initial version.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<h3 id="Document.fullscreen"><code>Document.fullscreen</code></h3> + +<div> + + +<p>{{Compat("api.Document.fullscreen")}}</p> +</div> + +<h3 id="Document.fullscreenEnabled"><code>Document.fullscreenEnabled</code></h3> + +<div> +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("api.Document.fullscreenEnabled")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Fullscreen_API">Using full-screen mode</a></li> + <li>{{DOMxRef("Element.requestFullscreen()")}}</li> + <li>{{DOMxRef("Document.exitFullscreen()")}}</li> + <li>{{DOMxRef("Document.fullscreen")}}</li> + <li>{{DOMxRef("Document.fullscreenElement")}}</li> + <li>{{CSSxRef(":fullscreen")}}, {{CSSxRef("::backdrop")}}</li> + <li>{{HTMLAttrXRef("allowfullscreen", "iframe")}}</li> +</ul> diff --git a/files/ru/web/api/geolocation/using_geolocation/index.html b/files/ru/web/api/geolocation_api/index.html index 39847dedc5..39847dedc5 100644 --- a/files/ru/web/api/geolocation/using_geolocation/index.html +++ b/files/ru/web/api/geolocation_api/index.html diff --git a/files/ru/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html b/files/ru/web/api/geolocation_api/using_the_geolocation_api/index.html index 5fa1055292..5fa1055292 100644 --- a/files/ru/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html +++ b/files/ru/web/api/geolocation_api/using_the_geolocation_api/index.html diff --git a/files/ru/web/guide/html/drag_and_drop/drag_operations/index.html b/files/ru/web/api/html_drag_and_drop_api/drag_operations/index.html index 2dcdb6babb..2dcdb6babb 100644 --- a/files/ru/web/guide/html/drag_and_drop/drag_operations/index.html +++ b/files/ru/web/api/html_drag_and_drop_api/drag_operations/index.html diff --git a/files/ru/web/guide/html/drag_and_drop/index.html b/files/ru/web/api/html_drag_and_drop_api/index.html index 86467501fd..86467501fd 100644 --- a/files/ru/web/guide/html/drag_and_drop/index.html +++ b/files/ru/web/api/html_drag_and_drop_api/index.html diff --git a/files/ru/web/api/htmlaudioelement/audio()/index.html b/files/ru/web/api/htmlaudioelement/audio/index.html index 4d9e39dfab..4d9e39dfab 100644 --- a/files/ru/web/api/htmlaudioelement/audio()/index.html +++ b/files/ru/web/api/htmlaudioelement/audio/index.html diff --git a/files/ru/web/api/element/accesskey/index.html b/files/ru/web/api/htmlelement/accesskey/index.html index 0230ecc9e0..0230ecc9e0 100644 --- a/files/ru/web/api/element/accesskey/index.html +++ b/files/ru/web/api/htmlelement/accesskey/index.html diff --git a/files/ru/web/api/node/innertext/index.html b/files/ru/web/api/htmlelement/innertext/index.html index ef23b48d59..ef23b48d59 100644 --- a/files/ru/web/api/node/innertext/index.html +++ b/files/ru/web/api/htmlelement/innertext/index.html diff --git a/files/ru/web/events/transitionend/index.html b/files/ru/web/api/htmlelement/transitionend_event/index.html index dfb8542da6..dfb8542da6 100644 --- a/files/ru/web/events/transitionend/index.html +++ b/files/ru/web/api/htmlelement/transitionend_event/index.html diff --git a/files/ru/web/html/element/video/seeking_event/index.html b/files/ru/web/api/htmlmediaelement/seeking_event/index.html index 5802aecadb..5802aecadb 100644 --- a/files/ru/web/html/element/video/seeking_event/index.html +++ b/files/ru/web/api/htmlmediaelement/seeking_event/index.html diff --git a/files/ru/web/api/htmlelement/dataset/index.html b/files/ru/web/api/htmlorforeignelement/dataset/index.html index 328b265afa..328b265afa 100644 --- a/files/ru/web/api/htmlelement/dataset/index.html +++ b/files/ru/web/api/htmlorforeignelement/dataset/index.html diff --git a/files/ru/web/api/htmlelement/nonce/index.html b/files/ru/web/api/htmlorforeignelement/nonce/index.html index e47f3aea23..e47f3aea23 100644 --- a/files/ru/web/api/htmlelement/nonce/index.html +++ b/files/ru/web/api/htmlorforeignelement/nonce/index.html diff --git a/files/ru/web/api/htmlelement/tabindex/index.html b/files/ru/web/api/htmlorforeignelement/tabindex/index.html index fe41116fe4..fe41116fe4 100644 --- a/files/ru/web/api/htmlelement/tabindex/index.html +++ b/files/ru/web/api/htmlorforeignelement/tabindex/index.html diff --git a/files/ru/web/api/mediatrackconstraints/эхоподавление/index.html b/files/ru/web/api/mediatrackconstraints/echocancellation/index.html index 3e8d1f1a4e..3e8d1f1a4e 100644 --- a/files/ru/web/api/mediatrackconstraints/эхоподавление/index.html +++ b/files/ru/web/api/mediatrackconstraints/echocancellation/index.html diff --git a/files/ru/web/api/networkinformation/connection/index.html b/files/ru/web/api/navigator/connection/index.html index 607101a911..607101a911 100644 --- a/files/ru/web/api/networkinformation/connection/index.html +++ b/files/ru/web/api/navigator/connection/index.html diff --git a/files/ru/web/api/navigatorgeolocation/index.html b/files/ru/web/api/navigatorgeolocation/index.html deleted file mode 100644 index 7287eee669..0000000000 --- a/files/ru/web/api/navigatorgeolocation/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: NavigatorGeolocation -slug: Web/API/NavigatorGeolocation -translation_of: Web/API/Geolocation -translation_of_original: Web/API/NavigatorGeolocation ---- -<div>{{APIRef("Geolocation API")}}</div> - -<p><code><strong>NavigatorGeolocation</strong></code> содержит метод, позволяющий объектам реализовывать его,, получая {{domxref("Geolocation")}} экземпляр объекта.</p> - -<p>Здесь нет объектов типа <code>NavigatorGeolocation</code>, но некоторые интерфейсы, например, {{domxref("Navigator")}} реализуют его.</p> - -<h2 id="Свойства">Свойства</h2> - -<p><em>Интерфейс <code>NavigatorGeolocation</code></em><em> не наследует каких-либо свойств.</em></p> - -<dl> - <dt>{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}</dt> - <dd>Возвращает объект {{domxref("Geolocation")}} позволяющий получить доступ к местоположению устройства.</dd> -</dl> - -<h2 id="Методы">Методы</h2> - -<p><em><code>Интерфейс </code></em><em><code>NavigatorGeolocation</code></em><em> ни реализует, ни наследует никаких методов.</em></p> - -<h2 id="Спецификации">Спецификации</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарий</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Geolocation', '#navi-geo', 'NavigatorGeolocation')}}</td> - <td>{{Spec2('Geolocation')}}</td> - <td>Изначальное описание</td> - </tr> - </tbody> -</table> - -<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Свойство</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>5</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>9</td> - <td>10.60<br> - {{CompatNo}} 15.0<br> - 16.0</td> - <td>5</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Свойство</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("4")}}</td> - <td>{{CompatUnknown}}</td> - <td>10.60</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Смотрите_также">Смотрите также</h2> - -<ul> - <li><a href="/en-US/docs/WebAPI/Using_geolocation">Использование геолокации.</a></li> -</ul> diff --git a/files/ru/web/api/node/baseuriobject/index.html b/files/ru/web/api/node/baseuriobject/index.html deleted file mode 100644 index 7f7dbfb782..0000000000 --- a/files/ru/web/api/node/baseuriobject/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Node.baseURIObject -slug: Web/API/Node/baseURIObject -translation_of: Web/API/Node -translation_of_original: Web/API/Node/baseURIObject ---- -<div>{{APIRef("DOM")}} {{Non-standard_header}}</div> - -<p>Свойство <code><strong>Node.baseURIObject</strong></code> возвращает {{Interface("nsIURI")}} представляющий базовый URL узла (обычно документ или элемент). Это похоже на {{domxref("Node.baseURI")}}, за исключением того, что возвращает nsIURI вместо строки.</p> - -<p>Это свойство существует на всех узлах (HTML, XUL, SVG, MathML, и т.д.), но только если скрипт пытается использовать его имея привилегии UniversalXPConnect.</p> - -<p>Смотрите {{domxref("Node.baseURI")}} для уточнения деталей что такое базовый URL.</p> - -<h2 id="Syntax" name="Syntax">Синтаксис</h2> - -<pre class="syntaxbox"><var>uriObj</var> = <em>node</em>.baseURIObject -</pre> - -<h2 id="Notes" name="Notes">Примечания</h2> - -<p>Это свойство только для чтения; попытка записать информацию в него, будет сбрасывать исключения. <span id="result_box" lang="ru"><span class="hps">Кроме того,</span> <span class="hps">это свойство может</span> <span class="hps">быть</span> <span class="hps">доступно только для</span> <span class="hps">привилегированного</span> <span class="hps">кода.</span></span></p> - -<h2 id="Specification" name="Specification">Спецификация</h2> - -<p>Нет какой-либо спецификации.</p> diff --git a/files/ru/web/api/node/nodeprincipal/index.html b/files/ru/web/api/node/nodeprincipal/index.html deleted file mode 100644 index 11b342e6c3..0000000000 --- a/files/ru/web/api/node/nodeprincipal/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Node.nodePrincipal -slug: Web/API/Node/nodePrincipal -translation_of: Web/API/Node -translation_of_original: Web/API/Node/nodePrincipal ---- -<div> -<div>{{APIRef("DOM")}}</div> -{{Non-standard_header}} - -<p>Свойство <code><strong>Node.nodePrincipal</strong></code> только для чтения, возвращающее объект {{Interface("nsIPrincipal")}}, представляющий текущий контекст безопасности узла.</p> - -<p>{{Note("Это свойство существует во всех узлах (HTML, XUL, SVG, MathML, и т.д.), но только если скрипт пытается использовать chrome привилегии.")}}</p> - -<h2 id="Syntax" name="Syntax">Синтаксис</h2> - -<pre class="syntaxbox"><em>principalObj</em> = element.nodePrincipal -</pre> - -<h2 id="Notes" name="Notes">Примечания</h2> - -<p>Это свойство только для чтения; пытаясь вводить информацию в него, будет сбрасывать исключение.<span id="result_box" lang="ru"><span class="hps">Кроме того,</span> <span class="hps">это свойство может</span> <span class="hps">быть</span> <span class="hps">доступно только для</span> <span class="hps">привилегированного</span> <span class="hps">кода.</span></span></p> - -<h2 id="Specification" name="Specification">Спецификация</h2> - -<p>Нет никакой спецификации.</p> -</div> - -<p> </p> diff --git a/files/ru/web/api/node.replacechild/index.html b/files/ru/web/api/node/replacechild/index.html index 6d69392c57..6d69392c57 100644 --- a/files/ru/web/api/node.replacechild/index.html +++ b/files/ru/web/api/node/replacechild/index.html diff --git a/files/ru/web/api/nondocumenttypechildnode/nondocumenttypechildnode.nextelementsibling/index.html b/files/ru/web/api/nondocumenttypechildnode/nextelementsibling/index.html index 84c40445d8..84c40445d8 100644 --- a/files/ru/web/api/nondocumenttypechildnode/nondocumenttypechildnode.nextelementsibling/index.html +++ b/files/ru/web/api/nondocumenttypechildnode/nextelementsibling/index.html diff --git a/files/ru/web/api/нотация/index.html b/files/ru/web/api/notation/index.html index a1f468a55d..a1f468a55d 100644 --- a/files/ru/web/api/нотация/index.html +++ b/files/ru/web/api/notation/index.html diff --git a/files/ru/web/api/видимость_страницы_api/index.html b/files/ru/web/api/page_visibility_api/index.html index 9b181e92d1..9b181e92d1 100644 --- a/files/ru/web/api/видимость_страницы_api/index.html +++ b/files/ru/web/api/page_visibility_api/index.html diff --git a/files/ru/web/api/push_api/using_the_push_api/index.html b/files/ru/web/api/push_api/using_the_push_api/index.html deleted file mode 100644 index 40086e4e91..0000000000 --- a/files/ru/web/api/push_api/using_the_push_api/index.html +++ /dev/null @@ -1,420 +0,0 @@ ---- -title: Использование Push API -slug: Web/API/Push_API/Using_the_Push_API -translation_of: Web/API/Push_API -translation_of_original: Web/API/Push_API/Using_the_Push_API ---- -<p class="summary"><span class="seoSummary">W3C <a href="/en-US/docs/Web/API/Push_API">Push API</a> предоставляет некоторый захватывающий новый функционал для разработчиков для использования в web-приложениях: эта статья предлагает вводную информацию о том, как настроить Push-уведомления и управлять ими, с помощью простого демо.</span></p> - -<p>Возможность посылать сообщения или уведомления от сервера клиенту в любое время — независимо от того, активно приложение или нет — было прерогативой нативных приложений некоторое время, и наконец пришло в Web! Поддерживается большинства возможностей Push сейчас возможна в браузерах Firefox 43+ и Chrome 42+ на настольных компьютерах, мобильные платформы, возможно, скоро присоединятся. {{domxref("PushMessageData")}} на данный момент экспериментально поддерживаются только в Firefox Nightly (44+), и реализация может меняться.</p> - -<div class="note"> -<p><strong>Примечание</strong>: Ранние версии Firefox OS использовали проприетарную версию этого API вызывая <a href="/en-US/docs/Web/API/Simple_Push_API">Simple Push</a>. Считается устаревшим по стандартам Push API.</p> -</div> - -<h2 id="Демо_основы_простого_сервера_чат-приложения">Демо: основы простого сервера чат-приложения</h2> - -<p>Демо, котрые мы создали, представляет начальное описание простого чат-приложения. Оно представляет собой форму, в которую вводятся данные, и кнопку для подписки на push-сообщения . Как только кнопка будет нажата, вы подпишитесь на push-сообщения, ваши данные будут записаны на сервере, а отправленное push-сообщение сообщит всем текущим подписчикам, что кто-то подписался.</p> - -<p>На данном этапе, имя нового подписчика появится в списке подписчиков, вместе с текстовым полем и кнопкой рассылки, чтобы позволить подписчику отправить сообщение.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11823/push-api-demo.png" style="border: 1px solid black; display: block; height: 406px; margin: 0px auto; width: 705px;"></p> - -<p>Чтобы запустить демо, следуйте инструкциям на странице <a href="https://github.com/chrisdavidmills/push-api-demo">push-api-demo README</a>. Заметте, что серверная компонента все еще нуждается в небольшой доработке для запуска в Chrome и в общем запусается более разумным путем. Но аспекты Push все еще могут быть полностью понятны; мы углубимся в это после того, как просмотрим технологии в процессе.</p> - -<h2 id="Обзор_технологии">Обзор технологии</h2> - -<p>Эта секция предоставляет описание того, какие технологии учавствуют в примере.</p> - -<p>Web Push-сообщения это часть семейства технологий <a href="/en-US/docs/Web/API/Service_Worker_API">сервис воркеров</a>; в первую очередь, для получения push-сообщений сервис воркер должен быть активирован на странице. Сервис воркер получает push-сообщения, и затем вы сами решаете, как уведомить об этом страницу. Вы можете:</p> - -<ul> - <li>Отправить <a href="/en-US/docs/Web/API/Notifications_API">Web-уведомление</a>, которое вызовет всплытие системного уведомления. Для этого необходимо подтверждение разрешения на отправку push-сообщений.</li> - <li>Отправить сообщение обратно главной странице через {{domxref("MessageChannel")}}.</li> -</ul> - -<p>Обычно необходима комбинация этих двух решений; демо внизу включает пример обоих.</p> - -<div class="note"> -<p><strong>Примечание</strong>: Вам необходим некоторый код, запущенный на сервере, для управления конечной точкой/шифроманием данных и отправки запросов push-сообщений. В нашем демо мы собрали на скорую руку сервер, используя <a href="https://nodejs.org/">NodeJS</a>.</p> -</div> - -<p>Сервис воркер так же должен подписаться на сервис push-сообщений. Каждой сессии предоставляется собственная уникальная конечная точка, когда она подписывается на сервис push-сообщений. Эта конечная точка получается из свойства ({{domxref("PushSubscription.endpoint")}}) объекта подписчика. Она может быть отправлена серверу и использоваться для пересылки сообщений активному сервис воркеру сессии. Каждый браузер имеет свой собсвтенный сервер push-сообщений для управления отправкой push-сообщений.</p> - -<h3 id="Шифрование">Шифрование</h3> - -<div class="note"> -<p><strong>Примечание</strong>: Для интерактивного краткого обзора, попробуйте JR Conlin's <a href="https://jrconlin.github.io/WebPushDataTestPage/">Web Push Data Encryption Test Page</a>.</p> -</div> - -<p>Для отправки данных с помошью push-сообщений необходимо шифрование. Для этого необходим публичный ключ, созданный с использованием метода {{domxref("PushSubscription.getKey()")}}, который основывается на некотором комплексе механизмов шифрования, которые выполняются на стороне сервера; читайте <a href="https://tools.ietf.org/html/draft-ietf-webpush-encryption-01">Message Encryption for Web Push</a>. Со временем появятся библиотеки для управления генерацией ключей и шифроманием/дешифрованием push-сообщений; для этого демо мы используем Marco Castelluccio's NodeJS <a href="https://github.com/marco-c/web-push">web-push library</a>.</p> - -<div class="note"> -<p><strong>Примечание</strong>: Есть так же другая библиотека для управления шифрованием с помошью Node и Python, смотри <a href="https://github.com/martinthomson/encrypted-content-encoding">encrypted-content-encoding</a>.</p> -</div> - -<h3 id="Обобщение_рабочего_процесса_Push">Обобщение рабочего процесса Push</h3> - -<p>Общие сведения ниже это то, что необходимо для реализации push-сообщений. Вы можете найти больше информации о некоторых частях демо в последующих частях.</p> - -<ol> - <li>Запрос на разрешение web-уведомлений или что-то другое, что вы используете и для чего необходимо разрешение.</li> - <li>Регистрация сервис воркера для контроля над страницей с помошью вызова {{domxref("ServiceWorkerContainer.register()")}}.</li> - <li>Подписка на сервис push-уведомлений с помошью {{domxref("PushManager.subscribe()")}}.</li> - <li>Запрашивание конечной точки, соответствующей подписчику, и генерация публичного ключа клиента ({{domxref("PushSubscription.endpoint")}} и {{domxref("PushSubscription.getKey()")}}. Заметте, что <code>getKey()</code> на данный момент эксперементальная технологий и доступна только в Firefox.)</li> - <li>Отправка данных на сервер, чтобы тот мог присылать push-сообщения, когда необходимо. Это демо использует {{domxref("XMLHttpRequest")}}, но вы можете использовать <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>.</li> - <li>Если вы используете <a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a> для связи с сервис воркером, установите новый канал связи ({{domxref("MessageChannel.MessageChannel()")}}) и отправте <code>port2</code> сервис воркеру с помошью вызова {{domxref("Worker.postMessage()")}} для того, чтобы открыть канал связи. Вы так же должны настроить слушателя для ответов на сообщения, которые будут отправляться обратно с сервис воркера.</li> - <li>На стороне сервера сохраните конечную точку и все остальные необходимые данные, чтобы они были доступны, когда будет необходимо отправить push-сообщение добавленному подписчику (мы используем простой текстовый файл, но вы можете использовать базу данных или все что угодно на ваш вкус). В приложении на продакшене убедитесь, что скрываете эти данные, так что злоумышленники не смогут украсть конечную точку и разослать спам подписчикам в push-сообщениях.</li> - <li>Для отправки push-сообщений необходимо отослать HTTP <code>POST</code> конечному URL. Запрос должен включать <code>TTL</code> заголовок, который ограничивает время пребывания сообщения в очереди, если пользователь не в сети. Для добавления полезной информации в запросе, необходимо зашифровать ее (что включает публичнй ключ клиента). В нашем примере мы используем <a href="https://github.com/marco-c/web-push">web-push</a> модуль, который управляет всей тяжелой работой.</li> - <li>Поверх в сервис воркере настройте обработчик событий <code>push</code> для ответов на полученные push-сообщения. - <ol> - <li>Если вы хотите отвечать отправкой сообщения канала обратно основному контексту (смотри шаг 6), необходимо сначала получить ссылку на <code>port2,</code> который был отправлен контексту сервис воркера ({{domxref("MessagePort")}}). Это доступно в объекте {{domxref("MessageEvent")}}, передаваемого обработчику <code>onmessage </code>({{domxref("ServiceWorkerGlobalScope.onmessage")}}). Конкретнее, он находится в свойстве <code>ports</code>, индекс 0. Когда это сделано, вы можете отправить сообщение обратно <code>port1</code>, используя {{domxref("MessagePort.postMessage()")}}.</li> - <li>Если вы хотитет ответить запуском системного уведомления, вы можете сделать это, вызвав {{domxref("ServiceWorkerRegistration.showNotification()")}}. Заметте, что в нашем коде мы вызываем его внутри метода {{domxref("ExtendableEvent.waitUntil()")}} — это растягивает время жизни события, пока уведомление не будет запущено, так что мы можем убедиться, что все, что мы хотели, чтобы произошло, действительно произошло.<span id="cke_bm_307E" style="display: none;"> </span></li> - </ol> - </li> -</ol> - -<h2 id="Сборка_демо">Сборка демо</h2> - -<p>Давайте пройдемся по коду для демо, чтобы понять, как все работает.</p> - -<h3 id="HTML_и_CSS">HTML и CSS</h3> - -<p>Нет ничего примечательного в HTML и CSS демо; HTML содержит простую форму для ввода данных для фхода в чат, кнопку для подписки на push-уведомления и двух списков, в которых перечислены подписчики и сообщения чата. После подписки появляются дополнительные средства для того, чтобы пользователь мог ввести сообщение в чат.</p> - -<p>CSS был оставлен очень минимальным, чтобы не отвлекать от объяснения того, как функционируют Push API.</p> - -<h3 id="Основной_файл_JavaScript">Основной файл JavaScript</h3> - -<p> JavaScript очевидно намного более существенный. Давайте взглянем на основной файл JavaScript.</p> - -<h4 id="Переменные_и_начальные_настройки">Переменные и начальные настройки</h4> - -<p>Для начала определим некоторые переменные, которые будем использовать в нашем приложении:</p> - -<pre class="brush: js">var isPushEnabled = false; -var useNotifications = false; - -var subBtn = document.querySelector('.subscribe'); -var sendBtn; -var sendInput; - -var controlsBlock = document.querySelector('.controls'); -var subscribersList = document.querySelector('.subscribers ul'); -var messagesList = document.querySelector('.messages ul'); - -var nameForm = document.querySelector('#form'); -var nameInput = document.querySelector('#name-input'); -nameForm.onsubmit = function(e) { - e.preventDefault() -}; -nameInput.value = 'Bob';</pre> - -<p>Сначала нам необходимо создать две булевы переменные, для того чтобы отслеживать подписку на push-сообщения и подтверждение разрешения на рассылку уведомлений.</p> - -<p>Далее, мы перехватываем ссылку на {{htmlelement("button")}} подписки/отписки и задаем переменные для сохранения ссылок на наши кнопку отправки сообщения/ввода (который создастся только после успешной подписки).<br> - <br> - Следующие переменные перехватывают ссылки на три основные {{htmlelement("div")}} элемента, так что мы можем включить в них элементы (к примеру, когда появится кнопка <em>Отправки Сообщения Чата</em> или сообщение появится с писке <em>Сообщений</em>).</p> - -<p>Finally we grab references to our name selection form and {{htmlelement("input")}} element, give the input a default value, and use <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code> to stop the form submitting when the form is submitted by pressing return.</p> - -<p>Next, we request permission to send web notifications, using {{domxref("Notification.requestPermission","requestPermission()")}}:</p> - -<pre class="brush: js">Notification.requestPermission();</pre> - -<p>Now we run a section of code when <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onload">onload</a></code> is fired, to start up the process of inialising the app when it is first loaded. First of all we add a click event listener to the subscribe/unsubscribe button that runs our <code>unsubscribe()</code> function if we are already subscribed (<code>isPushEnabled</code> is <code>true</code>), and <code>subscribe()</code> otherwise:</p> - -<pre class="brush: js">window.addEventListener('load', function() { - subBtn.addEventListener('click', function() { - if (isPushEnabled) { - unsubscribe(); - } else { - subscribe(); - } - });</pre> - -<p>Next we check to see if service workers are supported. If so, we register a service worker using {{domxref("ServiceWorkerContainer.register()")}}, and run our <code>initialiseState()</code> function. If not, we deliver an error message to the console.</p> - -<pre class="brush: js"> // Check that service workers are supported, if so, progressively - // enhance and add push messaging support, otherwise continue without it. - if ('serviceWorker' in navigator) { - navigator.serviceWorker.register('sw.js').then(function(reg) { - if(reg.installing) { - console.log('Service worker installing'); - } else if(reg.waiting) { - console.log('Service worker installed'); - } else if(reg.active) { - console.log('Service worker active'); - } - - initialiseState(reg); - }); - } else { - console.log('Service workers aren\'t supported in this browser.'); - } -}); -</pre> - -<p>The next thing in the source code is the <code>initialiseState()</code> function — for the full commented code, look at the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js"><code>initialiseState()</code> source on Github</a> (we are not repeating it here for brevity's sake.)</p> - -<p><code>initialiseState()</code> first checks whether notifications are supported on service workers, then sets the <code>useNotifications</code> variable to <code>true</code> if so. Next, it checks whether said notifications are permitted by the user, and if push messages are supported, and reacts accordingly to each.</p> - -<p>Finally, it uses {{domxref("ServiceWorkerContainer.ready()")}} to wait until the service worker is active and ready to start doing things. Once its promise resolves, we retrieve our subscription to push messaging using the {{domxref("ServiceWorkerRegistration.pushManager")}} property, which returns a {{domxref("PushManager")}} object that we then call {{domxref("PushManager.getSubscription()")}} on. Once this second inner promise resolves, we enable the subscribe/unsubscribe button (<code>subBtn.disabled = false;</code>), and check that we have a subscription object to work with.</p> - -<p>If we do, then we are already subscribed. This is possible when the app is not open in the browser; the service worker can still be active in the background. If we're subscribed, we update the UI to show that we are subscribed by updating the button label, then we set <code>isPushEnabled</code> to <code>true</code>, grab the subscription endpoint from {{domxref("PushSubscription.endpoint")}}, generate a public key using {{domxref("PushSubscription.getKey()")}}, and run our <code>updateStatus()</code> function, which as you'll see later communicates with the server.</p> - -<p>As an added bonus, we set up a new {{domxref("MessageChannel")}} using the {{domxref("MessageChannel.MessageChannel()")}} constructor, grab a reference to the active service worker using {{domxref("ServiceworkerRegistration.active")}}, then set up a channel betweeen the main browser context and the service worker context using {{domxref("Worker.postMessage()")}}. The browser context receives messages on {{domxref("MessageChannel.port1")}}; whenever that happens, we run the <code>handleChannelMessage()</code> function to decide what to do with that data (see the {{anch("Handling channel messages sent from the service worker")}} section).</p> - -<h4 id="Subscribing_and_unsubscribing">Subscribing and unsubscribing</h4> - -<p>Let's now turn our attention to the <code>subscribe()</code> and <code>unsubscribe()</code> functions used to subscribe/unsubscribe to the push notification service.</p> - -<p>In the case of subscription, we again check that our service worker is active and ready by calling {{domxref("ServiceWorkerContainer.ready()")}}. When the promise resolves, we subscribe to the service using {{domxref("PushManager.subscribe()")}}. If the subscription is successful, we get a {{domxref("PushSubscription")}} object, extract the subscription endpoint from this and generate a public key (again, {{domxref("PushSubscription.endpoint")}} and {{domxref("PushSubscription.getKey()")}}), and pass them to our <code>updateStatus()</code> function along with the update type (<code>subscribe</code>) to send the necessary details to the server.</p> - -<p>We also make the necessary updates to the app state (set <code>isPushEnabled</code> to <code>true</code>) and UI (enable the subscribe/unsubscribe button and set its label text to show that the next time it is pressed it will unsubscribe.)</p> - -<p>The <code>unsubscribe()</code> function is pretty similar in structure, but it basically does the opposite; the most notable difference is that it gets the current subscription using {{domxref("PushManager.getSubscription()")}}, and when that promise resolves it unsubscribes using {{domxref("PushSubscription.unsubscribe()")}}.</p> - -<p>Appropriate error handling is also provided in both functions. </p> - -<p>We only show the <code>subscribe()</code> code below, for brevity; see the full <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js">subscribe/unsubscribe code on Github</a>.</p> - -<pre class="brush: js">function subscribe() { - // Disable the button so it can't be changed while - // we process the permission request - - subBtn.disabled = true; - - navigator.serviceWorker.ready.then(function(reg) { - reg.pushManager.subscribe({userVisibleOnly: true}) - .then(function(subscription) { - // The subscription was successful - isPushEnabled = true; - subBtn.textContent = 'Unsubscribe from Push Messaging'; - subBtn.disabled = false; - - // Update status to subscribe current user on server, and to let - // other users know this user has subscribed - var endpoint = subscription.endpoint; - var key = subscription.getKey('p256dh'); - updateStatus(endpoint,key,'subscribe'); - }) - .catch(function(e) { - if (Notification.permission === 'denied') { - // The user denied the notification permission which - // means we failed to subscribe and the user will need - // to manually change the notification permission to - // subscribe to push messages - console.log('Permission for Notifications was denied'); - - } else { - // A problem occurred with the subscription, this can - // often be down to an issue or lack of the gcm_sender_id - // and / or gcm_user_visible_only - console.log('Unable to subscribe to push.', e); - subBtn.disabled = false; - subBtn.textContent = 'Subscribe to Push Messaging'; - } - }); - }); -}</pre> - -<h4 id="Updating_the_status_in_the_app_and_server">Updating the status in the app and server</h4> - -<p>The next function in our main JavaScript is <code>updateStatus()</code>, which updates the UI for sending chat messages when subscribing/unsubscribing and sends a request to update this information on the server.</p> - -<p>The function does one of three different things, depending on the value of the <code>statusType</code> parameter passed into it:</p> - -<ul> - <li><code>subscribe</code>: The button and text input for sending chat messages are created and inserted into the UI, and an object is sent to the server via XHR containing the status type (<code>subscribe</code>), username of the subscriber, subscription endpoint, and client public key.</li> - <li><code>unsubscribe</code>: This basically works in the opposite way to subscribe — the chat UI elements are removed, and an object is sent to the server to tell it that the user has unsubscribed.</li> - <li><code>init</code>: This is run when the app is first loaded/initialised — it creates the chat UI elements, and sends an object to the server to tell it that which user has reinitialised (reloaded.)</li> -</ul> - -<p>Again, we have not included the entire function listing for brevity. Examine the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js">full <code>updateStatus()</code> code on Github</a>.</p> - -<h4 id="Handling_channel_messages_sent_from_the_service_worker">Handling channel messages sent from the service worker</h4> - -<p>As mentioned earlier, when a <a href="/en-US/docs/Web/API/Channel_Messaging_API">channel message</a> is received from the service worker, our <code>handleChannelMessage()</code> function is called to handle it. This is done by our handler for the {{event("message")}} event, {{domxref("channel.port1.onmessage")}}:</p> - -<pre class="brush: js">channel.port1.onmessage = function(e) { - handleChannelMessage(e.data); -}</pre> - -<p>This occurs when the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/sw.js#L8">service worker sends a channel message over</a>.</p> - -<p>The <code>handleChannelMessage()</code> function looks like this:</p> - -<pre class="brush: js">function handleChannelMessage(data) { - if(data.action === 'subscribe' || data.action === 'init') { - var listItem = document.createElement('li'); - listItem.textContent = data.name; - subscribersList.appendChild(listItem); - } else if(data.action === 'unsubscribe') { - for(i = 0; i < subscribersList.children.length; i++) { - if(subscribersList.children[i].textContent === data.name) { - subscribersList.children[i].parentNode.removeChild(subscribersList.children[i]); - } - } - nameInput.disabled = false; - } else if(data.action === 'chatMsg') { - var listItem = document.createElement('li'); - listItem.textContent = data.name + ": " + data.msg; - messagesList.appendChild(listItem); - sendInput.value = ''; - } -}</pre> - -<p>What happens here depends on what the <code>action</code> property on the <code>data</code> object is set to:</p> - -<ul> - <li><code>subscribe</code> or <code>init</code> (at both startup and restart, we need to do the same thing in this sample): An {{htmlelement("li")}} element is created, its text content is set to <code>data.name</code> (the name of the subscriber), and it is appended to the subscribers list (a simple {{htmlelement("ul")}} element) so there is visual feedback that a subscriber has (re)joined the chat.</li> - <li><code>unsubscribe</code>: We loop through the children of the subscribers list, find the one whose text content is equal to <code>data.name</code> (the name of the unsubscriber), and delete that node to provide visual feedback that someone has unsubscribed.</li> - <li><code>chatMsg</code>: In a similar manner to the first case, an {{htmlelement("li")}} element is created, its text content is set to <code>data.name + ": " + data.msg</code> (so for example "Chris: This is my message"), and it is appended to the chat messages list; this is how the chat messages appear on the UI for each user.</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: We have to pass the data back to the main context before we do DOM updates because service workers don't have access to the DOM. You should be aware of the limitations of service workers before attemping to ue them. Read <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using Service Workers</a> for more details.</p> -</div> - -<h4 id="Sending_chat_messages">Sending chat messages</h4> - -<p>When the <em>Send Chat Message</em> button is clicked, the content of the associated text field is sent as a chat message. This is handled by the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js"><code>sendChatMessage()</code> function</a> (again, not shown in full for brevity). This works in a similar way to the different parts of the <code>updateStatus()</code> function (see {{anch("Updating the status in the app and server")}}) — we retrieve an endpoint and public key via a {{domxref("PushSubscription")}} object, which is itself retrieved via {{domxref("ServiceWorkerContainer.ready()")}} and {{domxref("PushManager.subscribe()")}}. These are sent to the server via {{domxref("XMLHttpRequest")}} in a message object, along with the name of the subscribed user, the chat message to send, and a <code>statusType</code> of <code>chatMsg</code>.</p> - -<h3 id="The_server">The server</h3> - -<p>As mentioned above, we need a server-side component in our app, to handle storing subscription details, and send out push messages when updates occur. We've hacked together a quick-and-dirty server using <a href="http://nodejs.org/">NodeJS</a> (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/server.js">server.js</a></code>), which handles the XHR requests sent by our client-side JavaScript code.</p> - -<p>It uses a text file (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/endpoint.txt">endpoint.txt</a></code>) to store subscription details; this file starts out empty. There are four different types of request, marked by the <code>statusType</code> property of the object sent over in the request; these are the same as those understood client-side, and perform the required server actions for that same situation. Here's what each means in the context of the server:</p> - -<ul> - <li><code>subscribe</code>: The server adds the new subscriber's details into the subscription data store (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/endpoint.txt">endpoint.txt</a></code>), including the endpoint, and then sends a push message to all the endpoints it has stored to tell each subscriber that someone new has joined the chat.</li> - <li><code>unsubscribe</code>: The server finds the sending subscriber's details in the subscription store and removes it, then sends a push message to all remaining subscribers telling them the user has unsubscribed.</li> - <li><code>init</code>: The server reads all the current subscribers from the text file, and sends each one a push message to tell them a user has initialized (rejoined) the chat.</li> - <li><code>chatMsg</code>: Sent by a subscriber that wishes to deliver a message to all users; the server reads the list of all current subscribers from the subscription store file, then sends each one a push message containing the new chat message they should display.</li> -</ul> - -<p>A couple more things to note:</p> - -<ul> - <li>We are using the Node.js <a href="https://nodejs.org/api/https.html">https module</a> to create the server, because for security purposes, service workers only work on a secure connection. This is why we need to include the <code>.pfx</code> security cert in the app, and reference it when creating the server in the Node code.</li> - <li>When you send a push message without data, you simply send it to the endpoint URL using an HTTP <code>POST</code> request. However, when the push message contains data, you need to encrypt it, which is quite a complex process. As time goes on, libraries will appear to do this kind of thing for you; for this demo we used Marco Castelluccio's NodeJS <a href="https://github.com/marco-c/web-push">web-push library</a>. Have a look at the source code to get more of an idea of how the encryption is done (and read <a href="https://tools.ietf.org/html/draft-ietf-webpush-encryption-01">Message Encryption for Web Push</a> for more details.) The library <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/server.js#L43-L46">makes sending a push message simple</a>.</li> -</ul> - -<h3 id="The_service_worker">The service worker</h3> - -<p>Now let's have a look at the service worker code (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/sw.js">sw.js</a></code>), which responds to the push messages, represented by {{Event("push")}} events. These are handled on the service worker's scope by the ({{domxref("ServiceWorkerGlobalScope.onpush")}}) event handler; its job is to work out what to do in response to each received message. We first convert the received message back into an object by calling {{domxref("PushMessageData.json()")}}. Next, we check what type of push message it is, by looking at the object's <code>action</code> property:</p> - -<ul> - <li><code>subscribe</code> or <code>unsubscribe</code>: We send a system notification via the <code>fireNotification()</code> function, but also send a message back to the main context on our {{domxref("MessageChannel")}} so we can update the subscriber list accordingly (see {{anch("Handling channel messages sent from the service worker")}} for more details).</li> - <li><code>init</code> or <code>chatMsg</code>: We just send a channel message back to the main context to handle the <code>init</code> and <code>chatMsg</code> cases (these don't need a system notification).</li> -</ul> - -<pre class="brush: js">self.addEventListener('push', function(event) { - var obj = event.data.json(); - - if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { - fireNotification(obj, event); - port.postMessage(obj); - } else if(obj.action === 'init' || obj.action === 'chatMsg') { - port.postMessage(obj); - } -});</pre> - -<p>Next, let's look at the <code>fireNotification()</code> function (which is blissfully pretty simple).</p> - -<pre class="brush: js">function fireNotification(obj, event) { - var title = 'Subscription change'; - var body = obj.name + ' has ' + obj.action + 'd.'; - var icon = 'push-icon.png'; - var tag = 'push'; - - event.waitUntil(self.registration.showNotification(title, { - body: body, - icon: icon, - tag: tag - })); -}</pre> - -<p>Here we assemble the assets needed by the notification box: the title, body, and icon. Then we send a notification via the {{domxref("ServiceWorkerRegistration.showNotification()")}} method, providing that information as well as the tag "push", which we can use to identify this notification among any other notifications we might be using. When the notification is successfully sent, it manifests as a system notification dialog on the users computers/devices in whatever style system notifications look like on those systems (the following image shows a Mac OSX system notification.)</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11855/subscribe-notification.png" style="display: block; height: 65px; margin: 0px auto; width: 326px;"></p> - -<p>Note that we do this from inside an {{domxref("ExtendableEvent.waitUntil()")}} method; this is to make sure the service worker remains active until the notification has been sent. <code>waitUntil()</code> will extend the life cycle of the service worker until everything inside this method has completed.</p> - -<div class="note"> -<p><strong>Note</strong>: Web notifications from service workers were introduced around Firefox version 42, but are likely to be removed again while the surrounding functionality (such as <code>Clients.openWindow()</code>) is properly implemented (see {{bug(1203324)}} for more details.)</p> -</div> - -<h2 id="Handling_premature_subscription_expiration">Handling premature subscription expiration</h2> - -<p>Sometimes push subscriptions expire prematurely, without {{domxref("PushSubscription.unsubscribe()")}} being called. This can happen when the server gets overloaded, or if you are offline for a long time, for example. This is highly server-dependent, so the exact behavior is difficult to predict. In any case, you can handle this problem by watching for the {{Event("pushsubscriptionchange")}} event, which you can listen for by providing a {{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}} event handler; this event is fired only in this specific case.</p> - -<pre class="brush: js language-js"><code class="language-js">self<span class="punctuation token">.</span><span class="function token">addEventListener<span class="punctuation token">(</span></span><span class="string token">'pushsubscriptionchange'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // do something, usually resubscribe to push and -</span> <span class="comment token"> // send the new subscription details back to the -</span> <span class="comment token"> // server via XHR or Fetch -</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<p>Note that we don't cover this case in our demo, as a subscription ending is not a big deal for a simple chat server. But for a more complex example you'd probably want to resubscribe the user.</p> - -<h2 id="Extra_steps_for_Chrome_support">Extra steps for Chrome support</h2> - -<p>To get the app working on Chrome, we need a few extra steps, as Chrome currently relies on Google's Cloud Messaging service to work.</p> - -<h3 id="Setting_up_Google_Cloud_Messaging">Setting up Google Cloud Messaging</h3> - -<p>To get this set up, follow these steps:</p> - -<ol> - <li>Navigate to the <a href="https://console.developers.google.com">Google Developers Console</a> and set up a new project.</li> - <li>Go to your project's homepage (ours is at <code>https://console.developers.google.com/project/push-project-978</code>, for example), then - <ol> - <li>Select the <em>Enable Google APIs for use in your apps</em> option.</li> - <li>In the next screen, click <em>Cloud Messaging for Android</em> under the <em>Mobile APIs</em> section.</li> - <li>Click the <em>Enable API</em> button.</li> - </ol> - </li> - <li>Now you need to make a note of your project number and API key because you'll need them later. To find them: - <ol> - <li><strong>Project number</strong>: click <em>Home</em> on the left; the project number is clearly marked at the top of your project's home page.</li> - <li><strong>API key</strong>: click <em>Credentials</em> on the left hand menu; the API key can be found on that screen.</li> - </ol> - </li> -</ol> - -<h3 id="manifest.json">manifest.json</h3> - -<p>You need to include a Google app-style <code>manifest.json</code> file in your app, which references the project number you made a note of earlier in the <code>gcm_sender_id</code> parameter. Here is our simple example <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/manifest.json">manifest.json</a>:</p> - -<pre class="brush: js">{ - "name": "Push Demo", - "short_name": "Push Demo", - "icons": [{ - "src": "push-icon.png", - "sizes": "111x111", - "type": "image/png" - }], - "start_url": "/index.html", - "display": "standalone", - "gcm_sender_id": "224273183921" -}</pre> - -<p>You also need to reference your manifest using a {{HTMLElement("link")}} element in your HTML:</p> - -<pre class="brush: html"><link rel="manifest" href="manifest.json"></pre> - -<h3 id="userVisibleOnly">userVisibleOnly</h3> - -<p>Chrome requires you to set the <a href="/en-US/docs/Web/API/PushManager/subscribe#Parameters"><code>userVisibleOnly</code> parameter</a> to <code>true</code> when subscribing to the push service, which indicates that we are promising to show a notification whenever a push is received. This can be <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js#L127">seen in action in our <code>subscribe()</code> function</a>.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Push_API">Push API</a></li> - <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: Some of the client-side code in our Push demo is heavily influenced by Matt Gaunt's excellent examples in <a href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the Open Web</a>. Thanks for the awesome work, Matt!</p> -</div> diff --git a/files/ru/web/api/randomsource/index.html b/files/ru/web/api/randomsource/index.html deleted file mode 100644 index d56506a90a..0000000000 --- a/files/ru/web/api/randomsource/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: RandomSource -slug: Web/API/RandomSource -tags: - - API - - Interface - - NeedsTranslation - - RandomSource - - Reference - - TopicStub - - Web Crypto API -translation_of: Web/API/Crypto/getRandomValues -translation_of_original: Web/API/RandomSource ---- -<p>{{APIRef("Web Crypto API")}}</p> - -<p><strong><code>RandomSource</code></strong> представляет собой источник криптографически безопасных случайных чисел. Он доступен через {{domxref("Crypto")}} объект глобального объекта: {{domxref("Window.crypto")}} на веб страницах, {{domxref("WorkerGlobalScope.crypto")}} для воркеров.</p> - -<p><code>RandomSource</code> не является интерфейсом и объект этого типа не может быть создан.</p> - -<h2 id="Свойства">Свойства</h2> - -<p><em><code>RandomSource</code> не объявляет и не наследует никаких свойств.</em></p> - -<dl> -</dl> - -<h2 id="Методы">Методы</h2> - -<dl> - <dt>{{ domxref("RandomSource.getRandomValues()") }}</dt> - <dd>Наполняет {{ domxref("ArrayBufferView") }} криптографически безопасными случайными числовыми значениями.</dd> -</dl> - -<h2 id="Specification" name="Specification">Спецификации</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Коммент</th> - </tr> - <tr> - <td>{{SpecName('Web Crypto API', '#dfn-RandomSource')}}</td> - <td>{{Spec2('Web Crypto API')}}</td> - <td>Изначальное определение</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>11.0 {{ webkitbug("22049") }}</td> - <td>{{CompatGeckoDesktop(21)}} [1]</td> - <td>11.0</td> - <td>15.0</td> - <td>3.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{ CompatNo() }}</td> - <td>23</td> - <td>{{CompatGeckoMobile(21)}}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Although the transparent <code>RandomSource</code> is only available since Firefox 26, the feature was available in Firefox 21.</p> - -<h2 id="Смотрите_также">Смотрите также</h2> - -<ul> - <li>{{ domxref("Window.crypto") }} to get a {{domxref("Crypto")}} object.</li> - <li>{{jsxref("Math.random")}}, не криптографический источник случайных чисел.</li> -</ul> diff --git a/files/ru/web/api/slotable/index.html b/files/ru/web/api/slotable/index.html deleted file mode 100644 index af6ec4765c..0000000000 --- a/files/ru/web/api/slotable/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Slotable -slug: Web/API/Slotable -tags: - - миксины -translation_of: Web/API/Slottable -translation_of_original: Web/API/Slotable ---- -<p>{{APIRef("Shadow DOM")}}</p> - -<p>Миксин <code>Slotable</code> определяет возможности, которые позволяют нодам становиться контентом элемента {{htmlelement("slot")}} — следующие возможности включены в {{domxref("Element")}} и {{domxref("Text")}}.</p> - -<h2 id="Свойства">Свойства</h2> - -<dl> - <dt>{{domxref("Slotable.assignedSlot")}} {{readonlyInline}}</dt> - <dd>Возвращает {{htmlelement("slot")}}, в который вставлена нода.</dd> -</dl> - -<h2 id="Методы">Методы</h2> - -<p>Нет.</p> - -<h2 id="Спецификации">Спецификации</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарии</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG','#slotable','Slotable')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Первое определение.</td> - </tr> - </tbody> -</table> - -<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> - - - -<p>{{Compat("api.Slotable")}}</p> diff --git a/files/ru/web/api/storage/localstorage/index.html b/files/ru/web/api/storage/localstorage/index.html deleted file mode 100644 index f0fab82609..0000000000 --- a/files/ru/web/api/storage/localstorage/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: LocalStorage -slug: Web/API/Storage/LocalStorage -translation_of: Web/API/Window/localStorage -translation_of_original: Web/API/Web_Storage_API/Local_storage ---- -<p><code>localStorage</code> это аналог <code><a href="/en-US/docs/Web/API/sessionStorage">sessionStorage</a></code>, с некоторыми same-origin правилами, но значения хранятся постоянно (в отличии от sessions). <code>localStorage</code> появился в Firefox 3.5.</p> - -<div class="note"><strong>Примечание:</strong> Когда браузер переходит в режим приватного просмотра, создается новое временное хранилище. Изначально оно пустое. После выхода из режима приватного просмотра временное хранилище очищается.</div> - -<pre class="brush:js" style="font-size: 14px;">// Сохраняет данные в текущий local store -localStorage.setItem("username", "John"); - -// Извлекает ранее сохраненные данные -alert( "username = " + localStorage.getItem("username"));</pre> - -<p class="note"><code>localStorage</code>'s позволяет постоянно хранить некоторую полезную информацию, включая счетчики посещения страницы, как показано в примере <a href="http://codepen.io/awesom3/pen/Hlfma">this tutorial on Codepen</a>.</p> - -<h4 id="Совместимость" style="line-height: 18px; font-size: 1.28571428571429rem;">Совместимость</h4> - -<p><code>Storage</code> objects недавно добавлен в стандарт. Он может отсутствовать в некоторых браузерах. Вы можете работать с этой технологией добавив в страницу один из двух скриптов, которые представлены ниже. <code>localStorage</code> object реализуется програмно, если нет встроенной реализации.</p> - -<p>Этот алгоритм является точной имитацией <code>localStorage</code> object, но для хранения использует cookies.</p> - -<pre class="brush:js" style="font-size: 14px;">if (!window.localStorage) { - Object.defineProperty(window, "localStorage", new (function () { - var aKeys = [], oStorage = {}; - Object.defineProperty(oStorage, "getItem", { - value: function (sKey) { return sKey ? this[sKey] : null; }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "key", { - value: function (nKeyId) { return aKeys[nKeyId]; }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "setItem", { - value: function (sKey, sValue) { - if(!sKey) { return; } - document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; - }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "length", { - get: function () { return aKeys.length; }, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "removeItem", { - value: function (sKey) { - if(!sKey) { return; } - document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; - }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "clear", { - value: function () { - if(!aKeys.length) { return; } - for (var sKey in aKeys) { - document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; - } - }, - writable: false, - configurable: false, - enumerable: false - }); - this.get = function () { - var iThisIndx; - for (var sKey in oStorage) { - iThisIndx = aKeys.indexOf(sKey); - if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); } - else { aKeys.splice(iThisIndx, 1); } - delete oStorage[sKey]; - } - for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); } - for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) { - aCouple = aCouples[nIdx].split(/\s*=\s*/); - if (aCouple.length > 1) { - oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]); - aKeys.push(iKey); - } - } - return oStorage; - }; - this.configurable = false; - this.enumerable = true; - })()); -} -</pre> - -<div class="note"><strong>Примечание:</strong> Максимальныйe размер данных, которые могут быть сохранены, ограничен возможностями cookies. Используйте functions <code>localStorage.setItem()</code> и <code>localStorage.removeItem()</code> для добавления, изменения, или удаления ключа. Использование прямого присвоения <code>localStorage.yourKey = yourValue;</code> и <code>delete localStorage.yourKey;</code> для установки и удаления ключа <strong>не безопасно с этим кодом</strong>. Вы также можете изменить это имя (вместо window.localStorage прописать другое имя) и использовать объект для управления document's cookies, не обращая внимания на localStorage object.</div> - -<div class="note"><strong>Примечание:</strong> Если изменить строку <code style="background: rgb(204, 204, 204);">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> на: <code style="background: rgb(204, 204, 204);">"; path=/"</code> (и изменить имя объекта), он превратится в <code>sessionStorage</code> polyfill больше, чем в <code>localStorage</code> polyfill. Однако эта реализация будет хранить общие значения для всех вкладок и окон браузера (and will only be cleared when all browser windows have been closed), в то время как полностью совместимая <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">sessionStorage</span><span style="line-height: 1.5em;"> реализация хранит значения</span><span style="line-height: 1.5em;"> to the current browsing context only.</span></div> - -<p>Here is another, less exact, imitation of the <code>localStorage</code> object. It is simpler than the previous one, but it is compatible with old browsers, like Internet Explorer < 8 (<strong>tested and working even in Internet Explorer 6</strong>). It also makes use of cookies.</p> - -<pre class="brush:js" style="font-size: 14px;">if (!window.localStorage) { - window.localStorage = { - getItem: function (sKey) { - if (!sKey || !this.hasOwnProperty(sKey)) { return null; } - return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1")); - }, - key: function (nKeyId) { - return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); - }, - setItem: function (sKey, sValue) { - if(!sKey) { return; } - document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; - this.length = document.cookie.match(/\=/g).length; - }, - length: 0, - removeItem: function (sKey) { - if (!sKey || !this.hasOwnProperty(sKey)) { return; } - document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; - this.length--; - }, - hasOwnProperty: function (sKey) { - return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); - } - }; - window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length; -} -</pre> - -<div class="note"><strong>Note:</strong> The maximum size of data that can be saved is severely restricted by the use of cookies. With this algorithm, use the functions <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code>, and <code>localStorage.removeItem()</code> to get, add, change, or remove a key. The use of method <code>localStorage.yourKey</code> in order to get, set, or delete a key <strong>is not permitted with this code</strong>. You can also change its name and use it only to manage a document's cookies regardless of the localStorage object.</div> - -<div class="note"><strong>Note:</strong> By changing the string <code style="background: rgb(204, 204, 204);">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> to: <code style="background: rgb(204, 204, 204);">"; path=/"</code> (and changing the object's name), this will become a <code>sessionStorage</code> polyfill rather than a <code>localStorage</code> polyfill. However, this implementation will share stored values across browser tabs and windows (and will only be cleared when all browser windows have been closed), while a fully-compliant <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">sessionStorage</span><span style="line-height: 1.5em;"> implementation restricts stored values to the current browsing context only.</span></div> - -<h4 id="Compatibility_and_relation_with_globalStorage" style="line-height: 18px; font-size: 1.28571428571429rem;">Compatibility and relation with globalStorage</h4> - -<p class="note"><code>localStorage</code> is also the same as <code>globalStorage[location.hostname]</code>, with the exception of being scoped to an HTML5 origin (scheme + hostname + non-standard port) and <code>localStorage</code> being an instance of <code>Storage</code> as opposed to <code>globalStorage[location.hostname]</code> being an instance of <code>StorageObsolete</code> which is covered below. For example, <a class="external" href="http://example.com" rel="freelink">http://example.com</a> is not able to access the same <code>localStorage</code> object as <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> but they can access the same <code>globalStorage</code> item. <code>localStorage</code> is a standard interface while <code>globalStorage</code> is non-standard so you shouldn't rely on these.</p> - -<p>Please note that setting a property on <code>globalStorage[location.hostname]</code> does <strong>not</strong> set it on <code>localStorage</code> and extending <code>Storage.prototype</code> does not affect <code>globalStorage</code> items; only extending <code>StorageObsolete.prototype</code> does.</p> - -<h4 id="Storage_format">Storage format</h4> - -<p><code>Storage</code> keys and values are both stored in the UTF-16 <a href="/en-US/docs/Web/API/DOMString">DOMString</a> format, which uses 2 bytes per character.</p> - -<p> </p> diff --git a/files/ru/web/api/svgaelement/svgalement.target/index.html b/files/ru/web/api/svgaelement/svgalement.target/index.html deleted file mode 100644 index dcd76310d4..0000000000 --- a/files/ru/web/api/svgaelement/svgalement.target/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: SVGAElement.target -slug: Web/API/SVGAElement/SVGAlement.target -translation_of: Web/API/SVGAElement/target -translation_of_original: Web/API/SVGAElement/SVGAlement.target ---- -<p>{{APIRef("SVGAElement")}}</p> - -<p> </p> - -<p>Свойство <code><strong>SVGAElement.target</strong></code> для чтения только {{domxref ("SVGAElement")}} возвращает объект {{domxref ("SVGAnimatedString")}}, который указывает часть целевого окна, фрейма, панель, в которую открывается при активации ссылки.</p> - -<p>Это свойство используется, когда существует множество возможных целей для конечного ресурса, например, когда родительский документ является документом HTML или HTML-документом mlti-frame.</p> - -<p> </p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre><code><em>myLink</em>.target = '<em>value</em>';</code></pre> - -<h3 id="Стоимость">Стоимость</h3> - -<p>{{Domxref ("SVGAnimatedString")}}, указывающий конечную цель ресурса, которая открывает документ при активации ссылки.</p> - -<p>Значения для {{domxref ("target")}} можно увидеть <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/linking.html#AElementTargetAttribute">here</a></p> - -<h2 id="Пример">Пример</h2> - -<p>Код взят из <a href="/en-US/docs/Web/API/SVGAElement#Example">"SVGAElement example code"</a></p> - -<pre class="brush: js">... -var linkRef = document.querySelector('a'); -linkRef.target ='_blank'; -...</pre> - -<h2 id="Характеристики">Характеристики</h2> - -<table class="standard-table"> - <tbody> - <tr> - <td>Спецификация</td> - <td>Статус</td> - <td>Комментарий</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'text.html#InterfaceSVGAElement', 'target')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузером</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>9.0</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Смотрите_также">Смотрите также</h2> - -<ul> - <li>{{ SVGAttr("target") }}</li> -</ul> diff --git a/files/ru/web/api/web_crypto_api/checking_authenticity_with_password/index.html b/files/ru/web/api/web_crypto_api/checking_authenticity_with_password/index.html deleted file mode 100644 index ea8ec86586..0000000000 --- a/files/ru/web/api/web_crypto_api/checking_authenticity_with_password/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Проверка подлинности данных с паролем -slug: Web/API/Web_Crypto_API/Checking_authenticity_with_password -tags: - - HMAC - - Web Crypto -translation_of: Web/API/Web_Crypto_API/Checking_authenticity_with_password ---- -<p>{{APIRef("Web Crypto API")}}{{draft}}</p> - -<p>Проверка подлинности данных может быть выполнена с помощью Web Crypto API. В этой статье мы покажем как создавать и управлять подписями, используя хэш-функцию и пароль.</p> - -<p>HMAC алгоритм генерирует хэш на основе передаваемых ключа и данных, которые нужно подписать. Позже, идентичный хэш может быть вычислен заного любым пользователем, у которого имеется ключ. Необходимость ключа позволяет хранить данные и хэш вместе: злоумышленник не сможет создать хэш для измененных данных, не имея ключа.</p> - -<p>Стоит заметить, что алгоритм никак не связан с какой-либо другой информацией о владельце: знание ключа – необходимое и достаточное условие для изменения данных.</p> - -<p>Предположим, данные хранятся на компьютере. Чтобы получить доступ к записи или чтению, мы будем использовать <code>localforage.js</code> – библиотека-обертка над хранилищами браузера. Эта библиотека необязательна и используется в качестве примера для удобства, чтобы сосредоточиться на криптографии.</p> - -<p>Данные, доступ к которым мы хотим получить, имеют следующую форму:</p> - -<p> </p> - -<p>где <code>data</code><em> </em>– данные для подписания и <code>signature</code> – подпись, информация для проверки подлинности.</p> - -<p>Криптографические ключи невозможно выучить наизусть, а обычные пароли недостаточно безопасны. Чтобы решить эту проблему, криптографы создали алгоритмы для создания криптографических ключей из паролей. Знание пароля позволяет воссоздать ключ и использовать его.</p> - -<p>Запрашиваем пароль у пользователя для генерации ключа:</p> - -<pre> </pre> - -<p>С этим ключом мы можем вычислить хэш данных.</p> - -<pre> </pre> 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 new file mode 100644 index 0000000000..7503eccacb --- /dev/null +++ b/files/ru/web/api/web_workers_api/using_web_workers/index.html @@ -0,0 +1,871 @@ +--- +title: Использование Web Workers +slug: DOM/Using_web_workers +tags: + - воркер + - поток +translation_of: Web/API/Web_Workers_API/Using_web_workers +--- +<div>{{DefaultAPISidebar("Web Workers API")}}</div> + +<p>Web Worker-ы предоставляют простое средство для запуска скриптов в фоновом потоке. Поток Worker'а может выполнять задачи без вмешательства в пользовательский интерфейс. К тому же, они могут осуществлять ввод/вывод, используя <code><a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest">XMLHttpRequest</a></code> (хотя атрибуты <code>responseXML</code> и <code>channel</code> всегда будут равны null). Существующий Worker может отсылать сообщения JavaScript коду-создателю через обработчик событий, указанный этим кодом (и наоборот). Эта статья дает детальную инструкцию по использованию Web Workers.</p> + +<h2 id="Web_Workers_API">Web Workers API</h2> + +<p>Worker - это объект, создаваемый конструктором (например, {{domxref("Worker.Worker", "Worker()")}}) и запускающий именной JavaScript файл — этот файл содержит код, который будет выполнен в потоке Worker'а; объекты же Workers запускаются в другом глобальном контексте, отличающемся от текущего, - {{domxref("window")}}. Поэтому использование переменной {{domxref("window")}} для получения текущего глобального контекста (вместо {{domxref("window.self","self")}}) внутри {{domxref("Worker")}} вернет ошибку.</p> + +<p>Контекст Worker'а представлен объектом {{domxref("DedicatedWorkerGlobalScope")}} в случае выделенных Workers (обычные Workers используются одним скриптом; совместные Workers используют объект {{domxref("SharedWorkerGlobalScope")}}). Выделенный Worker доступен только из скрипта-родителя, в то время как совместные Workers могут быть доступны из нескольких сценариев.</p> + +<div class="note"> +<p><strong>Заметка</strong>: Смотрите <a href="/en-US/docs/Web/API/Web_Workers_API">страницу Web Workers API</a> для справки по Workers и прочие руководства.</p> +</div> + +<p>Вы можете запускать любой код внутри потока worker-а, за некоторыми исключениями. Например, вы не можете прямо манипулировать DOM внутри worker-а, или использовать некоторые методы по умолчанию и свойства объекта {{domxref("window")}}. Но вы можете использовать большой набор опций, доступный под <code>Window</code>, включая <a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a>, и механизмы хранения данных, таких как <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> и относящихся только к Firefox OS <a href="/en-US/docs/Web/API/Data_Store_API">Data Store API</a>. Для дополнительной информации смотрите <a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Functions and classes available to workers</a>.</p> + +<p>Данные передаются между worker-ами и главным потоком через систему сообщений — обе стороны передают свои сообщения, используя метод <code>postMessage()</code> и отвечают на сообщения при помощи обработчика событий <code>onmessage</code> (сообщение хранится в аттрибуте data события {{event("Message")}}). Данные при этом копируются, а не делятся.</p> + +<p>Объекты Workers могут, в свою очередь, создавать новые объекты workers, и так до тех пор, пока всё работает в рамках текущей страницы. Плюс к этому, объекты workers могут использовать <a class="internal" href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> для сетевого ввода/вывода, но есть исключение - атрибуты <code>responseXML</code> и <code>channel</code> объекта <code>XMLHttpRequest</code> всегда возвращают <code>null</code>.</p> + +<h2 id="Выделенные_Workers">Выделенные Workers</h2> + +<p>Как уже упоминалось выше, выделенный Worker доступен только для скрипта, который его вызвал. В этом разделе речь пойдет о JavaScript, который можно найти в нашем <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">основном примере выделенного Worker</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">запустить скрипт</a>): этот пример позволяет ввести два числа для умножения. Эти числа отправляются в Worker, перемножаются, а результат возвращается на страницу и отображается.</p> + +<p>Этот пример достаточно тривиален, но для ознакомления с базовыми концепциями worker-ов мы решили его упростить. Более продвинутые детали описаны далее в статье.</p> + +<h3 id="Определение_поддержки_Worker">Определение поддержки Worker</h3> + +<p>Для большего контроля над ошибками и обратной совместимости, рекомендуется обернуть ваш код доступа к worker-у в следующий (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>):</p> + +<pre class="brush: js notranslate">if (window.Worker) { + + ... + +}</pre> + +<h3 id="Создание_выделенного_worker">Создание выделенного worker</h3> + +<p>Создание нового worker-а — это легко. Всё что вам нужно это вызвать конструктор {{domxref("Worker.Worker", "Worker()")}}, указав URI скрипта для выполнения в потоке worker-а (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>):</p> + +<div style="overflow: hidden;"> +<pre class="brush: js notranslate">var myWorker = new Worker("worker.js"); +</pre> +</div> + +<h3 id="Передача_сообщений_в_и_из_выделенного_worker">Передача сообщений в и из выделенного worker</h3> + +<p>Магия worker-ов происходит через {{domxref("Worker.postMessage", "postMessage()")}} метод и обработчик событий {{domxref("Worker.onmessage", "onmessage")}}. Когда вы хотите отправить сообщение в worker, вы доставляете сообщение к нему вот так (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>):</p> + +<pre class="brush: js notranslate">first.onchange = function() { + myWorker.postMessage([first.value,second.value]); + console.log('Message posted to worker'); +} + +second.onchange = function() { + myWorker.postMessage([first.value,second.value]); + console.log('Message posted to worker'); +}</pre> + +<p>В приведенном фрагменте кода мы имеем два {{htmlelement("input")}} элемента, представленных переменными <code>first</code> и <code>second</code>; когда значение любой из переменных изменяется,<code> myWorker.postMessage([first.value,second.value])</code> используется для отправки обоих значений, представленных в виде массива, в worker. Посредством аргумента <code>message</code> возможна передача практически любых данных в worker.</p> + +<p>Внутри worker-a мы можем обрабатывать сообщения и отвечать на них при помощи добавления обработчика события <code>onmessage</code> подобным образом (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/worker.js">worker.js</a>):</p> + +<pre class="brush: js notranslate">onmessage = function(e) { + console.log('Message received from main script'); + var workerResult = 'Result: ' + (e.data[0] * e.data[1]); + console.log('Posting message back to main script'); + postMessage(workerResult); +}</pre> + +<p>Обработчик <code>onmessage</code> позволяет нам запустить некий код всякий раз, когда получен пакет с сообщением, доступным в атрибуте <code>data</code> события <code>message</code>. В примере выше мы просто перемножаем вместе две цифры, после чего используем <code>postMessage()</code> снова, чтобы отправить полученный результат назад в основной поток.</p> + +<p>Возвращаясь в основной поток, мы используем <code>onmessage</code> снова, чтобы отреагировать на сообщение, отправленное нам назад из worker-а:</p> + +<pre class="brush: js notranslate">myWorker.onmessage = function(e) { + result.textContent = e.data; + console.log('Message received from worker'); +}</pre> + +<p>В примере выше мы берём данные из события сообщения и ставим их как <code>textContent</code> у результирующего абзаца, чтобы показать пользователю результат этой калькуляции.</p> + +<p class="note"><strong>Заметка</strong>: Обратите внимание, что <font face="consolas, Liberation Mono, courier, monospace"><code>onmessage()</code> и <code>postmessage()</code> должны вызываться из экземпляра Worker в главном потоке, но не в потоке worker-а. Это связано с тем, что внутри потока worker-а, worker выступает в качестве глобального объекта.</font></p> + +<p class="note"><strong>Заметка</strong>: При передаче сообщения между основным потоком и потоком worker-а, оно копируется или "передается" (перемещается), не делится между потоками. Читайте {{anch("Transferring data to and from workers: further details")}} для более подробного объяснения.</p> + +<h3 id="Завершение_работы_worker-а">Завершение работы worker-а</h3> + +<p>Прекращение работы worker-а главного потока достигается методом {{domxref("Worker", "terminate")}}:</p> + +<pre class="brush: js notranslate">myWorker.terminate();</pre> + +<p>Поток worker-а немедленно уничтожается.</p> + +<h3 id="Обработка_ошибок">Обработка ошибок</h3> + +<p>При ошибке во время выполнения worker-а, вызывается его обработчик событий <code>onerror</code>. Он принимает событие <code>error</code>, которое реализует интерфейс <code>ErrorEvent</code>.</p> + +<p>Событие не всплывает и его можно отменить. Для отмены действия по умолчанию, worker может вызвать метод <a class="internal" href="/en-US/docs/Web/API/Event/preventDefault"> <code>preventDefault()</code> </a> в обработчике события ошибки.</p> + +<p>У события ошибки есть три поля, которые представляют интерес:</p> + +<dl> + <dt><code>message</code></dt> + <dd>Сообщение об ошибке в читаемом виде.</dd> + <dt><code>filename</code></dt> + <dd>Имя файла со скриптом, в котором ошибка произошла.</dd> + <dt><code>lineno</code></dt> + <dd>Номер строки в файле, в котором произошла ошибка.</dd> +</dl> + +<h3 id="Создание_subworkers">Создание subworkers</h3> + +<p>Worker-ы могут запускать другие worker-ы. Так называемые sub-worker'ы должны быть того же происхождения (same-origin), что и родительский документ. Кроме того, URI для subworker-ов рассчитываются относительно родительского worker'а, а не родительского документа. Это позволяет worker-ам проще следить за тем, где находятся их зависимости.</p> + +<h3 id="Импорт_скриптов_и_библиотек">Импорт скриптов и библиотек</h3> + +<p>Worker потоки имеют доступ к глобальной функции, <code>importScripts()</code>, которая позволяет импортировать скрипты с того же домена в их область видимости. Функция принимает ноль и более URI параметров, как список ссылок на ресурсы для импорта; все нижеприведенные примеры верны:</p> + +<pre class="brush: js notranslate">importScripts(); /* imports nothing */ +importScripts('foo.js'); /* imports just "foo.js" */ +importScripts('foo.js', 'bar.js'); /* imports two scripts */ +</pre> + +<p>Браузер загружает каждый указанный скрипт и исполняет его. Любые глобальные объекты, создаваемые каждым скриптом могут быть использованы в worker'е. Если скрипт не удалось загрузить, будет брошена ошибка <code>NETWORK_ERROR</code>, и последующий код не будет исполнен. Тем не менее код, исполненный ранее (включая отложенный при помощи {{domxref("window.setTimeout()")}}) останется функционален. Объявления функций идущие <strong>после</strong> вызова метода <code>importScripts()</code> также будут доступны, т.к. объявления функций всегда обрабатываются перед остальным кодом.</p> + +<div class="note"><strong>Заметка</strong>: Скрипты могут быть загружены в произвольном порядке, но их исполнение будет в том порядке, в котором имена файлов были переданы в <code>importScripts()</code>. Функция выполняется синхронно; <code>importScripts()</code> не вернет исполнение, пока все скрипты не будут загружены и исполнены.</div> + +<h2 id="Разделяемые_worker-ы_Shared_workers">Разделяемые worker-ы (Shared workers)</h2> + +<p>Разделяемый worker доступен нескольким разным скриптам — даже если они находятся в разных окнах, фреймах или даже worker-ах. В этом разделе мы обсудим JavaScript, который можно найти в нашем <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">базовом примере разделяемых worker-ов</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">запустить разделяемый worker</a>): Он очень похож на базовый пример выделенных worker-ов, за исключением двух функций, которые доступны из разных скриптовых файлов: <em>умножение двух чисел</em> или <em>возведение числа в степень.</em> Оба скрипта используют один и тот же worker для необходимых вычислений.</p> + +<p>Здесь мы сосредоточимся на разнице между выделенными и раздялемыми worker-ами. Обратите внимание, что в данном примере есть две HTML страницы с JavaScript кодом, которые используют один и тот же файл worker-а.</p> + +<div class="note"> +<p><strong>Заметка</strong>: Если разделяемый worker может быть доступен из нескольких контекстов просмотра, то все они должны иметь одно и то же происхождение (одни и те же протокол, хост и порт).</p> +</div> + +<div class="note"> +<p><strong>Заметка: </strong>В Firefox разделяемый worker не может быть использован совместно документами в приватном и неприватном окне ({{bug(1177621)}}).</p> +</div> + +<h3 id="Создание_разделяемого_worker-а">Создание разделяемого worker-а</h3> + +<p>Запуск разделяемого worker-а очень похож на запуск выделенного worker-а, но используется другой конструктор (см. <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/index.html">index.html</a> и <a href="http://mdn.github.io/simple-shared-worker/index2.html">index2.html</a>) — в каждом документе необходимо поднять worker, для этого следует написать такой код:</p> + +<pre class="brush: js notranslate">var myWorker = new SharedWorker("worker.js");</pre> + +<p>Большая разница заключается в том, что с разделяемым worker-ом необходимо взаимодействовать через объект <code>port</code> — явно открыв порт, с помощью которого скрипты могут взаимодействовать с worker-ом (в случае выделенного worker-а это происходит неявно).</p> + +<p>Соединение с портом должно быть осуществлено либо неявно, используя обработчик событие <code>onmessage</code>, либо явно, вызвав метод <strong>start()</strong> перед тем, как отправлять любые сообщения. Вызов метода start() необходим только тогда, когда подписка на событие реализована через метод <code>addEventListener()</code>.</p> + +<div class="blockIndicator note"> +<p><strong>Заметка: </strong>Когда используется метод <code>start()</code> чтобы открыть соединение с портом, его необходимо вызывать и в родительском потоке и в потоке worker-а, если необходима двухсторонняя коммуникация.</p> +</div> + +<pre class="brush: js notranslate">myWorker.port.start(); // в родительском потоке</pre> + +<pre class="brush: js notranslate">port.start(); // в потоке worker-а, где переменная <code>port</code> является ссылкой на порт</pre> + +<h3 id="Передача_сообщений_виз_разделяемого_worker-а">Передача сообщений в/из разделяемого worker-а</h3> + +<p>Теперь сообщения могут быть отправлены worker-у, как и прежде, но метод <code>postMessage()</code> должен вызываться из объекта <code>port</code> (еще раз, вы можете увидеть схожие кострукции в <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> и <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js">square.js</a>):</p> + +<pre class="brush: js notranslate">squareNumber.onchange = function() { + myWorker.port.postMessage([squareNumber.value,squareNumber.value]); + console.log('Message posted to worker'); +}</pre> + +<p>Теперь на стороне worker-а. Здесь код немного сложнее (<a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/worker.js">worker.js</a>):</p> + +<pre class="brush: js notranslate">self.addEventListener('connect', function(e) { // требуется addEventListener() + var port = e.ports[0]; + port.onmessage = function(e) { + var workerResult = 'Result: ' + (e.data[0] * e.data[1]); + port.postMessage(workerResult); + } + <s>port.start();</s> // вызов необязательный, т.к. используется обработчик событий onmessage +});</pre> + +<p>Первый этап состоит из события <code>onconnect</code>. Оно срабатывает, когда произошло подключение (т.е. когда в родительском потоке отработало событие <code>onmessage</code> или когда в нем был вызван метод <code>start()</code>).</p> + +<p>Мы используем атрибут события <code>ports</code>, чтобы получить порт и сохранить его в переменной.</p> + +<p>Второй этап — это обработчик события <code>message</code> на сохраненном порту. Он нужен для подсчета и вывода результата вычисления в основной поток. Установка обработчика <code>message</code> в потоке worker-а также открывает подключение к родительскому потоку, поэтому вызов на <code>port.start()</code> на самом деле не нужен (см. код обработчика <code>onconnect</code>).</p> + +<p>Последний этап — возвращение в основной поток и обработка сообщения от worker‑а (еще раз, вы можете увидеть схожие конструкции в <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> и <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js">square.js</a>):</p> + +<pre class="brush: js notranslate">myWorker.port.onmessage = function(e) { + result2.textContent = e.data[0]; + console.log('Message received from worker'); +}</pre> + +<p>Когда сообщение приходит через порт от worker-а, мы проверяем тип результата вычислений и затем вставляем его в соответствующий абзац.</p> + +<h2 id="О_потоковой_безопасности">О потоковой безопасности</h2> + +<p>Интерфейс {{domxref("Worker")}} создаёт настоящие потоки на уровне операционной системы, что может смутить опытных программистов и навести их на мысли о проблемах, связанных с конфликтом доступа к общим объектам.</p> + +<p>На самом деле создать такие проблемы достаточно сложно, так как worker-ы жёстко контролируются. У них нет доступа к непотокобезопасным объектам DOM, а все данные между потоками передаются в качестве сериализованных объектов. Придётся очень постараться, чтобы вызывать проблемы потокобезопасности в вашем коде.</p> + +<h2 id="Передача_данных_в_и_из_worker-ов_другие_детали">Передача данных в и из worker-ов: другие детали</h2> + +<p>Передача данных между главной страницей и worker-ом происходит путем копирования, а не передачи по ссылке. Объекты сериализуются при передаче и затем десериализуются на другом конце. Страница и worker не используют совместно одни и те же экземпляры, для каждого создается свой. Большинство браузеров реализуют это структурированным клонированием (<a href="/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">structured cloning</a>).</p> + +<p>Для иллюстрации этого мы создадим функцию <code>emulateMessage()</code>, которая будет имитировать поведение значения, которое клонируется, но не используется совместно при переходе от worker-а к главной странице или наоборот.</p> + +<pre class="brush: js notranslate">function emulateMessage (vVal) { + return eval("(" + JSON.stringify(vVal) + ")"); +} + +// Tests + +// test #1 +var example1 = new Number(3); +console.log(typeof example1); // object +console.log(typeof emulateMessage(example1)); // number + +// test #2 +var example2 = true; +console.log(typeof example2); // boolean +console.log(typeof emulateMessage(example2)); // boolean + +// test #3 +var example3 = new String("Hello World"); +console.log(typeof example3); // object +console.log(typeof emulateMessage(example3)); // string + +// test #4 +var example4 = { + "name": "John Smith", + "age": 43 +}; +console.log(typeof example4); // object +console.log(typeof emulateMessage(example4)); // object + +// test #5 +function Animal (sType, nAge) { + this.type = sType; + this.age = nAge; +} +var example5 = new Animal("Cat", 3); +alert(example5.constructor); // Animal +alert(emulateMessage(example5).constructor); // Object</pre> + +<p>Значения, которые клонируются и совместно не используются, называются сообщениями. Как вы, возможно, знаете, сообщения могут быть отправлены в главную страницу и из нее, используя <code>postMessage()</code>, и {{domxref("MessageEvent.data", "data")}}, содержа данные, передаваемые из worker-а.</p> + +<p><strong>example.html</strong>: (главная страница):</p> + +<pre class="brush: js notranslate">var myWorker = new Worker("my_task.js"); + +myWorker.onmessage = function (oEvent) { + console.log("Worker said : " + oEvent.data); +}; + +myWorker.postMessage("ali");</pre> + +<p><strong>my_task.js</strong> (worker):</p> + +<pre class="brush: js notranslate">postMessage("I\'m working before postMessage(\'ali\')."); + +onmessage = function (oEvent) { + postMessage("Hi " + oEvent.data); +};</pre> + +<p>Алгоритм структурированного клонирования может принять JSON и некоторые вещи, которые JSON не может принять, например, циклические ссылки.</p> + +<h3 id="Примеры_передачи_данных">Примеры передачи данных</h3> + +<h4 id="Пример_1_Расширенная_передача_JSON_данных_и_создание_системы_коммутации">Пример #1: Расширенная передача JSON данных и создание системы коммутации</h4> + +<p>Если вам нужно передать сложные данные и вызвать множество различных функций как на главной странице, так и в worker-е, вы можете создать следующую систему.</p> + +<p>В первую очередь мы создаем класс QueryableWorker, который принимает url worker-а, стандартный обработчик событий (defaultListener) и обработчик ошибок. Этот класс будет отслеживать всех обработчиков и поможет нам общаться с воркером.</p> + +<pre class="brush: js notranslate"><code>function QueryableWorker(url, defaultListener, onError) { + var instance = this, + worker = new Worker(url), + listeners = {}; + + this.defaultListener = defaultListener || function() {}; + + if (onError) {worker.onerror = onError;} + + this.postMessage = function(message) { + worker.postMessage(message); + } + + this.terminate = function() { + worker.terminate(); + } +}</code> +</pre> + +<p>Затем мы добавляем методы добавления/удаления обработчиков.</p> + +<pre class="brush: js notranslate"><code>this.addListeners = function(name, listener) { + listeners[name] = listener; +} + +this.removeListeners = function(name) { + delete listeners[name]; +}</code> +</pre> + +<p>Здесь мы создадим у worker-а два простых события для примера: получение разницы двух чисел и создание оповещения через три секунды. Но сначала нам нужно реализовать метод sendQuery, который проверит есть ли вообще у worker-а обработчик, который мы собираемся вызвать.</p> + +<pre class="brush: js notranslate"><code>/* + Эта функция принимает по крайней мере один аргумент: имя метода, который мы хотим вызвать. + Далее мы можем передать методу необходимые ему аргументы. + */ +this.sendQuery = function() { + if (arguments.length < 1) { + throw new TypeError('QueryableWorker.sendQuery takes at least one argument'); + return; + } + worker.postMessage({ + 'queryMethod': arguments[0], + 'queryArguments': Array.prototype.slice.call(arguments, 1) + }); +}</code> +</pre> + +<p>Завершим QueryableWorker методом <code>onmessage</code>. Если worker имеет соответствующий метод, который мы запросили, он также должен вернуть соответствующий обработчик и аргументы, которые нам нужны. Останется лишь найти его в <code>listeners</code>:</p> + +<pre class="brush: js notranslate"><code>worker.onmessage = function(event) { + if (event.data instanceof Object && + event.data.hasOwnProperty('queryMethodListener') && + event.data.hasOwnProperty('queryMethodArguments')) { + listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments); + } else { + this.defaultListener.call(instance, event.data); + } +}</code> +</pre> + +<p>Теперь к самому worker-у. Сначала следует определить эти два простых метода:</p> + +<pre class="brush: js notranslate"><code>var queryableFunctions = { + getDifference: function(a, b) { + reply('printStuff', a - b); + }, + waitSomeTime: function() { + setTimeout(function() { + reply('doAlert', 3, 'seconds'); + }, 3000); + } +} + +function reply() { + if (arguments.length < 1) { + throw new TypeError('reply - takes at least one argument'); + return; + } + postMessage({ + queryMethodListener: arguments[0], + queryMethodArguments: Array.prototype.slice.call(arguments, 1) + }); +} + +/* This method is called when main page calls QueryWorker's postMessage method directly*/ +function defaultReply(message) { + // do something +}</code> +</pre> + +<p>И <code>onmessage</code>:</p> + +<pre class="brush: js notranslate"><code>onmessage = function(event) { + if (event.data instanceof Object && + event.data.hasOwnProperty('queryMethod') && + event.data.hasOwnProperty('queryMethodArguments')) { + queryableFunctions[event.data.queryMethod] + .apply(self, event.data.queryMethodArguments); + } else { + defaultReply(event.data); + } +}</code></pre> + +<p>Полный код примера:</p> + +<p><strong>example.html</strong> (основная страница):</p> + +<pre class="brush: html notranslate"><code><!doctype html> + <html> + <head> + <meta charset="UTF-8" /> + <title>MDN Example - Queryable worker</title> + <script type="text/javascript"> + /* + QueryableWorker instances methods: + * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function + * postMessage(string or JSON Data): see Worker.prototype.postMessage() + * terminate(): terminates the Worker + * addListener(name, function): adds a listener + * removeListener(name): removes a listener + QueryableWorker instances properties: + * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly + */ + function QueryableWorker(url, defaultListener, onError) { + var instance = this, + worker = new Worker(url), + listeners = {}; + + this.defaultListener = defaultListener || function() {}; + + if (onError) {worker.onerror = onError;} + + this.postMessage = function(message) { + worker.postMessage(message); + } + + this.terminate = function() { + worker.terminate(); + } + + this.addListener = function(name, listener) { + listeners[name] = listener; + } + + this.removeListener = function(name) { + delete listeners[name]; + } + + /* + This functions takes at least one argument, the method name we want to query. + Then we can pass in the arguments that the method needs. + */ + this.sendQuery = function() { + if (arguments.length < 1) { + throw new TypeError('QueryableWorker.sendQuery takes at least one argument'); + return; + } + worker.postMessage({ + 'queryMethod': arguments[0], + 'queryMethodArguments': Array.prototype.slice.call(arguments, 1) + }); + } + + worker.onmessage = function(event) { + if (event.data instanceof Object && + event.data.hasOwnProperty('queryMethodListener') && + event.data.hasOwnProperty('queryMethodArguments')) { + listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments); + } else { + this.defaultListener.call(instance, event.data); + } + } + } + + // your custom "queryable" worker + var myTask = new QueryableWorker('my_task.js'); + + // your custom "listeners" + myTask.addListener('printStuff', function (result) { + document.getElementById('firstLink').parentNode.appendChild(document.createTextNode('The difference is ' + result + '!')); + }); + + myTask.addListener('doAlert', function (time, unit) { + alert('Worker waited for ' + time + ' ' + unit + ' :-)'); + }); +</script> +</head> +<body> + <ul> + <li><a id="firstLink" href="javascript:myTask.sendQuery('getDifference', 5, 3);">What is the difference between 5 and 3?</a></li> + <li><a href="javascript:myTask.sendQuery('waitSomeTime');">Wait 3 seconds</a></li> + <li><a href="javascript:myTask.terminate();">terminate() the Worker</a></li> + </ul> +</body> +</html></code></pre> + +<p><strong>my_task.js</strong> (код worker-а):</p> + +<pre class="brush: js notranslate"><code>var queryableFunctions = { + // пример #1: получить разницу между двумя числами + getDifference: function(nMinuend, nSubtrahend) { + reply('printStuff', nMinuend - nSubtrahend); + }, + // пример #2: подождать три секунды + waitSomeTime: function() { + setTimeout(function() { reply('doAlert', 3, 'seconds'); }, 3000); + } +}; + +// системные функции + +function defaultReply(message) { + // your default PUBLIC function executed only when main page calls the queryableWorker.postMessage() method directly + // do something +} + +function reply() { + if (arguments.length < 1) { throw new TypeError('reply - not enough arguments'); return; } + postMessage({ 'queryMethodListener': arguments[0], 'queryMethodArguments': Array.prototype.slice.call(arguments, 1) }); +} + +onmessage = function(oEvent) { + if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty('queryMethod') && oEvent.data.hasOwnProperty('queryMethodArguments')) { + queryableFunctions[oEvent.data.queryMethod].apply(self, oEvent.data.queryMethodArguments); + } else { + defaultReply(oEvent.data); + } +};</code> +</pre> + +<p>Можно переключать содержимое каждой главной страницы -> worker и worker -> сообщение главной страницы. И имена свойств "queryMethod", "queryMethodListeners", "queryMethodArguments" могут быть любыми пока они согласуются с <code>QueryableWorker</code> и <code>worker</code>.</p> + +<h3 id="Передача_данных_с_помощью_передачи_владения_передаваемые_объекты">Передача данных с помощью передачи владения (передаваемые объекты)</h3> + +<p>Google Chrome 17+ and Firefox 18+ имеют дополнительную возможность передачи определенных типов объектов (передаваемые объекты реализующие {{domxref("Transferable")}} интерфейс) к или из worker-а с высокой призводительностью. Эти объекты передаются из одного контекста в другой без операций копирования, что приводит к значительному повышению производительности при отправке больших наборов данных. Думайте об этом как о передаче по ссылке в мире C/C++. Однако в отличии от передачи по ссылке, "версия" из вызывающего контекста больше недоступна после передачи. Владельцем становится новый контекст. Для примера, после передачи {{domxref("ArrayBuffer")}} из главной страницы к worker-у, исходный {{domxref("ArrayBuffer")}} очищается и более недоступен для использования. Его содержание (в буквальном смысле) переносится в рабочий контекст.</p> + +<pre class="brush: js notranslate">// Create a 32MB "file" and fill it. +var uInt8Array = new Uint8Array(1024*1024*32); // 32MB +for (var i = 0; i < uInt8Array.length; ++i) { + uInt8Array[i] = i; +} + +worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]); +</pre> + +<div class="note"> +<p><strong>Заметка</strong>: Для дополнительной информации о передаваемых объектах, производительности и поддержки для этого метода, читайте <a href="http://updates.html5rocks.com/2011/12/Transferable-Objects-Lightning-Fast">Transferable Objects: Lightning Fast!</a> на HTML5 Rocks.</p> +</div> + +<h2 id="Встроенные_worker-ы">Встроенные worker-ы</h2> + +<p>Не существует утвержденного способа встроить код worker-а в рамках веб-страницы, как элемент {{HTMLElement("script")}} делает для обычных скриптов. Но элемент {{HTMLElement("script")}}, который не имеет аттрибута <code>src</code> и аттрибута <code>type</code>, которому не назначен выполняемый MIME type, можно считать блоком данных для использования JavaScript. Блок данных "Data blocks" — это более общее свойство HTML5, может содержать любые текстовые данные. Так, worker может быть встроен следующим образом:</p> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>MDN Example - Embedded worker<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/js-worker<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="script token"><span class="language-javascript token"> + <span class="comment token">// Этот script НЕ БУДЕТ анализироваться JS движками, потому что его MIME-тип text/js-worker.</span> + <span class="keyword token">var</span> myVar <span class="operator token">=</span> <span class="string token">'Hello World!'</span><span class="punctuation token">;</span> + <span class="comment token">// </span></span></span></code>Остальная часть кода вашего воркера идет сюда.<code class="language-html"><span class="script token"><span class="language-javascript token"> +</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="script token"><span class="language-javascript token"> + <span class="comment token">// Этот script БУДЕТ проанализирован JS движкам, потому что его MIME-тип text/javascript.</span> + <span class="keyword token">function</span> <span class="function token">pageLog</span><span class="punctuation token">(</span><span class="parameter token">sMsg</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// Use a fragment: browser will only render/reflow once.</span> + <span class="keyword token">var</span> oFragm <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createDocumentFragment</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + oFragm<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span>sMsg<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + oFragm<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'br'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'#logDisplay'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>oFragm<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/js-worker<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="script token"><span class="language-javascript token"> + <span class="comment token">// Этот script НЕ БУДЕТ анализироваться JS движками, потому что его MIME-тип text/js-worker.</span> + <span class="function function-variable token">onmessage</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">oEvent</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">postMessage</span><span class="punctuation token">(</span>myVar<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">;</span> + <span class="comment token">// </span></span></span></code>Остальная часть кода вашего воркера идет сюда.<code class="language-html"><span class="script token"><span class="language-javascript token"> +</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="script token"><span class="language-javascript token"> + <span class="comment token">// Этот script БУДЕТ проанализирован JS движкам, потому что его MIME-тип text/javascript.</span> + + <span class="comment token">// В прошлом...:</span> + <span class="comment token">// blob builder существовал</span> + <span class="comment token">// ... но теперь мы используем Blob...:</span> + <span class="keyword token">var</span> blob <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Blob</span><span class="punctuation token">(</span><span class="class-name token">Array</span><span class="punctuation token">.</span>prototype<span class="punctuation token">.</span><span class="function token">map</span><span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">'script[type=\'text\/js-worker\']'</span><span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="parameter token">oScript</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> oScript<span class="punctuation token">.</span>textContent<span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">,</span><span class="punctuation token">{</span>type<span class="punctuation token">:</span> <span class="string token">'text/javascript'</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="comment token">// Создание нового свойства document.worker, содержащего все наши "text/js-worker" скрипты.</span> + document<span class="punctuation token">.</span>worker <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Worker</span><span class="punctuation token">(</span>window<span class="punctuation token">.</span><span class="constant token">URL</span><span class="punctuation token">.</span><span class="function token">createObjectURL</span><span class="punctuation token">(</span>blob<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + document<span class="punctuation token">.</span>worker<span class="punctuation token">.</span><span class="function function-variable token">onmessage</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">oEvent</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">pageLog</span><span class="punctuation token">(</span><span class="string token">'Received: '</span> <span class="operator token">+</span> oEvent<span class="punctuation token">.</span>data<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">;</span> + + <span class="comment token">// Запуск воркера.</span> + window<span class="punctuation token">.</span><span class="function function-variable token">onload</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> document<span class="punctuation token">.</span>worker<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span><span class="string token">''</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">;</span> +</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>logDisplay<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code> +</pre> + +<div id="logDisplay">Встраиваемый worker теперь внесен в новое custom свойство <code>document.worker</code></div> + +<div></div> + +<div>Также стоит отметить, что вы также можете преобразовать функцию в BLOB-объект, а затем сгенерировать URL объекта из этого BLOB-объекта. Например:</div> + +<pre class="notranslate">function fn2workerURL(fn) { + var blob = new Blob(['('+fn.toString()+')()'], {type: 'application/javascript'}) + return URL.createObjectURL(blob) +} +</pre> + +<h2 id="Другие_примеры">Другие примеры</h2> + +<p>В этой секции представлено еще несколько примеров как использовать worker-ы.</p> + +<h3 id="Выполнение_вычислений_в_фоне">Выполнение вычислений в фоне</h3> + +<p>Worker-ы в основном полезны для того, чтобы позволить вашему коду выполнять ресурсоемкие вычисления, не блокируя поток пользовательского интерфейса. В этом примере, worker используется для вычисления числа Фибоначчи.</p> + +<h4 id="Код_JavaScript">Код JavaScript</h4> + +<p>Следующий код JavaScript хранится в файле "fibonacci.js", на который ссылается HTML в следующем разделе.</p> + +<pre class="brush: js notranslate">var results = []; + +function resultReceiver(event) { + results.push(parseInt(event.data)); + if (results.length == 2) { + postMessage(results[0] + results[1]); + } +} + +function errorReceiver(event) { + throw event.data; +} + +onmessage = function(event) { + var n = parseInt(event.data); + + if (n == 0 || n == 1) { + postMessage(n); + return; + } + + for (var i = 1; i <= 2; i++) { + var worker = new Worker("fibonacci.js"); + worker.onmessage = resultReceiver; + worker.onerror = errorReceiver; + worker.postMessage(n - i); + } + };</pre> + +<p>Worker устанавливает свойство <code>onmessage</code> для функции, которая будет получать сообщения, отправленные при вызове <code>postMessage()</code> рабочего объекта (обратите внимание, что это отличается от определения глобальной <em>переменной</em> с таким именем или определения <em>функции</em> с таким именем. <code>var onmessage</code> и <code>function onmessage</code> будет определять глобальные свойства с этими именами , но они не будут регистрировать функцию для получения сообщений, отправленных веб-страницей, которая создала worker). Это запускает рекурсию, порождая новые копии для обработки каждой итерации вычисления.</p> + +<h4 id="HTML_код">HTML код</h4> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>Test threads fibonacci<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>result<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">language</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="script token"><span class="language-javascript token"> + + <span class="keyword token">var</span> worker <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Worker</span><span class="punctuation token">(</span><span class="string token">'fibonacci.js'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + worker<span class="punctuation token">.</span><span class="function function-variable token">onmessage</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">event</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'result'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>textContent <span class="operator token">=</span> event<span class="punctuation token">.</span>data<span class="punctuation token">;</span> + <span class="function token">dump</span><span class="punctuation token">(</span><span class="string token">'Got: '</span> <span class="operator token">+</span> event<span class="punctuation token">.</span>data <span class="operator token">+</span> <span class="string token">'\n'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">;</span> + + worker<span class="punctuation token">.</span><span class="function function-variable token">onerror</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">error</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">dump</span><span class="punctuation token">(</span><span class="string token">'Worker error: '</span> <span class="operator token">+</span> error<span class="punctuation token">.</span>message <span class="operator token">+</span> <span class="string token">'\n'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">throw</span> error<span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">;</span> + + worker<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span><span class="string token">'5'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + </span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> + +<p>Веб-страница создает элемент <code>div</code> с ID <code>result</code> , который используется для отображения результата, а затем порождает worker. После порождения worker-а, обработчик <code>onmessage</code> настроен для отображения результатов путем установки содержимого элемента <code>div</code>, и обработчик <code>onerror</code> настроен на <a href="/en-US/docs/Debugging_JavaScript#dump.28.29">выброс</a> сообщения об ошибке.</p> + +<p>Наконец, сообщение отправляется worker-у, чтобы запустить его.</p> + +<p><a class="external" href="/samples/workers/fibonacci">Попробуйте этот пример</a>.</p> + +<h3 id="Выполнение_веб_IO_в_фоне">Выполнение веб I/O в фоне</h3> + +<p>Вы можете найти пример этого в статье <a class="internal" href="/en-US/docs/Using_workers_in_extensions">Использование worker-ов в расширениях</a>.</p> + +<h3 id="Разделение_задач_между_множественными_worker-ами">Разделение задач между множественными worker-ами</h3> + +<p>Поскольку многоядерные компьютеры становятся все более распространенными, часто бывает полезно разделить вычислительно сложные задачи между несколькими worker-ами, которые затем могут выполнить эти задачи на многопроцессорных ядрах.</p> + +<h2 id="Другие_типы_worker-ов">Другие типы worker-ов</h2> + +<p>В дополнение к выделенным и совместно используемым web worker-ам доступны другие типы worker-ов:</p> + +<ul> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a>, по сути, действуют как прокси-серверы, которые размещаются между веб-приложениями, браузером и сетью (при наличии). Они предназначены (помимо прочего) для создания эффективного автономного взаимодействия, перехвата сетевых запросов и принятия соответствующих действий в зависимости от того, доступна ли сеть, и обновлены ли ресурсы на сервере. Они также разрешают доступ push-уведомлениям и API фоновой синхронизации.</li> + <li>Chrome Workers это worker типа Firefox-only, который вы можете использовать, если вы разрабатываете дополнения и хотите использовать worker-ы в расширениях и иметь доступ к <a href="https://developer.mozilla.org/en/js-ctypes">js-ctypes</a> в вашем worker-е. Смотрите {{domxref("ChromeWorker")}} для более подробной информации.</li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a> предоставляют возможность прямой обработки звука по сценарию в контексте web worker-а.</li> +</ul> + +<h2 id="Функции_и_интерфейсы_доступные_в_worker-ах">Функции и интерфейсы доступные в worker-ах</h2> + +<p>Внутри web worker-а вы можете использовать большинство стандартных функций JavaScript, включая:</p> + +<ul> + <li>{{domxref("Navigator")}}</li> + <li>{{domxref("XMLHttpRequest")}}</li> + <li>{{jsxref("Global_Objects/Array", "Array")}}, {{jsxref("Global_Objects/Date", "Date")}}, {{jsxref("Global_Objects/Math", "Math")}}, и {{jsxref("Global_Objects/String", "String")}}</li> + <li>{{domxref("Window.requestAnimationFrame")}}, {{domxref("WindowTimers.setTimeout")}}, и {{domxref("WindowTimers.setInterval")}}</li> +</ul> + +<p>Главное, что вы не можете сделать в Worker это напрямую повлиять на родительскую страницу. Это включает в себя манипулирование DOM и использование объектов этой страницы. Вы должны сделать это косвенно, отправив сообщение обратно основному сценарию через {{domxref("DedicatedWorkerGlobalScope.postMessage")}}, а затем выполнив изменения оттуда.</p> + +<div class="note"> +<p><strong>Заметка</strong>: Для знакомства с полным списком функций, доступных для worker-ов, смотрите статью <a href="/en-US/docs/Web/Reference/Functions_and_classes_available_to_workers">Функции и интерфейсы доступные worker-ам</a>.</p> +</div> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#toc-workers')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Без изменений {{SpecName("Web Workers")}}.</td> + </tr> + <tr> + <td>{{SpecName('Web Workers')}}</td> + <td>{{Spec2('Web Workers')}}</td> + <td>Начальное определение.</td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_совместимость">Браузерная совместимость</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>4<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>10.0</td> + <td>10.6<sup>[1]</sup></td> + <td>4<sup>[2]</sup></td> + </tr> + <tr> + <td>Shared workers</td> + <td>4<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop(29)}}</td> + <td>{{CompatNo}}</td> + <td>10.6</td> + <td>5<br> + {{CompatNo}} 6.1<sup>[4]</sup></td> + </tr> + <tr> + <td>Passing data using <a href="/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">structured cloning</a></td> + <td>13</td> + <td>{{CompatGeckoDesktop(8)}}</td> + <td>10.0</td> + <td>11.5</td> + <td>6</td> + </tr> + <tr> + <td>Passing data using <a class="external" href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#transferable-objects">transferable objects</a></td> + <td>17 {{property_prefix("webkit")}}<br> + 21</td> + <td>{{CompatGeckoDesktop(18)}}</td> + <td>{{CompatNo}}</td> + <td>15</td> + <td>6</td> + </tr> + <tr> + <td>Global {{domxref("window.URL", "URL")}}</td> + <td>10<sup>[3]</sup><br> + 23</td> + <td>{{CompatGeckoDesktop(21)}}</td> + <td>11</td> + <td>15</td> + <td>6<sup>[3]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.4</td> + <td>4<sup>[1]</sup></td> + <td>3.5</td> + <td>1.0.1</td> + <td>10.0</td> + <td>11.5<sup>[1]</sup></td> + <td>5.1<sup>[2]</sup></td> + </tr> + <tr> + <td>Shared workers</td> + <td>{{CompatNo}}</td> + <td>4<sup>[1]</sup></td> + <td>8</td> + <td>1.0.1</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Passing data using <a href="/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">structured cloning</a></td> + <td>{{CompatNo}}</td> + <td>4</td> + <td>8</td> + <td>1.0.1</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Passing data using <a class="external" href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#transferable-objects">transferable objects</a></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>18</td> + <td>1.0.1</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Chrome и Opera выдают ошибку "<code>Uncaught SecurityError: Failed to construct 'Worker': Script at 'file:///Path/to/worker.js' cannot be accessed from origin 'null'.</code>" когда вы пытаетесь запустить worker локально. Нужно быть на надлежащем домене.</p> + +<p>[2] Начиная с Safari 7.1.2, вы можете вызывать <code>console.log</code> изнутри worker-а, но он ничего не выведет в консоль. Более старые версии Safari не ползволяют вызывать <code>console.log</code> изнутри worker-а</p> + +<p>[3] Эта функция реализована с префиксом как <code>webkitURL</code>.</p> + +<p>[4] Safari <a href="https://bugs.webkit.org/show_bug.cgi?id=116359">удалил поддержку SharedWorker</a>.</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><code><a class="internal" href="/en-US/docs/Web/API/Worker">Worker</a></code> интерфейс</li> + <li><code><a class="internal" href="/en-US/docs/Web/API/SharedWorker">SharedWorker</a></code> интерфейс</li> + <li><a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Функции доступные для worker-ов</a></li> + <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Продвинутые концепции и примеры</a></li> +</ul> diff --git a/files/ru/web/api/webgl_api/tutorial/создание_3d_объектов_с_помощью_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html index b5abccbe14..b5abccbe14 100644 --- a/files/ru/web/api/webgl_api/tutorial/создание_3d_объектов_с_помощью_webgl/index.html +++ b/files/ru/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html diff --git a/files/ru/web/api/webrtc_api/связь/index.html b/files/ru/web/api/webrtc_api/connectivity/index.html index 7c4f173c05..7c4f173c05 100644 --- a/files/ru/web/api/webrtc_api/связь/index.html +++ b/files/ru/web/api/webrtc_api/connectivity/index.html diff --git a/files/ru/web/api/webrtc_api/протоколы/index.html b/files/ru/web/api/webrtc_api/protocols/index.html index df618ab083..df618ab083 100644 --- a/files/ru/web/api/webrtc_api/протоколы/index.html +++ b/files/ru/web/api/webrtc_api/protocols/index.html diff --git a/files/ru/web/api/webrtc_api/webrtc_basics/index.html b/files/ru/web/api/webrtc_api/webrtc_basics/index.html deleted file mode 100644 index 863dde7e14..0000000000 --- a/files/ru/web/api/webrtc_api/webrtc_basics/index.html +++ /dev/null @@ -1,351 +0,0 @@ ---- -title: Основы WebRTC -slug: Web/API/WebRTC_API/WebRTC_basics -translation_of: Web/API/WebRTC_API/Signaling_and_video_calling -translation_of_original: Web/API/WebRTC_API/WebRTC_basics ---- -<p>{{WebRTCSidebar}}</p> - -<p>{{Draft}}</p> - -<div class="summary"> -<p>После того, как вы понимаете <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Architecture" title="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture">WebRTC architecture</a>, вы можете прочитать эту статью, которая сопроводит вас через создание кросс-браузерного RTC приложения. К концу этой документации, вы должны иметь рабочие каналы соединения равноправных узлов ЛВС и передачи данных средств массовой информации.</p> -</div> - -<h2 id="Полу-старое_содержание_из">Полу-старое содержание, из</h2> - -<h2 id="RTCPeerConnection">RTCPeerConnection</h2> - -<p>Материал здесь происходит от RTCPeerConnection; она может остаться здесь, или же может переместится в другое место.</p> - -<p><strong>Основы использования</strong><br> - Базовое использование RTCPeerConnection предполагает переговоры связь между локальной машиной и удаленной машиной один генерируя Session Description Protocol для обмена между ними. Вызывающая программа начинает процесс, отправив предложение на удаленное устройство, которое реагирует либо принять или отклонить запрос на соединение.</p> - -<p>Обе стороны (вызывающий и вызываемый абонент) необходимо настроить свои собственные экземпляры RTCPeerConnection, чтобы представить их конец соединения равноправных узлов ЛВС:</p> - -<pre class="brush: js notranslate">var pc = new RTCPeerConnection(); -pc.onaddstream = function(obj) { - var vid = document.createElement("video"); - document.appendChild(vid); - vid.srcObject = obj.stream; -} - -// функция помощник -function endCall() { - var videos = document.getElementsByTagName("video"); - for (var i = 0; i < videos.length; i++) { - videos[i].pause(); - } - - pc.<a href="#close()">close</a>(); - - -function error(err) { - endCall(); -} -</pre> - -<h3 id="При_инициализации_вызова">При инициализации вызова</h3> - -<p>Если вы один инициирующий вызов, вы будете использовать navigator.getUserMedia(), чтобы получить видеопоток, а затем добавить поток в RTCPeerConnection. Как только это было сделано, вызов RTCPeerConnection, чтобы создать предложение, настроить предложение, а затем отправить его на сервер, через соединение которое было создано.</p> - -<pre class="brush: js notranslate">// Получить список людей с сервера -// Пользователь выбирает список людей, чтобы установить соединение с нужным человеком -navigator.getUserMedia({video: true}, function(stream) { - // Добавление локального потока не вызовет onaddstream обратного вызова, - // так называют его вручную. - pc.onaddstream = e => video.src = URL.createObjectURL(e.stream); - pc.<a href="#addStream()">addStream</a>(stream); - - pc.<a href="#createOffer()">createOffer</a>(function(offer) { - pc.<a href="#setLocalDescription()">setLocalDescription</a>(offer, function() { - // send the offer to a server to be forwarded to the friend you're calling. - }, error); - }, error); -}); -</pre> - -<h3 id="Ответ_на_вызов">Ответ на вызов</h3> - -<p>На противоположном конце, друг получит предложение от сервера, используя любой протокол используется для того чтобы сделать это. После того, как предложение прибывает, {{domxref ("navigator.getUserMedia ()")}} вновь используется для создания потока, который добавляется к RTCPeerConnection. {{Domxref ("RTCSessionDescription")}} объект создается и установить в качестве удаленного описания с помощью вызова {{domxref ("RTCPeerConnection.setRemoteDescription ()")}}.</p> - -<p>Тогда ответ создается с помощью RTCPeerConnection.createAnswer () и отправляется обратно на сервер, который направляет его к вызывающему абоненту.</p> - -<pre class="brush: js notranslate">var offer = getOfferFromFriend(); -navigator.getUserMedia({video: true}, function(stream) { - pc.onaddstream = e => video.src = URL.createObjectURL(e.stream); - pc.<a href="#addStream()">addStream</a>(stream); - - pc.setRemoteDescription(new <span class="nx">RTCSessionDescription</span>(offer), function() { - pc.<a href="#createAnswer()">createAnswer</a>(function(answer) { - pc.<a href="#setLocalDescription()">setLocalDescription</a>(answer, function() { - // send the answer to a server to be forwarded back to the caller (you) - }, error); - }, error); - }, error); -}); -</pre> - -<p><strong>Ответ на вызов</strong></p> - -<p>На противоположном конце, человек получит предложение от сервера, используя любой протокол используется для того чтобы сделать это. После того, как предложение принято, navigator.getUserMedia () вновь используется для создания потока, который добавляется к RTCPeerConnection. объект создается и установить в качестве удаленного описания с помощью вызова {{domxref ("RTCPeerConnection.setRemoteDescription ()")}}.</p> - -<p>Тогда ответ создается с помощью RTCPeerConnection.createAnswer () и отправляется обратно на сервер, который направляет его к вызывающему абоненту.</p> - -<pre class="brush: js notranslate">// ПК был создан раньше, когда мы сделали первоначальное предложение -var offer = getResponseFromFriend(); -pc.<a href="#createAnswer()">setRemoteDescription</a>(new <span class="nx">RTCSessionDescription</span>(offer), function() { }, error);</pre> - -<h2 id="Old_content_follows!">Old content follows!</h2> - -<p>Все, что находится ниже этого пункта, потенциально устарело. Это по-прежнему находится в стадии рассмотрения и возможного включения в другие части документации, если они все еще актуальны.</p> - -<div class="note"> -<p><strong>Не используйте примеры на этой странице.</strong> Смотрите статью <a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a> для работы, актуальный пример с использованием WebRTC media.</p> -</div> - -<h3 id="Note">Note</h3> - -<p>Due to recent changes in the API there are many old examples that require fixing:</p> - -<ul> - <li><a href="http://louisstow.github.io/WebRTC/media.html">louisstow</a></li> - <li><a href="http://mozilla.github.io/webrtc-landing/">mozilla</a></li> - <li><a href="https://www.webrtc-experiment.com/">webrtc-experiment</a></li> -</ul> - -<p>The currently working example is:</p> - -<ul> - <li><a href="https://apprtc.appspot.com">apprtc</a> (<a href="https://github.com/webrtc/apprtc">source</a>)</li> -</ul> - -<p>Implementation may be inferred from the <a href="http://w3c.github.io/webrtc-pc/">specification</a>.</p> - -<p>This remainder of this page contains outdated information as <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1119285">noted on bugzilla</a>.</p> - -<h3 id="Shims">Shims</h3> - -<p>As you can imagine, with such an early API, you must use the browser prefixes and shim it to a common variable.</p> - -<pre class="brush: js notranslate">var RTCPeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection; -var IceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate; -var SessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription; -navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;</pre> - -<h3 id="RTCPeerConnection_2">RTCPeerConnection</h3> - -<p>This is the starting point to creating a connection with a peer. It accepts configuration options about ICE servers to use to establish a connection.</p> - -<pre class="brush: js notranslate">var pc = new RTCPeerConnection(configuration);</pre> - -<h3 id="RTCConfiguration"><strong><code>RTCConfiguration</code></strong></h3> - -<p>The {{domxref("RTCConfiguration")}} object contains information about which TURN and/or STUN servers to use for ICE. This is required to ensure most users can actually create a connection by avoiding restrictions in NAT and firewalls.</p> - -<pre class="brush: js notranslate">var configuration = { - iceServers: [ - {urls: "stun:23.21.150.121"}, - {urls: "stun:stun.l.google.com:19302"}, - {urls: "turn:numb.viagenie.ca", credential: "webrtcdemo", username: "louis%40mozilla.com"} - ] -}</pre> - -<p>Google runs a <a href="https://code.google.com/p/natvpn/source/browse/trunk/stun_server_list">public STUN server</a> that we can use. I also created an account at http://numb.viagenie.ca/ for a free TURN server to access. You may want to do the same and replace with your own credentials.</p> - -<h3 id="ICECandidate">ICECandidate</h3> - - - -<p>After creating the PeerConnection and passing in the available <a href="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture#What_is_STUN.3F">STUN</a> and <a href="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture#What_is_TURN.3F">TURN</a> servers, an event will be fired once the ICE framework has found some “candidates” that will allow you to connect with a peer. This is known as an ICE Candidate and will execute a callback function on <a href="/en-US/docs/Web/API/RTCPeerConnection.onicecandidate">PeerConnection#onicecandidate</a>.</p> - -<pre class="brush: js notranslate" lang="javascript">pc.onicecandidate = function (e) { - // candidate exists in e.candidate - if (!e.candidate) return; - send("icecandidate", JSON.stringify(e.candidate)); -};</pre> - -<p>When the callback is executed, we must use the signal channel to send the Candidate to the peer. On Chrome, multiple ICE candidates are usually found, we only need one so I typically send the first one then remove the handler. Firefox includes the Candidate in the Offer SDP.</p> - -<h3 id="Signal_Channel">Signal Channel</h3> - -<p>Now that we have an ICE candidate, we need to send that to our peer so they know how to connect with us. However this leaves us with a chicken and egg situation; we want PeerConnection to send data to a peer but before that we need to send them metadata…</p> - -<p>This is where the signal channel comes in. It’s any method of data transport that allows two peers to exchange information. In this article, we’re going to use <a href="http://firebase.com">FireBase</a> because it’s incredibly easy to setup and doesn't require any hosting or server-code.</p> - -<p>For now just imagine two methods exist: <code>send()</code> will take a key and assign data to it and <code>recv()</code> will call a handler when a key has a value.</p> - -<p>The structure of the database will look like this:</p> - -<pre class="brush: js notranslate" lang="json">{ - "": { - "candidate:": … - "offer": … - "answer": … - } -}</pre> - -<p>Connections are divided by a <code>roomId</code> and will store 4 pieces of information, the ICE candidate from the offerer, the ICE candidate from the answerer, the offer SDP and the answer SDP.</p> - -<h3 id="Offer">Offer</h3> - -<p>An Offer SDP (Session Description Protocol) is metadata that describes to the other peer the format to expect (video, formats, codecs, encryption, resolution, size, etc etc).</p> - -<p>An exchange requires an offer from a peer, then the other peer must receive the offer and provide back an answer.</p> - -<pre class="brush: js notranslate" lang="javascript">pc.createOffer(function (offer) { - pc.setLocalDescription(offer, function() { - send("offer", JSON.stringify(pc.localDescription); - }, errorHandler); -}, errorHandler, options);</pre> - -<h4 id="errorHandler"><strong><code>errorHandler</code></strong></h4> - -<p>If there was an issue generating an offer, this method will be executed with error details as the first argument.</p> - -<pre class="brush: js notranslate" lang="javascript">var errorHandler = function (err) { - console.error(err); -};</pre> - -<h5 id="options"><strong><code>options</code></strong></h5> - -<p>Options for the offer SDP.</p> - -<pre class="brush: js notranslate" lang="javascript">var options = { - offerToReceiveAudio: true, - offerToReceiveVideo: true -};</pre> - -<p><code>offerToReceiveAudio/Video</code> tells the other peer that you would like to receive video or audio from them. This is not needed for DataChannels.</p> - -<p>Once the offer has been generated we must set the local SDP to the new offer and send it through the signal channel to the other peer and await their Answer SDP.</p> - -<h3 id="Answer">Answer</h3> - -<p>An Answer SDP is just like an offer but a response; sort of like answering the phone. We can only generate an answer once we have received an offer.</p> - -<pre class="brush: js notranslate" lang="javascript">recv("offer", function (offer) { - offer = new SessionDescription(JSON.parse(offer)) - pc.setRemoteDescription(offer); - - pc.createAnswer(function (answer) { - pc.setLocalDescription(answer, function() { - send("answer", JSON.stringify(pc.localDescription)); - }, errorHandler); - }, errorHandler); -});</pre> - -<h3 id="DataChannel">DataChannel</h3> - -<p>I will first explain how to use PeerConnection for the DataChannels API and transferring arbitrary data between peers.</p> - -<p><em>Note: At the time of this article, interoperability between Chrome and Firefox is not possible with DataChannels. Chrome supports a similar but private protocol and will be supporting the standard protocol soon.</em></p> - -<pre class="brush: js notranslate" lang="javascript">var channel = pc.createDataChannel(channelName, channelOptions);</pre> - -<p>The offerer should be the peer who creates the channel. The answerer will receive the channel in the callback <code>ondatachannel</code> on PeerConnection. You must call <code>createDataChannel()</code> once before creating the offer.</p> - -<h4 id="channelName"><strong><code>channelName</code></strong></h4> - -<p>This is a string that acts as a label for your channel name. <em>Warning: Make sure your channel name has no spaces or Chrome will fail on <code>createAnswer()</code>.</em></p> - -<h4 id="channelOptions"><strong><code>channelOptions</code></strong></h4> - -<pre class="brush: js notranslate" lang="javascript">var channelOptions = {};</pre> - -<p>Currently these options are not well supported on Chrome so you can leave this empty for now. Check the <a href="http://dev.w3.org/2011/webrtc/editor/webrtc.html#attributes-7">RFC</a> for more information about the options.</p> - -<h4 id="Channel_Events_and_Methods">Channel Events and Methods</h4> - -<h5 id="onopen"><strong><code>onopen</code></strong></h5> - -<p>Executed when the connection is established.</p> - -<h5 id="onerror"><strong><code>onerror</code></strong></h5> - -<p>Executed if there is an error creating the connection. First argument is an error object.</p> - -<pre class="brush: js notranslate" lang="javascript">channel.onerror = function (err) { - console.error("Channel Error:", err); -};</pre> - -<h5 id="onmessage"><strong><code>onmessage</code></strong></h5> - -<pre class="brush: js notranslate" lang="javascript">channel.onmessage = function (e) { - console.log("Got message:", e.data); -}</pre> - -<p>The heart of the connection. When you receive a message, this method will execute. The first argument is an event object which contains the data, time received and other information.</p> - -<h5 id="onclose"><strong><code>onclose</code></strong></h5> - -<p>Executed if the other peer closes the connection.</p> - -<h4 id="Binding_the_Events"><strong>Binding the Events</strong></h4> - -<p>If you were the creator of the channel (meaning the offerer), you can bind events directly to the DataChannel you created with <code>createChannel</code>. If you are the answerer, you must use the <code>ondatachannel</code> callback on PeerConnection to access the same channel.</p> - -<pre class="brush: js notranslate" lang="javascript">pc.ondatachannel = function (e) { - e.channel.onmessage = function () { … }; -};</pre> - -<p>The channel is available in the event object passed into the handler as <code>e.channel</code>.</p> - -<h5 id="send"><strong><code>send()</code></strong></h5> - -<pre class="brush: js notranslate" lang="javascript">channel.send("Hi Peer!");</pre> - -<p>This method allows you to send data directly to the peer! Amazing. You must send either String, Blob, ArrayBuffer or ArrayBufferView, so be sure to stringify objects.</p> - -<h5 id="close"><strong><code>close()</code></strong></h5> - -<p>Close the channel once the connection should end. It is recommended to do this on page unload.</p> - -<h3 id="Media">Media</h3> - -<p>Now we will cover transmitting media such as audio and video. To display the video and audio you must include a <code><video></code> tag on the document with the attribute <code>autoplay</code>.</p> - -<h4 id="Get_User_Media">Get User Media</h4> - -<pre class="brush: js notranslate"><video id="preview" autoplay></video> - -var video = document.getElementById("preview"); -navigator.getUserMedia(constraints, function (stream) { - video.src = URL.createObjectURL(stream); -}, errorHandler);</pre> - -<p><strong><code>constraints</code></strong></p> - -<p>Constraints on what media types you want to return from the user.</p> - -<pre class="brush: js notranslate" lang="javascript">var constraints = { - video: true, - audio: true -};</pre> - -<p>If you just want an audio chat, remove the <code>video</code> member.</p> - -<h5 id="errorHandler_2"><strong><code>errorHandler</code></strong></h5> - -<p>Executed if there is an error returning the requested media.</p> - -<h4 id="Media_Events_and_Methods">Media Events and Methods</h4> - -<h5 id="addStream"><strong><code>addStream</code></strong></h5> - -<p>Add the stream from <code>getUserMedia</code> to the PeerConnection.</p> - -<pre class="brush: js notranslate" lang="javascript">pc.addStream(stream);</pre> - -<h5 id="onaddstream"><strong><code>onaddstream</code></strong></h5> - -<pre class="brush: js notranslate"><video id="otherPeer" autoplay></video> - -var otherPeer = document.getElementById("otherPeer"); -pc.onaddstream = function (e) { - otherPeer.src = URL.createObjectURL(e.stream); -};</pre> - -<p>Executed when the connection has been setup and the other peer has added the stream to the peer connection with <code>addStream</code>. You need another <code><video></code> tag to display the other peer's media.</p> - -<p>The first argument is an event object with the other peer's media stream.</p> diff --git a/files/ru/web/api/websockets_api/index.html b/files/ru/web/api/websockets_api/index.html new file mode 100644 index 0000000000..8e6c614a0b --- /dev/null +++ b/files/ru/web/api/websockets_api/index.html @@ -0,0 +1,58 @@ +--- +title: WebSockets +slug: WebSockets +tags: + - NeedsBrowserCompatibility + - NeedsTranslation + - References + - TopicStub + - WebSockets +translation_of: Web/API/WebSockets_API +--- +<p><strong>Вебсокеты</strong> это продвинутая технология, позволяющая открыть постоянное двунаправленное сетевое соединение между браузером пользователя и сервером. С помощью его API вы можете отправить сообщение на сервер и получить ответ без выполнения http запроса, причем этот процесс будет событийно-управляемым.</p> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">Документация</h2> + +<dl> + <dt><a href="/en-US/docs/WebSockets/Writing_WebSocket_client_applications" title="WebSockets/Writing WebSocket client applications">Writing WebSocket client applications</a></dt> + <dd>Учебник описывающий как написать WebSocket клиента работающего в браузере.</dd> + <dt><a href="/en-US/docs/WebSockets/WebSockets_reference" title="WebSockets/WebSockets reference">Справочник по WebSocket</a></dt> + <dd>A reference to the client-side WebSocket API.</dd> + <dt><a href="/en-US/docs/WebSockets/Writing_WebSocket_servers" title="WebSockets/Writing WebSocket servers">(TBD) Writing WebSocket servers</a></dt> + <dd>A guide to writing server-side code to handle the WebSocket protocol.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/WebSockets" title="tag/WebSockets">View All...</a></span></p> +</div> + +<div class="section"> +<h2 class="Tools" id="Tools" name="Tools">Tools</h2> + +<ul> + <li><a class="external" href="http://socket.io" title="http://socket.io/">Socket.IO</a>: A powerful cross-platform WebSocket API for <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li> + <li><a class="link-https" href="https://github.com/Worlize/WebSocket-Node" title="https://github.com/Worlize/WebSocket-Node">WebSocket-Node</a>: A WebSocket server API implementation for <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li> + <li><a href="http://ajf.me/websocket/#libs" title="http://websocket.us/#libs">A more extensive list of frameworks and libraries here</a></li> +</ul> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2> + +<ul> + <li><a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a></li> +</ul> +</div> +</div> + +<h2 id="Совместимость_с_браузерами"><span style="font-size: 2.33333rem; letter-spacing: -0.00278rem;">Совместимость с браузерами</span></h2> + +<p>{{Compat("api.WebSocket")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a class="external" href="http://tools.ietf.org/html/rfc6455">RFC 6455 - The WebSocket Protocol</a></li> + <li><a class="external" href="http://www.w3.org/TR/websockets/">WebSocket API Specification</a></li> + <li><a href="/en-US/docs/Server-sent_events" title="Server-sent_events">Server-Sent Events</a></li> + <li><a class="external" href="http://websocket.us/">WebSocket.us</a> - a community-run, not-for-profit site about WebSocket</li> +</ul> 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 new file mode 100644 index 0000000000..5eaca515c2 --- /dev/null +++ b/files/ru/web/api/websockets_api/writing_websocket_client_applications/index.html @@ -0,0 +1,195 @@ +--- +title: Написание клиентских приложений с помощью вебсокетов +slug: WebSockets/Writing_WebSocket_client_applications +translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications +--- +<p>{{ draft() }}</p> + +<p>Вебсокеты - технология, которя позволяет открыть интерактивную сессию общения между браузером пользователя и сервером. Соединяясь через вебсокеты, веб-приложения могут осуществлять взаимодействие в реальном времени вместо того, чтобы делать запросы к клиенту о входящих/исходящих изменениях.</p> + +<div class="note"><strong>Замечание: </strong>У нас есть работающий пример чата, части кода из которого используются в статье. Пример будет доступен, когда инфраструктура сайта сможет должным образом поддерживать хостинг примеров с использованием вебсокетов.</div> + +<h2 id="Доступность_вебсокетов">Доступность вебсокетов</h2> + +<p>API вебсокетов доступно в Javascript коде, область видимости которого включает объект DOM {{ domxref("Window") }} или любой объект, реализующий {{ domxref("WorkerUtils") }}; это означает, что вы можете использовать Web Workers.</p> + +<div class="note"><strong>Замечание:</strong> API вебсокетов (как и протокол лежащий в его основе) всё ещё проходят этап активной разработки; в настоящее время существует много проблем совместимости с разными браузерами (и даже с разными релизами одного и того же браузера).</div> + +<h2 id="Создание_объекта_WebSocket">Создание объекта WebSocket</h2> + +<p><code><font face="Lucida Grande, Lucida Sans Unicode, DejaVu Sans, Lucida, Arial, Helvetica, sans-serif">Чтобы общаться через протокол вебсокетов необходимо создать объект </font><a href="/en/WebSockets/WebSockets_reference/WebSocket" title="en/WebSockets/WebSockets reference/WebSocket">WebSocket</a></code>; при его создании автоматически происходит попытка открыть соединение с сервером.</p> + +<p>Конструктор WebSocket принимает один обязательный и один необязательный параметр:</p> + +<pre>WebSocket WebSocket( + in DOMString url, + in optional DOMString protocols +); + +WebSocket WebSocket( + in DOMString url, + in optional DOMString[] protocols +); +</pre> + +<dl> + <dt><code>url</code></dt> + <dd>URL, с которым происходит соединение; это должен быть URL вебсокет-сервера.</dd> + <dt><code>protocols</code> {{ optional_inline() }}</dt> + <dd>Может быть одной строкой протокола или массивом таких строк. Эти строки используют для индикации под-протоколов; таким образом, один сервер может реализовывать несколько под-протоколов вебсокетов (к примеру, вам может потребоваться, чтобы сервер мог обрабатывать разные типы взаимодействий в зависимости от определённого под-протокола). Если вы не укажете строку протокола, то будет передана пустая строка.</dd> +</dl> + +<p>В конструкторе могут возникать следующие исключения:</p> + +<dl> + <dt><code>SECURITY_ERR</code></dt> + <dd>Порт, к которому проводится подключение, заблокирован.</dd> +</dl> + +<dl> +</dl> + +<h3 id="Ошибки_подключения">Ошибки подключения</h3> + +<p><span style="line-height: 21px;">Если ошибка случается во время попытки подключения, то в объект </span><a href="https://developer.mozilla.org/en/WebSockets/WebSockets_reference/WebSocket" style="line-height: 21px;" title="WebSocket"><code style="font-style: inherit;">WebSocket</code></a><span style="line-height: 21px;"> сначала посылается простое событие с именем «error» (таким образом, задействуя обработчик </span><code style="font-size: 14px; line-height: 21px;">onerror</code><span style="line-height: 21px;">), потом - событие </span><a href="https://developer.mozilla.org/en/WebSockets/WebSockets_reference/CloseEvent" style="line-height: 21px;" title="CloseEvent"><code style="font-style: inherit;">CloseEvent</code></a><span style="line-height: 21px;"> </span><span style="line-height: 21px;"> (таким образом, задействуя обработчик </span><code style="font-size: 14px; line-height: 21px;">onclose</code><span style="line-height: 21px;">) чтобы обозначить причину закрытия соединения.</span></p> + +<p>Однако, начиная с версии Firefox 11, типичным является получение в консоль от платформы Mozilla расширенного сообщения об обшибке и кода завершения, как то определено в <a class="external" href="http://tools.ietf.org/html/rfc6455#section-7.4" title="RFC 6455 Section 7.4">RFC 6455, Section 7.4</a> посредством <a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="CloseEvent"><code>CloseEvent</code></a>.</p> + +<h3 id="Примеры">Примеры</h3> + +<p>Этот простой пример создает новый WebSocket, подключаемый к серверу <code><span class="nowiki">ws://www.example.com/socketserver</span></code>. В данном примере в конструктор сокета в качестве дополнительного параметра передается пользовательский протокол "protocolOne", хотя эта часть может быть опущена.</p> + +<pre class="brush: js">var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne"); +</pre> + +<p>После выполнения функции, <code>exampleSocket</code>.<code>readyState</code> будет иметь значение <code>CONNECTING</code>. <code>readyState</code> изменится на <code>OPEN</code> как только соединение станет готовым к передаче данных.</p> + +<p>Если нужно открыть соединение, поддерживающее несколько протоколов, можно передать массив протоколов:</p> + +<pre class="brush: js">var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]); +</pre> + +<p>Когда соединение установлено (что соответствует, <code>readyState</code> <code>OPEN</code>), <code>exampleSocket.protocol</code> сообщит, какой протокол выбрал сервер.</p> + +<p>In the above examples <code>ws</code> has replaced <code>http</code>, similarly <code>wss</code> replaces <code>https</code>. Establishing a WebSocket relies on the HTTP Upgrade mechanism, so the request for the protocol upgrade is implicit when we address the HTTP server as <code><span class="nowiki">ws://www.example.com</span></code> or <code><span class="nowiki">wss://www.example.com</span></code>.</p> + +<h2 id="Отправка_данных_на_сервер">Отправка данных на сервер</h2> + +<p>Однажды открыв соединение, вы можете передавать данные на сервер. Для осуществления этого, вызовите метод <a href="/en/WebSockets/WebSockets_reference/WebSocket#send()" title="en/WebSockets/WebSockets reference/WebSocket#send()"><code>send()</code></a> объекта <code>WebSocket</code> для каждого сообщение, которое желаете отправить:</p> + +<pre class="brush: js">exampleSocket.send("Here's some text that the server is urgently awaiting!"); +</pre> + +<p>Вы можете пересылать данные в виде строки, {{ domxref("Blob") }}, так и <a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a>.</p> + +<div class="note"><strong>Note:</strong> Prior to version 11, Firefox only supported sending data as a string.</div> + +<p>As establishing a connection is asynchronous and prone to failure there is no guarantee that calling the <code>send()</code> method immediately after creating a WebSocket object will be successful. We can at least be sure that attempting to send data only takes place once a connection is established by defining an <code>onopen</code> handler to do the work:</p> + +<pre class="brush: js">exampleSocket.onopen = function (event) { + exampleSocket.send("Here's some text that the server is urgently awaiting!"); +}; +</pre> + +<h3 id="Using_JSON_to_transmit_objects">Using JSON to transmit objects</h3> + +<p>One handy thing you can do is use <a href="/en/JSON" title="en/JSON">JSON</a> to send reasonably complex data to the server. For example, a chat program can interact with a server using a protocol implemented using packets of JSON-encapsulated data:</p> + +<pre class="brush: js">// Send text to all users through the server +function sendText() { + // Construct a msg object containing the data the server needs to process the message from the chat client. + var msg = { + type: "message", + text: document.getElementById("text").value, + id: clientID, + date: Date.now() + }; + + // Send the msg object as a JSON-formatted string. + exampleSocket.send(JSON.stringify(msg)); + + // Blank the text input element, ready to receive the next line of text from the user. + document.getElementById("text").value = ""; +} +</pre> + +<h2 id="Receiving_messages_from_the_server">Receiving messages from the server</h2> + +<p>WebSockets is an event-driven API; when messages are received, a "message" event is delivered to the <code>onmessage</code> function. To begin listening for incoming data, you can do something like this:</p> + +<pre class="brush: js">exampleSocket.onmessage = function (event) { + console.log(event.data); +} +</pre> + +<h3 id="Receiving_and_interpreting_JSON_objects">Receiving and interpreting JSON objects</h3> + +<p>Let's consider the chat client application first alluded to in {{ anch("Using JSON to transmit objects") }}. There are assorted types of data packets the client might receive, such as:</p> + +<ul> + <li>Login handshake</li> + <li>Message text</li> + <li>User list updates</li> +</ul> + +<p>The code that interprets these incoming messages might look like this:</p> + +<pre class="brush: js">exampleSocket.onmessage = function(event) { + var f = document.getElementById("chatbox").contentDocument; + var text = ""; + var msg = JSON.parse(event.data); + var time = new Date(msg.date); + var timeStr = time.toLocaleTimeString(); + + switch(msg.type) { + case "id": + clientID = msg.id; + setUsername(); + break; + case "username": + text = "<b>User <em>" + msg.name + "</em> signed in at " + timeStr + "</b><br>"; + break; + case "message": + text = "(" + timeStr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>"; + break; + case "rejectusername": + text = "<b>Your username has been set to <em>" + msg.name + "</em> because the name you chose is in use.</b><br>" + break; + case "userlist": + var ul = ""; + for (i=0; i < msg.users.length; i++) { + ul += msg.users[i] + "<br>"; + } + document.getElementById("userlistbox").innerHTML = ul; + break; + } + + if (text.length) { + f.write(text); + document.getElementById("chatbox").contentWindow.scrollByPages(1); + } +}; +</pre> + +<p>Here we use <a href="/en/JavaScript/Reference/Global_Objects/JSON/parse" title="en/JavaScript/Reference/Global Objects/JSON/parse"><code>JSON.parse()</code></a> to convert the JSON object back into the original object, then examine and act upon its contents.</p> + +<h3 id="Text_data_format">Text data format</h3> + +<p>Text received over a WebSocket connection is in UTF-8 format.</p> + +<p>Prior to Gecko 9.0 {{ geckoRelease("9.0") }}, certain non-characters in otherwise valid UTF-8 text would cause the connection to be terminated. Now Gecko permits these values.</p> + +<h2 id="Closing_the_connection">Closing the connection</h2> + +<p>When you've finished using the WebSocket connection, call the WebSocket method <a href="/en/WebSockets/WebSockets_reference/WebSocket#close()" title="en/WebSockets/WebSockets reference/WebSocket#close()"><code>close()</code></a>:</p> + +<pre class="brush: js">exampleSocket.close(); +</pre> + +<p>It may be helpful to examine the socket's <code>bufferedAmount</code> attribute before attempting to close the connection to determine if any data has yet to be transmitted on the network.</p> + +<h2 id="Security_considerations">Security considerations</h2> + +<p>WebSockets should not be used in a mixed content environment; that is, you shouldn't open a non-secure WebSocket connection from a page loaded using HTTPS or vice-versa. In fact, some browsers explicitly forbid this, including Firefox 8 and later.</p> + +<p>{{ languages ( {"zh-tw": "zh_tw/WebSockets/Writing_WebSocket_client_applications"} ) }}</p> diff --git a/files/ru/web/events/domcontentloaded/index.html b/files/ru/web/api/window/domcontentloaded_event/index.html index 7702dcfd24..7702dcfd24 100644 --- a/files/ru/web/events/domcontentloaded/index.html +++ b/files/ru/web/api/window/domcontentloaded_event/index.html diff --git a/files/ru/web/events/load/index.html b/files/ru/web/api/window/load_event/index.html index a8d456806d..a8d456806d 100644 --- a/files/ru/web/events/load/index.html +++ b/files/ru/web/api/window/load_event/index.html diff --git a/files/ru/web/api/window/requestanimationframe/index.html b/files/ru/web/api/window/requestanimationframe/index.html new file mode 100644 index 0000000000..d451cae62f --- /dev/null +++ b/files/ru/web/api/window/requestanimationframe/index.html @@ -0,0 +1,92 @@ +--- +title: window.requestAnimationFrame() +slug: DOM/window.requestAnimationFrame +tags: + - Анимация +translation_of: Web/API/window/requestAnimationFrame +--- +<div>{{APIRef}}</div> + +<p><code><strong>window.requestAnimationFrame</strong></code> указывает браузеру на то, что вы хотите произвести анимацию, и просит его запланировать перерисовку на следующем кадре анимации. В качестве параметра метод получает функцию, которая будет вызвана перед перерисовкой.</p> + +<div class="note"><strong>Заметка:</strong> Ваш callback метод сам должен вызвать <code>requestAnimationFrame()</code> иначе анимация остановится.</div> + +<p>Вы должны вызывать этот метод всякий раз, когда готовы обновить анимацию на экране, чтобы запросить планирование анимации. Обычно запросы происходят 60 раз в секунду, но чаще всего совпадают с частотой обновления экрана. В большинстве браузеров в фоновых вкладках или скрытых <code><iframe></code>, вызовы <code>requestAnimationFrame()</code> приостанавливаются, для того, чтобы повысить производительность и время работы батареи.</p> + +<p>Callback методу передаётся один аргумент, {{domxref("DOMHighResTimeStamp")}}, который содержит текущее время (количество миллисекунд, прошедших с момента <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp#The_time_origin">time origin</a>). Когда callback-и, отправленные в очередь с помощью <code>requestAnimationFrame()</code> начинают вызывать несколько callback-ов в одном кадре, каждый получает одинаковый timestamp, хотя для вычисления каждого callback было затрачено время. Этот timestamp - десятичное число в миллисекундах, но с минимальной точностью в 1ms (1000 µs).</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="brush: js notranslate">window.requestAnimationFrame(callback);</pre> + +<h3 id="Parameters" name="Parameters">Параметры</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Функция, которая будет вызвана, когда придёт время обновить вашу анимацию на следующей перерисовке.</dd> + <dt><code>element</code> {{ optional_inline() }}</dt> + <dd>Необязательный параметр (не используется в Firefox или IE), определяющий элемент, который визуально содержит всю анимацию. Для canvas'а и WebGL'a им должен быть {{ HTMLElement("canvas") }}. Для других элементов вы можете опустить этот параметр для чуть лучшего пользовательского опыта.</dd> +</dl> + +<h3 id="Возвращаемое_значение">Возвращаемое значение</h3> + +<p><code>requestID</code> — длинное целое, являющееся уникальным идентификатором для записи, содержащей callback. Оно не равно нулю, но других предположений о его значении делать не следует. Вы можете передать его в {{ domxref("window.cancelAnimationFrame()") }} для отмены вызова.</p> + +<h2 id="Notes" name="Notes">Пример</h2> + +<pre class="brush: js notranslate">var start = null; +var element = document.getElementById('SomeElementYouWantToAnimate'); + +function step(timestamp) { + if (!start) start = timestamp; + var progress = timestamp - start; + element.style.transform = 'translateX(' + Math.min(progress / 10, 200) + 'px)'; + if (progress < 2000) { + window.requestAnimationFrame(step); + } +} + +window.requestAnimationFrame(step);</pre> + +<h2 id="Примечание">Примечание</h2> + +<p>В Edge версиях младше 17 и в Internet Explorer не надежно запускать <code>requestAnimationFrame</code> перед циклом рисования.</p> + +<h2 id="Specification" name="Specification">Спецификация</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Без изменений, заменяет предыдущую.</td> + </tr> + <tr> + <td>{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}</td> + <td>{{Spec2('RequestAnimationFrame')}}</td> + <td>Первоначальное описание.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Браузерная совместимость</h2> + +<p id="Specification">{{Compat("api.Window.requestAnimationFrame")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{ domxref("window.mozAnimationStartTime") }}</li> + <li>{{ domxref("window.cancelAnimationFrame()") }}</li> + <li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html">mozRequestAnimationFrame</a> - Blog post</li> + <li><a class="external" href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for smart animating</a> - Blog post</li> + <li><a class="external" href="http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/">Animating with javascript: from setInterval to requestAnimationFrame</a> - Blog post</li> + <li><a class="external" href="http://blogs.msdn.com/b/ie/archive/2011/07/05/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-1.aspx">Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1</a> - Blog post</li> +</ul> diff --git a/files/ru/web/events/unhandledrejection/index.html b/files/ru/web/api/window/unhandledrejection_event/index.html index 5248e75748..5248e75748 100644 --- a/files/ru/web/events/unhandledrejection/index.html +++ b/files/ru/web/api/window/unhandledrejection_event/index.html diff --git a/files/ru/web/api/windowbase64/base64_encoding_and_decoding/index.html b/files/ru/web/api/windowbase64/base64_encoding_and_decoding/index.html deleted file mode 100644 index b85f3671ef..0000000000 --- a/files/ru/web/api/windowbase64/base64_encoding_and_decoding/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: Кодирование и декодирование в формате Base64 -slug: Web/API/WindowBase64/Base64_encoding_and_decoding -translation_of: Glossary/Base64 ---- -<p><strong>Base64</strong> - это группа cхожих <a href="https://en.wikipedia.org/wiki/Binary-to-text_encoding">binary-to-text encoding</a> схем, которые представляют двоичные данные в ASCII-формате методом перевода в radix-64 представление. Термин <em>Base64</em> происходит от a specific <a href="https://en.wikipedia.org/wiki/MIME#Content-Transfer-Encoding">MIME content transfer encoding</a>.</p> - -<p>Кодирование Base64 широко используется в случаях, когда требуется перекодировать двоичные данные для передачи по каналу приспособленному для передачи текстовых данных. Это делается с целью защиты двоичных данных от любых возможных повреждений при передаче. Base64 широко используется во многих приложениях, включая электронную почту (<a href="https://en.wikipedia.org/wiki/MIME">MIME</a>), и при сохранении больших объёмов данных в <a href="/en-US/docs/XML">XML</a>.</p> - -<p>В языке JavaScript существуют две функции, для кодирования и декодирования данных в/из формат Base64 соответственно:</p> - -<ul> - <li>{{domxref("WindowBase64.btoa","btoa()")}}</li> - <li>{{domxref("WindowBase64.atob","atob()")}}</li> -</ul> - -<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Функция </span></font>atob()</code> декодирует Base64-кодированную строку. В противоположность ей, функция <code>btoa()</code> создаёт Base64 кодированную ASCII строку из "строки" бинарных данных.</p> - -<p>Обе функции <code>atob()</code> и <code>btoa()</code> работают со строками. Если вам необходимо работать с <a href="/en-US/docs/Web/API/ArrayBuffer"><code>ArrayBuffers</code></a>, обратитесь к <a href="#">этому параграфу</a>.</p> - -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h2 class="Documentation" id="Documentation" name="Documentation">Документация</h2> - - <dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/data_URIs" title="https://developer.mozilla.org/en-US/docs/data_URIs"><code>data</code> URIs</a></dt> - <dd><small><code>data</code> URIs, описанные в <a class="external" href="http://tools.ietf.org/html/rfc2397" title="http://tools.ietf.org/html/rfc2397">RFC 2397</a>, позволяют создателям контента встроить в документ маленькие файлы в виде строки (инлайном).</small></dd> - <dt><a href="https://en.wikipedia.org/wiki/Base64" title="https://en.wikipedia.org/wiki/Base64">Base64</a></dt> - <dd><small>Wikipedia article about Base64 encoding.</small></dd> - <dt>{{domxref("WindowBase64.atob","atob()")}}</dt> - <dd><small>Decodes a string of data which has been encoded using base-64 encoding.</small></dd> - <dt>{{domxref("WindowBase64.btoa","btoa()")}}</dt> - <dd><small>Creates a base-64 encoded ASCII string from a "string" of binary data.</small></dd> - <dt><a href="#The_Unicode_Problem">The "Unicode Problem"</a></dt> - <dd><small>In most browsers, calling <code>btoa()</code> on a Unicode string will cause a <code>Character Out Of Range</code> exception. This paragraph shows some solutions.</small></dd> - <dt><a href="/en-US/docs/URIScheme" title="/en-US/docs/URIScheme">URIScheme</a></dt> - <dd><small>List of Mozilla supported URI schemes</small></dd> - <dt><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a></dt> - <dd>In this article is published a library of ours whose aims are: - <ul> - <li>creating a <a class="external" href="http://en.wikipedia.org/wiki/C_%28programming_language%29" title="http://en.wikipedia.org/wiki/C_%28programming_language%29">C</a>-like interface for strings (i.e. array of characters codes —<a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView" title="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView"> <code>ArrayBufferView</code></a> in JavaScript) based upon the JavaScript <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a> interface,</li> - <li>creating a collection of methods for such string-like objects (since now: <code>stringView</code>s) which work <strong>strictly on array of numbers</strong> rather than on immutable JavaScript strings,</li> - <li>working with other Unicode encodings, different from default JavaScript's UTF-16 <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a>s,</li> - </ul> - </dd> - </dl> - - <p><span class="alllinks"><a href="/en-US/docs/tag/Base64">View All...</a></span></p> - </td> - <td> - <h2 class="Tools" id="Tools" name="Tools">Tools</h2> - - <ul> - <li><a href="#Solution_2_–_rewrite_the_DOMs_atob()_and_btoa()_using_JavaScript's_TypedArrays_and_UTF-8">Rewriting <code>atob()</code> and <code>btoa()</code> using <code>TypedArray</code>s and UTF-8</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li> - </ul> - - <p><span class="alllinks"><a href="/en-US/docs/tag/Base64">View All...</a></span></p> - - <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2> - - <ul> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a></li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Typed arrays</a></li> - <li><code><a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView">ArrayBufferView</a></code></li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array"><code>Uint8Array</code></a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li> - <li><a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a></li> - <li><a href="/en-US/docs/URI" title="/en-US/docs/URI"><code>URI</code></a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI"><code>encodeURI()</code></a></li> - </ul> - </td> - </tr> - </tbody> -</table> - -<h2 id="The_Unicode_Problem">The "Unicode Problem"</h2> - -<p>Since <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a>s are 16-bit-encoded strings, in most browsers calling <code>window.btoa</code> on a Unicode string will cause a <code>Character Out Of Range</code> exception if a character exceeds the range of a 8-bit byte (0x00~0xFF). There are two possible methods to solve this problem:</p> - -<ul> - <li>the first one is to escape the whole string (with UTF-8, see {{jsxref("encodeURIComponent")}}) and then encode it;</li> - <li>the second one is to convert the UTF-16 <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a> to an UTF-8 array of characters and then encode it.</li> -</ul> - -<p>Here are the two possible methods.</p> - -<h3 id="Solution_1_–_escaping_the_string_before_encoding_it">Solution #1 – escaping the string before encoding it</h3> - -<pre class="brush:js">function b64EncodeUnicode(str) { - // first we use encodeURIComponent to get percent-encoded UTF-8, - // then we convert the percent encodings into raw bytes which - // can be fed into btoa. - return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, - function toSolidBytes(match, p1) { - return String.fromCharCode('0x' + p1); - })); -} - -b64EncodeUnicode('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU=" -b64EncodeUnicode('\n'); // "Cg==" -</pre> - -<p>To decode the Base64-encoded value back into a String:</p> - -<pre class="brush: js">function b64DecodeUnicode(str) { - // Going backwards: from bytestream, to percent-encoding, to original string. - return decodeURIComponent(atob(str).split('').map(function(c) { - return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2); - }).join('')); -} - -b64DecodeUnicode('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode" -b64DecodeUnicode('Cg=='); // "\n" -</pre> - -<p><a href="https://github.com/coolaj86/unibabel-js">Unibabel</a> implements common conversions using this strategy.</p> - -<h3 id="Solution_2_–_rewrite_the_DOMs_atob_and_btoa_using_JavaScripts_TypedArrays_and_UTF-8">Solution #2 – rewrite the DOMs <code>atob()</code> and <code>btoa()</code> using JavaScript's <code>TypedArray</code>s and UTF-8</h3> - -<p>Use a <a href="/en-US/docs/Web/API/TextEncoder">TextEncoder</a> polyfill such as <a href="https://github.com/inexorabletash/text-encoding">TextEncoding</a> (also includes legacy windows, mac, and ISO encodings), <a href="https://github.com/coolaj86/TextEncoderLite">TextEncoderLite</a>, combined with a <a href="https://github.com/feross/buffer">Buffer</a> and a Base64 implementation such as <a href="https://github.com/beatgammit/base64-js">base64-js</a>.</p> - -<p>When a native <code>TextEncoder</code> implementation is not available, the most light-weight solution would be to use <a href="https://github.com/coolaj86/TextEncoderLite">TextEncoderLite</a> with <a href="https://github.com/beatgammit/base64-js">base64-js</a>. Use the browser implementation when you can.</p> - -<p>The following function implements such a strategy. It assumes base64-js imported as <code><script type="text/javascript" src="base64js.min.js"/></code>. Note that TextEncoderLite only works with UTF-8.</p> - -<pre class="brush: js">function Base64Encode(str, encoding = 'utf-8') { - var bytes = new (TextEncoder || TextEncoderLite)(encoding).encode(str); - return base64js.fromByteArray(bytes); -} - -function Base64Decode(str, encoding = 'utf-8') { - var bytes = base64js.toByteArray(str); - return new (TextDecoder || TextDecoderLite)(encoding).decode(bytes); -} -</pre> diff --git a/files/ru/web/api/windowbase64/index.html b/files/ru/web/api/windowbase64/index.html deleted file mode 100644 index f51b72c102..0000000000 --- a/files/ru/web/api/windowbase64/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: WindowBase64 -slug: Web/API/WindowBase64 -tags: - - API - - HTML-DOM - - Helper - - NeedsTranslation - - TopicStub - - WindowBase64 -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowBase64 ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p>The <code><strong>WindowBase64</strong></code> helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in <a href="/en-US/docs/data_URIs">data URIs</a>.</p> - -<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}} for workers, implements it.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>This helper neither defines nor inherits any properties.</em></p> - -<h2 id="Methods">Methods</h2> - -<p><em>This helper does not inherit any methods.</em></p> - -<dl> - <dt>{{domxref("WindowBase64.atob()")}}</dt> - <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> - <dt>{{domxref("WindowBase64.btoa()")}}</dt> - <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoDesktop(1)}} [1]</td> - <td>{{CompatVersionUnknown}}</td> - <td>10.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoMobile(1)}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] <code>atob()</code> is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li> - <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> -</ul> diff --git a/files/ru/web/api/windowbase64/btoa/index.html b/files/ru/web/api/windoworworkerglobalscope/btoa/index.html index 06b76a6304..06b76a6304 100644 --- a/files/ru/web/api/windowbase64/btoa/index.html +++ b/files/ru/web/api/windoworworkerglobalscope/btoa/index.html diff --git a/files/ru/web/api/windowtimers/settimeout/index.html b/files/ru/web/api/windoworworkerglobalscope/settimeout/index.html index 9e39020215..9e39020215 100644 --- a/files/ru/web/api/windowtimers/settimeout/index.html +++ b/files/ru/web/api/windoworworkerglobalscope/settimeout/index.html diff --git a/files/ru/web/api/windowtimers/index.html b/files/ru/web/api/windowtimers/index.html deleted file mode 100644 index ac80f42b5f..0000000000 --- a/files/ru/web/api/windowtimers/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: WindowTimers -slug: Web/API/WindowTimers -tags: - - API - - HTML DOM -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowTimers ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p><code><strong>WindowTimers</strong></code> contains utility methods to set and clear timers.</p> - -<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}} for workers, implements it.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>This interface do not define any property, nor inherit any.</em></p> - -<h2 id="Methods">Methods</h2> - -<p><em>This interface do not inherit any method.</em></p> - -<dl> - <dt>{{domxref("WindowTimers.clearInterval()")}}</dt> - <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd> - <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt> - <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd> - <dt>{{domxref("WindowTimers.setInterval()")}}</dt> - <dd>Schedules the execution of a function each X milliseconds.</dd> - <dt>{{domxref("WindowTimers.setTimeout()")}}</dt> - <dd>Sets a delay for executing a function.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoDesktop(1)}}</td> - <td>1.0</td> - <td>4.0</td> - <td>4.0</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoMobile(1)}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> -</ul> diff --git a/files/ru/web/api/document/async/index.html b/files/ru/web/api/xmldocument/async/index.html index 2ff21f28af..2ff21f28af 100644 --- a/files/ru/web/api/document/async/index.html +++ b/files/ru/web/api/xmldocument/async/index.html diff --git a/files/ru/web/events/loadstart/index.html b/files/ru/web/api/xmlhttprequest/loadstart_event/index.html index b725b05b30..b725b05b30 100644 --- a/files/ru/web/events/loadstart/index.html +++ b/files/ru/web/api/xmlhttprequest/loadstart_event/index.html diff --git a/files/ru/web/css/@viewport/user-zoom/index.html b/files/ru/web/css/@viewport/user-zoom/index.html deleted file mode 100644 index 3cb5768532..0000000000 --- a/files/ru/web/css/@viewport/user-zoom/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: user-zoom -slug: Web/CSS/@viewport/user-zoom -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/user-zoom ---- -<div>{{ CSSRef }}</div> - -<h2 id="Summary" name="Summary">Введение</h2> - -<p>The <code>user-zoom</code> <a href="/en-US/docs/Web/CSS">CSS</a> descriptor controls whether or not the user should be able to change the zoom factor of a document defined by {{cssxref("@viewport")}}.</p> - -<p>{{cssinfo}}</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="brush:css">/* Keyword values */ -user-zoom: zoom; -user-zoom: fixed; -</pre> - -<h3 id="Значения">Значения</h3> - -<dl> - <dt><code>zoom</code></dt> - <dd>The user can zoom in or out.</dd> - <dt><code>fixed</code></dt> - <dd>The user cannot zoom in or out.</dd> -</dl> - -<h3 id="Формальный_синтаксис">Формальный синтаксис</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Specifications" name="Specifications">Спецфикации</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Спецфикации</th> - <th scope="col">Статус</th> - <th scope="col">Комментарий</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#the-lsquouser-zoomrsquo-descriptor', '"user-zoom" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> diff --git a/files/ru/web/css/_colon_any/index.html b/files/ru/web/css/_colon_any/index.html deleted file mode 100644 index 6a9dab56ac..0000000000 --- a/files/ru/web/css/_colon_any/index.html +++ /dev/null @@ -1,190 +0,0 @@ ---- -title: ':any' -slug: 'Web/CSS/:any' -tags: - - CSS - - Experimental - - Псевдоклассы - - Руководство - - Экспериментальное -translation_of: 'Web/CSS/:is' -translation_of_original: 'Web/CSS/:any' ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<h2 id="Summary" name="Summary">Описание</h2> - -<p><a href="/ru/docs/Web/CSS/Псевдо-классы" title="CSS/Pseudo-classes">Псевдокласс</a> <code>:any()</code> дает возможность быстрого конструирования наборов похожих селекторов путем составления групп, в которых каждый из входящих элементов будет комбинироваться с элементами из других групп. Это альтернатива для прописывания комбинаций селекторов для одного элемента, который может находится в разных родителях.</p> - -<div class="note"><strong>Замечание: </strong>Этот псевдо-класс все еще находится в процессе стандартизации в <a class="external" href="http://dev.w3.org/csswg/selectors4/#matches" title="http://dev.w3.org/csswg/selectors4/#matches"><em>CSS селекторах уровня 4</em></a> под именем <code>:matches()</code>. Вполне вероятно, что синтаксис и имя <code>:-<em>vendor</em>-any() </code>будут изменены в ближайшем будущем, чтобы соответствовать спецификации.</div> - -<h2 id="Syntax" name="Syntax">Синтаксис</h2> - -<pre class="syntaxbox">:-moz-any( <em>selector</em>[, <em>selector</em>]* ) :-webkit-any( selector[, selector]* )</pre> - -<h3 id="Values" name="Values">Параметры</h3> - -<dl> - <dt><code>selector</code></dt> - <dd>Селектор. Это может быть просто селектор или несколько селекторов, состоящих из <a class="external" href="http://www.w3.org/TR/css3-selectors/#simple-selectors" title="http://www.w3.org/TR/css3-selectors/#simple-selectors">CSS 3 простых селекторов</a> и может включать комбинацию потомков.</dd> -</dl> - -<div class="note"><strong>Замечание:</strong> Селекторы <strong>не</strong> могут содержать псевдо-элементы, допускается только комбинирование потомков.</div> - -<h2 id="Examples" name="Examples">Примеры</h2> - -<p>Например, следующий CSS:</p> - -<pre class="brush: css">/* на глубине 3 (или больше) неупорядоченные списки используют square */ -ol ol ul, ol ul ul, ol menu ul, ol dir ul, -ol ol menu, ol ul menu, ol menu menu, ol dir menu, -ol ol dir, ol ul dir, ol menu dir, ol dir dir, -ul ol ul, ul ul ul, ul menu ul, ul dir ul, -ul ol menu, ul ul menu, ul menu menu, ul dir menu, -ul ol dir, ul ul dir, ul menu dir, ul dir dir, -menu ol ul, menu ul ul, menu menu ul, menu dir ul, -menu ol menu, menu ul menu, menu menu menu, menu dir menu, -menu ol dir, menu ul dir, menu menu dir, menu dir dir, -dir ol ul, dir ul ul, dir menu ul, dir dir ul, -dir ol menu, dir ul menu, dir menu menu, dir dir menu, -dir ol dir, dir ul dir, dir menu dir, dir dir dir { - list-style-type: square; -} -</pre> - -<p>Может быть записано, как:</p> - -<pre class="brush: css">/* на глубине 3 (или больше) неупорядоченные списки используют square */ -:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul, -:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu, -:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir { - list-style-type: square; -}</pre> - -<p>Однако, не нужно использовать это так: (Смотрите <a href="#Issues_with_performance_and_specificity">раздел о производительности</a> ниже.)</p> - -<pre class="brush: css">:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) { - list-style-type: square; -}</pre> - -<h2 id="Notes" name="Notes">Примечания</h2> - -<p>Особенно полезен при работе с <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">разделами и заголовками</a> в HTML5 . Теги {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, и {{HTMLElement("nav")}} могут быть вложенными, без <code>:any()</code> стилизация их соответствия друг другу может быть сложной.</p> - -<p>Например, без <code>:any()</code>, стилизация всех элементов {{HTMLElement("h1")}} на разной глубине будет очень сложна:</p> - -<pre class="brush: css">/* Уровень 0 */ -h1 { - font-size: 30px; -} -/* Уровень 1 */ -section h1, article h1, aside h1, nav h1 { - font-size: 25px; -} -/* Уровень 2 */ -section section h1, section article h1, section aside h1, section nav h1, -article section h1, article article h1, article aside h1, article nav h1, -aside section h1, aside article h1, aside aside h1, aside nav h1, -nav section h1, nav article h1, nav aside h1, nav nav h1, { - font-size: 20px; -} -/* Уровень 3 */ -/* ... даже не думайте о нём*/ -</pre> - -<p>При использовании <code>:-any()</code>, это становится намного проще:</p> - -<pre class="brush: css">/* Уровень 0 */ -h1 { - font-size: 30px; -} -/* Уровень 1 */ -:-moz-any(section, article, aside, nav) h1 { - font-size: 25px; -} -/* Уровень 2 */ -:-moz-any(section, article, aside, nav) -:-moz-any(section, article, aside, nav) h1 { - font-size: 20px; -} -/* Уровень 3 */ -:-moz-any(section, article, aside, nav) -:-moz-any(section, article, aside, nav) -:-moz-any(section, article, aside, nav) h1 { - font-size: 15px; -}</pre> - -<h3 id="Issues_with_performance_and_specificity" name="Issues_with_performance_and_specificity">Проблемы с производительностью и особенности</h3> - -<p>{{ bug("561154") }} в Gecko, где специфика <code>:-moz-any()</code> не корректна. Текущая реализация (как в Firefox 12) ставит <code>:-moz-any()</code> в категорию универсальных правил, что означает, что использование его в качестве селектора справа будет медленнее, чем использование селекторов по ID, классу, или тегу.</p> - -<p>Например:</p> - -<pre class="brush: css">.a > :-moz-any(.b, .c) -</pre> - -<p>медленнее, чем:</p> - -<pre class="brush: css">.a > .b, .a > .c -</pre> - -<p>а следующее быстрее:</p> - -<pre class="brush: css">:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c -</pre> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}</td> - <td>12.0 (534.30){{property_prefix("-webkit")}}</td> - <td> </td> - <td> </td> - <td> - <p>5<br> - {{property_prefix("-webkit")}}</p> - </td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>5<br> - {{property_prefix("-webkit")}}</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/ru/web/css/действительное_значение/index.html b/files/ru/web/css/actual_value/index.html index da6231da1f..da6231da1f 100644 --- a/files/ru/web/css/действительное_значение/index.html +++ b/files/ru/web/css/actual_value/index.html diff --git a/files/ru/web/css/тихий/index.html b/files/ru/web/css/comments/index.html index 1db7dd50b5..1db7dd50b5 100644 --- a/files/ru/web/css/тихий/index.html +++ b/files/ru/web/css/comments/index.html diff --git a/files/ru/web/css/common_css_questions/index.html b/files/ru/web/css/common_css_questions/index.html deleted file mode 100644 index cecfb92b82..0000000000 --- a/files/ru/web/css/common_css_questions/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: Common CSS questions -slug: Web/CSS/Common_CSS_Questions -translation_of: Learn/CSS/Howto/CSS_FAQ ---- -<h2 id="Why_doesn't_my_CSS_which_is_valid_render_correctly">Why doesn't my CSS, which is valid, render correctly?</h2> - -<p>Браузер использует декларацию <code>DOCTYPE</code> чтобы выбрать, как именно отображать документ - в форме, более совместимой с современными стандартами или в форме, которую будут поддерживать старые браузеры. Правильное использование декларациии <code>DOCTYPE</code> в начале вашего HTML кода повлияет на совместимость с современными стандартами веб браузеров.</p> - -<p>У современных браузеров есть два режима отображения веб-страниц:</p> - -<ul> - <li><em>Индивидуальный</em>: его также называют backwards-compatibility mode, даёт возможность устаревшим страницам отображаться так, как планировал автор, следуя уже не стандартным правилам отображения, которые использовались ещё старыми браузерами. Документы с неполной, некорректной или отстутвующей <code>DOCTYPE</code> декларацией или с тем видом <code>DOCTYPE</code>, который использовался до 2001 года, будет отображён в индивидуальном режиме.</li> - <li><em>Стандартный</em>: в этом режиме браузер старается строго следовать стандартам W3C. Ожидается, что современные HTML страницы разработаны для браузеров, следуемых стандартам, и в результате, страницы с современным <code>DOCTYPE</code> отображаются уже в стандартом режиме.</li> -</ul> - -<p>Gecko-based browsers, have a third <em><a href="/en-US/docs/Gecko's_"Almost_Standards"_Mode" title="Gecko's_"Almost_Standards"_Mode">Almost Standards Mode</a></em> that has only a few minor quirks.</p> - -<p>This is a list of the most commonly used <code>DOCTYPE</code> declarations that will trigger Standards or Almost Standards mode:</p> - -<pre><!DOCTYPE html> /* This is the HTML5 doctype. Given that each modern browser uses an HTML5 - parser, this is the recommended doctype */ - -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" -"http://www.w3.org/TR/html4/loose.dtd"> - -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" -"http://www.w3.org/TR/html4/strict.dtd"> - -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" -"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" -"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> -</pre> - -<h2 id="My_CSS_is_valid.2C_but_not_correctly_rendered" name="My_CSS_is_valid.2C_but_not_correctly_rendered">Why doesn't my CSS, which is valid, render at all?</h2> - -<p>To be applied, a CSS stylesheet must be served with a <code>text/css</code> MIME type. If the Web server doesn't serve it with this type, it won't be applied.</p> - -<h2 id="Difference_between_id_and_class" name="Difference_between_id_and_class">What is the difference between <code>id</code> and <code>class</code>?</h2> - -<p>HTML elements can have an id and/or class attribute. The id attribute assigns a name to the element it is applied to, and for valid markup, there can be only one element with that name. The class attribute assigns a class name to the element, and that name can be used on many elements within the page. CSS allows you to apply styles to particular id and/or class names.<br> - <br> - Use an id-specific style when you want to restrict the applied styling rules to one specific block or element. This style will only be used by the element with that particular id.<br> - <br> - Use a class-specific style when you want to apply the styling rules to many blocks and elements within the page.</p> - -<p>Stylesheets with fewer rules are usually more performant. It is therefore recommended to use classes as much as possible, and to reserve the use of id for specific uses (like to connect label and form elements or for styling elements that must be semantically unique).</p> - -<p>See <a href="/en-US/docs/CSS/Getting_Started/Selectors" title="CSS/Getting_Started/Selectors"> CSS selectors</a></p> - -<h2 id="Restoring_the_default_property_value" name="Restoring_the_default_property_value">How do I restore the default value of a property?</h2> - -<p>Initially CSS didn't provide a "default" keyword and the only way to restore the default value of a property is to explicitly re-declare that property.</p> - -<p>This has changed with CSS 2; the keyword <a href="/es/CSS/initial" title="initial">initial</a> is now a valid value for a CSS property. It resets it to its default value, which is defined in the CSS specification of the given property.</p> - -<h2 id="Derived_styles" name="Derived_styles">How do I derive one style from another?</h2> - -<p>CSS does not allow one style to be defined in terms of another. (See <a href="http://archivist.incutio.com/viewlist/css-discuss/2685">Eric Meyer's note about the Working Group's stance</a>). However, assigning multiple classes to a single element can provide the same effect.</p> - -<h2 id="Assigning_multiple_classes" name="Assigning_multiple_classes">How do I assign multiple classes to an element?</h2> - -<p>HTML elements can be assigned multiple classes by listing the classes in the <code>class</code> attribute, with a blank space to separate them.</p> - -<pre><style type="text/css"> -.news { background: black; color: white; } -.today { font-weight: bold; } -</style> - -<div class="news today"> -... content of today's news ... -</div> -</pre> - -<p>If the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the CSS declarations. The order of classes in the <code>class</code> attribute is not relevant.</p> - -<h2 id="Style_rules_that_don.27t_work" name="Style_rules_that_don.27t_work">Why don't my style rules work properly?</h2> - -<p>Style rules that are syntactically correct may not apply in certain situations. You can use <a href="/en-US/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a>'s <em>CSS Style Rules</em> view to debug problems of this kind, but the most frequent instances of ignored style rules are listed below.</p> - -<h3 id="HTML_elements_hierarchy" name="HTML_elements_hierarchy">HTML elements hierarchy</h3> - -<p>The way CSS styles are applied to HTML elements depends also on the elements hierarchy. It is important to remember that a rule applied to a descendent overrides the style of the parent, in spite of any specificity or priority of CSS rules.</p> - -<pre>.news { color: black; } -.corpName { font-weight: bold; color: red; } - -<!-- news item text is black, but corporate name is red and in bold --> -<div class="news"> - (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday... -</div> -</pre> - -<p>In case of complex HTML hierarchies, if a rule seems to be ignored, check if the element is inside another element with a different style.</p> - -<h3 id="Explicitly_re-defined_style_rule" name="Explicitly_re-defined_style_rule">Explicitly re-defined style rule</h3> - -<p>In CSS stylesheets, order <strong>is</strong> important. If you define a rule and then you re-define the same rule, the last definition is used.</p> - -<pre>#stockTicker { font-weight: bold; } -.stockSymbol { color: red; } -/* other rules */ -/* other rules */ -/* other rules */ -.stockSymbol { font-weight: normal; } - -<!-- most text is in bold, except "GE", which is red and not bold --> -<div id="stockTicker"> - NYS: <span class="stockSymbol">GE</span> +1.0 ... -</div> -</pre> - -<p>To avoid this kind of error, try to define rules only once for a certain selector, and group all rules belonging to that selector.</p> - -<h3 id="Use_of_a_shorthand_property" name="Use_of_a_shorthand_property">Use of a shorthand property</h3> - -<p>Using shorthand properties for defining style rules is good because it uses a very compact syntax. Using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to default. This means that a previous rule for a single attribute could be implicitly overridden.</p> - -<pre>#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; } -.stockSymbol { font: 14px Arial; color: red; } - -<div id="stockTicker"> - NYS: <span class="stockSymbol">GE</span> +1.0 ... -</div> -</pre> - -<p>In the previous example the problem occurred on rules belonging to different elements, but it could happen also for the same element, because rule order <strong>is</strong> important.</p> - -<pre>#stockTicker { - font-weight: bold; - font: 12px Verdana; /* font-weight is now normal */ -} -</pre> - -<h3 id="Use_of_the_.2A_selector" name="Use_of_the_.2A_selector">Use of the <code>*</code> selector</h3> - -<p>The <code>*</code> wildcard selector refers to any element, and it has to be used with particular care.</p> - -<pre>body * { font-weight: normal; } -#stockTicker { font: 12px Verdana; } -.corpName { font-weight: bold; } -.stockUp { color: red; } - -<div id="section"> - NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ... -</div> -</pre> - -<p>In this example the <code>body *</code> selector applies the rule to all elements inside body, at any hierarchy level, including the .stockUp class. So <code>font-weight: bold;</code> applied to the .corpName class is overridden by <code>font-weight: normal;</code> applied to all elements in the body.</p> - -<p>The use of the * selector should be minimized as it is a slow selector, especially when not used as the first element of a selector. Its use should be avoided as much as possible.</p> - -<h3 id="Specificity_in_CSS" name="Specificity_in_CSS">Specificity in CSS</h3> - -<p>When multiples rules apply to a certain element, the rule chosen depends on its style <a href="/en-US/docs/CSS/Specificity" title="Specificity">specificity</a>. Inline style (in HTML <code>style</code> attributes) comes first, followed by ID selectors, then class selectors and eventually element-name selectors.</p> - -<pre>div { color: black; } -#orange { color: orange; } -.green { color: green; } - -<div id="orange" class="green" style="color: red;">This is red</div> -</pre> - -<p>The rules are more complicated when the selector has multiple parts. More detailed information about how selector specificity is calculated can be found in the <a href="http://www.w3.org/TR/CSS21/cascade.html#specificity">CSS 2.1 Specification chapter 6.4.3</a>.</p> - -<h2 id="What_do_the_-moz-.2A_properties_do.3F" name="What_do_the_-moz-.2A_properties_do.3F">What do the -moz-*, -ms-*, -webkit-*, -o-* and -khtml-* properties do?</h2> - -<p>These properties, called <em>prefixed properties</em>, are extensions to the CSS standard. They are used to use experimental and non-standard features without polluting the regular namespace, preventing future incompatibilities to arise when the standard is extended.</p> - -<p>The use of such properties on production websites is not recommended. If nevertheless needed, you are hinted to make a plan for the website evolution: these prefixed properties can be modified or even suppressed when the standard evolves.</p> - -<p>Please see the <a href="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions" title="CSS Reference/Mozilla Extensions">Mozilla CSS Extensions</a> page for more information on the Mozilla-prefixed CSS properties.</p> - -<h2 id="How_does_z-index_relate_to_positioning">How does z-index relate to positioning?</h2> - -<p>The z-index property specifies the stack order of elements.</p> - -<p>An element with a higher z-index/stack order is always in front of an element with a lower z-index/stack order.</p> - -<p>Z-index will only work on elements that have a specified position (<code>position:absolute</code>, <code>position:relative</code>, or <code>position:fixed</code>).</p> diff --git a/files/ru/web/css/css_animations/ispolzovanie_css_animatciy/index.html b/files/ru/web/css/css_animations/using_css_animations/index.html index 05f6cb5cec..05f6cb5cec 100644 --- a/files/ru/web/css/css_animations/ispolzovanie_css_animatciy/index.html +++ b/files/ru/web/css/css_animations/using_css_animations/index.html diff --git a/files/ru/web/css/css_background_and_borders/border-radius_генератор/index.html b/files/ru/web/css/css_background_and_borders/border-radius_generator/index.html index 71f94831f0..71f94831f0 100644 --- a/files/ru/web/css/css_background_and_borders/border-radius_генератор/index.html +++ b/files/ru/web/css/css_background_and_borders/border-radius_generator/index.html diff --git a/files/ru/web/css/css_box_model/box-shadow_generator/index.html b/files/ru/web/css/css_background_and_borders/box-shadow_generator/index.html index 3f46cf53ba..3f46cf53ba 100644 --- a/files/ru/web/css/css_box_model/box-shadow_generator/index.html +++ b/files/ru/web/css/css_background_and_borders/box-shadow_generator/index.html diff --git a/files/ru/web/css/css_background_and_borders/index.html b/files/ru/web/css/css_backgrounds_and_borders/index.html index 59c2117194..59c2117194 100644 --- a/files/ru/web/css/css_background_and_borders/index.html +++ b/files/ru/web/css/css_backgrounds_and_borders/index.html diff --git a/files/ru/web/css/css_background_and_borders/множественные_фоны/index.html b/files/ru/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html index 231c794702..231c794702 100644 --- a/files/ru/web/css/css_background_and_borders/множественные_фоны/index.html +++ b/files/ru/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html diff --git a/files/ru/web/css/css_basic_user_interface/использование_url_значений_для_свойства_cursor/index.html b/files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html index c629b7bffd..c629b7bffd 100644 --- a/files/ru/web/css/css_basic_user_interface/использование_url_значений_для_свойства_cursor/index.html +++ b/files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html diff --git a/files/ru/web/css/box_model/index.html b/files/ru/web/css/css_box_model/introduction_to_the_css_box_model/index.html index 6868871c5a..6868871c5a 100644 --- a/files/ru/web/css/box_model/index.html +++ b/files/ru/web/css/css_box_model/introduction_to_the_css_box_model/index.html diff --git a/files/ru/web/css/css_colors/index.html b/files/ru/web/css/css_color/index.html index c6225aec39..c6225aec39 100644 --- a/files/ru/web/css/css_colors/index.html +++ b/files/ru/web/css/css_color/index.html diff --git a/files/ru/web/guide/css/using_multi-column_layouts/index.html b/files/ru/web/css/css_columns/using_multi-column_layouts/index.html index 65e96fcdcf..65e96fcdcf 100644 --- a/files/ru/web/guide/css/using_multi-column_layouts/index.html +++ b/files/ru/web/css/css_columns/using_multi-column_layouts/index.html diff --git a/files/ru/web/css/css_flexible_box_layout/выравнивание_элементов_в_flex_контейнере/index.html b/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html index 9fe0b2932f..9fe0b2932f 100644 --- a/files/ru/web/css/css_flexible_box_layout/выравнивание_элементов_в_flex_контейнере/index.html +++ b/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html diff --git a/files/ru/web/css/css_flexible_box_layout/контролирование_соотношения_элементов_вдоль_главной_оси/index.html b/files/ru/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html index 97e521c2e1..97e521c2e1 100644 --- a/files/ru/web/css/css_flexible_box_layout/контролирование_соотношения_элементов_вдоль_главной_оси/index.html +++ b/files/ru/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html diff --git a/files/ru/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html b/files/ru/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html deleted file mode 100644 index 3f0b229d20..0000000000 --- a/files/ru/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html +++ /dev/null @@ -1,379 +0,0 @@ ---- -title: Используем CSS Flexible Boxes -slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox -translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes ---- -<div>Эта статья устарела и удалена из английской версии. Вместо неё идёт перенаправление на статью: -<h1 id="Основные_понятия_Flexbox"><a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Основные понятия Flexbox</a></h1> - - - -<p>У меня не поднялась рука удалить эту статью окончательно, но я рекомендую Вам вместо неё, всё-таки, прочитать ту.</p> -</div> - -<div>{{CSSRef}}</div> - -<p><span class="seoSummary">CSS3 <strong>Flexible Box</strong>, или просто <strong>flexbox</strong> — это режим разметки, созданный для упорядочения элементов на странице таким образом, чтобы они вели себя предсказуемо в случаях, когда разметка страницы адаптирована под различные размеры экрана и устройства.</span> Во многих случаях флексбоксы лучше блочной модели разметки, поскольку не использует обтекания (floats) и не выполняет схлопывание отступлений flex-контейнера и его содержимого (margin collapse).</p> - -<p>Для многих дизайнеров модель использования флексбоксов будет более простой для применения. Дочерние элементы внутри флексбокса могут размещаться в любом направлении и могут менять размер, чтобы адаптироваться к различным размерам дисплея. Позиционирование элементов в таком случае является простым и комплексная разметка достигается значительно легче и с более чистым кодом, поскольку порядок отображения элементов не связан с их порядком в коде. Эта независимость умышленно касается только визуального рендеринга, оставляя порядок интерпретации и навигацию зависимыми от порядка в исходниках.</p> - -<div class="note"><strong>Внимание:</strong> некоторые браузеры все еще могут частично или полностью не поддерживать флексбоксы. Ознакомьтесь с <a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes#Совместимость_с_браузерами">таблицей совместимости</a>.</div> - -<h2 id="Концепция_Flexbox">Концепция Flexbox</h2> - -<p>Главной концепцией Flexbox есть возможность изменения высоты и/или ширины его элементов, чтобы лучше заполнять пространство любого дисплея. Flex-контейнер увеличивает элементы, чтобы заполнить доступное пространство или уменьшает чтобы предотвратить перекрытие.</p> - -<p>Алгоритм разметки флексбоксами агностичено направлен в противовес блочной разметке, которая ориентирована строго вертикально, или горизонтально-ориентированной инлайн-разметке. Несмотря на то что разметка блоками хорошо подходит для страницы, ей не хватает объективного механизма для поддержки компонентов, которые должны менять ориентацию, размеры а также растягиваться или сжиматься при изменениях размера экрана, изменении ориентации с вертикальной на горизонтальную и так далее. Разметка флексбоксами наиболее желательна для компонентов приложения и шаблонов, которые мало масштабируются, тогда как grid-разметка создана для больших шаблонов. Обе технологии являются частью разработки CSS Working Group которая должна способствовать совместимости web-приложений с различными браузерами, режимами а также большей гибкости.</p> - -<h2 id="Терминология">Терминология</h2> - -<p>Поскольку описание флексбоксов не включает таких словосочетаний, как горизонтальная / inline и вертикальная / block оси, объяснение модели предусматривает новую терминологию. Используйте следующую диаграмму при просмотре словаря терминов. Она изображает flex-контейнер, имеющий flex-направление ряда, что означает, что каждый flex item расположен горизонтально, друг за другом по главной оси (main axis) в соответствии с установленным направлением написания текста элемента. Слева направо в данном случае.</p> - -<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png"></p> - -<dl> - <dt>Flex-контейнер</dt> - <dd>Родительский элемент, в котором содержатся flex-элементы. Flex-контейнер определяется установкой свойства {{Cssxref("display")}} в <code>flex</code> или <code>inline-flex</code>.</dd> - <dt>Flex-элемент, flex item</dt> - <dd> - <p>Каждый дочерний элемент flex-контейнера становится flex-элементом. Текст, который напрямую содержится в flex-контейнере, оборачивается анонимным flex-элементом.</p> - </dd> - <dt>Оси</dt> - <dd> - <p>Каждый flexible-бокс шаблон строится по двум осям. Главная ось <strong>(main axis)</strong> — это ось, вдоль которой flex-элементы следуют один за другим, а перекрёстная ось <strong>(cross axis)</strong> перпендикулярна ей.</p> - - <ul> - <li>Свойство <code>{{Cssxref("flex-direction")}}</code> устанавливает главную ось.</li> - <li>Свойство <code>{{Cssxref("justify-content")}}</code> определяет расположение элементов вдоль главной оси в текущем ряду.</li> - <li>Свойство <a href="/ru/docs/Web/CSS/align-items"><code>align-items</code></a> расположение элементов вдоль перекрёстной оси в текущем ряду.</li> - <li>Свойство <a href="/ru/docs/Web/CSS/align-self"><code>align-self</code></a> устанавливает, как отдельный flex-элемент выровнен по перекрёстной оси, переопределяя значения, установленные с помощью <code>align-items.</code></li> - </ul> - </dd> - <dt>Направления</dt> - <dd> - <p>Главное начало и конец (<strong>main</strong>) и перекрёстное начало и конец (<strong>cross start</strong>/<strong>end</strong>) — это стороны контейнера, определяющие начало и окончание потока flex-элемментов. Они следуют по главной и перекрестной осями flex-контейнера в векторе, установленном режимом написания ({{Cssxref("writing-mode")}}) (слева направо, справа налево и т. д.).</p> - - <ul> - <li>Свойство {{Cssxref("order")}} присваивает элементы порядковым группам и определяет, в каком порядке их показывать.</li> - <li>Свойство {{Cssxref("flex-flow")}} — это короткая форма, состоящая из свойств {{Cssxref("flex-direction")}} и {{Cssxref("flex-wrap")}}, определяющих расплолжение элементов.</li> - </ul> - </dd> - <dt>Линии</dt> - <dd> - <p>Flex-элементы могут размещаться на одной или нескольких линиях в зависимости от значения свойства {{Cssxref("flex-wrap")}}, которое контролирует направление перекрестных линий и направление в котором складываются новые линии.</p> - </dd> - <dt>Размеры</dt> - <dd> - <p>Флекс элементы агностически эквивалентны высоте и ширине <strong>главного размера</strong> и <strong>поперечного размера,</strong> которые равны, соответственно, главной оси (main axis) и поперечной оси (cross axis) флекс-контейнера.</p> - - <ul> - <li>Свойства <code><a href="/ru/docs/Web/CSS/min-height">min-height</a></code> и <code><a href="/ru/docs/Web/CSS/min-width">min-width</a></code> принимают значение по-умолчанию 0.</li> - <li>Свойство <a href="/ru/docs/Web/CSS/flex"><code>flex</code></a> - это сокращённая запись свойств <a href="/ru/docs/Web/CSS/flex-grow"><code>flex-grow</code></a>, <code><a href="/ru/docs/Web/CSS/flex-shrink">flex-shrink</a> и</code> <code><a href="/ru/docs/Web/CSS/flex-basis">flex-basis</a>.</code></li> - </ul> - </dd> -</dl> - -<h2 id="Делаем_элемент_флексбоксом">Делаем элемент флексбоксом</h2> - -<p>Чтобы сделать элемент flexible-боксом, укажите значение {{cssxref("display")}} следующим образом:</p> - -<pre class="brush: css">display: flex</pre> - -<p>или</p> - -<pre class="brush: css">display: inline-flex</pre> - -<p>Таким образом мы определяем элемент как флексбокс, а его дочерниие элементы — как flex-элементы. Значение <code>flex</code> делает контейнер блочным элементом, а <code>inline-flex</code> значение превращает его в инлайн-элемент.</p> - -<div class="note"><span class="notranslate"><strong>Внимание</strong></span><strong>:</strong> для <span class="notranslate">указания префикса вендора, добавьте строку в значение атрибута, а не к самому атрибуту</span>. <span class="notranslate">Например</span>, <code>display: -webkit-flex</code>.</div> - -<h2 id="Рассмотрим_flex-элементы">Рассмотрим flex-элементы</h2> - -<p>Текст, который содержится непосредственно внутри flex-контейнера, автоматически оборачивается анонимным flex-элементом. Однако, анонимный flex-элемент, содержащий только пробелы, не отображается (как будто было указано значение <code>display: none</code>).</p> - -<p>Абсолютно позиционированные дочерние элементы flex-контейнера позиционируются так, что их статическое положение определяется относительно главного начального угла содержащего их flex-контейнера.</p> - -<p>Отступы (margin) соседних flex-контейнеров не схлопываются. Установка значений <code>margin: auto </code>поглощает дополнительное место в вертикальном или горизонтальном направлении и может быть использовано для выравнивания или для разделения соседних flex-элементов. См. <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">Выравнивание при помощи 'автоматических' отступов </a>в разделе "Модель расположения при помощи flex-контейнеров" спецификации W3C.</p> - -<p>Свойства выравнивания flexbox выполняют "истинное" центрирование в отличие от других способов центрирования в CSS. Это означает, что flex-элементы будут оставаться отцентрированными даже если они переполняют flex-контейнер. Впрочем, это может иногда быть проблематичным, если они вылезают за верхний или левый край страницы (в языках с написанием слева направо; в языках с написанием справа налево, таких как арабский, возникает проблема с правой границей), так как вы не можете прокрутить страницу в данную область даже если там есть содержимое! В будущем релизе свойства выравнивания будут также дополнены "безопасной" опцией. На данный момент, если это проблема, вы можете использовать отступы (margin) для достижения центрирования, так как они сработают "безопасно" и центрирование будет прекращено при переполнении. Вместо использования свойства <code>align- </code>просто установите автоматические отступы (<code>margin: auto)</code> для flex-элементов, которые вы хотите отцентрировать. Вместо свойств <code>justify-</code> установите <code>margin: auto</code> на внешние края первого и последнего элемента в flex-контейнере. Автоматические отступы будут "подстраиваться" и занимать оставшееся место, центрируя flex-элементы при наличии свободного места и используя стандартное выравнивание при его отсутствии. Тем не менее, если вы пытаетесь заменить <code>justify-content </code>центрированием, основанным на отступах (margin-based) в многострочном flexbox, вам, видимо, не повезло, так как вам необходимо установить отступы для первого и последнего элемента на каждой строке. Если вы не можете предугадать заранее на какой строке окажется каждый элемент, вы не сможете надежно использовать центрирование, основанное на отступах, на основной оси для замены свойства <code>justify-content</code>.</p> - -<p>Помните, что, несмотря на то, что порядок отображения элементов не зависит от их положения в исходном коде, эта независимость затрагивает только визуальное отображение, оставляя навигацию и голосовую помощь в исходном порядке. Даже свойство {{cssxref("order")}} не влияет на очередность голосовой помощи и навигации. Таким образом, разработчики должны уделять внимание правильному порядку элементов в исходном коде, чтобы не навредить доступности документа.</p> - -<h2 id="Свойства_Flexbox">Свойства Flexbox</h2> - -<h3 id="Свойства_не_влияющие_на_Flexbox">Свойства, не влияющие на Flexbox</h3> - -<p>Так как flexbox используют другой алгоритм расположения, некоторые свойства не имеют смысла для flex-контейнера:</p> - -<ul> - <li>свойства <code>column-*</code> <a href="/ru/docs/Web/Guide/CSS/Using_multi-column_layouts">модуля с множественными столбцами</a> не влияет на flex-элементы.</li> - <li>{{cssxref("clear")}} не действует на flex-элементах.</li> - <li>{{cssxref("float")}} заставляет свойство элемента <code>display</code> считаться как <code>block</code>.</li> - <li>{{cssxref("vertical-align")}} не оказывает эффекта на выравнивание flex-элементов.</li> -</ul> - -<h2 id="Пример">Пример</h2> - -<h3 id="Типичный_пример_flex">Типичный пример flex</h3> - -<p>Типичный пример показывает как применять "flex-эффект" к элементам и как соседние элементы ведут себя в состоянии flex.</p> - -<pre class="brush: html"><!DOCTYPE html> -<html lang="en"> - <head> - <style> - .flex { - /* basic styling */ - width: 350px; - height: 200px; - border: 1px solid #555; - font: 14px Arial; - - /* flexbox setup */ - display: flex; - flex-direction: row; - } - - .flex > div { - flex: 1 1 auto; - width: 30px; /* To make the transition work nicely. (Transitions to/from - "width:auto" are buggy in Gecko and Webkit, at least. - See http://bugzil.la/731886 for more info.) */ - transition: width 0.7s ease-out; - } - - /* colors */ - .flex > div:nth-child(1){ background: #009246; } - .flex > div:nth-child(2){ background: #F1F2F1; } - .flex > div:nth-child(3){ background: #CE2B37; } - - .flex > div:hover { - width: 200px; - } - - </style> - </head> - <body> - <p>Flexbox nuovo</p> - <div class="flex"> - <div>uno</div> - <div>due</div> - <div>tre</div> - </div> - </body> -</html></pre> - -<h3 id="Пример_расположения_Священный_Грааль">Пример расположения "Священный Грааль"</h3> - -<p>Данный пример показывает как flexbox предоставляет возможность динамически изменять расположение для различных разрешений экрана. Следующая схема иллюстрирует преобразование.</p> - -<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p> - -<p>Здесь изображен случай, когда расположение, подходящее для окна браузера должно быть оптимизировано для экрана смартфона. Не только элементы должны уменьшиться в размере, но и порядок, в котором они отображаются, должен измениться. Flexbox сильно упрощает это.</p> - -<pre class="brush: html"><!DOCTYPE html> -<html lang="en"> - <head> - <style> - body { - font: 24px Helvetica; - background: #999999; - } - - #main { - min-height: 800px; - margin: 0px; - padding: 0px; - display: flex; - flex-flow: row; - } - - #main > article { - margin: 4px; - padding: 5px; - border: 1px solid #cccc33; - border-radius: 7pt; - background: #dddd88; - flex: 3 1 60%; - order: 2; - } - - #main > nav { - margin: 4px; - padding: 5px; - border: 1px solid #8888bb; - border-radius: 7pt; - background: #ccccff; - flex: 1 6 20%; - order: 1; - } - - #main > aside { - margin: 4px; - padding: 5px; - border: 1px solid #8888bb; - border-radius: 7pt; - background: #ccccff; - flex: 1 6 20%; - order: 3; - } - - header, footer { - display: block; - margin: 4px; - padding: 5px; - min-height: 100px; - border: 1px solid #eebb55; - border-radius: 7pt; - background: #ffeebb; - } - - /* Too narrow to support three columns */ - @media all and (max-width: 640px) { - #main, #page { - flex-direction: column; - } - - #main > article, #main > nav, #main > aside { - /* Return them to document order */ - order: 0; - } - - #main > nav, #main > aside, header, footer { - min-height: 50px; - max-height: 50px; - } - } - </style> - </head> - <body> - <header>header</header> - <div id='main'> - <article>article</article> - <nav>nav</nav> - <aside>aside</aside> - </div> - <footer>footer</footer> - </body> -</html></pre> - -<h2 id="Песочница">Песочница</h2> - -<p>Существует несколько песочниц с flexbox, доступных онлайн для экспериментов:</p> - -<ul> - <li><a href="http://demo.agektmr.com/flexbox/">Flexbox Playground</a></li> - <li><a href="http://the-echoplex.net/flexyboxes">Flexy Boxes</a></li> - <li><a href="http://codepen.io/justd/pen/yydezN">Flexbox Properties Demonstration</a></li> - <li><a href="http://flexboxfroggy.com/">Flexbox Froggy</a></li> -</ul> - -<h2 id="О_чем_нужно_помнить">О чем нужно помнить</h2> - -<p>Алгоритм, описывающий как flex-элементы располагаются, иногда может быть довольно запутанным. Вот несколько правильных решений, которые позволят избежать неприятных сюрпризов при верстке с использованием flexbox.</p> - -<p>Flexbox располагаются в соответствие с <a href="https://developer.mozilla.org/ru/docs/Web/CSS/writing-mode">направлением письма</a>, что означает, что <strong>главное начало</strong> и <strong>главный конец </strong>располагаются в зависимости от положения <strong>начала </strong>и <strong>конца </strong>(строки - <em>прим.</em>).</p> - -<p><strong>Перекрестное начало</strong> и <strong>перекрестный конец </strong>полагаются на определение позиции <strong>начала </strong>и <strong>конца, </strong>которое зависит от значения свойства <code>{{cssxref("direction")}}</code>.</p> - -<p>Разрывы страницы допустимы в расположении flex-контейнеров, когда это позволяет свойство <code>break-. Свойства </code>CSS3 <code>break-after</code>, <code>break-before</code> и <code>break-inside</code>, а также свойства CSS 2.1 <code>page-break-before</code>, <code>page-break-after</code> и <code>page-break-inside</code> работают на flex-контейнере, flex-элементах, а также внутри flex-элементов.</p> - -<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support (single-line flexbox)</td> - <td>{{CompatGeckoDesktop("18.0")}}<sup>[6]</sup>{{property_prefix("-moz")}}<sup>[2]</sup><br> - {{CompatGeckoDesktop("22.0")}}</td> - <td>21.0{{property_prefix("-webkit")}}<br> - 29.0</td> - <td>11<sup>[3]</sup></td> - <td>12.10{{property_prefix("-webkit")}}<sup>[5]</sup></td> - <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td> - </tr> - <tr> - <td>Multi-line flexbox</td> - <td>{{CompatGeckoDesktop("28.0")}}</td> - <td>21.0{{property_prefix("-webkit")}}<br> - 29.0</td> - <td>11<sup>[3]</sup></td> - <td>12.10<sup>[5]</sup><br> - 15 {{property_prefix("-webkit")}}</td> - <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>Android</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support (single-line flexbox)</td> - <td>{{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}<sup>[2]</sup><br> - {{CompatGeckoMobile("22.0")}}</td> - <td> - <p>1.0{{property_prefix("-moz")}}<sup>[2]</sup><br> - 1.1</p> - </td> - <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br> - 4.4</td> - <td>11</td> - <td>12.10<sup>[5]</sup><br> - 15{{property_prefix("-webkit")}}</td> - <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td> - </tr> - <tr> - <td>Multi-line flexbox</td> - <td>{{CompatGeckoMobile("28.0")}}</td> - <td>1.3</td> - <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br> - 4.4</td> - <td>11</td> - <td>12.10<sup>[5]</sup><br> - 15{{property_prefix("-webkit")}}</td> - <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Safari до версии 6.0 (iOS.1) поддерживал старую несовместимую черновую версию спецификации. Safari 6.1 (и Safari на iOS 7) был обновлен для поддержки финальной версии.</p> - -<p>[2] До Firefox 22, чтобы активировать поддержку flexbox, пользователь должен установить параметр <code>about:config</code> <code>layout.css.flexbox.enabled</code> в значение <code>true</code>. Начиная с Firefox 22 по Firefox 27, параметр установлен в <code>true</code> по умолчанию, и полностью исключен в Firefox 28.</p> - -<p>[3] Internet Explorer 10 поддерживает старую несовместимую черновую версию спецификации; Internet Explorer 11 <a href="https://msdn.microsoft.com/ru-ru/library/dn265027(v=vs.85).aspx">был обновлен</a> для поддержки финальной версии.</p> - -<p>[4] Android browser до версии 4.3 поддерживал старую несовместимую черновую версию спецификации. Android 4.4 был обновлен для поддержки финальной версии.</p> - -<p>[5] Хотя изначальная реализация в Opera 12.10 <code>flexbox</code> была без приставки, она получила приставку {{property_prefix("-webkit")}} в версиях с 15 по 16 Opera и с 15 по 19 Opera Mobile. Приставка была снова убрана в Opera 17 и Opera Mobile 24.</p> - -<p>[6] До Firefox 29, <code>установка visibility: collapse</code> для flex-элемента заставляет его обрабатываться как <code>display: none</code> вместо предполагаемого поведения, обрабатывающего его как <code>visibility: hidden</code>. Предложенное решение - использовать <code>visibility:hidden</code> для flex-элементов, которые должны вести себя как при установленном <code>visibility:collapse</code>. Для большей информации, см {{bug(783470)}}.</p> - -<h2 id="См._также">См. также</h2> - -<ul> - <li><a href="https://github.com/philipwalton/flexbugs">Проект Flexbugs </a>для информации о багах в браузерных реализациях flexbox.</li> -</ul> diff --git a/files/ru/web/css/css_flow_layout/блочное_и_строчное_размещение_в_нормальном_потоке/index.html b/files/ru/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html index 86879d343e..86879d343e 100644 --- a/files/ru/web/css/css_flow_layout/блочное_и_строчное_размещение_в_нормальном_потоке/index.html +++ b/files/ru/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html diff --git a/files/ru/web/css/css_flow_layout/введение_в_контексты_форматирования/index.html b/files/ru/web/css/css_flow_layout/intro_to_formatting_contexts/index.html index c027e8eb3b..c027e8eb3b 100644 --- a/files/ru/web/css/css_flow_layout/введение_в_контексты_форматирования/index.html +++ b/files/ru/web/css/css_flow_layout/intro_to_formatting_contexts/index.html 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 48eec35abe..48eec35abe 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 diff --git a/files/ru/web/css/css_grid_layout/грид-области/index.html b/files/ru/web/css/css_grid_layout/grid_template_areas/index.html index 6d2d3b6892..6d2d3b6892 100644 --- a/files/ru/web/css/css_grid_layout/грид-области/index.html +++ b/files/ru/web/css/css_grid_layout/grid_template_areas/index.html diff --git a/files/ru/web/css/css_grid_layout/расположение_элементов_по_грид-линиям_с_помощью_css_grid/index.html b/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html index e470a72ce7..e470a72ce7 100644 --- a/files/ru/web/css/css_grid_layout/расположение_элементов_по_грид-линиям_с_помощью_css_grid/index.html +++ b/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html diff --git a/files/ru/web/guide/css/understanding_z_index/adding_z-index/index.html b/files/ru/web/css/css_positioning/understanding_z_index/adding_z-index/index.html index 2fff1726d3..2fff1726d3 100644 --- a/files/ru/web/guide/css/understanding_z_index/adding_z-index/index.html +++ b/files/ru/web/css/css_positioning/understanding_z_index/adding_z-index/index.html diff --git a/files/ru/web/guide/css/understanding_z_index/index.html b/files/ru/web/css/css_positioning/understanding_z_index/index.html index 0074ff2577..0074ff2577 100644 --- a/files/ru/web/guide/css/understanding_z_index/index.html +++ b/files/ru/web/css/css_positioning/understanding_z_index/index.html diff --git a/files/ru/web/guide/css/understanding_z_index/stacking_without_z-index/index.html b/files/ru/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html index 7f4eb09133..7f4eb09133 100644 --- a/files/ru/web/guide/css/understanding_z_index/stacking_without_z-index/index.html +++ b/files/ru/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html diff --git a/files/ru/web/css/css_селекторы/index.html b/files/ru/web/css/css_selectors/index.html index 8745681718..8745681718 100644 --- a/files/ru/web/css/css_селекторы/index.html +++ b/files/ru/web/css/css_selectors/index.html diff --git a/files/ru/web/css/css_селекторы/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/ru/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html index f737d2cb6d..f737d2cb6d 100644 --- a/files/ru/web/css/css_селекторы/using_the__colon_target_pseudo-class_in_selectors/index.html +++ b/files/ru/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html diff --git a/files/ru/web/css/css_user_interface/index.html b/files/ru/web/css/css_user_interface/index.html deleted file mode 100644 index 2a4028644d..0000000000 --- a/files/ru/web/css/css_user_interface/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: CSS Basic User Interface -slug: Web/CSS/CSS_User_Interface -tags: - - CSS - - CSS Basic User Interface - - NeedsTranslation - - Overview - - Reference - - TopicStub -translation_of: Web/CSS/CSS_Basic_User_Interface -translation_of_original: Web/CSS/CSS_User_Interface ---- -<div>{{CSSRef}}</div> - -<p><strong>CSS User Interface</strong> is a CSS module that lets you define the rendering and functionality of features related to the user interface.</p> - -<h2 id="Reference">Reference</h2> - -<h3 id="Preferences">Preferences</h3> - -<div class="index"> -<ul> - <li>{{cssxref("box-sizing")}}</li> - <li>{{cssxref("cursor")}}</li> - <li>{{cssxref("outline")}}</li> - <li>{{cssxref("outline-width")}}</li> - <li>{{cssxref("outline-style")}}</li> - <li>{{cssxref("outline-color")}}</li> - <li>{{cssxref("outline-offset")}}</li> - <li>{{cssxref("resize")}}</li> - <li>{{cssxref("text-overflow")}}</li> - <li>{{cssxref("nav-down")}}</li> - <li>{{cssxref("nav-left")}}</li> - <li>{{cssxref("nav-right")}}</li> - <li>{{cssxref("nav-up")}}</li> -</ul> -</div> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/en-US/docs/Web/CSS/CSS_User_Interface/Using_URL_values_for_the_cursor_property">Using URL values for the <code>cursor</code> property</a></dt> - <dd>Explains how a URL can be used with the {{cssxref("cursor")}} property to produce custom cursors.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Basic UI')}}</td> - <td>{{Spec2('CSS3 Basic UI')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'ui.html')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>1.5 (1.8)</td> - <td>8.0</td> - <td>7.0</td> - <td>1.2 (125)</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>{{CompatGeckoMobile(1.8)}}</td> - <td>8.0</td> - <td>6.0</td> - <td>3.1</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/ru/web/css/filter-function/url/index.html b/files/ru/web/css/filter-function/url/index.html deleted file mode 100644 index 755d1adfe4..0000000000 --- a/files/ru/web/css/filter-function/url/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: url() -slug: Web/CSS/filter-function/url -tags: - - CSS - - Начинающий - - Ссылка - - Функция -translation_of: Web/CSS/url() -translation_of_original: Web/CSS/filter-function/url ---- -<div>{{cssref}}</div> - -<p><strong><code>url()</code></strong> - это <a href="/en-US/docs/Web/CSS">CSS</a> функция, использующая <a href="/en-US/docs/Web/SVG/Element/filter">SVG filter</a> для измения внешнего вида у выводимого изображения.</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox">url(<em>расположение</em>)</pre> - -<h3 id="Параметры">Параметры</h3> - -<dl> - <dt><code>расположение</code></dt> - <dd>В {{cssxref("<URL-адрес>")}} из {{glossary("XML")}} указывается файл, который задает фильтр SVG, а также может включать в себя привязки к конкретному фильтрующему элементу.</dd> -</dl> - -<h2 id="Пример">Пример</h2> - -<pre class="brush: css">url(resources.svg#c1)</pre> - -<h2 id="Изучите_также">Изучите также</h2> - -<ul> - <li><a href="https://developer.mozilla.org/ru/docs/Web/CSS/filter-function">{{cssxref("<filter-function>")}}</a></li> -</ul> diff --git a/files/ru/web/css/grid-gap/index.html b/files/ru/web/css/grid-gap/index.html deleted file mode 100644 index 90daa7c0ea..0000000000 --- a/files/ru/web/css/grid-gap/index.html +++ /dev/null @@ -1,194 +0,0 @@ ---- -title: grid-gap -slug: Web/CSS/grid-gap -translation_of: Web/CSS/gap -translation_of_original: Web/CSS/grid-gap ---- -<p>{{Deprecated_Header}}</p> - -<div class="note"> -<p><strong>Примечание</strong>. Свойство CSS с разделительной сеткой было переименовано в свойство prefix-less {{cssxref('gap')}}.</p> -</div> - -<p>Свойство CSS <strong><code>grid-gap</code></strong> является сокращенным свойством для {{cssxref("grid-row-gap")}} и {{cssxref("grid-column-gap")}}, определяющего желоба между строками и столбцами сетки.</p> - -<div>{{EmbedInteractiveExample("pages/css/grid-gap.html")}}</div> - -<p class="hidden">Источник этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush: css no-line-numbers">/* Одно <length> значение */ -grid-gap: 20px; -grid-gap: 1em; -grid-gap: 3vmin; -grid-gap: 0.5cm; - -/* Одно <percentage> значение */ -grid-gap: 16%; -grid-gap: 100%; - -/* Два <length> значения */ -grid-gap: 20px 10px; -grid-gap: 1em 0.5em; -grid-gap: 3vmin 2vmax; -grid-gap: 0.5cm 2mm; - -/* Один или два <percentage> значения */ -grid-gap: 16% 100%; -grid-gap: 21px 82%; - -/* calc() значения */ -grid-gap: calc(10% + 20px); -grid-gap: calc(20px + 10%) calc(10% - 5px); - -/* Глобальные значения */ -grid-gap: inherit; -grid-gap: initial; -grid-gap: unset; -</pre> - -<p>Это свойство указывается как значение для <code><'grid-row-gap'></code> , за которым необязательно следует значение для <code><'grid-column-gap'></code>. Если <code><'grid-column-gap'></code> опущено, для него устанавливается то же значение, что и <code><'grid-row-gap'></code>.</p> - -<p>Каждое из свойств <code><'grid-row-gap'></code> и <code><'grid-column-gap'></code> указываются как <code><length></code> или <code><percentage></code>.</p> - -<h3 id="Значения">Значения</h3> - -<dl> - <dt><code><length></code></dt> - <dd>Ширина отступа, разделяющего линии сетки.</dd> - <dt><code><percentage></code></dt> - <dd>Ширина отступа, разделяющего линии сетки относительно размеров элемента.</dd> -</dl> - -<h3 id="Формальный_синтаксис">Формальный синтаксис</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Примеры">Примеры</h2> - -<h3 id="HTML_Контент">HTML Контент</h3> - -<pre class="brush: html"><div id="grid"> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> -</div></pre> - -<h3 id="CSS_Контент">CSS Контент</h3> - -<pre class="brush: css; highlight[5]">#grid { - display: grid; - height: 200px; - grid-template: repeat(3, 1fr) / repeat(3, 1fr); - grid-gap: 20px 5px; -} - -#grid > div { - background-color: lime; -} -</pre> - -<p>{{EmbedLiveSample("Example", "100%", "200px")}}</p> - -<h2 id="Спецификации">Спецификации</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарий</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 Box Alignment", "#propdef-grid-gap", "grid-gap")}}</td> - <td>{{Spec2("CSS3 Box Alignment")}}</td> - <td>Устарело в пользу <code><a href="/en-US/docs/Web/CSS/gap">gap</a></code></td> - </tr> - <tr> - <td>{{SpecName("CSS3 Grid", "#gutters", "grid-gap")}}</td> - <td>{{Spec2("CSS3 Grid")}}</td> - <td>Начальное определение</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> - - - -<p>{{Compat("css.properties.grid-gap")}}</p> - -<h2 id="Смотрите_также">Смотрите также</h2> - -<ul> - <li>Prefixless CSS equivalents: {{cssxref("row-gap")}}, {{cssxref("column-gap")}}, {{cssxref("gap")}}</li> - <li>Related CSS properties: {{cssxref("grid-row-gap")}}, {{cssxref("grid-column-gap")}}</li> - <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">Basic concepts of grid layout - Gutters</a></em></li> -</ul> - -<section class="Quick_links" id="Quick_Links"> -<ol> - <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> - <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> - <li data-default-state="open"><a href="#"><strong>Guides</strong></a> - <ol> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Properties</strong></a> - <ol> - <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> - <ol> - <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> - <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> - <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> - <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> - <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> - <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> - <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> - </ol> - </li> -</ol> -</section> diff --git a/files/ru/web/css/способ_расположения/index.html b/files/ru/web/css/layout_mode/index.html index dcf1440cb5..dcf1440cb5 100644 --- a/files/ru/web/css/способ_расположения/index.html +++ b/files/ru/web/css/layout_mode/index.html diff --git a/files/ru/web/css/размер/index.html b/files/ru/web/css/length/index.html index 4fd88f8cc2..4fd88f8cc2 100644 --- a/files/ru/web/css/размер/index.html +++ b/files/ru/web/css/length/index.html diff --git a/files/ru/web/css/media_queries/тестирование_медиа_запросы/index.html b/files/ru/web/css/media_queries/testing_media_queries/index.html index 878621ebd3..878621ebd3 100644 --- a/files/ru/web/css/media_queries/тестирование_медиа_запросы/index.html +++ b/files/ru/web/css/media_queries/testing_media_queries/index.html diff --git a/files/ru/web/css/псевдо-классы/index.html b/files/ru/web/css/pseudo-classes/index.html index 2c280be32b..2c280be32b 100644 --- a/files/ru/web/css/псевдо-классы/index.html +++ b/files/ru/web/css/pseudo-classes/index.html diff --git a/files/ru/web/css/замещаемый_элемент/index.html b/files/ru/web/css/replaced_element/index.html index a252cbad33..a252cbad33 100644 --- a/files/ru/web/css/замещаемый_элемент/index.html +++ b/files/ru/web/css/replaced_element/index.html diff --git a/files/ru/web/css/указанное_значение/index.html b/files/ru/web/css/specified_value/index.html index 4f143afb74..4f143afb74 100644 --- a/files/ru/web/css/указанное_значение/index.html +++ b/files/ru/web/css/specified_value/index.html diff --git a/files/ru/web/css/синтаксис/index.html b/files/ru/web/css/syntax/index.html index 1adfb2fb04..1adfb2fb04 100644 --- a/files/ru/web/css/синтаксис/index.html +++ b/files/ru/web/css/syntax/index.html diff --git a/files/ru/web/css/url/index.html b/files/ru/web/css/url/index.html deleted file mode 100644 index 82965bf827..0000000000 --- a/files/ru/web/css/url/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: <url> -slug: Web/CSS/url -tags: - - Адрес - - Типы данных - - относительный адрес -translation_of: Web/CSS/url() -translation_of_original: Web/CSS/url ---- -<div>{{CssRef}}</div> - -<p><a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Types">Тип данных</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code><url></code></strong> обозначает указатели на ресурсы, такие как изображения или шрифты. URL-адреса могут быть использованы в многочисленных свойствах CSS, таких как {{Cssxref("background-image")}}, {{Cssxref("cursor")}} или {{cssxref("list-style")}}.</p> - -<div class="note"> -<p><strong>URI или URL?</strong> Существует разница между {{Glossary("URI")}} и {{Glossary("URL")}}. URI просто идентифицирует ресурс. URL является типом URI, и описывает <em>месторасположение</em> ресурса.URI может быть либо URL-адресом, либо именем ресурса ({{Glossary("URN")}}).</p> - -<p>В CSS Уровень 1, фунциональная нотация <code>url()</code>описывала только истинные URL-адреса. В CSS Уровень 2, определение <code>url()</code> было расширено для описания любого URI, будь то URL или URN. Неожиданно, что <code>url()</code> может быть использовано для создания типа данных CSS <code><uri></code>. Это изменение было не только неожиданным, но и ненужным, так как URN почти не используется в реальном CSS. Для избежания путанницы, CSS Уровень 3 вернулся к более узкому, первоначальному определению. Сейчас <code>url()</code> означает только истинное значение <code><url></code>.</p> -</div> - -<h2 id="Синтаксис">Синтаксис</h2> - -<p>Тип данных <code><url></code> является указанием к использованию функциональной нотации <code id="The_url()_functional_notation">url()</code>. Он может быть задан без кавычек или с использованием одинарных или двойных кавычек. Допускаются относительные URL-адреса, относящиеся к URL-адресу страницы стилей (а не к URL-адресу веб-страницы).</p> - -<pre class="syntaxbox"><a_css_property>: url("http://mysite.example.com/mycursor.png") -<a_css_property>: url('http://mysite.example.com/mycursor.png') -<a_css_property>: url(http://mysite.example.com/mycursor.png) -</pre> - -<div class="note"> -<p><strong>Примечание:</strong> Контрольные символы выше 0x7e не допустимы в URL-адресах без кавычек, начиная с Firefox 15. Смотри {{Bug(752230)}} для более детальной информации.</p> -</div> - -<h2 id="Примеры">Примеры</h2> - -<pre class="brush: css">.topbanner { - background: url("topbanner.png") #00D no-repeat fixed; -} -</pre> - -<pre class="brush: css">ul { - list-style: square url(http://www.example.com/redball.png); -} -</pre> - -<h2 id="Specifications" name="Specifications">Спецификации</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарий</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Values', '#urls', '<url>')}}</td> - <td>{{Spec2('CSS4 Values')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS3 Values', '#urls', '<url>')}}</td> - <td>{{Spec2('CSS3 Values')}}</td> - <td>Нет значительных изменений по сравнению с CSS Уровень 2 (Revision 1).</td> - </tr> - <tr> - <td>{{Specname('CSS2.1', 'syndata.html#uri', '<uri>')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>Нет значительных изменений по сравнению с CSS Уровень 1.</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#url', '<url>')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>первое определение.</td> - </tr> - </tbody> -</table> - -<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> - - - -<div>{{Compat("css.types.url")}}</div> - -<h2 id="Смотрите_также">Смотрите также</h2> - -<ul> - <li>{{cssxref("<gradient>")}}</li> - <li>{{cssxref("element()")}}</li> - <li>{{cssxref("_image","image()")}}</li> - <li>{{cssxref("image-set","image-set()")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> diff --git a/files/ru/web/guide/css/visual_formatting_model/index.html b/files/ru/web/css/visual_formatting_model/index.html index 7a5de35909..7a5de35909 100644 --- a/files/ru/web/guide/css/visual_formatting_model/index.html +++ b/files/ru/web/css/visual_formatting_model/index.html diff --git a/files/ru/web/events/abort/index.html b/files/ru/web/events/abort/index.html deleted file mode 100644 index d8029e2378..0000000000 --- a/files/ru/web/events/abort/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: abort -slug: Web/Events/abort -tags: - - Событие -translation_of: Web/API/HTMLMediaElement/abort_event -translation_of_original: Web/Events/abort ---- -<p>Событие "abort" вызывается когда загрузка какого-либо ресурса была прервана.</p> - -<h2 id="Общая_информация">Общая информация</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Спецификация</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort">DOM L3</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("UIEvent")}} если событие сгенерировано из пользовательского интерфейса, иначе {{domxref("Event")}}.</dd> - <dt style="float: left; text-align: right; width: 120px;">Всплывание</dt> - <dd style="margin: 0 0 0 120px;">Нет</dd> - <dt style="float: left; text-align: right; width: 120px;">Отменяемость</dt> - <dd style="margin: 0 0 0 120px;">Нет</dd> - <dt style="float: left; text-align: right; width: 120px;">Цель</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("window")}}, {{domxref("Element")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt> - <dd style="margin: 0 0 0 120px;">Нет</dd> -</dl> - -<h2 id="Свойства">Свойства</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Свойство</th> - <th scope="col">Тип</th> - <th scope="col">Описание</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> - <td>Цель события (самый вышележащий элемент в DOM дереве).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> - <td>Тип события.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> - <td>Поднимается ли событие вверх как принято или нет.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> - <td>Является ли событие отменяемым или нет?</td> - </tr> - <tr> - <td><code>view</code> {{readonlyInline}}</td> - <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> - <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (свойство <code>window</code> объекта document)</td> - </tr> - <tr> - <td><code>detail</code> {{readonlyInline}}</td> - <td><code>long</code> (<code>float</code>)</td> - <td>0.</td> - </tr> - </tbody> -</table> diff --git a/files/ru/web/guide/ajax/с_чего_начать/index.html b/files/ru/web/guide/ajax/getting_started/index.html index e06b408228..e06b408228 100644 --- a/files/ru/web/guide/ajax/с_чего_начать/index.html +++ b/files/ru/web/guide/ajax/getting_started/index.html diff --git a/files/ru/web/guide/ajax/с_чего_начать_question_/index.html b/files/ru/web/guide/ajax/с_чего_начать_question_/index.html deleted file mode 100644 index f66d6b1dbf..0000000000 --- a/files/ru/web/guide/ajax/с_чего_начать_question_/index.html +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: С чего начать? -slug: Web/Guide/AJAX/С_чего_начать? ---- -<p>IKFIA -</p> diff --git a/files/ru/web/guide/api/dom/index.html b/files/ru/web/guide/api/dom/index.html deleted file mode 100644 index 1671813170..0000000000 --- a/files/ru/web/guide/api/dom/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: DOM developer guide -slug: Web/Guide/API/DOM -tags: - - API - - DOM - - Guide - - NeedsContent - - NeedsTranslation - - TopicStub -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/Guide/API/DOM ---- -<p>{{draft}}</p> - -<p>Объектная модель документа - это API для документов HTML и XML. Она обеспечивает структурное представление документа, позволяя разработчику изменять его содержание и визуальное представление. По сути, она соединяет веб-страницы со скриптами или языками программирования.</p> - -<p>Все свойства, методы и события, доступные веб-разработчику для манипулирования и создания веб-страниц, организованы в объекты (например, объект документа, представляющий сам документ, объект таблицы, представляющий элемент таблицы HTML и т. Д.) , Эти объекты доступны через скриптовые языки в самых последних веб-браузерах.</p> - -<p>DOM чаще всего используется в сочетании с JavaScript. Тем не менее, DOM был разработан, чтобы быть независимым от какого-либо конкретного языка программирования, делая структурное представление документа доступным из единого, согласованного API. Хотя мы,на этом сайте, сосредоточены на JavaScript реализации DOM могут быть построены для любого языка.</p> - -<p>Консорциум World Wide Web устанавливает стандарт для DOM, называемый W3C DOM. Теперь, когда наиболее важные браузеры правильно его реализуют, следует включить мощные кросс-браузерные приложения.</p> - -<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">Почему так важен DOM?</h2> - -<p>"Dynamic HTML" (<a href="/en-US/docs/DHTML">DHTML</a>) это термин, используемый некоторыми поставщиками для описания комбинации HTML, таблиц стилей и сценариев, позволяющих анимировать документы. Рабочая группа W3C DOM усердно работает над тем, чтобы согласовать совместимые и не зависящие от языка решения (см. также <a href="http://www.w3.org/DOM/faq.html">W3C FAQ</a>).</p> - -<p>Поскольку Mozilla претендует на звание «Платформа веб-приложений», поддержка DOM является одной из наиболее востребованных функций и необходимой, если Mozilla хочет стать жизнеспособной альтернативой другим браузерам. Пользовательский интерфейс Mozilla (также Firefox и Thunderbird) построен с использованием <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>, используя DOM для <a href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface">управления собственным пользовательским интерфейсом UI</a>.</p> - -<h2 id="More_about_the_DOM">More about the DOM</h2> - -<p>{{LandingPageListSubpages}}</p> - - - -<p>«Динамический HTML» (DHTML) - это термин, используемый некоторыми поставщиками для описания комбинации HTML, таблиц стилей и сценариев, позволяющих анимировать документы. Рабочая группа W3C DOM усердно работает над тем, чтобы согласовать совместимые и не зависящие от языка решения (см. Также FAQ по W3C).</p> - -<p>Поскольку Mozilla претендует на звание «Платформа веб-приложений», поддержка DOM является одной из наиболее востребованных функций и необходимой, если Mozilla хочет стать жизнеспособной альтернативой другим браузерам. Пользовательский интерфейс Mozilla (также Firefox и Thunderbird) построен с использованием XUL, используя DOM для управления собственным пользовательским интерфейсом.</p> diff --git a/files/ru/web/guide/api/dom/storage/index.html b/files/ru/web/guide/api/dom/storage/index.html deleted file mode 100644 index b63a374c8c..0000000000 --- a/files/ru/web/guide/api/dom/storage/index.html +++ /dev/null @@ -1,368 +0,0 @@ ---- -title: DOM Storage guide -slug: Web/Guide/API/DOM/Storage -translation_of: Web/API/Web_Storage_API -translation_of_original: Web/Guide/API/DOM/Storage ---- -<h2 id="sect1"> </h2> - -<p>DOM хранилище (DOM Storage) - это название для набора инструментов, <a href="http://www.whatwg.org/specs/web-apps/current-work/#storage">относящихся к хранилищам</a>, впервые представленных в спецификации <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0</a>, и выделенных теперь в отдельную специкацию <a class="external" href="http://dev.w3.org/html5/webstorage/" title="http://dev.w3.org/html5/webstorage/">W3C Web Storage</a>. DOM хранилище было разработано с целью предоставления альтернативы хранению информации в кукисах. Предполагается, что DOM хранилище предоставляет больше объема, оно более защищено и легче в использовании. Впервые оно было представлено в браузерах <a href="/en-US/docs/Firefox_2_for_developers" title="Firefox_2_for_developers">Firefox 2</a> и <a class="external" href="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html" title="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html">Safari 4</a>.</p> - -<div class="note"><strong>Заметка:</strong> DOM хранилище - это не то же самое, что <a href="/en-US/docs/Storage" title="Storage">mozStorage</a> (Mozilla's XPCOM interfaces to SQLite) или <a href="/en-US/docs/Session_store_API" title="Session_store_API">Session store API</a> (утилита <a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> - хранилище для использования в расширениях).</div> - -<div class="note"> -<p><strong>Заметка:</strong> Эта статья скоро будет сильно переработана. В<span style="line-height: 1.5;">место того, чтобы хранить всю информацию на одной странице, она будет</span><span style="line-height: 1.5;"> разбита на несколько статей, каждая из которых будет описывать разные </span><span style="line-height: 1.5;">API хранилища. Отдельная статья, помогающая разобраться в разных API, будет также добавлена.</span></p> -</div> - -<h2 id="Описание">Описание</h2> - -<p>Механизм DOM хранилища - средство, благодаря которому можно безопасно хранить и позже извлекать пары "ключ / значение". Целью этого является обеспечение комплексного средства, с помощью которого можно разрабатывать интерактивные приложения(включая приложения с продвинутыми возможностями, такими как возможность работать "автономно"("offline") в течение длительных периодов времени).</p> - -<p>Браузеры на основе Mozilla, Internet Explorer 8 +, Safari 4 + и Chrome обеспечивают рабочую реализацию спецификации DOM хранилища. (В случае, если нужна кросс-браузерная поддержка функциональности, включая более старые версии IE, будет полезно отметить, что IE также имеет подобную легаси функциональность под названием "<a href="http://msdn.microsoft.com/en-us/library/ms531424(VS.85).aspx">USERDATA поведение</a>", которая дополненяет DOM хранилище IE в IE8.)</p> - -<p>DOM хранилище удобно, потому что нет других хороших способов хранения разумных объемов данных за любой период времени, встроенных в браузер. <a href="http://en.wikipedia.org/wiki/HTTP_cookie">Кукисы </a>ограничены в количестве хранимой информации и не обеспечивают поддержку для организации постоянных данных, а другие методы (например, <a href="http://www.macromedia.com/support/documentation/en-US/docs/flashplayer/help/help02.html">флэш-локальное хранилище</a>) требуют плагина.</p> - -<p>Одним из первых известных приложений, использующих новые функциональные возможности DOM хранилища(в дополнение к USERDATA поведения в Internet Explorer) было <a href="http://aaronboodman.com/halfnote/">halfnote </a>(приложение для заметок), написанное <a href="http://aaronboodman.com/">Аароном Будменом</a>. В своем приложении, Аарон одновременно сохранял заметки на сервере (когда/если Интернет-подключение был доступно) и локального хранилища данных(в обратном случае). Это дало возможность пользователю смело писать резервные копии заметок даже при нерегулярном подключении к Интернету.</p> - -<p>Хотя идея и реализация halfnote были сравнительно простыми, создание halfnote показывает возможность для нового поколения веб-приложений, которые можно использовать как в онлайн-, так и оффлайн- режиме.</p> - -<h2 id="Связь">Связь</h2> - -<p>Ниже приведены глобальные объекты, которые существуют как свойства каждого объекта <span style="line-height: 1.5;"> </span><code style="line-height: 1.5;"><a href="/en-US/docs/DOM/window" style="line-height: 1.5;" title="DOM/window">window</a></code><span style="line-height: 1.5;">. Это означает, что они могут быть доступны как </span><code style="font-style: normal;">sessionStorage</code> <span style="line-height: 1.5;">или </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: 1.5;">window.sessionStorage</span><span style="line-height: 1.5;">. (Это важно, потому что вы можете использовать фреймы(IFrames) для хранения или доступа, дополнительные данные кроме того, что сразу же включено на странице.)</span></p> - -<h3 id="Storage"><code>Storage</code></h3> - -<p>Это конструктор<span style="line-height: 1.5;">(</span><code style="font-style: normal; line-height: 1.5;">Storage</code><span style="line-height: 1.5;">) </span><span style="line-height: 1.5;">для всех экземпляров </span><span style="line-height: 1.5;">Storage </span><span style="line-height: 1.5;">(</span><code style="font-style: normal; line-height: 1.5;">sessionStorage</code><span style="line-height: 1.5;"> и </span><code style="font-style: normal; line-height: 1.5;">globalStorage[location.hostname]</code>).</p> - -<p><span style="line-height: 1.5;">С</span><span style="line-height: 1.5;">охранение </span><code style="font-style: normal; line-height: 1.5;">Storage.prototype.removeKey = function(key){ this.removeItem(this.key(key)) }</code><span style="line-height: 1.5;"> будет доступно через </span><code style="font-style: normal; line-height: 1.5;">localStorage.removeKey</code><span style="line-height: 1.5;"> и </span><code style="font-style: normal; line-height: 1.5;">sessionStorage.removeKey</code><span style="line-height: 1.5;">.</span></p> - -<p>Единицы <code>globalStorage</code> являются экземплярами <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: 1.5;">StorageObsolete,</span> а <span style="line-height: 1.5;">не </span><code style="font-style: normal; line-height: 1.5;">Storage</code><span style="line-height: 1.5;">.</span></p> - -<p><code>Storage</code> определен в WhatWG <a class="external" href="http://dev.w3.org/html5/webstorage/#storage-0" title="http://dev.w3.org/html5/webstorage/#storage-0">Storage Interface</a> следующим образом:</p> - -<pre class="eval">interface <dfn>Storage</dfn> { - readonly attribute unsigned long <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-length" title="dom-Storage-length">length</a>; - [IndexGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-key" title="dom-Storage-key">key</a>(in unsigned long index); - [NameGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-getitem" title="dom-Storage-getItem">getItem</a>(in DOMString key); - [NameSetter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-setitem" title="dom-Storage-setItem">setItem</a>(in DOMString key, in DOMString data); - [NameDeleter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-removeitem" title="dom-Storage-removeItem">removeItem</a>(in DOMString key); - void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-clear" title="dom-Storage-clear">clear</a>(); -}; -</pre> - -<div class="note"><strong>Заметка: </strong>Несмотря на то, что значения доступны для чтения и записи через стандартные способы Javascript, рекомендуется использование <span style="line-height: 1.5;">getItem и setItem.</span></div> - -<div class="note"><strong>Заметка:</strong> Обратите внимание, что любые данные, которые хранятся в любом из хранилищ, описанных на этой странице, преобразуются в строку, используя метод<span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: 1.5;">.toString</span><span style="line-height: 1.5;">. перед тем, как сохранить значение. Попытка сохранить объект приведет к сохранению строки </span><code style="font-style: italic;">"[object Object]"</code> <span style="line-height: 1.5;">вместо объекта или его JSON </span><span style="line-height: 1.5;">представления</span><span style="line-height: 1.5;">. Самым лучшим и распространенным способом сохранения объектов в формате строки является использование п</span><span style="line-height: 1.5;">редоставляемых браузером </span><span style="line-height: 1.5;">методов JSON для парсинга</span><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">и сериализации объектов.</span></div> - -<h3 id="sessionStorage"><code>sessionStorage</code></h3> - -<p>Это глобальный объект <span style="line-height: 1.5;">(</span><code style="font-style: normal; line-height: 1.5;">sessionStorage</code><span style="line-height: 1.5;">), который сохраняет значения, которые доступны в течение периода текущей сессии. Сессия страницы длится, пока браузер открыт, и восстанавливает свои значения после перегрузки страницы. Открытие страницы в новой вкладке или окне приведет к созданию новой сессии для этой страницы.</span></p> - -<pre class="brush:js">// Сохранить данные в текущем хранилизе сессий -sessionStorage.setItem("username", "John"); - -// Получить значения сохраненного значения -alert( "username = " + sessionStorage.getItem("username")); -</pre> - -<p>Объект <code>sessionStorage</code> наиболее полезен для хранения временных данных, которые должны быть восстановлены, если страница браузер была случайно перегружена.</p> - -<p><strong>Примеры:</strong></p> - -<p>Автоматическое сохранение содержимого тестового поля, и если страница была случайно перегружена, то данные не будут потеряны.</p> - -<pre class="brush:js"> // Получить значение текстового поля, которое мы собираемся отслеживать - var field = document.getElementById("field"); - - // Проверяем, что значение поля autosave существует - // (это будет происходить при случайной перезагрузке страницы) - if (sessionStorage.getItem("autosave")) { - // Восстановить значение тестового поля - field.value = sessionStorage.getItem("autosave"); - } - - // Прослушивать изменения значения текстового поля - field.addEventListener("change", function() { - // И сохранить результаты в объект хранилища сессий - sessionStorage.setItem("autosave", field.value); - }); -</pre> - -<p><strong>Больше информации:</strong></p> - -<ul> - <li><a class="external" href="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute" title="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute">sessionStorage specification</a></li> -</ul> - -<h3 id="localStorage" name="localStorage"><code>localStorage</code></h3> - -<p><code>localStorage</code> - это то же самое, что и<code> {{ Anch("sessionStorage") }},</code> поддерживает правила единого происхождения(same-origin rules), но хранение данных постоянно. <code>localStorage</code> был представлен в Firefox 3.5.</p> - -<div class="note"><strong>Заметка:</strong> Когда браузер переходит в частный режим браузера(<span style="line-height: 1.5;">private browsing mode), то новая, временная база данных создается для хранения данных локального хранилища; эта база данных очищается и удаляется, как только частный режим браузера выключается.</span></div> - -<h4 id="Совместимость">Совместимость</h4> - -<p>Объекты <code>Storage -</code> относительно недавнее дополнение стандарта. Это означает, что они не обязательно должны быть реализованы во всех браузерах. Проблему можно решить с помощью включения следующего куска кода в начале вашего скрипта, позволяя использовать объект <code>localStorage</code> в реализациях, которые нативно не поддерживают его.</p> - -<p>Следующий алгоритм - это точная имитация объекта <code style="font-style: normal; line-height: 1.5;">localStorage,</code> но использует куки.</p> - -<pre class="brush:js">if (!window.localStorage) { - Object.defineProperty(window, "localStorage", new (function () { - var aKeys = [], oStorage = {}; - Object.defineProperty(oStorage, "getItem", { - value: function (sKey) { return sKey ? this[sKey] : null; }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "key", { - value: function (nKeyId) { return aKeys[nKeyId]; }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "setItem", { - value: function (sKey, sValue) { - if(!sKey) { return; } - document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; - }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "length", { - get: function () { return aKeys.length; }, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "removeItem", { - value: function (sKey) { - if(!sKey) { return; } - document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; - }, - writable: false, - configurable: false, - enumerable: false - }); - this.get = function () { - var iThisIndx; - for (var sKey in oStorage) { - iThisIndx = aKeys.indexOf(sKey); - if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); } - else { aKeys.splice(iThisIndx, 1); } - delete oStorage[sKey]; - } - for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); } - for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) { - aCouple = aCouples[nIdx].split(/\s*=\s*/); - if (aCouple.length > 1) { - oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]); - aKeys.push(iKey); - } - } - return oStorage; - }; - this.configurable = false; - this.enumerable = true; - })()); -} -</pre> - -<div class="note"><strong>Note:</strong> The maximum size of data that can be saved is severely restricted by the use of cookies. With this algorithm, use the functions <code>localStorage.setItem()</code> and <code>localStorage.removeItem()</code> to add, change, or remove a key. The use of methods <code>localStorage.yourKey = yourValue;</code> and <code>delete localStorage.yourKey;</code> to set or delete a key <strong>is not a secure way with this code</strong>. You can also change its name and use it only to manage a document's cookies regardless of the localStorage object.</div> - -<div class="note"><strong>Note:</strong> By changing the string <code style="background: #ccc;">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> to: <code style="background: #ccc;">"; path=/"</code> (and changing the object's name), this will become a <code>sessionStorage</code> polyfill rather than a <code>localStorage</code> polyfill. However, this implementation will share stored values across browser tabs and windows (and will only be cleared when all browser windows have been closed), while a fully-compliant <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">sessionStorage</span><span style="line-height: 1.5em;"> implementation restricts stored values to the current browsing context only.</span></div> - -<p>Here is another, less exact, imitation of the <code>localStorage</code> object. It is simpler than the previous one, but it is compatible with old browsers, like Internet Explorer < 8 (<strong>tested and working even in Internet Explorer 6</strong>). It also makes use of cookies.</p> - -<pre class="brush:js">if (!window.localStorage) { - window.localStorage = { - getItem: function (sKey) { - if (!sKey || !this.hasOwnProperty(sKey)) { return null; } - return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1")); - }, - key: function (nKeyId) { - return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); - }, - setItem: function (sKey, sValue) { - if(!sKey) { return; } - document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; - this.length = document.cookie.match(/\=/g).length; - }, - length: 0, - removeItem: function (sKey) { - if (!sKey || !this.hasOwnProperty(sKey)) { return; } - document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; - this.length--; - }, - hasOwnProperty: function (sKey) { - return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); - } - }; - window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length; -} -</pre> - -<div class="note"><strong>Note:</strong> The maximum size of data that can be saved is severely restricted by the use of cookies. With this algorithm, use the functions <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code>, and <code>localStorage.removeItem()</code> to get, add, change, or remove a key. The use of method <code>localStorage.yourKey</code> in order to get, set, or delete a key <strong>is not permitted with this code</strong>. You can also change its name and use it only to manage a document's cookies regardless of the localStorage object.</div> - -<div class="note"><strong>Note:</strong> By changing the string <code style="background: #ccc;">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> to: <code style="background: #ccc;">"; path=/"</code> (and changing the object's name), this will become a <code>sessionStorage</code> polyfill rather than a <code>localStorage</code> polyfill. However, this implementation will share stored values across browser tabs and windows (and will only be cleared when all browser windows have been closed), while a fully-compliant <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">sessionStorage</span><span style="line-height: 1.5em;"> implementation restricts stored values to the current browsing context only.</span></div> - -<h4 id="Compatibility_and_relation_with_globalStorage">Compatibility and relation with globalStorage</h4> - -<p class="note"><code>localStorage</code> is also the same as <code>globalStorage[location.hostname]</code>, with the exception of being scoped to an HTML5 origin (scheme + hostname + non-standard port) and <code>localStorage</code> being an instance of <code>Storage</code> as opposed to <code>globalStorage[location.hostname]</code> being an instance of <code>StorageObsolete</code> which is covered below. For example, <a class="external" href="http://example.com" rel="freelink">http://example.com</a> is not able to access the same <code>localStorage</code> object as <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> but they can access the same <code>globalStorage</code> item. <code>localStorage</code> is a standard interface while <code>globalStorage</code> is non-standard so you shouldn't rely on these.</p> - -<p>Please note that setting a property on <code>globalStorage[location.hostname]</code> does <strong>not</strong> set it on <code>localStorage</code> and extending <code>Storage.prototype</code> does not affect <code>globalStorage</code> items; only extending <code>StorageObsolete.prototype</code> does.</p> - -<h3 id="globalStorage"><code>globalStorage</code></h3> - -<div>{{ Non-standard_header }}{{ obsolete_header("13.0") }}</div> - -<p><code>globalStorage </code>is obsolete since Gecko 1.9.1 (Firefox 3.5) and unsupported since Gecko 13 (Firefox 13). Just use<code> {{ Anch("localStorage") }} </code>instead. This proposed addition to HTML5 has been removed from the HTML5 specification in favor of<code> {{ Anch("localStorage") }}</code>, which is implemented in Firefox 3.5. This is a global object (<code>globalStorage</code>) that maintains multiple private storage areas that can be used to hold data over a long period of time (e.g., over multiple pages and browser sessions).</p> - -<div class="warning">Note: <code>globalStorage</code> is not a <code>Storage</code> instance, but a <code>StorageList</code> instance containing <code>StorageObsolete</code> instances.</div> - -<pre class="eval deki-transform">// Save data that only scripts on the mozilla.org domain can access -globalStorage['mozilla.org'].setItem("snippet", "<b>Hello</b>, how are you?"); -</pre> - -<p>Specifically, the <code>globalStorage</code> object provides access to a number of different storage objects into which data can be stored. For example, if we were to build a web page that used <code>globalStorage</code> on this domain (developer.mozilla.org) we'd have the following storage object available to us:</p> - -<ul> - <li><code>globalStorage{{ mediawiki.external('\'developer.mozilla.org\'') }}</code> - All web pages within the developer.mozilla.org sub-domain can both read and write data to this storage object.</li> -</ul> - -<p><strong>Examples:</strong></p> - -<p>All of these examples require that you have a script inserted (with each of the following code) in every page that you want to see the result on.</p> - -<p>Remember a user's username for the particular sub-domain that is being visited:</p> - -<pre class="eval deki-transform"> globalStorage['developer.mozilla.org'].setItem("username", "John"); -</pre> - -<p>Keep track of the number of times that a user visits all pages of your domain:</p> - -<pre class="eval deki-transform"> // parseInt must be used since all data is stored as a string - globalStorage['mozilla.org'].setItem("visits", parseInt(globalStorage['mozilla.org'].getItem("visits") || 0 ) + 1); -</pre> - -<h2 id="Расположение_хранилища_и_очищение_данных">Расположение хранилища и очищение данных</h2> - -<p>In Firefox the DOM storage data is stored in the <a class="external" href="http://kb.mozillazine.org/Webappsstore.sqlite" title="http://kb.mozillazine.org/Webappsstore.sqlite">webappsstore.sqlite file</a> in the profile folder (there's also chromeappsstore.sqlite file used to store browser's own data, <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=592990" title="https://bugzilla.mozilla.org/show_bug.cgi?id=592990">notably for the start page - about:home</a>, but potentially for other internal pages with "about:" URLs).</p> - -<ul> - <li>DOM Storage can be cleared via "Tools -> Clear Recent History -> Cookies" when Time range is "Everything" (via nsICookieManager::removeAll) - <ul> - <li>But not when another time range is specified: (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=527667" title="https://bugzilla.mozilla.org/show_bug.cgi?id=527667">bug 527667</a>)</li> - <li>Does not show up in Tools -> Options -> Privacy -> Remove individual cookies (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=506692" title="https://bugzilla.mozilla.org/show_bug.cgi?id=506692">bug 506692</a>)</li> - </ul> - </li> - <li>DOM Storage is <strong>not</strong> cleared via Tools -> Options -> Advanced -> Network -> Offline data -> Clear Now.</li> - <li>Doesn't show up in the "Tools -> Options -> Advanced -> Network -> Offline data" list, unless the site also uses the offline cache. If the site does appear in that list, its DOM storage data is removed along with the <a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline resources in Firefox">offline cache</a> when clicking the Remove button.</li> -</ul> - -<p>See also <a href="/en-US/docs/HTML/Using_the_application_cache#Storage_location_and_clearing_the_offline_cache" title="Offline resources in Firefox#Storage location and clearing the offline cache">clearing offline resources cache</a>.</p> - -<h2 id="Больше_информации">Больше информации</h2> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/webstorage/" title="http://www.w3.org/TR/webstorage/">Web Storage</a> (W3C Web Apps Working Group)</li> - <li><a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled">Enable/Disable DOM Storage in Firefox or SeaMonkey</a></li> -</ul> - -<h2 id="Примеры">Примеры</h2> - -<ul> - <li><a class="external" href="http://www.diveintojavascript.com/tutorials/web-storage-tutorial-creating-an-address-book-application" title="JavaScript Web Storage Tutorial: Creating an Address Book Application">JavaScript Web Storage Tutorial: Creating an Address Book Application</a> - Hands-on tutorial describing how to use the Web Storage API by creating a simple address book application.</li> - <li><a class="external" href="http://hacks.mozilla.org/2010/01/offline-web-applications/" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - Showcases an offline app demo and explains how it works.</li> - <li><a class="external" href="http://noteboard.eligrey.com/" title="http://noteboard.eligrey.com/">Noteboard</a> - Note writing application that stores all data locally.</li> - <li><a class="external" href="http://github.com/eligrey/jData-host" title="http://github.com/eligrey/jData-host">jData</a> - A shared localStorage object interface that can be accessed by any website on the internet and works on Firefox 3+, Webkit 3.1.2+ nightlies, and IE8. Think of it as pseudo-globalStorage[""] but write access needs user confirmation.</li> - <li><a class="external" href="http://codebase.es/test/webstorage.html" title="http://codebase.es/test/webstorage.html">HTML5 localStorage example</a> - Very simple and easy to understand example of localStorage. Saves and retrieves texts and shows a list of saved items. Tested in Firefox 3 or higher.</li> - <li><a class="external" href="http://upload.jonathanwilsson.com/html5/sessionstorage.php" title="http://upload.jonathanwilsson.com/html5/sessionstorage.php">HTML5 Session Storage</a> - A very simple example of session storage. Also includes a example on local storage. Tested in Firefox 3.6 or higher.</li> - <li><a class="external" href="http://channy.creation.net/work/firefox/domstorage/"><strike>Basic DOMStorage Examples</strike></a><strike> - Broken in Firefox 3 and up due to use of globalStorage on one domain level up from the current domain which is not allowed in Firefox 3.</strike></li> - <li><a class="external" href="http://aaronboodman.com/halfnote/"><strike>halfnote</strike></a><strike> - (displaying broken in Firefox 3) Note writing application that uses DOM Storage.</strike></li> -</ul> - -<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>localStorage</td> - <td>4</td> - <td>3.5</td> - <td>8</td> - <td>10.50</td> - <td>4</td> - </tr> - <tr> - <td>sessionStorage</td> - <td>5</td> - <td>2</td> - <td>8</td> - <td>10.50</td> - <td>4</td> - </tr> - <tr> - <td>globalStorage</td> - <td>{{ CompatNo }}</td> - <td>2-13</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>2.1</td> - <td>{{ CompatUnknown }}</td> - <td>8</td> - <td>11</td> - <td>iOS 3.2</td> - </tr> - </tbody> -</table> -</div> - -<p>All browsers have varying capacity levels for both localStorage and sessionStorage. Here is a <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailed rundown of all the storage capacities for various browsers</a>.</p> - -<div class="note"> -<p><strong>Note: </strong>since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional clean up, at the behest of the OS, typically if space is short.</p> -</div> - -<h2 id="Полезные_ссылки">Полезные ссылки</h2> - -<ul> - <li><a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">HTTP cookies</a> (<code><a href="/en-US/docs/DOM/document.cookie" title="DOM/document.cookie">document.cookie</a></code>)</li> - <li><a class="external" href="http://www.macromedia.com/support/documentation/en-US/docs/flashplayer/help/help02.html">Flash Local Storage</a></li> - <li><a class="external" href="http://msdn2.microsoft.com/en-us/library/ms531424.aspx">Internet Explorer userData behavior</a></li> - <li><a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMStorageEventObsolete" title="XPCOM Interface Reference/nsIDOMStorageEventObsolete">nsIDOMStorageEventObsolete</a></li> - <li><a href="/en-US/docs/DOM/event/StorageEvent" title="DOM/Event/StorageEvent">StorageEvent</a></li> - <li><a href="/en-US/docs/DOM/Storage/Implementation" title="/en-US/docs/DOM/Storage/Implementation">Implementation Details</a></li> -</ul> - -<div>{{ HTML5ArticleTOC }}</div> diff --git a/files/ru/web/guide/api/webrtc/index.html b/files/ru/web/guide/api/webrtc/index.html deleted file mode 100644 index d8fbf01983..0000000000 --- a/files/ru/web/guide/api/webrtc/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: WebRTC -slug: Web/Guide/API/WebRTC -translation_of: Web/API/WebRTC_API -translation_of_original: Web/Guide/API/WebRTC ---- -<p><strong>WebRTC</strong> (где RTC расшифровывается как Real-Time Communications) - это технология, которая позволяет передавать данные и потоковое аудио/видео между браузерами. Как набор стандартов в целом, WebRTC предоставляет любым поддерживающим этот стандарт, браузерам обмениваться данными и устраивать сеансы телеконференций в режиме точка-точка, без необходимости устанавливать какие-либо плагины и стороннее програмное обеспечение.</p> - -<p>Компоненты WebRTC доступны через API JavaScript: Network Stream API, который представляет собой поток аудио и видео данных, PeerConnection API, который позволяет двум и более пользователям общаться браузер-браузер напрямую, DataChannel API, который позволяет обмениваться данными других типов, например в играх в режиме реального времени, текстовые чаты, обмен файлами и так далее.</p> - -<div class="note"> -<p><span style="color: #000000;"><strong>На заметку:</strong> Эта документация находится в процессе переезда <a href="/ru/docs/Web/API/WebRTC_API">в свой новый дом</a>.</span></p> -</div> - -<h2 id="Руководства">Руководства</h2> - -<dl> - <dt><a href="/en-US/docs/WebRTC/Peer-to-peer_communications_with_WebRTC" title="/en-US/docs/WebRTC/Peer-to-peer_communications_with_WebRTC">Обмен данными в режиме точка-точка с WebRTC</a></dt> - <dd>О том, как наладить обмен данными в режиме точка-точка используя API WebRTC.</dd> - <dt><a href="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture">Введение в архитектуру WebRTC</a></dt> - <dd><strong>(AKA "WebRTC and the Ocean of Acronyms")</strong> WebRTC состоит из множества частей и это может быть причиной сложностей для новичков. Эта статья рассказывает обо всех частях и объясняет то как они между собой связаны.</dd> - <dt><a href="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_basics">Основы WebRTC </a></dt> - <dd>Теперь, когда вы уже знаете архитектуру WebRTC, вы можете перейти к этой статье, которая проведет вас через путь создания кросс-браузерного RTC-приложения</dd> -</dl> - -<h2 id="Ссылки">Ссылки</h2> - -<dl> - <dt><a href="/en-US/docs/Web/API/MediaDevices/getUserMedia">MediaDevices.getUserMedia</a></dt> - <dd>API захвата медиа (видео/аудио)</dd> - <dt><a href="/en-US/docs/Web/API/RTCPeerConnection"><span style="color: #0095dd;">RTCPeerConnection</span></a></dt> - <dd>Интерфейс обработки потоковых данных между двуми пирами.</dd> - <dt><a href="/en-US/docs/Web/API/RTCDataChannel">RTCDataChannel</a></dt> - <dd>Интерфейс передачи произвольных данных через соединение точка-точка.</dd> -</dl> diff --git a/files/ru/web/guide/css/getting_started/cascading_and_inheritance/index.html b/files/ru/web/guide/css/getting_started/cascading_and_inheritance/index.html deleted file mode 100644 index a192eb1d28..0000000000 --- a/files/ru/web/guide/css/getting_started/cascading_and_inheritance/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: Каскадность и наследование -slug: Web/Guide/CSS/Getting_started/Cascading_and_inheritance -tags: - - Beginner - - CSS - - 'CSS:Getting_Started' - - Guide - - Web - - Веб - - Новичку -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/ru/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "Как работает CSS")}} Это четвертый раздел руководства <a href="/ru/docs/Web/Guide/CSS/Getting_Started" title="ru/CSS/Getting Started">CSS для начинающих</a>. Он описывает, как таблицы стилей взаимодействуют в каскаде, и как дочерние элементы наследуют стиль от родительских. Используя наследование, в приведённой ниже задаче вы измените стиль некоторых элементов за один шаг.</p> - -<h2 id="Информация_Каскадность_и_наследование">Информация: Каскадность и наследование</h2> - -<p>Окончательный стиль элемента можно указать во многих местах, которые комплексно взаимодействуют между собой. Эти комплексные взаимодействия делают CSS мощным, но в то же время, иногда сбивают с толку и порождают сложности при отладке. </p> - -<p>Три основных источника информации о стилях образовывают <em>каскад</em>. К ним относятся следующие:</p> - -<ul> - <li>Стили разметки браузера по умолчанию.</li> - <li>Стили, указанные пользователем при чтении документа.</li> - <li>Стили, связанные с документом их автором. Их можно указывать в трех местах:</li> -</ul> - -<ol> - <li>Во внешнем файле: в этом учебном руководстве обсуждается преимущественно этот метод указания стилей.</li> - <li>В начале документа (раздел заголовок документа): используйте этот метод только для стилей в пределах этой страницы.</li> - <li>Для конкретного элемента в теле документа: это наименее поддерживаемый метод, но может быть использован для тестирования.</li> -</ol> - -<p>Стиль пользователя модифицирует стиль браузера по умолчанию. Стиль документа, указанный его автором, изменяет стиль ещё в некоторой мере. В этом обучающем руководстве, вы являетесь автором шаблонного документа, и только вы работаете с авторскими таблицами стилей.</p> - -<div class="tuto_example"> -<div class="tuto_type">Пример</div> - -<p>Когда вы читаете этот документ в браузере, часть стилей происходит от стилей для HTML по умолчанию вашего браузера.</p> - -<p>Часть стиля может происходить от измененных настроек браузера или измененного файла определения стиля. В Firefox настройки можно изменить в диалоге Предпочтения или же указать стили в файле <code>userContent.css</code> в профиле браузера.</p> - -<p>Часть стиля приходит из таблиц стилей, связываемых с документом вики-сервером.</p> -</div> - -<p>Когда вы открываете шаблон документа в браузере, элементы {{ HTMLElement("strong") }} имеют более жирный шрифт по сравнению с остальным текстом. Это следует из настроек HTML стилей браузера по умолчанию.</p> - -<p>Элемент {{ HTMLElement("strong") }} красного цвета. Это следует из настроек вашего шаблона таблиц стилей.</p> - -<p>Элементы {{ HTMLElement("strong") }} также наследуют большую часть стилей элемента {{ HTMLElement("p") }} поскольку они являются дочерними. Таким же образом элемент {{ HTMLElement("p") }} наследует большую часть стиля элемента {{ HTMLElement("body") }}.</p> - -<p>Для стилей в каскаде, авторские таблицы стилей имеют приоритет перед стилями для режимов чтения браузера. Последние, в свою очередь, имеют приоритет перед настройками браузера по умолчанию.</p> - -<p>Для наследуемых стилей, собственный стиль дочернего узла имеет приоритет над стилем, унаследованным от родительского узла.</p> - -<p>These are not the only priorities that apply. A later page in this tutorial will explain more.</p> - -<div class="tuto_details"> -<div class="tuto_type">Подробнее</div> - -<p>CSS также предоставляет способ переопределения стиля в авторском документе для читателя с помощью ключевого слова <code>!important</code>.</p> - -<p>Это означает, что как автор документа, вы не всегда можете точно предсказать, что ваши читатели будут видеть в своём браузере.</p> - -<p>Если вы хотите знать все детали каскадирования и наследования, ознакомьтесь с документом <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a> в спецификации CSS.</p> -</div> - -<h2 id="К_действию_Использование_наследования">К действию: Использование наследования</h2> - -<ol> - <li>Откройте CSS-файл примера.</li> - <li>Добавьте в файл строку кода, представленную ниже. Не имеет особого значения, в какой части CSS-документа вы расположите эту строку. Тем не менее, добавить его в самом верху будет логично, поскольку в документе элемент {{ HTMLElement("p") }} является родительским по отношению к элементу {{ HTMLElement("strong") }} : - <pre>p {color: blue; text-decoration: underline;} -</pre> - </li> - <li>Теперь сохраните документ и обновите страницу в браузере, чтобы увидеть изменения. Весь текст в абзаце будет подчеркнут, в том числе и начальные буквы. Элемент {{ HTMLElement("strong") }} унаследовал подчеркнутый стиль от родительского элемента {{ HTMLElement("p") }} .<br> - - <p>Обратите внимание, что элементы {{ HTMLElement("strong") }} всё ещё красные. Красный цвет является их собственным стилем, поэтому имеет приоритет перед синим цветом, заданным для родительского элемента {{ HTMLElement("p") }} . </p> - </li> -</ol> - -<h2 id="Before" name="Before">До</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p> -<strong>C</strong>ascading -<strong>S</strong>tyle -<strong>S</strong>heets -</p> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">strong {color:red} -</pre> - -<p>{{ EmbedLiveSample('Before') }}</p> - -<h2 id="After" name="After">После</h2> - -<h3 id="HTML_2">HTML</h3> - -<pre class="brush: html"><p> -<strong>C</strong>ascading -<strong>S</strong>tyle -<strong>S</strong>heets -</p> -</pre> - -<h3 id="CSS_2">CSS</h3> - -<pre class="brush:css" dir="rtl">p {color:blue; text-decoration:underline} -strong {color:red}</pre> - -<p>{{ EmbedLiveSample('After') }}</p> - -<p> </p> - -<div class="tuto_example"> -<div class="tuto_type">Задание</div> -Измените таблицу стилей таким образом, чтобы были подчеркнуты только красные буквы: - -<table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Возможное решение</div> - -<p>Переместите объявление подчеркивания из правила для {{ HTMLElement("p") }} в правило для {{ HTMLElement("strong") }}. В результате файл будет выглядеть следующим образом:</p> - -<pre class="brush: css">p {color: blue; } -strong {color: red; text-decoration: underline;} -</pre> - -<p> </p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">Посмотреть вариант решения.</a></div> - -<p> </p> - -<h2 id="Что_дальше">Что дальше?</h2> - -<p>{{ nextPage("/ru/docs/Web/Guide/CSS/Getting_Started/Selectors", "Селекторы")}}Ваш пример таблицы стилей определяет стили для тегов <p> и <STRONG>, изменяя стиль соответствующих элементов по всему документу. В следующем разделе описывается, как задать стиль более <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors" title="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors">избирательными методами</a>.</p> diff --git a/files/ru/web/guide/css/getting_started/color/index.html b/files/ru/web/guide/css/getting_started/color/index.html deleted file mode 100644 index 911a8010b6..0000000000 --- a/files/ru/web/guide/css/getting_started/color/index.html +++ /dev/null @@ -1,345 +0,0 @@ ---- -title: Color -slug: Web/Guide/CSS/Getting_started/Color -translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors -translation_of_original: Web/Guide/CSS/Getting_started/Color ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles")}}<span class="seoSummary">This is the 8th section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> tutorial; it explains how you can specify color in CSS. In your sample stylesheet, you introduce background colors.</span></p> - -<h2 class="clearLeft" id="Information_Color">Information: Color</h2> - -<p>In this tutorial so far, you have used a limited number of named colors. CSS2 supports 17 named colors in all. Some of the names might not be what you expect:</p> - -<table style="border: 0px; margin-left: 2em; text-align: right;"> - <tbody> - <tr> - <td> </td> - <td>black</td> - <td style="width: 2em; height: 2em; background-color: black;"> </td> - <td>gray</td> - <td style="width: 2em; height: 2em; background-color: gray;"> </td> - <td>silver</td> - <td style="width: 2em; height: 2em; background-color: silver;"> </td> - <td>white</td> - <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td> - </tr> - <tr> - <td>primaries</td> - <td>red</td> - <td style="width: 2em; height: 2em; background-color: red;"> </td> - <td>lime</td> - <td style="width: 2em; height: 2em; background-color: lime;"> </td> - <td>blue</td> - <td style="width: 2em; height: 2em; background-color: blue;"> </td> - </tr> - <tr> - <td>secondaries</td> - <td>yellow</td> - <td style="width: 2em; height: 2em; background-color: yellow;"> </td> - <td>aqua</td> - <td style="width: 2em; height: 2em; background-color: aqua;"> </td> - <td>fuchsia</td> - <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td> - </tr> - <tr> - <td> </td> - <td>maroon</td> - <td style="width: 2em; height: 2em; background-color: maroon;"> </td> - <td>orange</td> - <td style="width: 2em; height: 2em; background-color: orange;"> </td> - <td>olive</td> - <td style="width: 2em; height: 2em; background-color: olive;"> </td> - <td>purple</td> - <td style="width: 2em; height: 2em; background-color: purple;"> </td> - <td>green</td> - <td style="width: 2em; height: 2em; background-color: green;"> </td> - <td>navy</td> - <td style="width: 2em; height: 2em; background-color: navy;"> </td> - <td>teal</td> - <td style="width: 2em; height: 2em; background-color: teal;"> </td> - </tr> - </tbody> -</table> - -<p> </p> - -<div class="tuto_details"> -<div class="tuto_type">Details</div> - -<p>Your browser might support many more named colors, like:</p> - -<table style="background-color: inherit; border: 0px; margin: .5em 0px .5em 2em; text-align: right;"> - <tbody> - <tr> - <td>dodgerblue</td> - <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td> - <td>peachpuff</td> - <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td> - <td>tan</td> - <td style="width: 2em; height: 2em; background-color: tan;"> </td> - <td>firebrick</td> - <td style="width: 2em; height: 2em; background-color: firebrick;"> </td> - <td>aquamarine</td> - <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td> - </tr> - </tbody> -</table> - -<p>For details of this extended list, see: <a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">SVG color keywords</a> in the CSS 3 Color Module. Beware of using color names that your reader's browsers might not support.</p> -</div> - -<p>For a larger palette, specify the red, green and blue components of the color you want by using a number sign (hash) and three <em>hexadecimal</em> digits in the range 0 – 9, a – f. The letters a – f represent the values 10 – 15:</p> - -<table style="border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>black</td> - <td style="width: 2em; height: 2em; background-color: #000;"> </td> - <td><code>#000</code></td> - </tr> - <tr> - <td>pure red</td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#f00</code></td> - </tr> - <tr> - <td>pure green</td> - <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> - <td><code>#0f0</code></td> - </tr> - <tr> - <td>pure blue</td> - <td style="width: 2em; height: 2em; background-color: #00f;"> </td> - <td><code>#00f</code></td> - </tr> - <tr> - <td>white</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#fff</code></td> - </tr> - </tbody> -</table> - -<p><br> - For the full palette, specify two hexadecimal digits for each component:</p> - -<table style="border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>black</td> - <td style="width: 2em; height: 2em; background-color: #000;"> </td> - <td><code>#000000</code></td> - </tr> - <tr> - <td>pure red</td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#ff0000</code></td> - </tr> - <tr> - <td>pure green</td> - <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> - <td><code>#00ff00</code></td> - </tr> - <tr> - <td>pure blue</td> - <td style="width: 2em; height: 2em; background-color: #00f;"> </td> - <td><code>#0000ff</code></td> - </tr> - <tr> - <td>white</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#ffffff</code></td> - </tr> - </tbody> -</table> - -<p>You can usually get these six-digit hexadecimal codes from your graphics program or some other tool.</p> - -<div class="tuto_example"> -<div class="tuto_type">Example</div> - -<p>With a little practice, you can adjust the three-digit colors manually for most purposes:</p> - -<table style="background-color: #fffff4; border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>Start with pure red:</td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#f00</code></td> - </tr> - <tr> - <td>To make it paler, add some green and blue:</td> - <td style="width: 2em; height: 2em; background-color: #f77;"> </td> - <td><code>#f77</code></td> - </tr> - <tr> - <td>To make it more orange, add a little extra green:</td> - <td style="width: 2em; height: 2em; background-color: #fa7;"> </td> - <td><code>#fa7</code></td> - </tr> - <tr> - <td>To darken it, reduce all its components:</td> - <td style="width: 2em; height: 2em; background-color: #c74;"> </td> - <td><code>#c74</code></td> - </tr> - <tr> - <td>To reduce its saturation, make its components more equal:</td> - <td style="width: 2em; height: 2em; background-color: #c98;"> </td> - <td><code>#c98</code></td> - </tr> - <tr> - <td>If you make them exactly equal, you get gray:</td> - <td style="width: 2em; height: 2em; background-color: #ccc;"> </td> - <td><code>#ccc</code></td> - </tr> - </tbody> -</table> - -<p>For a pastel shade like pale blue:</p> - -<table style="background-color: #fffff4; border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>Start with pure white:</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#fff</code></td> - </tr> - <tr> - <td>Reduce the other components a little:</td> - <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td> - <td><code>#eef</code></td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type">More details</div> - -<p>You can also specify a color using decimal RGB values in the range 0 – 255, or percentages.</p> - -<p>For example, this is maroon (dark red):</p> - -<pre class="brush:css">rgb(128, 0, 0) -</pre> - -<p>For full details of how to specify colors, see: <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">Colors</a> in the CSS Specification.</p> - -<p>For information on matching system colors like Menu and ThreeDFace, see: <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS2 System Colors</a> in the CSS Specification.</p> -</div> - -<h3 id="Color_properties">Color properties</h3> - -<p>You have already used the {{ cssxref("color") }} property on text.</p> - -<p>You can also use the {{ cssxref("background-color") }} property to change elements' backgrounds.</p> - -<p>Backgrounds can be set to <code>transparent</code> to explicitly remove any color, revealing the parent element's background.</p> - -<div class="tuto_example"> -<div class="tuto_type">Example</div> - -<p>The <strong>Example</strong> boxes in this tutorial use this pale yellow background:</p> - -<pre class="brush:css">background-color: #fffff4; -</pre> - -<p>The <strong>More details</strong> boxes use this pale gray:</p> - -<pre class="brush:css">background-color: #f4f4f4; -</pre> -</div> - -<p> </p> - -<h2 id="Action_Using_color_codes">Action: Using color codes</h2> - -<h2 id="Color_page" name="Color_page">Color page</h2> - -<ol> - <li>Edit your CSS file.</li> - <li>Make the change shown down here, to give the initial letters a pale blue background. (The layout and comments in your file probably differ from the file shown here. Keep the layout and comments the way you prefer them.)</li> - <li> - <h3 id="HTML_Content">HTML Content</h3> - - <pre class="brush: html"><p id = "first"> <strong>C</strong>ascading <strong class="spinach">S</strong>tyle <strong class="spinach">S</strong>heets</p> -<p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</p> -</pre> - - <h3 id="CSS_Content">CSS Content</h3> - - <pre class="brush: css">/*** CSS Tutorial: Color page ***/ - -/* page font */ -body { - font: 16px "Comic Sans MS", cursive; -} - -/* paragraphs */ -p { - color: blue; -} -#first { - font-style: italic; -} - -/* initial letters */ -strong { - background-color: #ddf; - color: red; - font: 200% serif; -} - -.spinach { - color: green; - background-color: #ddf; -} - -</pre> - </li> - <li>Save the file and refresh your browser to see the result.</li> - <li>The result should be like this:</li> -</ol> - -<p>{{ EmbedLiveSample('Color_page', '', '', '', 'Web/Guide/CSS/Getting_started/Color') }}</p> - -<div class="tuto_example"> -<div class="tuto_type">Challenge</div> - -<p>In your CSS file, change all the color names to 3-digit color codes without affecting the result.</p> - -<p>(This cannot be done exactly, but you can get close. To do it exactly you need 6-digit codes, and you need to look up the CSS Specification or use a graphics tool to match the colors.)</p> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>The following values are reasonable approximations of the named colors:</p> - -<pre class="brush: css">strong { - color: #f00; /* red */ - background-color: #ddf; /* pale blue */ - font: 200% serif; -} - -.carrot { - color: #fa0; /* orange */ -} - -.spinach { - color: #080; /* dark green */ -} - -p { - color: #00f; /* blue */ -} -</pre> - -<p> </p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> - -<h2 id="What_next">What next?</h2> - -<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content")}}Your sample document and your sample stylesheet strictly separate content from style. The <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Content">next section</a> explains how you can make exceptions to this strict separation.</p> diff --git a/files/ru/web/guide/css/getting_started/how_css_works/index.html b/files/ru/web/guide/css/getting_started/how_css_works/index.html deleted file mode 100644 index 9edeb9fe1f..0000000000 --- a/files/ru/web/guide/css/getting_started/how_css_works/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: Как работает CSS -slug: Web/Guide/CSS/Getting_started/How_CSS_works -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/ru/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Зачем нужен CSS?") }} Это третья статья руководства по <span class="seoSummary"><a href="/ru/docs/Web/Guide/CSS/Getting_started" title="ru/docs/Web/Guide/CSS/Getting_started">CSS для начинающих</a>, объясняет, как работает CSS в вашем браузере, а также назначение Объектной Модели Документа (</span>Document Object Model или DOM). Вы также узнаете, как сделать анализ документа.</p> - -<h2 class="clearLeft" id="Информация_Как_работает_CSS">Информация: Как работает CSS</h2> - -<p>Когда браузер отображает документ, он должен совместить содержимое документа с информацией о стилях для него. Браузер обрабатывает документ в два этапа:</p> - -<ol> - <li>Браузер преобразует язык разметки и CSS в DOM (Document Object Model). DOM представляет собой документ в памяти компьютера. Он сочетает в себе содержание документа с его стилем.</li> - <li>Браузер отображает содержимое DOM.</li> -</ol> - -<p>Язык разметки использует <em>элементы</em> для определения структуры документа. Элемент обозначается с использованием тегов, которые представляют собой строки, начинающиеся с символа '<' и заканчивающиеся '>'. Большинство элементов имеет парные теги: открывающий тег и закрывающий тег. Для открывающего тега, поместите имя элемента между '<' и '>'. Для закрывающего тега, поместите '<code>/</code>' между '<code><</code>', и именем элемента.</p> - -<p>В зависимости от языка разметки, некоторые элементы имеют только начальный тег, или тег, где '/' располагается после имени элемента. Элемент так же может быть контейнером, включающим в себя другие элементы. В этом случае они располагаются между открывающим и закрывающим тегами. Не забывайте всегда закрывать теги внутри контейнера.</p> - -<p>DOM имеет древовидную структуру. Каждый элемент, атрибут и запуск текста на языке разметки становится <em>узлом</em> в древовидной структуре. Узлы определяются их взаимодействием с другими узлами DOM. Некоторые элементы становятся родительскими по отношению к другим, дочерним узлам (или узлам-потомкам). В свою очередь, дочерние узлы имеют "братьев" (siblings).</p> - -<p>Понимание DOM поможет вам при разработке, отладке и поддержке CSS, поскольку DOM это место, где встречаются CSS и содержимое документа.</p> - -<div class="tuto_example"> -<div class="tuto_type">Пример</div> - -<div class="tuto_type"> </div> -В данном примере, тег <code><p></code> и его закрывающий тег <code></p></code> создают контейнер: - -<pre class="brush:html"><p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets -</p> -</pre> - -<p><strong>Живой пример</strong></p> - -<p>{{ EmbedLiveSample('Информация_Как_работает_CSS', '', '', '', 'Web/Guide/CSS/Getting_started/How_CSS_works') }}</p> - -<p>В DOM соответствующий узел P является родительским. Его дочерние узлы - это теги <small>STRONG</small> и узлы текста. Теги <small>STRONG, </small> в свою очередь, являются родительскими по отношению к текстовым узлам, которые являются их дочерними узлами:</p> - -<pre><span style="color: black;">P</span> -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">C</span>" -├─"<span style="color: black;">ascading</span>" -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">S</span>" -├─"<span style="color: black;">tyle</span>" -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">S</span>" -└─"<span style="color: black;">heets</span>"</pre> -</div> - -<h2 id="К_действию_Анализ_DOM">К действию: Анализ DOM</h2> - -<h3 id="Использование_DOM_Inspector">Использование DOM Inspector</h3> - -<p>Для анализа DOM, вам потребуется специальная программа. Вы можете использовать расширение <a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> (DOMi) от Mozilla для анализа DOM. Вам просто нужно установить это расширение в браузере (подробнее см. ниже).</p> - -<ol> - <li>Используйте браузер Mozilla, чтобы открыть свой HTML-документ.</li> - <li>Из строки меню браузера выберите <strong>Инструменты > DOM инспектор</strong>, или <strong>Инструменты > Веб-разработка > Инспектор</strong>. - <div class="tuto_details"> - <div class="tuto_type">Подробнее</div> - - <p>Если в вашем браузере Mozilla не установлен DOMi, вы можете <a class="link-https" href="https://addons.mozilla.org/ru/firefox/addon/6622/" title="https://addons.mozilla.org/ru/firefox/addon/6622/">установить его с сайта дополнений</a> и перезапустить браузер. Затем возвращайтесь к этому руководству.</p> - - <p>Если вы не хотите устанавливать DOMi (или вы используете браузер не от Mozilla), то можете воспользоваться Рентген-очками, как описано в секции ниже. Или вы можете пропустить эту секцию и перейти к прямо к следующей странице. Если вы пропустите данный раздел, это не помешает вам в дальнейшем освоении руководства.</p> - </div> - </li> - <li>В DOMi разверните узлы вашего документа, нажав на их стрелки. - <p><strong>Замечание: </strong> Пустые места в вашем HTML файле DOMi может отображать как пустые текстовые узлы, которые можно игнорировать.</p> - - <p>Часть результата может выглядеть следующим образом, в зависимости от того, какие узлы вы развернули:</p> - - <pre>│ ▼╴<span style="color: black;">P</span> -│ │ │ ▼╴<span style="color: black;">STRONG</span> -│ │ └<span style="color: darkblue;">#text</span> -│ ├╴<span style="color: darkblue;">#text</span> -│ ►╴<span style="color: black;">STRONG</span> -│ │</pre> - - <p>При выборе любого узла, вы можете использовать правую панель DOMi's для поиска информации об узле. Например, когда вы выбираете текстовый узел, DOMi показывает вам текст в соответствующей панели.</p> - - <p>При выборе узла элемента, DOMi анализирует его и предоставляет огромное количество информации, которая содержится в правой панели. Информация о стилях - лишь часть информации, которую там можно просмотреть.</p> - </li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type">Задача</div> - -<p>В DOMi, кликните на узле <small>STRONG</small>.</p> - -<p>Используйте правую панель ДОМи, чтобы выяснить, где цвет для этого узла установлен на красный, и где его внешний вид сделан толще, чем обычный текст.</p> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">Посмотреть решение задачи.</a></div> - -<h3 id="Использование_Рентген-очков">Использование Рентген-очков</h3> - -<p><a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Рентген-очки </a>показывают меньше информации, чем DOM Инспектор, но проще в установке и использовании.</p> - -<ol> - <li>Перейдите на домашнюю страницу <a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">X-Ray Goggles</a>.</li> - <li>Перетащите ссылку X-Ray Googles с этой страницы на панель закладок.</li> - <li>Откройте HTML-документ.</li> - <li>Запустите Рентген-очки, кликнув по появившейся закладке.</li> - <li>Передвигайте курсор мыши по документу для просмотра элементов в документе.</li> -</ol> - -<h2 id="Что_дальше">Что дальше?</h2> - -<p>{{ nextPage("/ru/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Каскадность и наследование") }}Если вы решили задачу, то увидели, что информация о стиле из более чем одного места взаимодействует для создания окончательного стиля для элемента. На <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="/ru/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">следующей странице</a> объясняется больше об этих взаимодействиях.</p> diff --git a/files/ru/web/guide/css/getting_started/index.html b/files/ru/web/guide/css/getting_started/index.html deleted file mode 100644 index b2f6ebed77..0000000000 --- a/files/ru/web/guide/css/getting_started/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: CSS для начинающих -slug: Web/Guide/CSS/Getting_started -tags: - - Beginner - - CSS - - 'CSS:Getting_Started' - - Guide - - Needs - - NeedsBeginnerUpdate - - NeedsTranslation - - NeedsUpdate - - TopicStub - - Web - - Новичку - - Руководство -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started ---- -<p><span class="seoSummary">Это руководство (самоучитель) познакомит вас с базовыми возможностями и языком (синтаксом) <a href="/ru/docs/Web/Guide/CSS" title="/ru/docs/Web/Guide/CSS"><strong>Каскадных таблиц стилей</strong></a> (CSS). CSS используется для изменения внешнего вида структурированного документа, такого как веб-страница. Руководство также включает простые упражнения, которые вы сможете выполнить на своем компьютере и увидеть, как работает CSS, а также его возможности в современных браузерах. </span></p> - -<p>Данное руководство создано для новичков и всех, кто хотел бы освежить свои знания основ CSS. Если у вас уже есть опыт работы с CSS, на главной странице вы можете найти <a href="/ru/docs/Web/Guide/CSS" title="/ru/docs/Web/Guide/CSS">список</a> обучающих ресурсов, подходящих для вашего уровня.</p> - -<nav class="fancyTOC"><a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/What_is_CSS" rel="next" title="Глава «Что такое CSS» руководства по CSS">Что такое CSS</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="Глава «Зачем нужен CSS» руководства по CSS">Зачем нужен CSS</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/How_CSS_works" title="Глава «Как работает CSS» руководства по CSS">Как работает CSS</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="Глава «Каскадирование и наследование» руководства по CSS">Каскадность и наследование</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors" title="Глава «Селекторы» руководства по CSS">Селекторы</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="Глава «Читаемость CSS» руководства по CSS">Читаемость CSS</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">стили текста</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Color" title="Глава «Цвета» руководства по CSS">Цвета</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">контент</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Lists" title="Глава «Списки» руководства по CSS">Списки</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">блок</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">макет</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Tables" title="Глава «Таблицы» руководства по CSS">Таблицы</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">медиа</a></nav> - -<h2 id="Что_вам_нужно_для_того_чтобы_начать">Что вам нужно для того, чтобы начать</h2> - -<ul> - <li>Текстовый редактор</li> - <li>Современный браузер</li> - <li>Опыт работы с текстовым редактором и браузером</li> -</ul> - -<p>В данном руководстве вам будут встречаться упражнения, которые вам предлагается выполнить для лучшего понимания материала. Их выполнение не является обязательным: вы можете просто читать материал и смотреть на иллюстрации.</p> - -<p><strong>Важно:</strong> Руководство включает в себя материалы по работе с цветом в CSS. Эти материалы будет легче пройти, если у вас цветной монитор и нормальное цветовое зрение.</p> - -<h2 id="Как_пользоваться_руководством">Как пользоваться руководством</h2> - -<p>Наилучшим вариантом будет внимательное и постепенное чтение разделов в строгой последовательности. Если вы пропустите какой-то раздел, вам может оказаться что-то непонятно в следующих главах.</p> - -<h3 id="Часть_I_Основы_CSS">Часть I: Основы CSS</h3> - -<p>На каждой странице, используйте секцию <em>Информация</em>, чтобы понять, как работает CSS. Используйте секцию <em>К действию</em>, чтобы попробовать использовать CSS на вашем компьютере.</p> - -<p>Чтобы проверить усвоенные знания, вам будет полезно решить задачу в конце каждой страницы. Верные решения задач вы всегда можете найти под их описанием в виде ссылки - таким образом, вы не сможете увидеть их случайно.</p> - -<p>Чтобы добиться более глубокого понимания CSS, читайте информацию в блоках с заголовком <em>Подробнее</em>. А также не забудьте посетить приведенные там ссылки.</p> - -<h3 id="Часть_II_Возможности_CSS">Часть II: Возможности CSS</h3> - -<p>Вторая часть руководства содержит примеры, которые продемонстрируют вам возможности CSS применительно к другим web-технологиям и технологиям Mozilla. </p> - -<ol> - <li><a href="/ru/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="ru/CSS/Getting_Started/JavaScript">JavaScript</a></li> - <li><a href="/ru/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS" title="ru/CSS/Getting_Started/SVG_graphics">SVG графика</a></li> - <li><a href="/ru/docs/Web/Guide/CSS/Getting_Started/XML_data" title="ru/CSS/Getting_Started/XML_data">XML данные</a></li> - <li><a href="/ru/docs/Web/Guide/CSS/Getting_Started/XBL_bindings" title="ru/CSS/Getting_Started/XBL_bindings">XBL байдинг bindings</a></li> - <li><a href="/ru/docs/Web/Guide/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">Пользовательские интерфейсы XUL</a></li> -</ol> diff --git a/files/ru/web/guide/css/getting_started/readable_css/index.html b/files/ru/web/guide/css/getting_started/readable_css/index.html deleted file mode 100644 index 9e9a4231a9..0000000000 --- a/files/ru/web/guide/css/getting_started/readable_css/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: Чистый СSS код -slug: Web/Guide/CSS/Getting_started/Readable_CSS -translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable -translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}<span class="seoSummary">Это 6-я статья руководства <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS для начинающих</a>; здесь </span>обсуждается стиль и грамматика самого языка CSS. Вы можете изменить пусть к вашему файлу CSS на более удобный для чтения.</p> - -<h2 class="clearLeft" id="Информация_Чистый_код_CSS">Информация: Чистый код CSS</h2> - -<p>Вы можете добавлять пустое пространство и комментарии к вашим стилям, чтобы сделать их более читабельными. Также вы можете группировать селекторы вместе, в случае если те же самые правила стиля применяются к разным элементам.</p> - -<h3 id="Пустое_пространство">Пустое пространство</h3> - -<p>Пустое пространство означает фактические пробелы, табуляцию, а также новые строки. Вы можете использовать их, чтобы сделать ваш код более читабельным.</p> - -<p>В макете страницы, данное пространство — это та часть, которая остается без опознавательных знаков: отступы от других элементов (margin) и пространство между колонками и строками.</p> - -<p>Ваш пример файла CSS в настоящее время имеет правила в одной строке, и почти минимум пробелов. В комплексе стилей эта схема будет усложнять читаемость, а значит в нее будет трудно вносить изменения.</p> - -<p>Стиль написания который вы выбираете, как правило, зависит от личных предпочтений, но если ваши css являются частью общих проектов, могут возникнуть трудности с понимаем вашего написания кода.</p> - -<div class="tuto_example"> -<div class="tuto_type">Примеры</div> - -<p>Некоторые люди пытаются написать код максимально компактно и пишут код в одну строку, даже если он достаточно долгий:</p> - -<pre class="brush: css">.carrot {color: orange; text-decoration: underline; font-style: italic;} -</pre> - -<p>Некоторые люди предпочитают писать каждое свойство-значение в отдельной строке:</p> - -<pre class="brush: css">.carrot -{ -color: orange; -text-decoration: underline; -font-style: italic; -} -</pre> - -<p>Некоторые используют отступы — 2 или 4 пробела или табы:</p> - -<pre class="brush: css">.carrot { - color: orange; - text-decoration: underline; - font-style: italic; -} -</pre> - -<p>Некоторые люди все выстраивают вертикально (но такое расположение не лучший вариант для поддержки):</p> - -<pre class="brush: css">.carrot - { - color : orange; - text-decoration : underline; - font-style : italic; - } -</pre> - -<p>Некоторые люди используют смешанный пробелы для повышения читаемости.</p> - -<pre class="brush: css">.vegetable { color: green; min-height: 5px; min-width: 5px } -.vegetable.carrot { color: orange; height: 90px; width: 10px } -.vegetable.spinach { color: darkgreen; height: 30px; width: 30px } -</pre> -</div> - -<p>Некоторые используют вкладки для компоновки элементов, а другие только пробелы.</p> - -<h3 id="Комментарии">Комментарии</h3> - -<p>Комментарии в CSS имеют следующий вид: <code>/*</code> комментарий <code>*/</code>.</p> - -<p>Вы можете использовать комментарии, чтобы сделать фактические комментарии в css, а также чтобы закомментировать временно часть кода с целью тестирования.</p> - -<p>Часть стилей, которая будет закомментирована, не будет отображатся браузером. Будьте осторожны при комментировании кода, поскольку важно сохранить правильный синтаксис остального кода.</p> - -<div class="tuto_example"> -<div class="tuto_type">Пример</div> - -<pre class="brush: css">/* стиль для начальной буквой C в первом пункте*/ -.carrot { - color: orange; - text-decoration: underline; - font-style: italic; - } -</pre> -</div> - -<h3 id="Группировка_селекторов">Группировка селекторов</h3> - -<p>Когда многие элементы имеют один и тот же стиль, вы можете указывать группу селекторов, разделяя их запятыми. Декларация применится для всех выбранных элементов.</p> - -<p>В другом месте в таблице стилей можно указать те же селекторы уже индивидуально, чтобы применить индивидуальные правила стилей для них.</p> - -<div class="tuto_example"> -<div class="tuto_type">Пример</div> - -<p>Это правило делает элементы {{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, и {{HTMLElement ("h3")}} одного цвета.</p> - -<p>Удобно определить цвет только в одном месте, в случае, если возможны изменения.</p> - -<pre class="brush: css">/* цвет для заголовков */ -h1, h2, h3 {color: navy;} -</pre> -</div> - -<h2 id="Действуем_добавление_комментариев_и_улучшения_формата">Действуем: добавление комментариев и улучшения формата</h2> - -<ol> - <li>Редактируя ваш CSS-файл убедитесь, что он применяет эти правила (в любом порядке): - <pre class="brush: css">strong {color: red;} -.carrot {color: orange;} -.spinach {color: green;} -#first {font-style: italic;} -p {color: blue;} -</pre> - </li> - <li>Сделайте его более читабельным, перестраивая его таким образом, какой будете считать более логичным и применяя пробелы и комментарии на свое усмотрение.</li> - <li>Сохраните файл и обновите экран браузера, чтобы убедиться, что ваши изменения не повлияли на роботу стилей: - <table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> -</ol> - -<div class="tuto_details"> -<div class="tuto_type">Задание</div> - -<p>Закомментируйте часть стиля не меняя остальное, чтобы сделать первую букву вашего документа красной:</p> - -<table style="background-color: white; border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<p>(Существует более чем один способ сделать это).</p> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> -One way to do this is to put comment delimiters around the rule for <code>.carrot</code>: - -<pre class="brush: css">/*.carrot { - color: orange; -}*/</pre> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">Посмотреть решение задания.</a></div> - -<h2 id="Что_дальше">Что дальше?</h2> - -<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles") }}Ваш образец таблицы стилей использовал курсивный текст и подчеркнутый текст. На следующей странице описаны несколько способов, чтобы <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles">указать внешний вид текста</a> в вашем документе<strong>.</strong></p> diff --git a/files/ru/web/guide/css/getting_started/selectors/index.html b/files/ru/web/guide/css/getting_started/selectors/index.html deleted file mode 100644 index 797aefefa3..0000000000 --- a/files/ru/web/guide/css/getting_started/selectors/index.html +++ /dev/null @@ -1,434 +0,0 @@ ---- -title: Selectors -slug: Web/Guide/CSS/Getting_started/Selectors -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Web/Guide/CSS/Getting_started/Selectors ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & inheritance")}}Это пятый раздел руководства <a href="https://developer.mozilla.org/ru/docs/Web/Guide/CSS/Getting_Started" title="ru/CSS/Getting Started">CSS для начинающих</a>. В нем объясняется, как можно выборочно применять стили и каким образом различные типы селекторов имеют разные приоритеты. <span class="seoSummary"> </span></p> - -<p>Некоторые атрибуты добавляются к тегам в шаблоне документа, и эти атрибуты используются в шаблоне таблицы стилей.</p> - -<h2 class="clearLeft" id="Информация_Селекторы">Информация: Селекторы</h2> - -<p>Ранее мы уже встречались с селекторами. Мы создали строку в файле стилей следующего вида:</p> - -<pre class="brush: css">strong { - color: red; -} -</pre> - -<p>В терминологии CSS эта строка полностью является <em>правилом CSS</em>. Это правило начинается со <code>strong</code>, что и называется <em>селектором</em> <em>CSS</em>. Селектор выбирает, к каким элементам DOM применяется правило.</p> - -<div class="tuto_details"> -<div class="tuto_type">Подробности</div> - -<p>Часть внутри фигурных скобок называется <em>объявлением</em>.</p> - -<p>Ключевое слово <code>color</code> - <em>свойство</em>, а <code>red</code> - <em>значение</em>.</p> - -<p>Точка с запятой после пары "свойство-значение" отделяет её от других пар "свойство-значение" в том же объявлении.</p> - -<p>Этот учебник ссылается на селектор типа <code>strong</code> как на селектор <em>тега</em>. Спецификация CSS ссылается на него как на селектор <em>типа</em>.</p> -</div> - -<p>На этой странице учебника объясняются дополнительные сведения о селекторах, которые можно использовать в правилах CSS.</p> - -<p>В дополнение к именам тегов, вы можете использовать в селекторах значения атрибутов. Это позволит вашим правилам быть более избирательными.</p> - -<p>Два атрибута имеют особый статус в CSS. Это <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> и <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a>.</p> - -<h3 id="Селекторы_классов">Селекторы классов</h3> - -<p>Используйте атрибут <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> в элементе, чтобы назначить элемент именованному классу. Выбор имени класса целиком за вами. Множество элементов в документе может иметь одно и то же значение класса.</p> - -<p>В вашей таблице стилей используйте точку перед именем класса для использования его в качестве селектора.</p> - -<h3 id="Селекторы_ID">Селекторы ID</h3> - -<p><code>Используйте атрибут <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id">id</a> в элементе, чтобы назначить идентификатор элементу. Это зависит от вас, какое имя вы выберете для ID. Идентификационное имя должно быть уникальным в документе.</code></p> - -<p>В таблице стилей введите знак решетки перед идентификатором, когда вы используете его в селекторе.</p> - -<div class="tuto_example"> -<div class="tuto_type">Пример</div> -Этот HTML тэг имеет оба элемента, атрибут <code>class</code> и <code>id</code>: - -<pre class="brush: html"><p class="key" id="principal"> -</pre> - -<p>Значение идентификатора <strong>id</strong>, <code>principal</code>, должно быть уникально в документе, но разные тэги в документе, могут иметь одинаковое имя <strong>class</strong> со значением <code>key</code>.</p> - -<p>Это правило делает все классы(class) со значением<code>key</code> зелёными. (Они даже не должны быть все элементами {{ HTMLElement("p") }}.)</p> - -<pre class="brush: css">.key { - color: green; -} -</pre> - -<p>Это правило делает один элемент с идентификатором (<strong>id</strong>) и значением <code>principal</code> полужирным:</p> - -<pre class="brush: css">#principal { - font-weight: bolder; -} -</pre> -</div> - -<h3 id="Селекторы_Атрибутов">Селекторы Атрибутов</h3> - -<p>Вы не ограничены двумя специальными атрибутами, <code>class</code> и <code>id</code>. Вы можете определить <a href="/en-US/docs/Web/CSS/Attribute_selectors" title="/en-US/docs/Web/CSS/Attribute selectors">другие атрибуты</a> используя квадратные скобки. Внутри скобок вы задаёте имя атрибута, так же можно указать оператор соответствия и значение. Дополнительно, соответствие может быть установлено как чувствительное к регистру если дописать " i" после значения, но пока не все браузеры это поддерживают. Примеры:</p> - -<dl> - <dt><code>[disabled]</code></dt> - <dd>Выбирает все элементы с атрибутом "disabled".</dd> - <dt><code>[type='button']</code></dt> - <dd>Выбирает элементы с типом "button".</dd> - <dt><code>[class~=key]</code></dt> - <dd>Выбирает элементы со значением класса(class) "key" (но не такие как например "keyed", "monkey", "buckeye"). По сути эквивалентно <code>.key</code>.</dd> - <dt><code>[lang|=es]</code></dt> - <dd>Выбирает элементы определённые как Spanish. Это включает "es" и "es-MX" но не включает "eu-ES" (что является языком Basque).</dd> - <dt>[title*="example" i]</dt> - <dd>Выбирает элементы в состав которых входит "example", игнорируя регистр. В браузерах, которые не поддерживают флаг "i", этот селектор возможно не найдет ни один элемент.</dd> - <dt><code>a[href^="https://"]</code></dt> - <dd>Выбирает все защищённые ссылки.</dd> - <dt><code>img[src$=".png"]</code></dt> - <dd>Косвенно выбирает изображения PNG; любые изображения которые являются изображениями PNG но, чей адрес URL не заканчивается на ".png" (такие как в строке запроса) не будут выбраны.</dd> -</dl> - -<h3 id="Селекторы_псевдокласса"><span class="short_text" id="result_box" lang="ru"><span>Селекторы псевдокласса</span></span></h3> - -<p><span id="result_box" lang="ru"><span>Псевдокласс класса CSS - это ключевое слово, добавленное в селектор, который задает особое состояние выбранного элемента.</span> <span class="alt-edited">Например {{Cssxref (": hover")}} применит стиль, когда пользователь наводит на элемент, указанный селектором.</span></span></p> - -<p><span id="result_box" lang="ru"><span>Псевдо-классы вместе с псевдоэлементами позволяют применять стиль к элементу не только по отношению к содержанию дерева документов, но и по отношению к внешним факторам, таким как история навигатора</span></span> ({{ cssxref(":visited") }}, для примера), <span id="result_box" lang="ru"><span>статус его содержимого</span></span> (наподобии {{ cssxref(":checked") }} <span id="result_box" lang="ru"><span>на некоторых элементах формы) или положение мыши </span></span> (наподобии {{ cssxref(":hover") }} <span id="result_box" lang="ru"><span> который позволяет узнать, находится ли мышь над элементом или нет).</span> <span>Чтобы просмотреть полный список селекторов, посетите</span></span> <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Спецификация работы селекторов</a>.</p> - -<div class="tuto_example"> -<div class="tuto_type"><span class="short_text" id="result_box" lang="ru"><span>Синтаксис</span></span></div> - -<pre class="brush:css">selector:pseudo-class { - property: value; -} -</pre> -</div> - -<h4 id="Список_псевдоклассов"><span class="short_text" id="result_box" lang="ru"><span>Список псевдоклассов</span></span></h4> - -<ul> - <li>{{ Cssxref(":link") }}</li> - <li>{{ Cssxref(":visited") }}</li> - <li>{{ Cssxref(":active") }}</li> - <li>{{ Cssxref(":hover") }}</li> - <li>{{ Cssxref(":focus") }}</li> - <li>{{ Cssxref(":first-child") }}</li> - <li>{{ Cssxref(":last-child") }}</li> - <li>{{ Cssxref(":nth-child") }}</li> - <li>{{ Cssxref(":nth-last-child") }}</li> - <li>{{ Cssxref(":nth-of-type") }}</li> - <li>{{ Cssxref(":first-of-type") }}</li> - <li>{{ Cssxref(":last-of-type") }}</li> - <li>{{ Cssxref(":empty") }}</li> - <li>{{ Cssxref(":target") }}</li> - <li>{{ Cssxref(":checked") }}</li> - <li>{{ Cssxref(":enabled") }}</li> - <li>{{ Cssxref(":disabled") }}</li> -</ul> - -<h2 id="Информация_Специфичность"><span class="short_text" id="result_box" lang="ru"><span>Информация: Специфичность</span></span></h2> - -<p><span id="result_box" lang="ru"><span>Несколько правил могут иметь селектор, каждый из которых соответствует одному и тому же элементу.</span> <span>Если свойство задано только одним правилом, конфликт не возникает, и свойство устанавливается в элементе.</span> <span>Если к элементу применяется более одного правила и устанавливает одно и то же свойство, тогда CSS дает приоритет правилу, которое имеет более</span></span> <a href="/en-US/docs/Web/CSS/Specificity">конкретный</a> <span id="result_box" lang="ru"><span>селектор</span><span>.</span> <span>Селектор ID более специфичен, чем селектор класса, псевдокласса или атрибута, который, в свою очередь, более специфичен, чем селектор тегов или псевдоэлементов.</span></span></p> - -<div class="tuto_details"> -<div class="tuto_type"><span class="short_text" id="result_box" lang="ru"><span>Подробнее</span></span></div> - -<p><span id="result_box" lang="ru"><span>Вы также можете комбинировать селектор, создавая более конкретный селектор.</span> <span>Например, селектор</span></span> <code>.key</code> <span id="result_box" lang="ru"><span>выбирает все элементы, с ключом имени класса </span></span><code>key</code>. Селектор <code>p.key</code> отбирает только {{ HTMLElement("p") }} элементы, которые имеют имя класса <code>key</code>.</p> -</div> - -<p><span id="result_box" lang="ru"><span>Если таблица стилей имеет противоречивые правила, и они одинаково специфичны, тогда CSS дает приоритет правилу, которое позже находится в таблице стилей.</span></span></p> - -<p><span id="result_box" lang="ru"><span class="alt-edited">Если у вас возникла проблема с конфликтующими правилами, попробуйте разрешить это, сделав одно из правил более конкретным, чтобы оно имело приоритет.</span> <span class="alt-edited">Если вы не можете этого сделать, попробуйте переместить одно из правил ближе к концу таблицы стилей, чтобы оно имело приоритет.</span></span></p> - -<h2 id="Информация_Селекторы_на_основе_отношений"><span class="short_text" id="result_box" lang="ru"><span>Информация: Селекторы на основе отношений</span></span></h2> - -<p><span id="result_box" lang="ru"><span>CSS имеет несколько способов выбора элементов на основе отношений между элементами.</span> <span>Вы можете использовать их, чтобы сделать селектора более конкретными.</span></span></p> - -<table id="relselectors"> - <caption><span class="short_text" id="result_box" lang="ru"><span>Общие селекторы, основанные на отношениях</span></span></caption> - <tbody> - <tr> - <td style="width: 10em;"><strong>Селектор</strong></td> - <td><strong>Выбрано</strong></td> - </tr> - <tr> - <td><code>A E</code></td> - <td>Любой E элемент, что является <em>потомком</em> одного из A элемента (то есть: дочерний, или один из дочернего, <em>т.д.</em>)</td> - </tr> - <tr> - <td><code>A > E</code></td> - <td>Любой E элемент, что явлется <em>дочерним</em> (т.е. прямой потомок) A элемента.</td> - </tr> - <tr> - <td><code>E:first-child</code></td> - <td>Любой E элемент, что является первым <em>дочерним</em> элементом родительского элемента.</td> - </tr> - <tr> - <td><code>B + E</code></td> - <td>Любой E элемент, что является следующим <em>"братом"</em> B элемента (то есть: следующий ребенок того же родителя)</td> - </tr> - </tbody> -</table> - -<p>Вы можете комбинировать их для выражения сложных отношений.</p> - -<p>Вы можете так же использовать символ <code>*</code> (звездочка), что подразумевает "любой элемент".</p> - -<div class="tuto_example"> -<div class="tuto_type">Пример</div> - -<p>Таблица HTML имеет аттрибут <code>id</code> , но строки и ячейки не имеют отдельных идентификаторов:</p> - -<pre class="brush: html"><table id="data-table-1"> -... -<tr> -<td>Prefix</td> -<td>0001</td> -<td>default</td> -</tr> -... -</pre> - -<p>Эти правила делают первую ячейку в каждой строке подчеркнутой, а "брат" первой ячейки каждой строки зачеркнутой (в примере 2-я ячейка) . <span id="result_box" lang="ru"><span>Они влияют только на одну конкретную таблицу в документе:</span></span>:</p> - -<pre class="brush:css">#data-table-1 td:first-child {text-decoration: underline;} -#data-table-1 td:first-child + td {text-decoration: line-through;} -</pre> - -<p>Резульат выглядит наподобии:</p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td> - <table style="margin-right: 2em; width: 18em;"> - <tbody> - <tr> - <td><u>Prefix</u></td> - <td><s>0001</s></td> - <td>default</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type">Подробно</div> - -<p><span id="result_box" lang="ru"><span>Обычным способом, если вы делаете селектор более конкретным, вы увеличиваете его приоритет.</span></span></p> - -<p>Если вы используете эти методы, вы избегаете необходимость указывать в атрибутах <code>class</code> или <code>id</code> на множестве тегов в вашем документе. Вместо этого, CSS выполнит эту работу.</p> - -<p><span id="result_box" lang="ru"><span>В больших конструкциях, где скорость важна, вы можете сделать свои таблицы стилей более эффективными, избегая сложных правил, которые зависят от отношений между элементами.</span></span></p> - -<p>Дополнительные примеры о таблицах, смотрите <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Tables">Tables</a> на странице ссылок CSS.</p> -</div> - -<h2 id="Действие_Использование_селекторов_class_и_ID">Действие: Использование селекторов class и ID</h2> - -<ol> - <li><span id="result_box" lang="ru"><span>Измените свой HTML-файл и продублируйте абзац, скопировав его и вставив в него</span></span>.</li> - <li>Затем добавьте аттрибуты <strong>id</strong> и <strong>class</strong> в первую копию, а аттрибут <strong>id</strong> во вторую копию, как показано ниже. Кроме того, скопируйте и вставьте весь файл снова: - <pre class="brush: html"><!doctype html> -<html> - <head> - <meta charset="UTF-8"> - <title>Sample document</title> - <link rel="stylesheet" href="style1.css"> - </head> - <body> - <p id="first"> - <strong class="carrot">C</strong>ascading - <strong class="spinach">S</strong>tyle - <strong class="spinach">S</strong>heets - </p> - <p id="second"> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets - </p> - </body> -</html> -</pre> - </li> - <li><span id="result_box" lang="ru"><span>Теперь отредактируйте свой файл CSS.</span> <span>Замените все содержимое на:</span></span> - <pre class="brush:css">strong { color: red; } -.carrot { color: orange; } -.spinach { color: green; } -#first { font-style: italic; } -</pre> - </li> - <li><span id="result_box" lang="ru"><span>Сохраните файлы и обновите свой браузер, чтобы увидеть результат:</span></span> - <table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - - <p><span id="result_box" lang="ru"><span>Вы можете попробовать перестроить строки в вашем файле CSS, чтобы показать, что порядок не имеет никакого эффекта.</span></span></p> - - <p>Селекторы классов <code>.carrot</code> и <code>.spinach</code> имеют приоритет над селектором тега <code>strong</code>.</p> - - <p>Селектор ID <code>#first</code> имеет приоритет над селекторами класс и тег.</p> - </li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type">Вызовы</div> - -<ol> - <li><span id="result_box" lang="ru"><span>Не изменяя свой HTML-файл, добавьте в свой CSS-файл одно правило, которое сохраняет все начальные буквы того же цвета, что и сейчас, но делает весь текст во втором абзаце синим:</span></span> - - <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> - <li><span id="result_box" lang="ru"><span>Теперь измените правило, которое вы только что добавили (не изменяя ничего другого), чтобы сделать первый абзац синим:</span></span> - <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> -</ol> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<ol> - <li>Add a rule with an ID selector of <code>#second</code> and a declaration <code>color: blue;</code>, as shown below: - - <pre class="brush: css">#second { color: blue; } -</pre> - A more specific selector, <code>p#second</code> also works.</li> - <li>Change the selector of the new rule to be a tag selector using <code>p</code>: - <pre class="brush: css">p { color: blue; } -</pre> - </li> -</ol> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> - -<h2 id="Действие_Использование_селекторов_псевдокласса">Действие: Использование селекторов псевдокласса</h2> - -<ol> - <li><span class="short_text" id="result_box" lang="ru"><span>Создайте HTML-файл со следующим содержимым</span></span>: - - <pre class="brush: html"><!doctype html> -<html> - <head> - <meta charset="UTF-8"> - <title>Sample document</title> - <link rel="stylesheet" href="style1.css"> - </head> - <body> - <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p> - </body> -</html> -</pre> - </li> - <li><span id="result_box" lang="ru"><span>Теперь отредактируйте свой файл CSS.</span> <span>Замените все содержимое на:</span></span> - <pre class="brush: css">a.homepage:link, a.homepage:visited { - padding: 1px 10px 1px 10px; - color: #fff; - background: #555; - border-radius: 3px; - border: 1px outset rgba(50,50,50,.5); - font-family: georgia, serif; - font-size: 14px; - font-style: italic; - text-decoration: none; -} - -a.homepage:hover, a.homepage:focus, a.homepage:active { - background-color: #666; -} -</pre> - </li> - <li><span id="result_box" lang="ru"><span>Сохраните файлы и обновите свой браузер, чтобы увидеть результат (наведите указатель мыши на следующую ссылку, чтобы увидеть эффект):</span></span> - <table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td><span class="short_text" id="result_box" lang="ru"><span>Перейдите к нашей</span></span> <a class="tutospecial" href="https://developer.mozilla.org/ru/docs/Web/Guide/CSS/Getting_started/Selectors#" title="Home page">Домашняя страница</a><span style="display: none;"> </span><span style="display: none;"> </span></td> - </tr> - </tbody> - </table> - </li> -</ol> - -<h2 id="Действие_Использование_селекторов_на_основе_отношений_и_псевдоклассов">Действие: Использование селекторов на основе отношений и псевдоклассов</h2> - -<p><span id="result_box" lang="ru"><span>С помощью селекторов, основанных на связях и псевдоклассах, вы можете создавать сложные каскадные алгоритмы.</span></span> <span id="result_box" lang="ru"><span>Это обычная техника, используемая, например, для создания</span></span> <strong>чисто-CSS выпадающее меню</strong> ( <span id="result_box" lang="ru"><span>это только CSS, без использования JavaScript).</span> <span>Суть этого метода заключается в создании правила следующего вида:</span></span></p> - -<pre class="brush: css">div.menu-bar ul ul { - display: none; -} - -div.menu-bar li:hover > ul { - display: block; -}</pre> - -<p><span id="result_box" lang="ru"><span>для применения к структуре HTML, наподобии следующей:</span></span></p> - -<pre class="brush: html"><div class="menu-bar"> - <ul> - <li> - <a href="example.html">Menu</a> - <ul> - <li> - <a href="example.html">Link</a> - </li> - <li> - <a class="menu-nav" href="example.html">Submenu</a> - <ul> - <li> - <a class="menu-nav" href="example.html">Submenu</a> - <ul> - <li><a href="example.html">Link</a></li> - <li><a href="example.html">Link</a></li> - <li><a href="example.html">Link</a></li> - <li><a href="example.html">Link</a></li> - </ul> - </li> - <li><a href="example.html">Link</a></li> - </ul> - </li> - </ul> - </li> - </ul> -</div> -</pre> - -<p>Смотрите наш полный <a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">Пример CSS-основанного выпадающего меню</a> для возможной реплики.</p> - -<h2 id="Что_дальше">Что дальше?</h2> - -<p>Ваша таблица стилей начинает выглядеть плотной и сложной. Следующая секция описывает пути CSS <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS">легкого чтения</a>. {{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}</p> diff --git a/files/ru/web/guide/css/getting_started/text_styles/index.html b/files/ru/web/guide/css/getting_started/text_styles/index.html deleted file mode 100644 index a25565cf79..0000000000 --- a/files/ru/web/guide/css/getting_started/text_styles/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: Text styles -slug: Web/Guide/CSS/Getting_started/Text_styles -translation_of: Learn/CSS/Styling_text/Fundamentals -translation_of_original: Web/Guide/CSS/Getting_started/Text_styles ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}<span class="seoSummary">This is the 7th section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> tutorial; it gives more examples of text styles. You modify your sample stylesheet to use different fonts.</span></p> - -<h2 class="clearLeft" id="Information_Text_styles">Information: Text styles</h2> - -<p>CSS имеет несколько свойств для стилизации текста.</p> - -<p>There is a convenient shorthand property, {{ cssxref("font") }}, which you can use to specify several aspects at once—for example:</p> - -<ul> - <li>Bold, italic, and small-caps (small capitals)</li> - <li>Size</li> - <li>Line height</li> - <li>Font typeface</li> -</ul> - -<div class="tuto_example"> -<div class="tuto_type">Example</div> - -<pre class="brush:css">p { -font: italic 75%/125% "Comic Sans MS", cursive; -} -</pre> - -<p>This rule sets various font properties, making all paragraphs italic.</p> - -<p>The font size is set to three-quarters of the size in each paragraph's parent element, and the line height is set to 125% (a little more spaced than normal).</p> - -<p>The font typeface is set to Comic Sans MS, but if this typeface is not available then the browser will use its default cursive (hand-written) typeface.</p> - -<p>The rule has the side-effect of turning off bold and small-caps (setting them to <code>normal</code>).</p> -</div> - -<h3 id="Font_faces">Font faces</h3> - -<p>You cannot predict what typefaces the readers of your document will have. When you specify font typefaces, it is a good idea to give a list of alternatives in order of preference.</p> - -<p>End the list with one of the built-in default typefaces: <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> or <code>monospace</code>.</p> - -<p>If the typeface does not support some features in the document, then the browser can substitute a different typeface. For example, the document might contain special characters that the typeface does not support. If the browser can find another typeface that has those characters, then it will use the other typeface.</p> - -<p>To specify a typeface on its own, use the {{ cssxref("font-family") }} property.</p> - -<h3 id="Font_sizes">Font sizes</h3> - -<p>Browser users can override the default font sizes or change the text size while they read a page, so it makes good sense for you to use relative sizes wherever you can.</p> - -<p>You can use some built-in values for font sizes, like <code>small</code>, <code>medium</code> and <code>large</code>. You can also use values relative to the font size of the parent element like: <code>smaller</code>, <code>larger</code>, <code>150%</code> or <code>1.5em</code>. An "em" is equivalent to the width of the letter "m" (for the font size of the parent element); thus 1.5em is one-and-a-half times the size of the font of the parent element.</p> - -<p>If necessary you can specify an actual size like: <code>14px</code> (14 pixels) for a display device or 14pt (14 points) for a printer. This is not accessible for visually impaired users because it does not allow them to change the size. A more accessible strategy is to set a built-in value like medium on a top-level element of the document, and then set relative sizes for all its descendent elements.</p> - -<p>To specify a font size on its own, use the {{ cssxref("font-size") }} property.</p> - -<h3 id="Line_height">Line height</h3> - -<p>The line height specifies the spacing between lines. If your document has long paragraphs with many lines, a larger-than-normal spacing makes it easier to read, especially if the font size is small.</p> - -<p>To specify a line height on its own, use the {{ cssxref("line-height") }} property.</p> - -<h3 id="Decoration">Decoration</h3> - -<p>The separate {{ cssxref("text-decoration") }} property can specify other styles, like <code>underline</code> or <code>line-through</code>. You can set it to <code>none</code> to explicitly remove any decoration.</p> - -<h3 id="Other_properties">Other properties</h3> - -<p>To specify italic on its own, use {{ cssxref("font-style") }}<code>: italic;</code><br> - To specify bold on its own, use <code>{{ cssxref("font-weight") }}: bold;</code><br> - To specify small capitals on its own, use <code>{{ cssxref("font-variant") }}: small-caps;</code></p> - -<p>To turn any of these off individually, you can specify the value <code>normal</code> or <code>inherit</code>.</p> - -<div class="tuto_details"> -<div class="tuto_type">More details</div> - -<p>You can specify text styles in a variety of other ways.</p> - -<p>For example, some of the properties mentioned here have other values that you can use.</p> - -<p>In a complex stylesheet, avoid using the shorthand <code>font</code> property because of its side-effects (resetting other individual properties).</p> - -<p>For full details of the properties that relate to fonts, see <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a> in the CSS Specification. For full details of text decoration, see <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text</a>.</p> - -<p>If you don't want to depend on the typefaces installed on users' systems, you can use {{ cssxref("@font-face") }} to specify an online font. However, this requires that the users have a browser that supports this rule.</p> -</div> - -<h2 id="Action_Specifying_fonts">Action: Specifying fonts</h2> - -<p>For a simple document, you can set the font of the {{ HTMLElement("body") }} element and the rest of the document inherits the settings.</p> - -<ol> - <li>Edit your CSS file.</li> - <li>Add the following rule to change the font throughout the document. The top of the CSS file is a logical place for it, but it has the same effect wherever you put it: - <pre class="eval">body { -font: 16px "Comic Sans MS", cursive; -} -</pre> - </li> - <li>Add a comment explaining the rule, and add white space to make it match your preferred layout.</li> - <li>Save the file and refresh your browser to see the effect. If your system has Comic Sans MS, or another cursive font that does not support italic, then your browser chooses a different font face for the italic text in the first line: - <table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> - <li>From your browser's menu bar, choose <strong>View > Text Size > Increase</strong> (or <strong>View > Zoom > Zoom In</strong>). Even though you specified 16 pixels in the style, a user reading the document can change the size.</li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type">Challenge</div> - -<p>Without changing anything else, make all six initial letters twice the size in the browser's default serif font:</p> - -<table> - <tbody> - <tr> - <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td> - </tr> - <tr> - <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>Add the following style declaration to the <code>strong</code> rule:</p> - -<pre class="brush: css"> font: 200% serif; -</pre> -If you use separate declarations for <code>font-size</code> and <code>font-family</code>, then the <code>font-style</code> setting on the first paragraph is <em>not</em> overridden. - -<p> </p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> - -<h2 id="What_next">What next?</h2> - -<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color")}}Your sample document already uses several named colors. The <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Color" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Color">next section</a> lists the names of standard colors and explains how you can specify others<strong>.</strong></p> diff --git a/files/ru/web/guide/css/getting_started/what_is_css/index.html b/files/ru/web/guide/css/getting_started/what_is_css/index.html deleted file mode 100644 index 95df2fe915..0000000000 --- a/files/ru/web/guide/css/getting_started/what_is_css/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Что такое CSS? -slug: Web/Guide/CSS/Getting_started/What_is_CSS -tags: - - Beginner - - CSS - - 'CSS:Getting_Started' - - Example - - Guide - - Веб - - Новичку -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS ---- -<div>{{ CSSTutorialTOC() }}</div> - -<p>{{previousPage("/ru/docs/Web/Guide/CSS/Getting_Started", "CSS для начинающих")}} <span class="seoSummary">Эта первая статья руководства по <a href="/ru/docs/Web/Guide/CSS/Getting_Started" title="ru/CSS/Getting Started">CSS для начинающих</a> кратко объясняет, что такое Cascading Style Sheets (CSS). С её помощью вы сможете создать простой документ, который будете использовать в дальнейших разделах.</span></p> - -<h2 class="clearLeft" id="Информация_Что_такое_CSS">Информация: Что такое CSS</h2> - -<p>Каскадные таблицы стилей (Cascading Style Sheets = <dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>) — это язык, который отвечает за визуальное представление документов пользователю.</p> - -<p>Под <em>документом</em> мы будем понимать набор информации о структуре страницы, описываемый <em>языком разметки</em>.</p> - -<p>А <em>представление</em> документа пользователю, в свою очередь, означает его преобразование в удобную для восприятия форму. Браузеры, такие как Firefox, Chrome или Internet Explorer, были созданы для визуального отображения документов, например, на экране компьютера, проекторе или вывода через принтер.</p> - -<div class="tuto_example"> -<p><strong>Примеры</strong></p> - -<ul> - <li>Страница сайта, которую вы сейчас читаете — это документ. Структура информации, которую вы видите на странице, обычно описывается при помощи языка разметки HTML (<span lang="en">HyperText Markup Language</span> — Язык ГиперТекстовой Разметки)</li> - <li>Диалоговые окна в компьютерных программах, также называемые модальными окнами, как правило, также являются документами. Такие окна могут также быть описаны с помощью языка разметки, такого как XUL (<span lang="en">XML User Interface Language</span> — XML’ный Язык Пользовательского Интерфейса), которые можно найти, например, в некоторых приложениях от Mozilla.</li> -</ul> -</div> - -<p>В этом руководстве блоки с заголовком <strong>Подробнее</strong>, как нижеследующий, содержат дополнительную информацию и ссылки на ресурсы, позволяющие более глубоко изучить вопрос, которому посвящен тот или иной раздел. Вы можете сразу же воспользоваться этими материалами или же пропустить эти блоки и вернуться к ним позже.</p> - -<div class="tuto_details"> -<div class="tuto_type">Подробнее</div> - -<p>Документ это не то же самое, что файл. Но, тем не менее, документ может храниться в одном файле.</p> - -<p>Со страницей, которую вы сейчас читаете, дела обстоят немного сложнее. Когда ваш браузер запрашивает данную страницу, сервер обращается к базе данных и генерирует документ, собирая его по частям из нескольких документов, каждый из которых, в свою очередь, может располагаться в нескольких файлах. Однако в этом руководстве вы также сможете работать с документами, каждый из которых представлен одним файлом.</p> - -<p>Больше информации о документах и языках разметки вы найдете в других разделах этого сайта:</p> - -<table style="background-color: inherit; margin-left: 2em;"> - <tbody> - <tr> - <td><a href="/ru/docs/Web/HTML" title="/ru/docs/Web/HTML">HTML</a></td> - <td>о веб-страницах</td> - </tr> - <tr> - <td><a href="/ru/docs/XML" title="/ru/docs/XML">XML</a></td> - <td>о структуре документов в общем</td> - </tr> - <tr> - <td><a href="/ru/docs/Web/SVG" title="/ru/docs/Web/SVG">SVG</a></td> - <td>о графике</td> - </tr> - <tr> - <td><a href="/ru/docs/XUL" title="/ru/docs/XUL">XUL</a></td> - <td>о пользовательских интерфейсах в Mozilla</td> - </tr> - </tbody> -</table> - -<p>Во второй части данного руководства вы встретите примеры этих языков разметки.</p> -</div> - -<div class="tuto_details"> -<div class="tuto_type">Подробнее</div> - -<p>В терминах CSS программа, которая выводит документ пользователю, так называемому <em lang="en">user agent</em> (<span lang="en">UA</span>). Браузер — один из видов UA. CSS, таким образом, не предназначен только для браузеров или визуального представления, но в первой части данного руководства вы будете работать с CSS только в браузере.</p> - -<p>Прочие определения и термины, имеющие отношение к CSS, вы можете найти в <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Определениях</a> спецификации CSS, созданной World Wide Web Consortium (W3C), международным сообществом которое установило открытые стандарты web.</p> -</div> - -<h2 id="К_действию_Создание_документа">К действию: Создание документа</h2> - -<ol> - <li>Создайте новую папку на вашем компьютере для упражнений.</li> - <li>Откройте текстовый редактор и создайте новый текстовый файл. Этот файл будет содержать документ для нескольких следующих упражнений.</li> - <li>Скопируйте и вставьте HTML, приведенный ниже, а затем сохраните ваш файл под именем <code>doc1.html.</code> - <pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8"> - <title>Sample document</title> - </head> - - <body> - <p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets - </p> - </body> -</html></pre> - - <p>{{ LiveSampleLink('Action.3A_Creating_a_document', 'Посмотреть демо') }}</p> - </li> - <li>Откройте новую вкладку или новое окно в вашем браузере и откройте только что созданный файл. - <p>Вы должны увидеть строку, в которой заглавные буквы выделены полужирным начертанием:</p> - - <table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td> - </tr> - </tbody> - </table> - - <p>То, что вы увидите на самом деле, может немного отличаться потому, что настройки по умолчанию вашего браузера и данной энциклопедии наверняка будут отличаться: небольшие различия в шрифте, пробелах и цветах не очень-то и важны.</p> - </li> -</ol> - -<h2 id="Что_дальше">Что дальше?</h2> - -<p>{{nextPage("/ru/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Зачем нужен CSS?")}}В документе, который вы создали, CSS пока что не использовался. В <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="/ru/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS">следующем разделе</a> вы научитесь использовать CSS для стилизации документа.</p> diff --git a/files/ru/web/guide/css/getting_started/why_use_css/index.html b/files/ru/web/guide/css/getting_started/why_use_css/index.html deleted file mode 100644 index 3041d28920..0000000000 --- a/files/ru/web/guide/css/getting_started/why_use_css/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Зачем нужен CSS? -slug: Web/Guide/CSS/Getting_started/Why_use_CSS -tags: - - Beginner - - CSS - - 'CSS:Getting_Started' - - Example - - Guide - - Web - - Веб - - Новичку - - Руководство -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS ---- -<p><span style="line-height: 1.5;">{{ CSSTutorialTOC() }}</span></p> - -<p>{{ previousPage("/ru/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "Что такое CSS?") }}<span class="seoSummary">Это вторая статья руководства по <a href="/ru/docs/Web/Guide/CSS/Getting_started" title="ru/docs/Web/Guide/CSS/Getting_started">CSS для начинающих</a>, объясняющая взаимосвязь между CSS и документами. В ней вы узнаете, как добавить CSS стили для документа, который вы создали в процессе изучения первой статьи.</span></p> - -<h2 class="clearLeft" id="Информация_Зачем_нужен_CSS">Информация: Зачем нужен CSS?</h2> - -<p>CSS используется для определения стилей ваших документов, в том числе дизайна, верстки и вариаций макета для различных устройств и размеров экрана. Вы можете разместить стили CSS внутри тега <HEAD> документа с встроенной таблицей стилей, или приложить отдельный CSS-файл, который будет определять ваши стили извне. Чтобы привязать внешнюю таблицу стилей к документу, просто добавьте ссылку на таблицу стилей в заголовке <HEAD> документа.</p> - -<p>У внешней таблицы стилей есть множество преимуществ. Сохранение стилей отдельно от содержания HTML:</p> - -<ul> - <li>Помогает избежать дублирования</li> - <li>Облегчает обслуживание</li> - <li>Позволяет делать изменения для всего сайта в одном месте</li> -</ul> - -<div class="tuto_example"> -<div class="tuto_type">Пример</div> - -<p>Используя CSS, вы храните информацию о стилях в общих файлах, которые доступны всем страницам. Например, когда документы ссылаются на те таблицы стилей, которые определяют цвет заголовков h2, вы можете применить стиль для тегов заголовков h2 на глобальном уровне путем изменения одного атрибута CSS.</p> - -<p>Когда пользователь открывает веб-страницу, браузер загружает информацию стиля вместе с содержанием страницы.</p> - -<p>Когда пользователь открывает веб-страницу в режиме печати, вы можете предоставить различную информацию о стилях которая сделает страницу более лёгкой для чтения.</p> -</div> - -<p>Как заставить HTML и CSS работать вместе? В целом, HTML используется для описания содержимого документа, а не его стиля. CSS же используется, чтобы указать стиль документа, но не содержание. Позже в руководстве вы увидите некоторые исключения из этого правила.</p> - -<div class="tuto_details"> -<div class="tuto_type">Подробнее</div> - -<p>Язык разметки, типа HTML также обеспечивает некоторые способы задания стилей.</p> - -<p>Например, в HTML вы можете использовать тег <B>, чтобы сделать текст жирным, либо указать цвет фона страницы в теге <BODY>.</p> - -<p>При использовании CSS, задание стилей средствами языка разметки обычно не используется, поскольку вся информация о стилях легко доступна для чтения и изменения в CSS-файле.</p> -</div> - -<h2 id="Действие_Создание_таблицы_стилей">Действие: Создание таблицы стилей</h2> - -<ol> - <li>Создайте новый текстовый файл в том же каталоге, что и <code>doc1.html</code>, созданный в первой статье.</li> - <li>Сохраните его как <code>style1.css</code>. Этот файл будет вашей таблицей стилей.</li> - <li>Скопируйте и вставьте в CSS-файл приведённую ниже строку, после чего сохраните файл: - <pre class="brush: css">strong {color: red;} -</pre> - </li> -</ol> - -<h3 id="Привязка_таблицы_стилей_к_документу">Привязка таблицы стилей к документу</h3> - -<ol> - <li>Для привязки вашего документа к таблице стилей, необходимо внести в HTML-файл некоторые исправления. Добавьте строки, приведённые ниже: - <pre class="brush: html; highlight:[6];"><!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8"> - <title>Sample document</title> - <link rel="stylesheet" href="style1.css"> - </head> - <body> - <p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets - </p> - </body> -</html> -</pre> - </li> - <li>Сохраните файл, и откройте его в браузере. Таблица стилей сделает заглавные буквы красными:</li> -</ol> - -<p>{{ EmbedLiveSample('Действие_Создание_таблицы_стилей', '', '', '', 'Web/Guide/CSS/Getting_started/Why_use_CSS') }}</p> - -<p>{{ LiveSampleLink('Action.3A_Creating_a_stylesheet', 'Просмотреть демо') }}</p> - -<div class="tuto_example" id="challenge"> -<div class="tuto_type">Задание</div> - -<p>В дополнение к красному, в CSS имеются и другие названия цветов.</p> - -<p>Не открывая подсказку, подберите ещё пять цветовых имён, которые будут работать в CSS.</p> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Возможное решение</div> - -<p>CSS поддерживает общие названия цветов, например <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, или <code>black</code>. Он также поддерживает некоторые более экзотические названия типа <code>chartreuse</code>, <code>fuschia</code>, или <code>burlywood</code>. Посмотрите <a href="/ru/docs/CSS/color_value" title="Цвет в CSS">значения цвета CSS</a>, чтобы ознакомится с полным списком поддерживаемых цветов, а так же методов их задания.</p> -<a class="hideAnswer" href="#challenge">Скрыть решение</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">Посмотреть решение задания.</a></div> - -<h2 id="Что_дальше">Что дальше?</h2> - -<p>{{nextPage("/ru/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "Как работает CSS.")}} Теперь, когда у вас есть образец документа, связанный с отдельной таблицей стилей, вы готовы <a href="/ru/docs/Web/Guide/CSS/Getting_started/How_CSS_works" title="/ru/docs/Web/Guide/CSS/Getting_started/How_CSS_works">узнать больше</a> о том, как ваш браузер объединяет их при отображении документа.</p> diff --git a/files/ru/web/guide/css/getting_started/таблицы/index.html b/files/ru/web/guide/css/getting_started/таблицы/index.html deleted file mode 100644 index 82b7edae60..0000000000 --- a/files/ru/web/guide/css/getting_started/таблицы/index.html +++ /dev/null @@ -1,525 +0,0 @@ ---- -title: Таблицы -slug: Web/Guide/CSS/Getting_started/Таблицы -tags: - - CSS - - Веб - - Руководство -translation_of: Learn/CSS/Building_blocks/Styling_tables -translation_of_original: Web/Guide/CSS/Getting_started/Tables ---- -<p>{{CSSTutorialTOC}}{{previousPage("/ru/docs/Web/Guide/CSS/Getting_Started/Layout", "Layout")}}</p> - -<p>Это 13-я секция руководства <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Начало работы</a>; оно описывает более продвинутые селекторы и некоторые специфичные способы, которыми вы можете стилизовать таблицу. Вы создаете новый пример документа, содержащий таблицу и таблицу стилей для неё.</p> - -<h2 class="clearLeft" id="Информация_Таблицы">Информация: Таблицы</h2> - -<p>Таблица распологает информацию в прямоугольной сетке. Некоторые таблицы могут быть сложными, и для сложных таблиц разные браузеры выдают разный результат.</p> - -<p>Когда вы проектируете ваш документ, используйте таблицы для выражения <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors" title="en-US/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors">отношений</a> между кусочками информации. Поэтому это не важно, если различные браузеры отображают информацию слегка различными способами, потому что значение остается ясным.</p> - -<p>Не используйте таблицы необычным способом для создания особенной визуальной разметки. Техники на предыдущей странице руководства (<strong><a href="/ru/docs/Web/Guide/CSS/Getting_Started/Layout" title="en-US/docs/Web/Guide/CSS/Getting_Started/Layout">Разметка</a></strong>) предпочтительнее для этой цели.</p> - -<h3 id="Структура_таблицы">Структура таблицы</h3> - -<p>В таблице, каждый кусок информации отображается в ячейке (<em>cell)</em>.</p> - -<p>Ячейки, лежащие на одной линии, составляют строку (<em>row</em>).</p> - -<p>В некоторыех таблицах, строки могут быть сгруппирированы. Специальная группа строк в начале таблицы - заголовок (<em>header)</em>, в конце - нижний колонтитул (<em>footer)</em>. Главные строки таблицы - тело (<em>body)</em>, и они могут быть также сгруппирированы.</p> - -<p>Ячейки в линии сверху вниз, составляют столбец (<em>column)</em>, но столбцы имеют ограниченное приминение в таблицах CSS.</p> - -<div class="tuto_example"> -<div class="tuto_type">Пример</div> - -<p>Таблица <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors" title="en-US/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors">Селекторов, основанных на отношении</a> в <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors" title="en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">Селекторы</a> имеет десять ячеек в пяти строках.</p> - -<p>Первая строка - заголовок. Остальные четыре строки - тело таблицы. Нижнего колонтитула нет.</p> - -<p>У неё два столбца.</p> -</div> - -<p>Это руководство охватывает только простые таблицы, где результат довольно предсказуемый. В простой таблице, каждая ячейка занимает только одну ячейку в строке и в столбце. Вы можете использовать CSS для сложных таблиц, где ячейки занимают диапазон ячеек более чем одна в строке или столбце, но таблицы, подобно этим находятся вне пределов этого руководства.</p> - -<h3 id="Рамки">Рамки</h3> - -<p>Ячейки не имеют границ.</p> - -<p>У ячеек нет рамок и наполнений. По умолчанию, рамки разделены значениями таблицы, свойство {{cssxref("border-spacing")}}. Вы можете также полностью удалить пространство, установив свойство таблицы {{cssxref("border-collapse")}} в <code>collapse</code>.</p> - -<div class="tuto_example"> -<div class="tuto_type">Пример</div> - -<p>Здесь три таблицы.</p> - -<p>У таблицы слева интервал рамки 0.5 em. У таблицы по центру он составляет ноль. Таблица справа имеет сжатые границы:</p> - -<table style="background-color: white; border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td style="padding-right: 2em;"> - <table style=""> - <tbody> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Clubs</td> - <td style="border: 1px solid #c00; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> - <td style="border: 1px solid #c00; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - <td style="padding-right: 2em;"> - <table style=""> - <tbody> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Clubs</td> - <td style="border: 1px solid #c00; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> - <td style="border: 1px solid #c00; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - <td style="padding-right: 6em;"> - <table style="border-collapse: collapse;"> - <tbody> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Clubs</td> - <td style="border: 1px solid #c00; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> - <td style="border: 1px solid #c00; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -</div> - -<h3 id="Заголовок">Заголовок</h3> - -<p>{{HTMLElement("caption")}} элемент - это метка, которая применяется ко всей таблице. По умолчанию, она отображается вверху таблицы.</p> - -<p>Чтобы переместить её вниз, установите её свойство {{cssxref("caption-side")}} в <code>bottom</code>. Это свойство наследуется, поэтому, в качестве альтернативы вы можете установить это свойство у таблицы или у другого элемента предка.</p> - -<p>Чтобы стилизовать заголовок текста, используйте любое из обычных свойств для текста.</p> - -<div class="tuto_example"> -<div class="tuto_type">Пример</div> - -<p>У этой таблицы заголовок внизу</p> - -<pre class="brush: css">#demo-table > caption { - caption-side: bottom; - font-style: italic; - text-align: right; -} -</pre> - -<table style="background-color: white; border: 2px outset #36b; padding: 1em 6em 1em 1em;"> - <tbody> - <tr> - <td> - <table> - <caption>Подходит</caption> - <tbody> - <tr> - <td> - <table style="border-collapse: collapse;"> - <tbody> - <tr> - <td style="border: 1px solid gray; text-align: center;">Клубы</td> - <td style="border: 1px solid gray; text-align: center;">Сердца</td> - </tr> - <tr> - <td style="border: 1px solid gray; text-align: center;">Алмазы</td> - <td style="border: 1px solid gray; text-align: center;">Лопаты</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -</div> - -<h3 id="Пустые_ячейки">Пустые ячейки</h3> - -<p>Вы можете отобразить пустые ячейки (т.е. их рамки и фон) указывав {{cssxref("empty-cells")}}: show; для элемента таблицы.</p> - -<p>Вы можете скрыть их, указав <code>empty-cells: hide;</code>. Тогда, если у элемента родителя ячейки есть фон, он будет отображен через пустую ячейку.</p> - -<div class="tuto_example"> -<div class="tuto_type">Пример</div> - -<p>Эти таблицы имеют бледно-зелёный фон. Их ячейки имеют бледно-серый фон и тёмно-серые рамки.</p> - -<p>В таблице слева пустая таблица отображается. В таблице справа, она скрыта:</p> - -<table style="background-color: white; border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td style="padding-right: 2em;"> - <table style="background-color: #dfd;"> - <tbody> - <tr> - <td style="border: 1px solid #555; background-color: #eee;"> </td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Сердца</td> - </tr> - <tr> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Алмазы</td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Лопаты</td> - </tr> - </tbody> - </table> - </td> - <td style="padding-right: 6em;"> - <table style="background-color: #dfd;"> - <tbody> - <tr> - <td> </td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Сердца</td> - </tr> - <tr> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Алмазы</td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Лопаты</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type">Детали</div> - -<p>Для подбробной информации о таблицах, смотрите <a href="http://www.w3.org/TR/CSS21/tables.html">Таблицы</a> в Спецификации CSS.</p> - -<p>Информации там больше, чем в этом руководстве, но она не покрывает различия между браузерами, которые могут влиять на сложные таблицы.</p> -</div> - -<h2 id="Действие_Стилизация_таблицы">Действие: Стилизация таблицы</h2> - -<ol> - <li>Создайте новый HTML документ, <code>doc3.html</code>. Скопируйте и вставьте содержимое отсюда: - - <div style="height: 36em; overflow: auto;"> - <pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <title>Документ примера 3</title> - <link rel="stylesheet" href="style3.css"> - </head> - <body> - <table id="demo-table"> - <caption>Океаны</caption> - <thead> - <tr> - <th></th> - <th>Площадь</th> - <th>Средняя глубина</th> - </tr> - <tr> - <th></th> - <th>млн. км<sup>2</sup></th> - <th>м</th> - </tr> - </thead> - <tbody> - <tr> - <th>Северный Ледовитый</th> - <td>13,000</td> - <td>1,200</td> - </tr> - <tr> - <th>Атлантический</th> - <td>87,000</td> - <td>3,900</td> - </tr> - <tr> - <th>Тихий</th> - <td>180,000</td> - <td>4,000</td> - </tr> - <tr> - <th>Индийский</th> - <td>75,000</td> - <td>3,900</td> - </tr> - <tr> - <th>Южный</th> - <td>20,000</td> - <td>4,500</td> - </tr> - </tbody> - <tfoot> - <tr> - <th>Общая</th> - <td>361,000</td> - <td></td> - </tr> - <tr> - <th>Средняя</th> - <td>72,000</td> - <td>3,800</td> - </tr> - </tfoot> - </table> - </body> -</html> -</pre> - </div> - </li> - <li>Создайте новую таблицу стилей, <code>style3.css</code>. Скопируйте и вставьте содержимое отсюда: - <pre class="brush: css">/*** Style for doc3.html (Tables) ***/ - -#demo-table { - font: 100% sans-serif; - background-color: #efe; - border-collapse: collapse; - empty-cells: show; - border: 1px solid #7a7; -} - -#demo-table > caption { - text-align: left; - font-weight: bold; - font-size: 200%; - border-bottom: .2em solid #4ca; - margin-bottom: .5em; -} - - -/* basic shared rules */ -#demo-table th, -#demo-table td { - text-align: right; - padding-right: .5em; -} - -#demo-table th { - font-weight: bold; - padding-left: .5em; -} - - -/* header */ -#demo-table > thead > tr:first-child > th { - text-align: center; - color: blue; -} - -#demo-table > thead > tr + tr > th { - font-style: italic; - color: gray; -} - -/* fix size of superscript */ -#demo-table sup { - font-size: 75%; -} - -/* body */ -#demo-table td { - background-color: #cef; - padding:.5em .5em .5em 3em; -} - -#demo-table tbody th:after { - content: ":"; -} - - -/* footer */ -#demo-table tfoot { - font-weight: bold; -} - -#demo-table tfoot th { - color: blue; -} - -#demo-table tfoot th:after { - content: ":"; -} - -#demo-table > tfoot td { - background-color: #cee; -} - -#demo-table > tfoot > tr:first-child td { - border-top: .2em solid #7a7; -} -</pre> - </li> - <li>Откройте документ в вашем браузере. Он должен выглядеть наподобие этого: - <table style="background-color: white; border: 2px outset #36b; padding: 1em 6em 1em 1em;"> - <tbody> - <tr> - <td> - <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Океаны</p> - - <div style="border: 1px solid #7a7; background-color: #efe;"> - <table style="background-color: #efe; border-collapse: collapse; font: 100% sens-serif; padding-right: .5em; text-align: right;"> - <tbody> - <tr style="text-align: center; color: blue;"> - <th> </th> - <th>Площадь</th> - <th style="padding-left: .5em; padding-right: .5em;">Средняя глубина</th> - </tr> - <tr style="font-style: italic; color: gray;"> - <th> </th> - <th style="padding-left: .5em; padding-right: .5em;"><sup>млн. км</sup><sup>2</sup></th> - <th style="padding-left: .5em; padding-right: .5em;">м</th> - </tr> - <tr> - <th style="padding-right: .5em;">Северный Ледовитый:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td> - </tr> - <tr> - <th style="padding-right: .5em;">Атлантический:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> - </tr> - <tr> - <th style="padding-right: .5em;">Тихий:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td> - </tr> - <tr> - <th style="padding-right: .5em;">Индийский:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> - </tr> - <tr> - <th style="padding-left: .5em; padding-right: .5em;">Южный:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Общая:</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Средняя:</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> - </tr> - </tbody> - </table> - </div> - </td> - </tr> - </tbody> - </table> - </li> - <li>Сравните правила в таблице стилей с отображенной таблицей, чтобы гарантировать, что вы понимаете действие для каждого правила. Если вы найдете правило, значение которого вы не понимаете, то закомментируйте его и обновите страницу, чтобы посмотреть, что изменилось. Вот несколько заметок об этой таблице: - <ul> - <li>Заголовок находится снаружи рамки таблицы.</li> - <li>Если у вас установлен минимальный размер точки в Опциях, это может повлиять на верхний индекс в km<sup>2</sup>.</li> - <li>Три пустые ячейки. Через две из них позволено показывать фон таблицы. У третьей есть фон и верхняя рамка.</li> - <li>Двоеточия добавлены с помощью таблицы стилей.</li> - </ul> - </li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type">Вызов</div> - -<p>Измените таблицу стилей, чтобы она выглядела, как эта:</p> - -<table style="background-color: white; border: 2px outset #36b; padding: 1em 6em 1em 1em;"> - <tbody> - <tr> - <td> - <div style="border: 1px solid #7a7; background-color: #efe;"> - <table style="background-color: #efe; border-collapse: collapse; font: 100% sens-serif; padding-right: .5em; text-align: right;"> - <tbody> - <tr style="text-align: center; color: blue;"> - <th> - <table style="background-color: #efe; border-collapse: collapse; font: 100% sens-serif; padding-right: .5em; text-align: right;"> - <tbody> - <tr style="text-align: center; color: blue;"> - <th> </th> - <th>Площадь</th> - <th style="padding-left: .5em; padding-right: .5em;">Средняя глубина</th> - </tr> - <tr style="font-style: italic; color: gray;"> - <th> </th> - <th style="padding-left: .5em; padding-right: .5em;"><sup>млн. км</sup><sup>2</sup></th> - <th style="padding-left: .5em; padding-right: .5em;">м</th> - </tr> - <tr> - <th style="padding-right: .5em;">Северный Ледовитый:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td> - </tr> - <tr> - <th style="padding-right: .5em;">Атлантический:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> - </tr> - <tr> - <th style="padding-right: .5em;">Тихий:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td> - </tr> - <tr> - <th style="padding-right: .5em;">Индийский:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> - </tr> - <tr> - <th style="padding-left: .5em; padding-right: .5em;">Южный:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Общая:</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Средняя:</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> - </tr> - </tbody> - </table> - </th> - </tr> - </tbody> - </table> - </div> - - <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Океаны</p> - </td> - </tr> - </tbody> -</table> -</div> - -<p><a href="/ru/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Tables">Посмотреть решение для этой задачи.</a></p> - -<h2 id="Что_дальше">Что дальше?</h2> - -<p>{{nextPage("/ru/docs/Web/Guide/CSS/Getting_Started/Media", "Media")}}Это последняя страница в этом руководстве, которая фокусируется на CSS свойствах и значениях. Для полного обзора свойств и значений, смотрите <a href="http://www.w3.org/TR/CSS21/propidx.html">все свойства таблиц</a> в CSS Спецификациях.</p> - -<p>Следующая страница <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Media" title="en-US/docs/Web/Guide/CSS/Getting_Started/Media">тоже рассматривает</a> цель и структуру CSS таблиц.</p> diff --git a/files/ru/web/guide/css/index.html b/files/ru/web/guide/css/index.html deleted file mode 100644 index 7529234ef5..0000000000 --- a/files/ru/web/guide/css/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Руководство разработчика CSS -slug: Web/Guide/CSS -tags: - - CSS - - Landing - - NeedsTranslation - - TopicStub -translation_of: Learn/CSS -translation_of_original: Web/Guide/CSS ---- -prepare for redirect diff --git a/files/ru/web/guide/events/создание_и_вызов_событий/index.html b/files/ru/web/guide/events/creating_and_triggering_events/index.html index 9e7a8f099b..9e7a8f099b 100644 --- a/files/ru/web/guide/events/создание_и_вызов_событий/index.html +++ b/files/ru/web/guide/events/creating_and_triggering_events/index.html diff --git a/files/ru/web/guide/графика/index.html b/files/ru/web/guide/graphics/index.html index 57dd4238e1..57dd4238e1 100644 --- a/files/ru/web/guide/графика/index.html +++ b/files/ru/web/guide/graphics/index.html diff --git a/files/ru/web/guide/html/html5/constraint_validation/index.html b/files/ru/web/guide/html/html5/constraint_validation/index.html new file mode 100644 index 0000000000..5a5fccec8c --- /dev/null +++ b/files/ru/web/guide/html/html5/constraint_validation/index.html @@ -0,0 +1,343 @@ +--- +title: Constraint validation +slug: HTML/HTML5/Constraint_validation +tags: + - Селекторы +translation_of: Web/Guide/HTML/HTML5/Constraint_validation +--- +<p>Создание веб форм всегда было комплексной задачей. В то время как сама по себе разметка формы - задача не сложная, проверка каждого поля на валидность - сложнее, а информирование юзера о проблеме - может стать головной болью. Стандарт <a href="/en-US/docs/Web/Guide/HTML/HTML5" title="en/HTML/HTML5">HTML5</a> предоставил новые механизмы для форм: были добавлены новые семантические типы для элемента {{ HTMLElement("input") }} и <em>обязательная валидация, </em>чтобы облегчить работу по проверке содержимого формы на стороне браузера. Проще говоря, обычная проверка может быть выполнена без JavaScript, простой установкой новых аттрибутов; более сложные ограничения могут быть реализованы через HTML5 <a href="/en-US/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation_API" title="en/HTML/HTML5/Forms in HTML5#Constraint Validation API">Constraint Validation API</a>.</p> + +<div class="note"><strong>Внимание:</strong> HTML5 Constraint validation не отменяет валидацию <em>на стороне сервера</em>. Несмотря на то что на сервер будет отправляться меньше запросов с невалидными данными, такие запросы всё ещё могут быть отправлены менее "сговорчивыми" браузерами (например, браузерами без поддержки HTML5 и без JavaScript) или плохими парнями, пытающимися взломать ваше веб-приложение. Следовательно, как и в случае с HTML4, вам всё ещё нужно проверять ввод на стороне сервера, таким образом, чтобы это было согласовано с валидацией на стороне клиента.</div> + +<h2 id="Внутренние_и_базовые_ограничения">Внутренние и базовые ограничения</h2> + +<p>В HTML5, базовые ограничения описываются двумя способами:</p> + +<ul> + <li>Использованием наиболее семантически подходящего значения для {{ htmlattrxref("type", "input") }} аттрибута элемента {{ HTMLElement("input") }}, например, выбор типа <span style="font-family: courier new;">email</span> автоматически создаёт ограничение, которое проверяет, является ли значение e-mail адресом.</li> + <li>Установкой значений для аттрибутов, связанных с валидацией, описывая базовые ограничения без использования JavaScript.</li> +</ul> + +<h3 id="Семантические_типы_input-ов">Семантические типы input-ов</h3> + +<p>Аттрибуты, присущие элементам {{ htmlattrxref("type", "input") }}:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Input type</th> + <th scope="col">Определение ограничения</th> + <th scope="col">Связанное с этим нарушение</th> + </tr> + </thead> + <tbody> + <tr> + <td><span style="font-family: courier new;"><input type="URL"></span></td> + <td>Значение должно быть абсолютным URL, одним из: + <ul> + <li>валидным URI (как описано в <a class="external" href="http://www.ietf.org/rfc/rfc3986.txt" title="http://www.ietf.org/rfc/rfc3986.txt">RFC 3986</a>)</li> + <li>валидным IRI, без query сомпонента (как описано в <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li> + <li>валидным IRI, без query сомпонента и без неэкранированных не-ASCII символов (как описано в <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li> + <li>валидным IRI, при условии, что кодировка документа UTF-8 или UTF-16 (как описано в <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li> + </ul> + </td> + <td><strong>Type mismatch </strong>constraint violation</td> + </tr> + <tr> + <td> <span style="font-family: courier new;"><input type="email"></span></td> + <td>Значение должно следовать <a class="external" href="http://www.ietf.org/rfc/std/std68.txt" title="http://www.ietf.org/rfc/std/std68.txt">ABNF</a>: <code>1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code> где: + <ul> + <li><code>atext</code> (описан в <a class="external" href="http://tools.ietf.org/html/rfc5322" title="http://tools.ietf.org/html/rfc5322">RFC 5322</a>) - US-ASCII символ (<span style="font-family: courier new;">A</span> to <span style="font-family: courier new;">Z</span> and <span style="font-family: courier new;">a</span>-<span style="font-family: courier new;">z</span>), цифра (от <span style="font-family: courier new;">0</span> до <span style="font-family: courier new;">9</span>) или один из следующих: <br> + <span style="font-family: courier new;">! # $ % & ' * + - / = ? ` { } | ~ </span>специальных символов,</li> + <li><code>ldh-str</code> (описан в <a class="external" href="http://www.apps.ietf.org/rfc/rfc1034.html#sec-3.5" title="http://www.apps.ietf.org/rfc/rfc1034.html#sec-3.5">RFC 1034</a>) - US-ASCII символы, цифры и "<span style="font-family: courier new;">-"</span>, сгруппированы по словам и разделённые точкой (<span style="font-family: courier new;">.</span>).</li> + </ul> + + <div class="note"><strong>Внимание:</strong> если установлен аттрибут {{ htmlattrxref("multiple", "input") }}, в поле могут быть вписаны несколько e-mail адресов, разделённых запятыми. Если любое из этих условий не выполнено, будет вызвано <strong>Type mismatch </strong>constraint violation.</div> + </td> + <td><strong>Type mismatch </strong>constraint violation</td> + </tr> + </tbody> +</table> + +<p>Следует учесть, что большинство типов input не имеют "нативных" ограничений, а некоторые из них просто лишены валидации или имеют автоматическую корректировку невалидных значений по умолчанию. </p> + +<h3 id="Аттрибуты_валидации">Аттрибуты валидации</h3> + +<p>Ниже перечислены аттрибуты, которые описывают базовые ограничения:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Аттрибут</th> + <th scope="col">Типы input с поддержкой аттрибута</th> + <th scope="col">Возможные значения</th> + <th scope="col">Описание ограничения</th> + <th scope="col">Связанное нарушение</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ htmlattrxref("pattern", "input") }}</td> + <td>text, search, url, tel, email, password</td> + <td><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions" title="https://developer.mozilla.org/en/JavaScript/Guide/Regular_Expressions">Регулярное выражение JavaScript</a> (по стандарту <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" title="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript 5</a>, флаги <code title="">global</code>, <code title="">ignoreCase</code>, и <code title="">multiline</code> <em>отключены)</em></td> + <td>Значение должно подходить под паттерн</td> + <td><strong>Pattern mismatch</strong> constraint violation</td> + </tr> + <tr> + <td rowspan="3">{{ htmlattrxref("min", "input") }}</td> + <td>range, number</td> + <td>Валидное число</td> + <td rowspan="3">Значение поля должно быть больше или равно значению аттрибута</td> + <td rowspan="3"><strong>Underflow</strong> constraint violation</td> + </tr> + <tr> + <td>date, month, week</td> + <td>Валидная дата</td> + </tr> + <tr> + <td>datetime, datetime-local, time</td> + <td>Валидная дата и время</td> + </tr> + <tr> + <td rowspan="3">{{ htmlattrxref("max", "input") }}</td> + <td>range, number</td> + <td>Валидное число</td> + <td rowspan="3">Значение поля должно быть меньше или равно значению аттрибута</td> + <td rowspan="3"><strong>Overflow</strong> constraint violation</td> + </tr> + <tr> + <td>date, month, week</td> + <td>Валидная дата</td> + </tr> + <tr> + <td>datetime, datetime-local, time</td> + <td>Валидная дата и время</td> + </tr> + <tr> + <td>{{ htmlattrxref("required", "input") }}</td> + <td>text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file; also on the {{ HTMLElement("select") }} and {{ HTMLElement("textarea") }} elements</td> + <td><em>никакое</em> так как это Boolean аттрибут: его присутствие означает <em>true</em>, а отсутствие - <em>false</em></td> + <td>Значение должно быть не пустым (если установлено).</td> + <td><strong>Missing</strong> constraint violation</td> + </tr> + <tr> + <td rowspan="5">{{ htmlattrxref("step", "input") }}</td> + <td>date</td> + <td>Целое число дней</td> + <td rowspan="5">Пока в аттрибут <code>step</code> не установлен <em>любой</em> литерал, значение может быть <strong>min</strong> + любое число, крастное шагу.</td> + <td rowspan="5"><strong>Step mismatch </strong>constraint violation</td> + </tr> + <tr> + <td>month</td> + <td>Целое число месяцев</td> + </tr> + <tr> + <td>week</td> + <td>Целое число недель</td> + </tr> + <tr> + <td>datetime, datetime-local, time</td> + <td>Целое число секунд</td> + </tr> + <tr> + <td>range, number</td> + <td>Целое число</td> + </tr> + <tr> + <td>{{ htmlattrxref("maxlength", "input") }}</td> + <td>text, search, url, tel, email, password; также на элементе {{ HTMLElement("textarea") }}</td> + <td>Длина (целое число)</td> + <td>Количество символов (знаков) не должно превышать значение аттрибута.</td> + <td><strong>Too long</strong> constraint violation</td> + </tr> + </tbody> +</table> + +<h2 id="Процесс_валидации_ограничений"><span class="author-g-by4vjwmiwjiydpj7">Процесс валидации ограничений</span></h2> + +<p>Constraint validation is done through the Constraint Validation API either on a single form element or at the form level, on the {{ HTMLElement("form") }} element itself. The constraint validation is done in the following ways:</p> + +<ul> + <li>By a call to the checkValidity() method of a form-related <a href="/en-US/docs/DOM" title="en/DOM">DOM</a> interface (<code><a href="/en-US/docs/Web/API/HTMLInputElement" title="en/DOM/HTMLInputElement">HTMLInputElement</a></code>, <code><a href="/en-US/docs/Web/API/HTMLSelectElement" title="en/DOM/HTMLSelectElement">HTMLSelectElement</a></code>, <code><a href="/en-US/docs/Web/API/HTMLButtonElement" title="en/DOM/HTMLButtonElement">HTMLButtonElement</a></code> or <code><a href="/en-US/docs/Web/API/HTMLTextAreaElement" title="en/DOM/HTMLTextAreaElement">HTMLTextAreaElement</a></code>), which evaluates the constraints only on this element, allowing a script to get this information. (This is typically done by the user-agent when determining which of the <a href="/en-US/docs/Web/CSS" title="en/CSS">CSS</a> pseudo-classes, {{ Cssxref(":valid") }} or {{ Cssxref(":invalid") }}, applies.)</li> + <li>By a call to the checkValidity() function on the <code><a href="/en-US/docs/Web/API/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a></code> interface, which is called <em>statically validating the constraints</em>.</li> + <li>By submitting the form itself, which is called <em>interactively validating the constraints</em>.</li> +</ul> + +<div class="note"><strong>Note: </strong> + +<ul> + <li>If the {{ htmlattrxref("novalidate", "form") }} attribute is set on the {{ HTMLElement("form") }} element, interactive validation of the constraints doesn't happen.</li> + <li>Calling the send() method on the <a href="/en/DOM/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a> interface doesn't trigger a constraint validation. In other words, this method sends the form data to the server even if doesn't satisfy the constraints.</li> +</ul> +</div> + +<h2 id="Complex_constraints_using_HTML5_Constraint_API"><span class="author-g-by4vjwmiwjiydpj7">Complex constraints using HTML5 Constraint API</span></h2> + +<p><span class="author-g-by4vjwmiwjiydpj7">Using JavaScript and the Constraint API, it is possible to implement more complex constraints, for example, constraints combining several fields, or constraints involving complex calculations.</span></p> + +<p><span class="author-g-by4vjwmiwjiydpj7">Basically, the idea is to trigger JavaScript on some form field event (like <strong>onchange</strong>) to calculate whether the constraint is violated, and then to use the method <code><em>field</em>.setCustomValidity()</code> to set the result of the validation: an empty string means the constraint is satisfied, and any other string means there is an error and this string is the error message to display to the user.</span></p> + +<h3 id="Constraint_combining_several_fields_Postal_code_validation">Constraint combining several fields: Postal code validation</h3> + +<p>The postal code format varies from one country to another. Not only do most countries allow an optional prefix with the country code (like <code>D-</code> in Germany, <code>F- </code> in France or Switzerland), but some countries have postal codes with only a fixed number of digits; others, like the UK, have more complex structures, allowing letters at some specific positions.</p> + +<div class="note"> +<p><strong>Note: </strong>This is not a comprehensive postal code validation library, but rather a demonstration of the key concepts. </p> +</div> + +<p><span style="line-height: 1.5;">As an example, we will add a script checking the constraint validation for this simple form:</span></p> + +<pre class="brush: html"><form> + <label for="ZIP">ZIP : </label> + <input type="text" id="ZIP"> + <label for="Country">Country : </label> + <select id="Country"> + <option value="ch">Switzerland</option> + <option value="fr">France</option> + <option value="de">Germany</option> + <option value="nl">The Netherlands</option> + </select> + <input type="submit" value="Validate"> +</form></pre> + +<p>This displays the following form: </p> + +<p><label>Postal Code: </label><input> <label>Country: </label><select><option value="ch">Switzerland</option><option value="fr">France</option><option value="de">Germany</option><option value="nl">The Netherlands</option></select></p> + +<p>First, we write a function checking the constraint itself:</p> + +<pre class="brush: js">function checkZIP() { + // For each country, defines the pattern that the ZIP has to follow + var constraints = { + ch : [ '^(CH-)?\\d{4}$', "Switzerland ZIPs must have exactly 4 digits: e.g. CH-1950 or 1950" ], + fr : [ '^(F-)?\\d{5}$' , "France ZIPs must have exactly 5 digits: e.g. F-75012 or 75012" ], + de : [ '^(D-)?\\d{5}$' , "Germany ZIPs must have exactly 5 digits: e.g. D-12345 or 12345" ], + nl : [ '^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$', + "Nederland ZIPs must have exactly 4 digits, followed by 2 letters except SA, SD and SS" ] + }; + + // Read the country id + var country = document.getElementById("Country").value; + + // Get the NPA field + var ZIPField = document.getElementById("ZIP"); + + // Build the constraint checker + var constraint = new RegExp(constraints[country][0], ""); + console.log(constraint); + + + // Check it! + if (constraint.test(ZIPField.value)) { + // The ZIP follows the constraint, we use the ConstraintAPI to tell it + ZIPField.setCustomValidity(""); + } + else { + // The ZIP doesn't follow the constraint, we use the ConstraintAPI to + // give a message about the format required for this country + ZIPField.setCustomValidity(constraints[country][1]); + } +} +</pre> + +<p>Then we link it to the <strong>onchange</strong> event for the {{ HTMLElement("select") }} and the <strong>oninput</strong> event for the {{ HTMLElement("input") }}:</p> + +<pre class="brush: js">window.onload = function () { + document.getElementById("Country").onchange = checkZIP; + document.getElementById("ZIP").oninput = checkZIP; +}</pre> + +<p>You can see a <a href="/@api/deki/files/4744/=constraint.html" title="https://developer.mozilla.org/@api/deki/files/4744/=constraint.html">live example</a> of the postal code validation. </p> + +<h3 id="Limiting_the_size_of_a_file_before_its_upload">Limiting the size of a file before its upload</h3> + +<p>Another common constraint is to limit the size of a file to be uploaded. Checking this on the client side before the file is transmitted to the server requires combining the Constraint API, and especially the field.setCustomValidity() method, with another JavaScript API, here the HTML5 File API.</p> + +<p>Here is the HTML part:</p> + +<pre class="brush: html"><label for="FS">Select a file smaller than 75 kB : </label> +<input type="file" id="FS"></pre> + +<p>This displays:</p> + +<p><label>Select a file smaller than 75 kB : </label> <input></p> + +<p> </p> + +<p>The JavaScript reads the file selected, uses the File.size() method to get its size, compares it to the (hard coded) limit, and calls the Constraint API to inform the browser if there is a violation:</p> + +<pre class="brush: js">function checkFileSize() { + var FS = document.getElementById("FS"); + var files = FS.files; + + // If there is (at least) one file selected + if (files.length > 0) { + if (files[0].size > 75 * 1024) { // Check the constraint + FS.setCustomValidity("The selected file must not be larger than 75 kB"); + return; + } + } + // No custom constraint violation + FS.setCustomValidity(""); +}</pre> + +<p> </p> + +<p>Finally we hook the method with the correct event:</p> + +<pre class="brush: js">window.onload = function () { + document.getElementById("FS").onchange = checkFileSize; +}</pre> + +<p>You can see a <a href="/@api/deki/files/4745/=fileconstraint.html" title="https://developer.mozilla.org/@api/deki/files/4745/=fileconstraint.html">live example</a> of the File size constraint validation.</p> + +<h2 id="Visual_styling_of_constraint_validation"><span class="author-g-by4vjwmiwjiydpj7">Visual styling of constraint validation</span></h2> + +<p>Apart from setting constraints, web developers want to control what messages are displayed to the users and how they are styled.</p> + +<h3 id="Controlling_the_look_of_elements">Controlling the look of elements</h3> + +<p>The look of elements can be controlled via CSS pseudo-classes.</p> + +<h4 id="required_and_optional_CSS_pseudo-classes">:required and :optional CSS pseudo-classes</h4> + +<p>The <a href="/en-US/docs/Web/CSS/:required" title=":required"><code>:required</code></a> and <a href="/en-US/docs/Web/CSS/:optional" title=":optional"><code>:optional</code></a> <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-classes</a> allow writing selectors that match form elements that have the {{ htmlattrxref("required") }} attribute, or that don't have it.</p> + + +<h4 id="-moz-placeholder_CSS_pseudo-class">:-moz-placeholder CSS pseudo-class</h4> + +<p>See <a href="/en-US/docs/Web/CSS/:-moz-placeholder" title="/en-US/docs/Web/CSS/:-moz-placeholder">:-moz-placeholder</a>.</p> + +<h4 id="valid_invalid_CSS_pseudo-classes">:valid :invalid CSS pseudo-classes</h4> + +<p>The <a href="/en-US/docs/Web/CSS/:valid" title="/en-US/docs/Web/CSS/:valid">:valid</a> and <a href="/en-US/docs/Web/CSS/:invalid" title="/en-US/docs/Web/CSS/:invalid?redirectlocale=en-US&redirectslug=CSS%2F%3Ainvalid">:invalid</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="/en-US/docs/Web/CSS/Pseudo-classes?redirectlocale=en-US&redirectslug=CSS%2FPseudo-classes">pseudo-classes</a> are used to represent <input> elements whose content validates and fails to validate respectively according to the input's type setting. These classes allow the user to style valid or invalid form elements to make it easier to identify elements that are either formatted correctly or incorrectly.</p> + +<h4 id="Default_styles">Default styles</h4> + +<h3 id="Controlling_the_text_of_constraints_violation">Controlling the text of constraints violation</h3> + +<h4 id="The_x-moz-errormessage_attribute">The x-moz-errormessage attribute</h4> + +<p>The x-moz-errormessage attribute is a Mozilla extension that allows you to specify the error message to display when a field does not successfully validate.</p> + +<div class="note"> +<p style="margin-left: 40px;">Note: This extension is non-standard.</p> +</div> + +<h4 id="Constraint_API's_element.setCustomValidity()">Constraint API's element.setCustomValidity()</h4> + +<p>The element.setCustomValidity(error) method is used to set a custom error message to be displayed when a form is submitted. The method works by taking a string parameter error. If error is a non-empty string, the method assumes validation was unsuccessful and displays error as an error message. If error is an empty string, the element is considered validated and resets the error message.</p> + +<h4 id="Constraint_API's_ValidityState_object"><span class="author-g-by4vjwmiwjiydpj7">Constraint API's ValidityState object</span></h4> + +<p>The DOM <a href="/en-US/docs/Web/API/ValidityState" title="/en-US/docs/Web/API/ValidityState"><code>ValidityState</code></a> interface represents the <em>validity states</em> that an element can be in, with respect to constraint validation. Together, they help explain why an element's value fails to validate, if it's not valid.</p> + +<h3 id="Examples_of_personalized_styling"><span class="author-g-by4vjwmiwjiydpj7">Examples of personalized styling</span></h3> + +<h3 id="HTML4_fallback"><span class="author-g-by4vjwmiwjiydpj7">HTML4 fallback</span></h3> + +<h4 id="Trivial_fallback"><span class="author-g-by4vjwmiwjiydpj7">Trivial fallback</span></h4> + +<h4 id="JS_fallback"><span class="author-g-by4vjwmiwjiydpj7">JS fallback</span></h4> + +<h2 id="Conclusion"><span class="author-g-by4vjwmiwjiydpj7">Conclusion</span></h2> diff --git a/files/ru/web/guide/html/html5/index.html b/files/ru/web/guide/html/html5/index.html new file mode 100644 index 0000000000..dca2e39993 --- /dev/null +++ b/files/ru/web/guide/html/html5/index.html @@ -0,0 +1,171 @@ +--- +title: HTML5 +slug: HTML/HTML5 +tags: + - HTML5 +translation_of: Web/Guide/HTML/HTML5 +--- +<p><span class="seoSummary"><strong>HTML5</strong> — последняя версия стандарта <a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a>. </span>Термин имеет два определения:</p> + +<ul> + <li>Новая версия <em>языка</em> HTML, с новыми элементами, атрибутами и новым поведением.</li> + <li>Набор технологий, позволяющий создавать разнообразные сайты и Web-приложения.</li> +</ul> + +<p><span class="seoSummary">Эта страница создана в помощь всем разработчикам Open Web и ссылается на множество материалов, сгруппированных по функциям:</span></p> + +<ul> + <li><em>Семантика: </em>позволяет точнее описывать, что из себя представляет ваш контент;</li> + <li><em>Связь:</em> новые способы общения с сервером;</li> + <li><em>Оффлайн и Хранилище:</em> методы, позволяющие сохранять информацию локально на стороне клиента;</li> + <li><em>Мультимедиа:</em>создание и взаимодействие с видео и звуком;</li> + <li><em>2D/3D Графика и эффекты:</em> способы значительно разнообразить представление;</li> + <li><em>Доступ к устройствам:</em> использование разных устройств для ввода и вывода информации;</li> + <li><em>Стилизация:</em> создание изощренных и совершенных тем.</li> +</ul> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 id="СЕМАНТИКА" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">СЕМАНТИКА</h2> + + <dl> + <dt><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Секции и контуры в HTML5</a></dt> + <dd>Контурные и секционные элементы в HTML5: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} and {{ HTMLElement("hgroup") }}.</dd> + <dt><a href="/ru/docs/HTML/%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Использование HTML5 audio и video</a></dt> + <dd>{{ HTMLElement("audio") }} и {{ HTMLElement("video") }} элементы вставляют и позволяют управлять мультимедиа контентом.</dd> + <dt><a href="/en-US/docs/HTML/Forms_in_HTML" title="Forms in HTML5">Формы в HTML5</a></dt> + <dd>Взгляд на улучшение форм в HTML5: API валидации, несколько новых атрибутов, новые значения для аттрибута {{ htmlattrxref("type", "input") }} тега {{ HTMLElement("input") }} и новый элемент {{ HTMLElement("output") }}.</dd> + <dt>Новые семантические элементы</dt> + <dd>Кроме секций, медиа и форм, множество новых тегов, такие как {{ HTMLElement("mark") }}, {{ HTMLElement("figure") }}, {{ HTMLElement("figcaption") }}, {{ HTMLElement("data") }}, {{ HTMLElement("time") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }} и {{ HTMLElement("meter") }}, увеличено количество <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="/en-US/docs/HTML/HTML5/HTML5_element_list">валидных HTML5 элементов</a>.</dd> + <dt>Улучшение {{HTMLElement("iframe")}}</dt> + <dd>Использование атрубутов {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, and {{htmlattrxref("srcdoc", "iframe") }}, разработчики могут задать нужный уровень безопасности и осуществивить рендеринг тега {{HTMLElement("iframe")}}.</dd> + <dt><a href="/en-US/docs/MathML" title="/en-US/docs/MathML">MathML</a></dt> + <dd>Позволяет вставлять математические формулы.</dd> + <dt><a href="/ru/docs/HTML/HTML5/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML5" title="/en-US/docs/HTML/HTML5/Introduction_to_HTML5">Введение в HTML5</a></dt> + <dd>Эта статья знакомит вас с тем, как указать на то, что вы используете HTML5 в вашем веб-дизайне или веб-приложении.</dd> + <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5-совместимый парсер</a></dt> + <dd>Анализатор, который превращает байты HTML документа в DOM, был расширен и точно определяет поведение, чтобы даже в случае неверного HTML, исход был предсказуемым и одинаков во всех HTML5-совместимых браузерах.</dd> + <dt></dt> + </dl> + + <h2 id="СВЯЗЬ" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">СВЯЗЬ</h2> + + <dl> + <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt> + <dd>Позволяет создать постоянное соединение между страницей и сервером и обмениваться данными через него.</dd> + <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="/en-US/docs/Server-sent_events/Using_server-sent_events">Server-sent события</a></dt> + <dd>Позволяет серверу отправлять события клиенту, а не по классической парадигме, где сервер может передавать данные только в ответ на запрос клиента.</dd> + <dt><a href="/en-US/docs/WebRTC" title="/en-US/WebRTC">WebRTC</a></dt> + <dd>Эта технология, где RTC создает возможость общения в реальном времени, позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешний приложений.</dd> + </dl> + + <h2 id="ОФФЛАЙН_И_ХРАНИЛИЩЕ" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">ОФФЛАЙН И ХРАНИЛИЩЕ</h2> + + <dl> + <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Оффлайн ресурсы: кеш приложения</a></dt> + <dd>Firefox полностью поддерживает спецификацию HTML5 по оффлайн ресурсам. Другие браузеры также имеют поддержку спецификации на должном уровне</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt> + <dd>Firefox 3 поддерживает WHATWG online и offline события, которые позволяют приложениям и расширениям обнаружить есть ли активное подключение к Интернет, а также определить, когда соединение портится или улучшается.</dd> + <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG сессионное или постоянное хранилище (aka DOM Storage)</a></dt> + <dd>Постоянное или сессионое храилище позволяет веб-приложениям хранить структурированны данные на стороне клиента.</dd> + <dt><a href="/en-US/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a></dt> + <dd>Веб-стандарт для хранения значительных количеств структурированных данных в браузере и для быстрого их поиска, используя индексы.</dd> + <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Using files from web applications</a></dt> + <dd>Поддержка HTML5 File API была добавлена в Gecko, сделав возможным веб-приложениям иметь доступ к файлам, выбираемых пользователем. Это включает поддержку множества файлов, используя <span style="font-family: monospace;">{{ HTMLElement("input") }} с</span> <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>типом</strong></a> <span style="font-family: courier new;">file</span>, имеющих атрибут <strong><a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple">multiple</a>.</strong> Ещё это <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd> + </dl> + + <h2 id="МУЛЬТИМЕДИА" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">МУЛЬТИМЕДИА</h2> + + <dl> + <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Использование HTML5 audio и video</a></dt> + <dd>{{ HTMLElement("audio") }} и {{ HTMLElement("video") }} элементы вставляют и позволяют управлять мультимедиа контентом.</dd> + <dt><a href="/en-US/docs/WebRTC" title="/en-US/WebRTC">WebRTC</a></dt> + <dd>Эта технология, где RTC создает возможость общения в реальном времени, позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешний приложений.</dd> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="/en-US/docs/DOM/Using_the_Camera_API">Использование Camera API</a></dt> + <dd>Позволяет контролировать, манипулировать и хранить изображения с камеры устройства.</dd> + </dl> + + <h2 id="ГРАФИКА_И_ЭФФЕКТЫ" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">ГРАФИКА И ЭФФЕКТЫ</h2> + + <dl> + <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas Tutorial</a></dt> + <dd><code>Узнайте о элементе {{ HTMLElement("canvas") }}</code> и узнайте, как рисовать графику и другие элементы в Firefox.</dd> + <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 text API для <code><canvas></code></a></dt> + <dd>HTML5 text API сейчас поддерживается в {{ HTMLElement("canvas") }}.</dd> + <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt> + <dd>WebGL приносит 3D в веб, соответстсвует OpenGL ES 2.0, может использоваться в HTML5 через {{ HTMLElement("canvas") }}.</dd> + <dt><a href="/en-US/docs/SVG" title="/en-US/docs/SVG">SVG</a></dt> + <dd>Основанный на XML формат векторных изображений, который может быть непосредственно вставлен в HTML.</dd> + </dl> + + <dl> + <dt></dt> + </dl> + </td> + <td> + <h2 id="производительность_и_интеграция" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">производительность и интеграция</h2> + + <dl> + <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt> + <dd>Позволяет делегировать выполнение JavaScript в фоновые потоки, это позволит предотвратить замедление интерактивных событий.</dd> + <dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Level 2</dt> + <dd>Позволяет извлечь асинхронно некоторые части страницы, что позволяет отобразить динамический контент, изменяющейся время от времени или от действий пользователя. Это технология, лежащая в основе <a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">AJAX</a>.</dd> + <dt>JIT-компилирование движков JavaScript</dt> + <dd>Новое поколение движков JavaScript гораздо более мощных, приводящих к большей производительности.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history">History API</a></dt> + <dd>Позволяет управлять историей браузера. Это особенно полезно страниц, интерактивно загружающих новую информацию.</dd> + <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">contentEditable атрибут: трансформируйте свой сайт в википедию!</a></dt> + <dd>HTML5 стандартизировал атрибут contentEditable. Узнайте больше об этой фиче.</dd> + <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag and drop</a></dt> + <dd>HTML5 drag and drop API позволяет перетаскивать элементы по сайту или на него. Также простейшее API для использования расширениями или иными приложениями.</dd> + <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Управление фокусом в HTML</a></dt> + <dd>Поддержка новый атрибутов HTML5 <code>activeElement</code> and <code>hasFocus</code>.</dd> + <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Обработчики протоколов для Web</a></dt> + <dd><code>Вы можете зарегистровать веб-приложения, как обработчики протоколов, используя метод navigator.registerProtocolHandler()</code>.</dd> + <dt><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="/en-US/docs/DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt> + <dd>Контролирует анимации для обеспечения оптимальной производительности.</dd> + <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="/en-US/docs/DOM/Using_full-screen_mode">Fullscreen API</a></dt> + <dd>Позволяет использовать весь экран для веб-приложения, без отображения UI браузера.</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="/en-US/docs/API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>Позволяет блокировать курсор, так чтобы игры и подобные приложения не теряли фокус, когда указатель достигает предела окна.</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="/en-US/docs/Online_and_offline_events">Online and offline events</a></dt> + <dd>Для того, чтобы построить хорошую оффлайн-совместимые веб-приложения, вы должны знать, когда ваше приложение без сети. Также, вы должны знать, когда ваше приложение снова вернется в сеть.</dd> + </dl> + + <h2 id="доступ_к_устройствам" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">доступ к устройствам</h2> + + <dl> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="/en-US/docs/DOM/Using_the_Camera_API">Использование Camera API</a></dt> + <dd>Позволяет контролировать, манипулировать и хранить изображения с камеры устройства.</dd> + <dt><a href="/en-US/docs/DOM/Touch_events" title="/en-US/docs/DOM/Touch_events">Touch события</a></dt> + <dd>Обрабатывает события, создаваемые нажатиями пользователя по тач скрину.</dd> + <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Геолокация</a></dt> + <dd>Позволяет браузерам получать местоположение пользователя.</dd> + <dt><a href="/en-US/docs/Detecting_device_orientation" title="/en-US/docs/Detecting_device_orientation">Определение ориентации устройства</a></dt> + <dd>Позволяет среагировать, когда устройство, на котором работает браузер, меняет ориентацию. Это может быть использовано в качестве устройства ввода (например, чтобы сделать игры, которые реагируют на положение устройства) или адаптировать компоновку страницы с ориентацией экрана (вертикальная или горизонтальная).</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="/en-US/docs/API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>Позволяет блокировать курсор, так чтобы игры и подобные приложения не теряли фокус, когда указатель достигает предела окна.</dd> + </dl> + + <h2 id="стилизация" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">стилизация</h2> + + <p><a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a> был расширен, чтобы дать возможность стилизировать элементы наиболее оптимальным способом. Его часто называют CSS3, хотя CSS больше не является монолитной спецификацией и различные модули, не все на уровне 3: некоторые на уровне 1, а некоторые на уровне 4, с промежуточными уровнями.</p> + + <dl> + <dt>Новые способы стилизирования фона</dt> + <dd>Новая возможность задать тень элемента, используя {{ cssxref("box-shadow") }} или установление <a href="/en-US/docs/CSS/Multiple_backgrounds" title="/en-US/docs/CSS/Multiple_backgrounds">множественных фонов</a>.</dd> + <dt>Лучшие границы</dt> + <dd>Не только изображения можно использовать для стилизирования границы, используя {{ cssxref("border-image") }} или его длинные формы записи, а скруглить уголки можно свойством {{ cssxref("border-radius") }}.</dd> + <dt>Анимируйте свой стиль</dt> + <dd>Используйте <a href="/en-US/docs/CSS/Using_CSS_transitions" title="/en-US/docs/CSS/Using_CSS_transitions">CSS Переходы</a>, чтобы анимировать изменение состояния элемента или <a href="/en-US/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">CSS Анимации</a> для анимации частей страницы без запуска событий, вы теперь можете контролировать мобильные элементы на вашей странице.</dd> + <dt>Улучшение типографии</dt> + <dd>Авторы могут лучше контролировать типографию. Например, они могут контролировать {{ cssxref("text-overflow") }} и <a href="/en-US/docs/CSS/hyphens" title="/en-US/docs/CSS/hyphens">перенос слов</a>, а также <a href="/en-US/docs/CSS/text-shadow" title="/en-US/docs/CSS/text-shadow">тень текста</a> и его <a href="/en-US/docs/CSS/text-decoration" title="/en-US/docs/SVG/Attribute/text-decoration">декорированиe</a>. Могут загрузить и применить другой шрифт правилом {{ cssxref("@font-face") }}.</dd> + <dt>Новые презентационные макеты</dt> + <dd>Для того, чтобы улучшить гибкость дизайна, добавили: <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="/en-US/docs/CSS/Using_CSS_multi-column_layouts">CSS мульти-колоночный макет</a> и <a href="/en-US/docs/CSS/Flexbox" title="/en-US/docs/CSS/Flexbox">CSS отзывчивый блочный макет</a>.</dd> + </dl> + </td> + </tr> + </tbody> +</table> 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 new file mode 100644 index 0000000000..28b8138f0e --- /dev/null +++ b/files/ru/web/guide/html/html5/introduction_to_html5/index.html @@ -0,0 +1,26 @@ +--- +title: Введение в HTML5 +slug: HTML/HTML5/Введение_в_HTML5 +tags: + - DOCTYPE + - HTML5 + - HTML5 парсер +translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +--- +<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a> - пятая редакция и самая новая версия стандарта HTML. Она предлагает новые возможности, которые предоставляют не только богатую поддержку медиа, но и также расширяет возможности для создания веб-приложений, которые могут взаимодействовать с пользователем, его локальными данными, и серверами проще и эффективнее, чем это было раньше.</p> +<p>Because HTML5 is still being developed, changes to the specifications are inevitable. Therefore, not all of its features are supported by all browsers yet. However, Gecko, and by extension, Firefox, has very good initial support for HTML5, and work continues toward supporting more of its features. Gecko began supporting some HTML5 features in version 1.8.1. You can find a list of all of the HTML5 features that Gecko currently supports on the <a href="/en/HTML/HTML5" title="en/HTML/HTML5">main HTML5 page</a>. For detailed information about multiple browsers' support of HTML5 features, refer to the <a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5">CanIUse</a> website.</p> +<h2 id="Declaring_that_the_document_contains_HTML5_mark-up_with_the_HTML5_doctype">Declaring that the document contains HTML5 mark-up with the HTML5 doctype</h2> +<p>The doctype for HTML5 is very simple. To indicate that your HTML content uses HTML5, simply use:</p> +<pre class="brush:html;"><!DOCTYPE html> +</pre> +<p>Doing so will cause even browsers that don't presently support HTML5 to enter into standards mode, which means that they'll interpret the long-established parts of HTML in an HTML5-compliant way while ignoring the new features of HTML5 they don't support.</p> +<p>This is much simpler than the former doctypes, and shorter, making it easier to remember and reducing the amount of bytes that must be downloaded.</p> +<h2 id="Декларация_кодировки_с_помощью_<meta_charset>">Декларация кодировки с помощью <code><meta charset></code></h2> +<p>The first thing done on a page is usually indicating the character set that is used. In previous versions of HTML, it was done using a very complex {{HTMLElement("meta")}} element. Now, it is very simple:</p> +<pre class="brush:html;"><meta charset="UTF-8"></pre> +<p>Place this right after your {{HTMLElement("head") }}, as some browsers restart the parsing of an HTML document if the declared charset is different from what they had anticipated. Also, if you are not currently using UTF-8, it's recommended that you switch to it in your Web pages, as it simplifies character handling in documents using different scripts.</p> +<p>Note that HTML5 restricts the valid charset to that compatible with ASCII and using at least 8 bits. This was done to tighten security and prevent some types of attacks.</p> +<h2 id="Использование_нового_HTML5_парсера">Использование нового HTML5 парсера</h2> +<p>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 <em>valid</em> 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.</p> +<p>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.</p> +<p>Не волнуйтесь - вам не придется ничего менять на вашем веб-сайте - разработчики веб-браузерах сделали все для вас!</p> diff --git a/files/ru/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html b/files/ru/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html deleted file mode 100644 index f34fe049f5..0000000000 --- a/files/ru/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html +++ /dev/null @@ -1,204 +0,0 @@ ---- -title: Tips for authoring fast-loading HTML pages -slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages -translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages ---- -<p>Эти советы основаны на общих знаниях и экспериментах.</p> - -<p>Оптимизированная веб-страница не только обеспечивает более отзывчивый сайт для ваших посетителей, но также снижает нагрузку на ваши веб-серверы и интернет-соединения. Это может иметь решающее значение для сайтов с большим объемом или сайтов, которые имеют всплеск трафика из-за необычных обстоятельств, таких как последние новости</p> - -<p>Оптимизация производительности загрузки страницы нужна не только для контента, который будет просматриваться узкополосным модемом или посетителями мобильных устройств. Это так же важно для широкополосного контента и может привести к значительным улучшениям даже для ваших посетителей с самыми быстрыми подключениями.</p> - -<h2 id="Tips" name="Tips">Советы</h2> - -<h3 id="Reduce_page_weight" name="Reduce_page_weight">Уменьшайте вес страницы</h3> - -<p>Веб-страницы - безусловно, самый важный фактор в производительности загрузки страницы.</p> - -<p>Уменьшение веса страницы за счет устранения ненужных пробелов и комментариев, широко известна как минимизация, и перемещая встроенный скрипт и CSS во внешние файлы, можно улучшить производительность загрузки с минимальными потребностями в других изменениях в структуре страницы.</p> - -<p>Такие инструменты, как <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> , могут автоматически убирать начальные пробелы и лишние пустые строки из допустимого источника HTML. Другие инструменты могут «сжимать» JavaScript, переформатируя источник или запутывая источник и заменяя длинные идентификаторы на более короткие версии</p> - -<h3 id="Minimize_the_number_of_files" name="Minimize_the_number_of_files">Минимизируйте количество файлов</h3> - -<p>Уменьшение количества файлов, на которые есть ссылки на веб-странице, уменьшает количество HTTP-соединений, необходимых для загрузки страницы, тем самым сокращая время отправки этих запросов и получения их ответов.</p> - -<p>В зависимости от настроек кэша браузера он может отправить запрос с заголовком <code>If-Modified-Since</code> для каждого ссылочного файла, спрашивая, был ли файл изменен с момента последней загрузки. Слишком много времени, затрачиваемое на запрос времени последнего изменения указанных файлов, может задержать первоначальное отображение веб-страницы, так как браузер должен проверить время изменения каждого из этих файлов перед отображением страницы.</p> - -<p>Если вы часто используете фоновые изображения в своем CSS, вы можете уменьшить количество запросов на поиск HTTP, объединив изображения в одно, называемое спрайтом изображения. Затем вы просто применяете одно и то же изображение каждый раз, когда вам это нужно для фона, и соответственно корректируете координаты x / y. Этот метод лучше всего работает с элементами, которые будут иметь ограниченные размеры, и не будет работать для каждого использования фонового изображения. Тем не менее, меньшее количество HTTP-запросов и кэширование одного изображения может помочь сократить время загрузки страницы.</p> - -<h3 id="Используйте_сеть_доставки_(и_дистрибуции)_содержимого_(Content_Delivery_Network_(CDN))"><strong>Используйте сеть доставки (и дистрибуции) содержимого (</strong>Content Delivery Network (CDN)<strong>)</strong></h3> - -<p>Для целей этой статьи CDN - это средство уменьшения физического расстояния между вашим сервером и вашим посетителем. По мере увеличения расстояния между вашим сервером и посетителем время загрузки будет увеличиваться. Предположим, ваш сервер веб-сайта находится в Соединенных Штатах и имеет посетителя из Индии; время загрузки страницы будет намного выше для индийского посетителя по сравнению с посетителем из США.</p> - -<p>CDN - это географически распределенная сеть серверов, которые работают вместе, чтобы сократить расстояние между пользователем и вашим сайтом. CDN хранят кэшированные версии вашего веб-сайта и предоставляют их посетителям через ближайший к пользователю сетевой узел, тем самым снижая задержку</p> - -<p>Дальнейшее чтение:</p> - -<ul> - <li><a href="https://www.incapsula.com/cdn-guide/what-is-cdn-how-it-works.html">Understanding CDNs</a></li> -</ul> - -<h3 id="Reduce_domain_lookups" name="Reduce_domain_lookups">Сократите поиск доменов</h3> - -<p>Поскольку каждый отдельный домен требует времени для поиска DNS, время загрузки страницы будет расти вместе с количеством отдельных доменов, отображаемых в ссылках CSS, а также в JavaScript и изображениях.</p> - -<p>Это не всегда может быть практичным; однако вы всегда должны позаботиться об использовании только минимально необходимого количества разных доменов на своих страницах.</p> - -<h3 id="Cache_reused_content" name="Cache_reused_content">Кэшируйте повторно использованный контент</h3> - -<p>Убедитесь, что любой контент, который может быть кэширован, кэширован и имеет подходящее время истечения.</p> - -<p>В частности, обратите внимание на заголовок <code>Last-Modified</code>. Это позволяет эффективно кэшировать страницы; с помощью этого заголовка агенту пользователя передается информация о файле, который он хочет загрузить, например, когда он был последний раз изменен. Большинство веб-серверов автоматически добавляют заголовок <code>Last-Modified</code> к статическим страницам (напр. <code>.html</code>, <code>.css</code>), на основе даты последнего изменения, хранящейся в файловой системе. С динамическими страницами (напр. <code>.php</code>, <code>.aspx</code>), это, конечно, не может быть сделано, и заголовок не отправляется.</p> - -<p>Так, в частности, для страниц, которые генерируются динамически, небольшое исследование по этой теме полезно. Это может быть несколько сложным, но это сэкономит много запросов страниц на страницах, которые обычно не могут быть кэшированы.</p> - -<p>Больше информации:</p> - -<ol> - <li><a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">HTTP Conditional Get for RSS Hackers</a></li> - <li><a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li> - <li><a class="external" href="http://www.cmlenz.net/archives/2005/05/on-http-last-modified-and-etag">On HTTP Last-Modified and ETag</a></li> -</ol> - -<h3 id="Optimally_order_the_components_of_the_page" name="Optimally_order_the_components_of_the_page">Оптимально размещайте компоненты на странице</h3> - -<p>Сначала загрузите содержимое страницы вместе с любым CSS или JavaScript, которые могут потребоваться для его первоначального отображения, чтобы пользователь получил самый быстрый очевидный ответ во время загрузки страницы. Этот контент, как правило, представляет собой текст, и поэтому может получить выгоду от сжатия текста при передаче, что обеспечивает еще более быстрый отклик для пользователя.</p> - -<p>Любые динамические функции, требующие полной загрузки страницы перед использованием, должны быть изначально отключены, а затем включены только после загрузки страницы. Это приведет к загрузке JavaScript после содержимого страницы, что улучшит общий вид загрузки страницы.</p> - -<h3 id="Reduce_the_number_of_inline_scripts" name="Reduce_the_number_of_inline_scripts">Уменьшайте количество встроенных скриптов</h3> - -<p>Встроенные сценарии могут быть дорогими для загрузки страницы, так как синтаксический анализатор должен предполагать, что встроенный сценарий может изменить структуру страницы во время анализа. Сокращение использования встроенных сценариев в целом и сокращение использования <code>document.write()</code> для вывода контента, в частности, может улучшить общую загрузку страницы. Используйте современные методы <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a> для управления содержимым страницы, а не устаревшие подходы, которые основаны на <code>document.write()</code>.</p> - -<h3 id="Use_modern_CSS_and_valid_markup" name="Use_modern_CSS_and_valid_markup">Используйте современный CSS и корректную разметку</h3> - -<p>Использование современного CSS уменьшает количество текста, может уменьшить потребность в (разделительных) изображениях с точки зрения макета и очень часто может заменить изображения стилизованного текста - это «стоит» намного дороже, чем эквивалентный текст и CSS.</p> - -<p>Использование корректной разметки имеет следующие преимущества. Во-первых, браузерам не нужно выполнять исправление ошибок при разборе HTML (это помимо философской проблемы: разрешить ли изменение формата при вводе пользователем, а затем программно «исправить» или нормализовать его; или вместо этого обеспечить строгий формат ввода без допусков).</p> - -<p>Кроме того, корректная разметка позволяет спокойно использовать другие инструменты, которые могут предварительно обрабатывать ваши веб-страницы. Например, <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> может удалить пробелы и необязательные конечные теги; однако он откажется запускать страницу с серьезными ошибками разметки</p> - -<h3 id="Chunk_your_content" name="Chunk_your_content">Разделяйте ваш контент</h3> - -<p>Использование таблиц для вёрстки макетов устаревший метод, который не должен больше использоваться. Вместо этого для создания макетов нужно использовать <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">positioning</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>, или <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">grids</a>.</p> - -<p>Таблицы по-прежнему считаются допустимой разметкой, но их следует использовать для отображения табличных данных. Чтобы браузер быстрее отображал вашу страницу, вам следует избегать вложения таблиц.</p> - -<p>Вместо глубоко вложенных таблиц, как в:</p> - -<pre><TABLE> - <TABLE> - <TABLE> - ... - </TABLE> - </TABLE> -</TABLE></pre> - -<p>используйте невложенные таблицы как показано (или div'ы)</p> - -<pre><TABLE>...</TABLE> -<TABLE>...</TABLE> -<TABLE>...</TABLE> -</pre> - -<p>Смотри также: <a class="external" href="http://www.w3.org/TR/css3-multicol/" title="http://www.w3.org/TR/css3-multicol/">CSS3 Multi-column Layout Spec</a> и <a class="external" href="http://www.w3.org/TR/css3-flexbox/" title="http://www.w3.org/TR/css3-flexbox/">CSS3 Flexible Box Layout</a></p> - -<h3 id="Сокращайте_и_сжимайте_активы_SVG">Сокращайте и сжимайте активы SVG</h3> - -<p>SVG, создаваемый большинством графических приложений, часто содержит ненужные метаданные, которые можно удалить. Настройте свои сервера, примените сжатие gzip для ресурсов SVG</p> - -<h3 id="Сокращайте_и_сжимайте_ваши_изображения">Сокращайте и сжимайте ваши изображения</h3> - -<p>Большие изображения приводят к тому, что загрузка страницы занимает больше времени. Рассмотрите возможность сжатия ваших изображений перед добавлением их на свою страницу. Есть онлайн-инструменты, такие как <a href="https://compressjpeg.com/">Compress Jpeg</a>, <a href="https://tinypng.com">Tiny PNG</a> и многие другие, доступны онлайн. Вы можете использовать офлайн-инструменты, такие как фотошоп и другие.</p> - -<h3 id="Specify_sizes_for_images_and_tables" name="Specify_sizes_for_images_and_tables">Указывайте размеры для изображений и таблиц </h3> - -<p>Если браузер может немедленно определить высоту и/или ширину ваших изображений и таблиц, он сможет отображать веб-страницу без необходимости переформатировать содержимое. Это не только ускоряет отображение страницы, но и предотвращает раздражающие изменения в макете страницы после завершения загрузки страницы. По этой причине <code>height</code> и <code>width</code> должны быть указаны для изображений всегда, когда это возможно.</p> - -<p>Таблицы должны использовать CSS селектор: комбинация свойств</p> - -<pre> table-layout: fixed; -</pre> - -<p>и должны указывать ширину колонок используя HTML теги <code>COL</code> и <code>COLGROUP</code></p> - -<h3 id="Choose_your_user-agent_requirements_wisely" name="Choose_your_user-agent_requirements_wisely">Мудро выбирайте требования к пользовательскому агенту</h3> - -<p>Чтобы добиться наибольших улучшений в дизайне страниц, убедитесь, что для проектов указаны разумные требования к пользовательским агентам. Не требуйте, чтобы ваш контент казался идеальным во всех браузерах, особенно в устаревших.</p> - -<p>В идеале ваши базовые минимальные требования должны основываться на рассмотрении современных браузеров, поддерживающих соответствующие стандарты.Это может включать: Firefox 3.6+ на любой платформе, Internet Explorer 8.0+ на Windows, Opera 10+ на Windows, и Safari 4 на Mac OS X.</p> - -<p>Примечание. Несмотря на то, что эти атрибуты очень помогают при первой загрузке страницы, вы должны использовать их, но не предполагать, что они будут работать во всех браузерах. Если вы уже следуете всем рекомендациям JavaScript, вам не нужно менять код.</p> - -<h3 id="Используйте_async_и_defer_если_это_возможно">Используйте async и defer, если это возможно</h3> - -<p>Сделайте сценарии JavaScript такими, чтобы они были совместимы как с async, так и с defer, и по возможности используйте async, особенно если у вас есть несколько тегов script.</p> - -<p>При этом страница может перестать отображаться, пока JavaScript все еще загружается. В противном случае браузер не будет отображать ничего после тегов сценария, которые не имеют этих атрибутов.</p> - -<p>Примечание. Несмотря на то, что эти атрибуты очень помогают при первой загрузке страницы, вы должны использовать их, но не предполагать, что они будут работать во всех браузерах. Если вы уже следуете всем рекомендациям JavaScript, вам не нужно менять код.</p> - -<h2 id="Example_page_structure" name="Example_page_structure">Пример структуры страницы</h2> - -<p>· <code>HTML</code></p> - -<dl> - <dd>· <code>HEAD</code></dd> -</dl> - -<dl> - <dd> - <dl> - <dd>· <code>LINK </code>...<br> - CSS файлы необходимы для отображения веб-страницы. Минимизируйте количество файлов для производительности, сохраняя несвязанные CSS в отдельных файлах для обслуживания.</dd> - </dl> - </dd> -</dl> - -<dl> - <dd> - <dl> - <dd>· <code>SCRIPT </code>...<br> - Файлы JavaScript для функций, необходимых при загрузке страницы, но не для любого DHTML, который может работать только после загрузки страницы</dd> - <dd>Минимизируйте количество файлов для повышения производительности, сохраняя несвязанный JavaScript в отдельных файлах для обслуживания.</dd> - </dl> - </dd> -</dl> - -<dl> - <dd>· <code>BODY</code></dd> - <dd>· Видимое пользователем содержимое страницы небольшими порциями (tables / divs) что можно отобразить, не дожидаясь загрузки полной страницы.</dd> -</dl> - -<dl> - <dd> - <dl> - <dd>· <code>SCRIPT </code>...<br> - Любые сценарии, которые будут использоваться для выполнения DHTML. Сценарий DHTML обычно может запускаться только после полной загрузки страницы и инициализации всех необходимых объектов. Нет необходимости загружать эти скрипты перед содержимым страницы. Это только замедляет первоначальный вид загрузки страницы.</dd> - <dd>Минимизируйте количество файлов для повышения производительности, сохраняя несвязанный JavaScript в отдельных файлах для обслуживания</dd> - <dd>Если какие-либо изображения используются для эффектов ролловера, вам следует предварительно загрузить их здесь после загрузки содержимого страницы.</dd> - </dl> - </dd> -</dl> - -<h2 id="Related_Links" name="Related_Links">Ссылки по теме</h2> - -<ul> - <li>Книга: <a class="external" href="http://www.websiteoptimization.com/">"Speed Up Your Site" by Andy King</a></li> - <li>Отличная и очень содеражательная статья <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Best Practices for Speeding Up Your Web Site</a> (Yahoo!)</li> - <li>Инструменты для анализа и оптимизации производительности: <a href="https://developers.google.com/speed/pagespeed/" title="https://developers.google.com/speed/pagespeed/">Google PageSpeed Tools</a></li> -</ul> - -<div class="originaldocinfo"> -<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> - -<ul> - <li>Author(s): Bob Clary, Technology Evangelist, Netscape Communications</li> - <li>Last Updated Date: Published 04 Apr 2003</li> - <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li> - <li>Note: This reprinted article was originally part of the DevEdge site.</li> -</ul> -</div> - -<p> </p> diff --git a/files/ru/web/guide/html/using_data_attributes/index.html b/files/ru/web/guide/html/using_data_attributes/index.html deleted file mode 100644 index cef001e25a..0000000000 --- a/files/ru/web/guide/html/using_data_attributes/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Использование data-* атрибутов -slug: Web/Guide/HTML/Using_data_attributes -tags: - - Guide - - HTML -translation_of: Learn/HTML/Howto/Use_data_attributes ---- -<p><a href="/ru/docs/Web/Guide/HTML/HTML5">HTML5</a> спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определённое значение. <a href="/ru/docs/Web/HTML/Global_attributes#data-*"><code>data-*</code> атрибуты</a> позволяют хранить дополнительную информацию в стандартных элементах HTML, без хаков вроде нестандартных атрибутов, лишних DOM-свойств или {{domxref("Node.setUserData()")}}.</p> - -<h2 id="Синтаксис_HTML">Синтаксис HTML</h2> - -<p>Синтаксис прост — любой атрибут, чьё имя начинается с <code>data-</code>, является <code>data-*</code> атрибутом. Предположим у нас имеется статья и мы хотим сохранить дополнительную информацию без визуального представления. Для этого можно использовать <code>data</code>-атрибуты:</p> - -<pre class="brush: html"><article - id="electriccars" - data-columns="3" - data-index-number="12314" - data-parent="cars"> -... -</article></pre> - -<h2 id="Доступ_в_JavaScript">Доступ в JavaScript</h2> - -<p>Чтение <code>data-</code>атрибутов в <a href="/ru/docs/Web/JavaScript">JavaScript</a> осуществляется также просто. Для этого можно использовать метод {{domxref("Element.getAttribute", "getAttribute()")}} с параметром, равным полному имени атрибута. Но есть и более простой способ, используя объект {{domxref("HTMLElement.dataset", "dataset")}}.</p> - -<p>Чтобы получить <code>data</code>-атрибут можно взять свойство объекта <code>dataset</code> с именем, равным части имени атрибута после <code>data-</code> (обратите внимание, что дефисы в имени преобразуются в camelCase).</p> - -<pre><code>var article = document.getElementById('electriccars'); - -article.dataset.columns // "3" -article.dataset.indexNumber // "12314" -article.dataset.parent // "cars"</code></pre> - -<p>Каждое свойство является строкой и может быть прочитано и записано. В приведённом выше примере выполнение кода <code>article.dataset.columns = 5</code> приведёт к тому, что новое значение атрибута станет равным <code>"5"</code>.</p> - -<h2 id="Доступ_в_CSS">Доступ в CSS</h2> - -<p>Заметим, что <code>data</code>-атрибуты являются обычными HTML-аттрибутами, к которым можно получить доступ в <a href="/ru/docs/Web/CSS">CSS</a>. Например, чтобы показать родительские данные о статье можно использовать <a href="/ru/docs/Web/CSS/content">генерируемый контент</a> и CSS функцию {{cssxref("attr")}}:</p> - -<pre class="brush: css">article::before { - content: attr(data-parent); -}</pre> - -<p>Также можно использовать <a href="/ru/docs/Web/CSS/Attribute_selectors">селекторы атрибутов </a>в CSS для изменения стилей в соответствии с данным:</p> - -<pre class="brush: css">article[data-columns='3']{ - width: 400px; -} -article[data-columns='4']{ - width: 600px; -}</pre> - -<p>Увидеть как это работает можно <a href="https://jsbin.com/ujiday/2/edit">в примере на JSBin</a>.</p> - -<p><code>Data</code>-аттрибуты также могут использоваться для хранения информации, которая постоянно изменяется, например, счёт в игре. Используя CSS селекторы и возможности JavaScript можно создавать некоторые изящные эффекты, без необходимости писать свои функции отображения. Посмотрите <a href="https://www.youtube.com/watch?v=On_WyUB1gOk">скринкаст</a> чтобы увидеть больше примеров использующих сгенерированный контент и переходы на CSS. <a href="https://jsbin.com/atawaz/3/edit">Пример кода из скринкаста можно также посмотреть на JSBin</a>.</p> - -<h2 id="Проблемы">Проблемы</h2> - -<p>Не храните данные, которые должны быть видимы и доступны в <code>data</code>-атрибутах. Дело в том, что вспомогательная техника (assistive technology) может не получить к ним доступ. В дополнение, поисковые роботы не индексируют данные, содержащиеся в <code>data</code>-атрибутах.</p> - -<p>Печально, что всё простое и полезное в этой жизни не достаётся бесплатно. Internet Explorer 11+ поддерживает этот стандарт, но все более ранние версии <a href="https://caniuse.com/#feat=dataset">не поддерживают <code>dataset</code></a>. Для поддержки IE 10 и более ранних версий получение доступа к <code>data</code>-атрибутам необходимо осуществлять через {{domxref("Element.getAttribute", "getAttribute()")}}. Также, <a href="https://jsperf.com/data-dataset">производительность чтения <code>data-</code>атрибутов</a> по сравнению с хранением этих данных в хранилище данных JS значительно хуже. Использование <code>dataset</code> ещё медленнее, чем чтение данных с <code>getAttribute()</code>.</p> - -<p>Тем не менее, для пользовательских метаданных, связанных с элементами, <code>data-</code>атрибуты являются отличным решением.</p> - -<h2 id="Поддержка_в_браузерах">Поддержка в браузерах</h2> - -<table class="standard-table"> - <caption>caniuse</caption> - <thead> - <tr> - <th scope="col"> - <h4 id="IE">IE</h4> - </th> - <th scope="col"> - <h4 id="Edge">Edge</h4> - </th> - <th scope="col"> - <h4 id="Firefox">Firefox</h4> - </th> - <th scope="col"> - <h4 id="Chrome">Chrome</h4> - </th> - <th scope="col"> - <h4 id="Safari">Safari</h4> - </th> - <th scope="col"> - <h4 id="Opera">Opera</h4> - </th> - <th scope="col"> - <h4 id="iOS_Safari">iOS Safari</h4> - </th> - <th scope="col"> - <h4 id="Opera_Mini*">Opera Mini<sup>*</sup></h4> - </th> - <th scope="col"> - <h4 id="Android_Browser">Android Browser</h4> - </th> - <th scope="col"> - <h4 id="Chrome_for_Android">Chrome for Android</h4> - </th> - </tr> - </thead> - <tbody> - <tr> - <td>11+</td> - <td>14+</td> - <td>52+</td> - <td>49+</td> - <td>10.1+</td> - <td>46+</td> - <td>9.3+</td> - <td>all</td> - <td>4.4+</td> - <td>59+</td> - </tr> - </tbody> -</table> - -<p> </p> - -<p>Тем не менее, для содержимого, которое не надо показывать это является отличным решением.</p> - -<h2 id="См._также">См. также</h2> - -<ul> - <li>This article is adapted from <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">Using data attributes in JavaScript and CSS on hacks.mozilla.org</a>.</li> - <li><a href="https://www.sitepoint.com/use-html5-data-attributes/">How to use HTML5 data attributes</a> (Sitepoint)</li> -</ul> diff --git a/files/ru/web/guide/html/sections_and_outlines_of_an_html5_document/index.html b/files/ru/web/guide/html/using_html_sections_and_outlines/index.html index a6236d9c24..a6236d9c24 100644 --- a/files/ru/web/guide/html/sections_and_outlines_of_an_html5_document/index.html +++ b/files/ru/web/guide/html/using_html_sections_and_outlines/index.html diff --git a/files/ru/web/guide/html/формы_в_html/index.html b/files/ru/web/guide/html/формы_в_html/index.html deleted file mode 100644 index ad5a8bc7e6..0000000000 --- a/files/ru/web/guide/html/формы_в_html/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: Формы в HTML -slug: Web/Guide/HTML/Формы_в_HTML -tags: - - HTML - - HTML5 - - Введение - - Интернет - - Любитель - - Новичок - - Обзор - - Руководство - - Формы -translation_of: Learn/HTML/Forms/HTML5_updates ---- -<p>Элементы и атрибуты форм в <strong>HTML5</strong> предоставляют большие возможности семантической верстки, чем HTML4, а также позволяет отказаться от использования JavaScript и CSS, которое было ранее необходимо для HTML4. Большие возможности в формах HTML5 делают удобным для пользователей отправление информации с различных веб-сайтов. Они также предоставляют эти возможности для тех пользователей, у которых отключена поддержка JavaScript.</p> - -<p><span class="seoSummary">Эта статья описывает изменения в HTML-формах, представленных в HTML5. Для более подробного руководства по использованию формами, просмотрите наше обширное<a href="/ru/docs/Web/Guide/HTML/Forms"> руководство по HTML-формам</a>.</span></p> - -<h2 id="The_input_element" name="The_input_element">Элемент <code><input></code></h2> - -<p>В элементе <code>{{HTMLElement("input")}}</code> появились новые значения для атрибута {{htmlattrxref("type", "input")}}. (Просмотрите справочник {{HTMLElement("input")}} для получения полного списка атрибутов, значений и их использования для этого элемента.)</p> - -<ul> - <li><code>search</code>: Элемент представляет из себя поле для поиска. Переходы строк автоматически удаляются из значения <code>value</code>.</li> - <li><code>tel</code>: Элемент представляет из себя поле для редактирования номера телефона. Переходы строк автоматически удаляются из значения <code>value</code>. Вы можете использовать атрибуты, такие как: {{htmlattrxref("pattern", "input")}} и {{htmlattrxref("maxlength", "input")}}, чтобы запретить ввод неподходящих символов.</li> - <li><code>url</code>: Элемент представляет из себя поле для редактирования <a class="external" href="https://ru.wikipedia.org/wiki/URL" title="http://en.wikipedia.org/wiki/URL">URL</a>. Переходы строк и пробелы автоматически удаляются из значения <code>value</code>.</li> - <li> - <p><code>email</code>: Элемент представляет из себя поле для ввода одного адреса электронной почты. Переходы строк автоматически удаляются из значения <code>value</code>. Может быть предоставлен недействительный адрес эл. почты, но поле ввода запретит отправку формы, если эл. адрес почты не будет соответствовать нормам ABNF.</p> - - <div class="note"><strong>Заметьте:</strong> Если установлен атрибут {{htmlattrxref("multiple", "input")}}, то может быть введено несколько адресов электронной почты, разделенных запятой, но, в данный момент, такая возможность не реализована в Firefox.</div> - </li> -</ul> - -<p>Также, элемент {{HTMLElement("input")}} получил новые атрибуты:</p> - -<ul> - <li>{{htmlattrxref("list", "input")}}: ID элемента {{HTMLElement("datalist")}}, в котором элементы {{HTMLElement("option")}} используются как подсказки для текстового поля.</li> - <li>{{htmlattrxref("pattern", "input")}}: Регулярное выражение, по которому поверяются вводимые данные. Может использоваться в элементе {{htmlattrxref("type", "input")}} со значениями <code>text</code>, <code>tel</code>, <code>search</code>, <code>url</code>, <code>и email</code>.</li> - <li>{{htmlattrxref("form", "input")}}: Строка, указывающая, к какому элементу {{HTMLElement("form")}} принадлежит элемент. Элемент может быть частью только одной формы.</li> - <li>{{htmlattrxref("formmethod", "input")}}: Строка, указывающая метод передачи данных (GET or POST), когда форма отправляется на сервер. Он перекрывает значение атрибута {{htmlattrxref("method", "form")}} элемента {{HTMLElement("form")}}, если установлен. Работает только, если {{htmlattrxref("type", "input")}} является <code>image</code> <code>или submit, </code>и если установлен атрибут {{htmlattrxref("form", "input")}}.</li> - <li>{{htmlattrxref("x-moz-errormessage", "input")}} {{non-standard_inline}}: Строка, указывающая на сообщение об ошибке, которое будет показано, если это поле не пройдет валидацию. Этот атрибут - расширение Mozilla и не является стандартом.</li> -</ul> - -<h2 id="Текстовое_поле">Текстовое поле</h2> - -<p><code><input></code> с атрибутом <code>type="text"</code> определяет однострочное поле для ввода.</p> - -<pre class="brush: html"><form> - Введите свое имя: <input type="text" name="name"> -</form></pre> - -<h2 id="Флажок"><strong style="font-size: 2.142857142857143rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Флажок</strong></h2> - -<p><code><input></code> с атрибутом <code>type="checkbox"</code> определяет флажок.</p> - -<pre class="brush: html"><input type="checkbox" name="chk" value="" checked> Подписаться на рассылку</pre> - -<h2 id="The_form_element" name="The_form_element">Переключатель</h2> - -<p><code><input></code> с атрибутом <code>type="radio"</code> определяет радио кнопку.</p> - -<pre class="brush: html"><form> - <input type="radio" name="animal" value="monkey">Обезьяна<br> - <input type="radio" name="animal" value="cat">Кот<br> - <span style="font-size: 1rem;"><input type="radio" name="</span>animal<span style="font-size: 1rem;">" value="other">Другое -</span></form></pre> - -<h2 id="The_form_element" name="The_form_element"><code>Элемент <form></code></h2> - -<p>Элемент {{HTMLElement("form")}} получил новый атрибут:</p> - -<ul> - <li>{{htmlattrxref("novalidate", "form")}}: Этот атрибут предотвращает валидацию формы перед отправкой.</li> -</ul> - -<h2 id="The_datalist_element" name="The_datalist_element"><code>Элемент <datalist></code></h2> - -<p>Элемент {{HTMLElement("datalist")}} представляет собой список элементов {{HTMLElement("option")}}, который необходимо предложить при вводе поля {{HTMLElement("input")}}.</p> - -<p>Вы можете использовать атрибут {{htmlattrxref("list", "input")}} в элементе {{HTMLElement("input")}}, чтобы связать текстовое поле с элементом {{HTMLElement("datalist")}}.</p> - -<h2 id="The_output_element" name="The_output_element"><code>Элемент <output></code></h2> - -<p>Элемент <code>{{HTMLElement("output")}}</code> представляет собой результат каких-либо вычислений.</p> - -<p>Вы можете использовать атрибут {{htmlattrxref("for", "output")}} для указания связи между элементом <code>{{HTMLElement("output")}}</code> и другими элементами в документе, которые повлияли на расчет (к примеру, поля для ввода параметров). Значением атрибута {{htmlattrxref("for", "output")}} является список ID других элементов, разделенный пробелами.</p> - -<p>{{non-standard_inline}} Gecko 2.0 (but not necessarily other browser engines) supports defining custom validity constraints and error messages for {{HTMLElement("output")}} elements, and therefore applies the {{Cssxref(":invalid")}}, {{Cssxref(":valid")}}, {{Cssxref(":-moz-ui-invalid")}}, and {{Cssxref(":-moz-ui-valid")}} CSS pseudo-classes to them. This can be helpful in situations where the calculated result violates a business rule, but no specific input value does (for example, "The total of percentages must not exceed 100").</p> - -<h2 id="The_placeholder_attribute" name="The_placeholder_attribute">Атрибут placeholder</h2> - -<p>Атрибут {{htmlattrxref("placeholder", "input")}} в элементах <code>{{HTMLElement("input")}}</code> и <code>{{HTMLElement("textarea")}}</code> отображает подсказки для пользователей, которые показывают, что можно ввести в эти поля. Текст в placeholder не должен содержать символов перевода строки или возврата каретки.</p> - -<h2 id="The_autofocus_attribute" name="The_autofocus_attribute">Атрибут autofocus</h2> - -<p>Атрибут {{htmlattrxref("autofocus", "input")}} позволяет указать для элемента формы автоматическое получение фокуса после полной загрузки страницы, если пользователь сам не переместит фокус на другой элемент, например, этот атрибут можно указать для различных полей ввода. Только один элемент в документе должен иметь этот атрибут, который содержит Boolean значение. Этот атрибут может быть установлен в <code>{{HTMLElement("input")}}</code>, <code>{{HTMLElement("button")}}</code>, <code>{{HTMLElement("select")}} </code>и <code>{{HTMLElement("textarea")}}</code> элементах. {{htmlattrxref("autofocus", "input")}} нельзя установить в элементах input c атрибутом type установленным в значение hidden (это означает, что ты не можешь автоматически устанавливать фокус в скрытых полях).</p> - -<h2 id="The_label.control_DOM_property" name="The_label.control_DOM_property">DOM свойство label.control</h2> - -<p>DOM интерфейс <code><a href="/en-US/docs/DOM/HTMLLabelElement" title="DOM/HTMLLabelElement">HTMLLabelElement</a></code> , помимо свойств, относящихся к HTML элементу <code>{{HTMLElement("label")}}</code> , предоставляет дополнительное свойство <strong> control</strong>, возвращающее поле ввода, для которого предназначен <code>{{HTMLElement("label")}}</code>. Оно либо указывается в атрибуте <code>{{htmlattrxref("for", "label")}}</code> , либо является первым вложенным полем ввода.</p> - -<h2 id="Constraint_Validation" name="Constraint_Validation">Constraint Validation</h2> - -<p>HTML5 provides syntax and API items to support client-side validation of forms. While this functionality does not replace server-side validation, which is still necessary for security and data integrity, client-side validation can support a better user experience by giving the user immediate feedback about the input data.</p> - -<p>If the <code>title</code> attribute is set on the {{HTMLElement("input")}} element, its value is used as tooltip. However, if the validation fails, this tooltip text will be replaced with the associated error message. It is possible to customize this error message using the non-standard {{htmlattrxref("x-moz-errormessage")}} attribute or when calling the <code>setCustomValidity()</code> method.</p> - -<pre class="brush: html"><input type="email" title="Please, provide an e-mail" x-moz-errormessage="This is not a valid e-mail"></pre> - -<div class="note"><strong>Note:</strong> Constraint validation is not supported on {{HTMLElement("button")}} elements in a form; to style a button based on the validity of the associated form, use the {{cssxref(":-moz-submit-invalid")}} pseudo-class.</div> - -<h3 id="HTML_Syntax_for_Constraint_Validation" name="HTML_Syntax_for_Constraint_Validation">HTML Syntax for Constraint Validation</h3> - -<p>The following items in HTML5 syntax can be used to specify constraints on form data.</p> - -<ul> - <li>The {{htmlattrxref("required", "input")}} attribute on the {{HTMLElement("input")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}} elements indicates that a value must be supplied. (On the {{HTMLElement("input")}} element, {{htmlattrxref("required", "input")}} applies only in conjunction with certain values of the {{htmlattrxref("type", "input")}} attribute.)</li> - <li>The {{htmlattrxref("pattern", "input")}} attribute on the {{HTMLElement("input")}} element constrains the value to match a specific regular expression.</li> - <li>The {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} attributes of the {{HTMLElement("input")}} element constrain the minimum and maximum values that can be entered.</li> - <li>The {{htmlattrxref("step", "input")}} attribute of the {{HTMLElement("input")}} element (when used in combination with the {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} attributes) constrains the granularity of values that can be entered. A value that does not correspond an allowed value step does not validate.</li> - <li>The {{htmlattrxref("maxlength", "input")}} attribute of the {{HTMLElement("input")}} and {{HTMLElement("textarea")}} elements constrains the maximum number of characters (in Unicode code points) that the user can enter.</li> - <li>The values <code>url</code> and <code>email</code> for the {{htmlattrxref("type", "input")}} constrain the value to being a valid URL or e-mail address, respectively.</li> -</ul> - -<p>In addition, you can prevent constraint validation by specifying the {{htmlattrxref("novalidate", "form")}} attribute on the {{HTMLElement("form")}}, or the {{htmlattrxref("formnovalidate", "button")}} attribute on the {{HTMLElement("button")}} element and on the {{HTMLElement("input")}} element (when {{htmlattrxref("type", "input")}} is <code>submit</code> or <code>image</code>). These attributes indicate that the form is not to be validated when it is submitted.</p> - -<h3 id="Constraint_Validation_API" name="Constraint_Validation_API">Constraint Validation API</h3> - -<p>The following DOM properties and methods related to constraint validation are available to client-side scripts:</p> - -<ul> - <li>On <code><a href="/en-US/docs/DOM/HTMLFormElement" title="DOM/HTMLFormElement">HTMLFormElement</a></code> objects, the <code>checkValidity()</code> method, which returns true if all of this form element's associated elements that are subject to constraint validation satisfy their constraints, and false if any do not.</li> - <li>On <a href="/en-US/docs/HTML/Content_categories#Form-associated" title="HTML/Content Categories#form-associated">form-associated elements</a>: - <ul> - <li><code>willValidate</code> property, which is false if the element has constraints that are not satisfied.</li> - <li><code>validity</code> property, which is a <code><a href="/en-US/docs/DOM/ValidityState" title="DOM/ValidityState Interface">ValidityState</a></code> object representing the validity states that the element is in (i.e., constraint failure or success conditions).</li> - <li><code>validationMessage</code> property, which is a message describing any constraint failures that pertain to the element.</li> - <li><code>checkValidity()</code> method, which returns false if the element fails to satisfy any of its constraints, or true otherwise.</li> - <li><code>setCustomValidity()</code> method, which sets a custom validation message, allowing for constraints to be imposed and validated beyond those that are predefined.</li> - </ul> - </li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/HTML/Forms" title="/en-US/docs/HTML/Forms">HTML Forms Guide</a></li> -</ul> diff --git a/files/ru/web/guide/производительность/index.html b/files/ru/web/guide/performance/index.html index 8b1d2760da..8b1d2760da 100644 --- a/files/ru/web/guide/производительность/index.html +++ b/files/ru/web/guide/performance/index.html diff --git a/files/ru/web/html/cors_settings_attributes/index.html b/files/ru/web/html/attributes/crossorigin/index.html index 686989bb0c..686989bb0c 100644 --- a/files/ru/web/html/cors_settings_attributes/index.html +++ b/files/ru/web/html/attributes/crossorigin/index.html diff --git a/files/ru/web/html/element/кнопка/index.html b/files/ru/web/html/element/button/index.html index ec13035e29..ec13035e29 100644 --- a/files/ru/web/html/element/кнопка/index.html +++ b/files/ru/web/html/element/button/index.html diff --git a/files/ru/web/html/element/element/index.html b/files/ru/web/html/element/element/index.html deleted file mode 100644 index 183d25eb92..0000000000 --- a/files/ru/web/html/element/element/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: <element> -slug: Web/HTML/Element/element -translation_of: Web/HTML/Element/element ---- -<p>{{obsolete_header}}</p> - -<div class="note"> -<p><strong>Заметка:</strong> Этот элемент удален из спецификации. Смотри <a href="http://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0287.html">здесь </a>больше дополнительной информации от редактора спецификации.</p> -</div> - -<h2 id="Summary" name="Summary">Краткая информация</h2> - -<p><strong>HTML <code><element></code> element</strong> <span id="result_box" lang="ru"><span>используется для определения новых пользовательских элементов DOM</span></span>.</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Категория контента</a></th> - <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content">Прозрачный контент</a>.</td> - </tr> - <tr> - <th scope="row">Разрешенный контент</th> - <td>???</td> - </tr> - <tr> - <th scope="row">Недопустимые теги</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row"><span class="short_text" id="result_box" lang="ru"><span>Разрешенные родительские элементы</span></span></th> - <td>???</td> - </tr> - <tr> - <th scope="row">DOM интерфейс</th> - <td>{{domxref("HTMLElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Attributes" name="Attributes">Атрибуты</h2> - -<p>Этот элемент включает <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p> - -<h2 id="Examples" name="Examples">Примеры</h2> - -<p>Текст здесь.</p> - -<pre class="brush: html">Больше текста здесь. -</pre> - -<h2 id="Specifications" name="Specifications">Характеристики</h2> - -<p><code>Элемент <element></code> <span id="result_box" lang="ru"><span>ранее был в черновике спецификации</span></span> <a href="http://w3c.github.io/webcomponents/spec/custom/">Настраеваемых Элементов</a>, но был удален.</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузером</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also" name="See_also">Смотрите также</h2> - -<ul> - <li>Web-компоненты: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("template")}}</li> -</ul> - -<div>{{HTMLRef}}</div> diff --git a/files/ru/web/html/element/ссылка/index.html b/files/ru/web/html/element/link/index.html index ea3f78a615..ea3f78a615 100644 --- a/files/ru/web/html/element/ссылка/index.html +++ b/files/ru/web/html/element/link/index.html diff --git a/files/ru/web/html/global_attributes/dropzone/index.html b/files/ru/web/html/global_attributes/dropzone/index.html deleted file mode 100644 index 19c7d5d01b..0000000000 --- a/files/ru/web/html/global_attributes/dropzone/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: dropzone -slug: Web/HTML/Global_attributes/dropzone -translation_of: Web/HTML/Global_attributes/dropzone ---- -<p>{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</p> - -<p><a href="/en-US/docs/Web/HTML/Global_attributes">Глобальный атрибут</a> <code>dropzone</code> является перечисляемым атрбутом, указывающем, какие типы содержимого могут быть опущены в элементе, используя {{domxref("HTML_Drag_and_Drop_API","HTML Drag and Drop API")}}. Может иметь следующие значения:</p> - -<ul> - <li><code>copy</code>, которая указывает что сброс создает копию перетаскиваемого элемента.</li> - <li><code>move</code>, которое указывает, что перетаскиваемы элемент будет перемещен в новое местоположение.</li> - <li><code>link</code>, которая создает ссылку на перетаскивамые данные.</li> -</ul> - -<h2 id="Спецификации">Спецификации</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарий</th> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Снимок {{SpecName('HTML WHATWG')}}, начальное определение</td> - </tr> - </tbody> -</table> - -<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> - -<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div> - -<p>{{Compat("html.global_attributes.dropzone")}}</p> - -<h2 id="Смотрите_также">Смотрите также</h2> - -<ul> - <li>Все <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</li> -</ul> diff --git a/files/ru/web/html/строчные_элементы/index.html b/files/ru/web/html/inline_elements/index.html index bc89aa392c..bc89aa392c 100644 --- a/files/ru/web/html/строчные_элементы/index.html +++ b/files/ru/web/html/inline_elements/index.html diff --git a/files/ru/web/html/типы_ссылок/index.html b/files/ru/web/html/link_types/index.html index 23386346a7..23386346a7 100644 --- a/files/ru/web/html/типы_ссылок/index.html +++ b/files/ru/web/html/link_types/index.html diff --git a/files/ru/web/html/optimizing_your_pages_for_speculative_parsing/index.html b/files/ru/web/html/optimizing_your_pages_for_speculative_parsing/index.html deleted file mode 100644 index 0b3418772f..0000000000 --- a/files/ru/web/html/optimizing_your_pages_for_speculative_parsing/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Оптимизация Ваших страниц для рискованного парсинга -slug: Web/HTML/Optimizing_Your_Pages_for_Speculative_Parsing -tags: - - HTML - - HTML5 - - Веб-разработка - - Продвинутый -translation_of: Glossary/speculative_parsing ---- -<p>Традиционно, HTML-парсер в браузерах работает на главной ветке и блокируется после тега <code></script></code>, пока скрипт не загрузится и не выполнится. HTML-парсер в Firefox 4 и новее поддерживает рискованный парсинг вне главной ветки. Он продолжает парсить, пока скрипты загружаются и выполняются. В Firefox 3.5 и 3.6 парсер начинает рискованную загрузку скриптов, стилей и изображений, когда он находит их. Однако, в Firefox 4 и новее HTML-парсер также рискованно загружает алгоритм постройки дерева HTML. С одной стороны, когда риск оправдался, нет необходимости в репарсинге части, которая уже была просканирована на скрипты, стили и изображения. С другой стороны, когда риск не оправдался, HTML-парсеру достаётся больше работы.</p> - -<p>Эта статья поможет избежать некоторых проблем, которые замедляют загрузку страницы.</p> - -<h2 id="Делаем_рискованную_загрузку_успешной">Делаем рискованную загрузку успешной</h2> - -<p>Есть только одно правило, чтобы сделать рискованную загрузку скриптов, стилей и изображений успешной:</p> - -<ul> - <li>Если Вы используете элемент <code><base></code>, чтобы заменить основной URI страницы, поместите этот элемент в часть страницы без скриптов. Не добавляйте его с помощью <code>document.write()</code> или <code>document.createElement()</code>.</li> -</ul> - -<h2 id="Как_избежать_перестройки_дерева_страницы">Как избежать перестройки дерева страницы</h2> - -<p>Рискованное построение дерева терпит неудачу в случае, когда функция <code>document.write() </code>изменяет состояния построителя дерева так, что то рискованное состояние после тега <code></script> </code>более не остаётся прежним после того, как весь контент, добавленный через <code>document.write(),</code> будет распарсен. Только несколько необычных применений <code>document.write()</code> вызывают эту проблему. Вот, чего необходимо избегать:</p> - -<ul> - <li>Не пишите незаконченные древа. Вместо <code><script>document.write("<div>");</script></code> лучше написать <code><script>document.write("<div></div>");</script></code>.</li> - <li>Не пишите незаконченные теги. Не стоит писать <code><script>document.write("<div></div");</script></code>.</li> - <li>Не заканчивайте строку возратной кареткой (<code>\r</code>). Вместо <code><script>document.write("Hello World!\r");</script></code> лучше написать <code><script>document.write("Hello World!\n");</script></code>.</li> - <li>Заметьте, что написание законченных тегов может повлиять на другие теги так, что они станут незаконченными. В том числе, <code><script>document.write("<div></div>");</script></code> внутри <code><head></code> будет интерпретировано как <code><script>document.write("</head><body><div></div>");</script></code>, что повлияет на <code><head></code> так, что он станет незаконченным.</li> - <li>Не форматируйте часть таблицы. Вместо <code><table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table></code> лучше написать <code><script>document.write("</code><code><table></code><code><tr><td>Hello World!</td></tr></code><code></table></code><code>");</script></code>.</li> -</ul> diff --git a/files/ru/web/html/ссылки/index.html b/files/ru/web/html/reference/index.html index 285cf4b590..285cf4b590 100644 --- a/files/ru/web/html/ссылки/index.html +++ b/files/ru/web/html/reference/index.html diff --git a/files/ru/web/html/использование_кэширования_приложений/index.html b/files/ru/web/html/using_the_application_cache/index.html index 1b07e6a29d..1b07e6a29d 100644 --- a/files/ru/web/html/использование_кэширования_приложений/index.html +++ b/files/ru/web/html/using_the_application_cache/index.html diff --git a/files/ru/web/html/поддерживаемые_медиа_форматы/index.html b/files/ru/web/html/поддерживаемые_медиа_форматы/index.html deleted file mode 100644 index 9f86b15ff2..0000000000 --- a/files/ru/web/html/поддерживаемые_медиа_форматы/index.html +++ /dev/null @@ -1,517 +0,0 @@ ---- -title: Форматы медиа поддерживаемые HTML audio и video элементами -slug: Web/HTML/Поддерживаемые_медиа_форматы -translation_of: Web/Media/Formats -translation_of_original: Web/HTML/Supported_media_formats ---- -<p><span class="seoSummary">{{ HTMLElement("audio") }} и {{ HTMLElement("video") }} элементы предоставляют поддержку для проигрывания аудио и видео медиа без нужды в плагинах. </span>Формат медиафайла состоит из контейнера, содержащего один или несколько потоков данных, закодированных с использованием формата сжатия, называемого кодеком. Контейнер идентифицируется по расширению файла. Потоки внутри контейнера имеют несколько типов, которые могут включать в себя видео, аудио, данные или титры. Один контейнер (т. е. медиафайл) может содержать несколько потоков одного типа. В аудио- и видео- потоках находятся кодеки. Кодек — сокращенние слов "кодера-декодер" — является алгоритмом сжатия данных в файле. Каждый тип контейнера имеет только определенные кодеки, которые он поддерживает.</p> - -<p>Важно понять, почему в Интернете нужны разные медиаформаты. По разным причинам, выходящим за рамки данной статьи, различные браузеры поддерживают разные медиаформаты. Кроме того, область медиаформатов в Интернете сильно пострадала от патентного права во многих странах, включая США и страны ЕС. (Примечания к патентам в этой статье предоставляются как есть, так и без каких-либо гарантий.) В этой статье рассматриваются наиболее важные для Интернета форматы, включая поддержку в браузерах как мобильных, так и десктопных .</p> - -<p> </p> - -<h3 id="Отображение_медиа">Отображение медиа</h3> - -<p> </p> - -<p>Ниже краткий обзор того, как медиа-элементы отображаются в HTML. Более подробную информацию смотрите в статьях для каждого элемента.</p> - -<p>HTML5 поддерживает несколько элементов мультимедиа. Элементы {{HTMLElement ("video")}} и {{HTMLElement ("audio")}} могут использоваться отдельно или в сочетании с элементом {{HTMLElement ("source")}}. Наш краткий пример отображает это. Хотя элементы <code><video></code> и <code><audio></code> содержат атрибуты src, этот пример использует элемент <code><source></code> для предоставления видеофайлов в нескольких форматах, позволяя каждому браузеру выбирать элемент, который он поддерживает.</p> - -<pre class="brush: html"><video controls> - <source src="somevideo.webm" type="video/webm"> - <source src="somevideo.mp4" type="video/mp4"> - Сожалею; ваш браузер не поддерживает HTML5 видео в WebM с VP8 или MP4 с H.264. - <!-- Ты можешь встроить флеш плеер сюда, для воспроизведения твоего mp4 видео в старых браузерах --> -</video> -</pre> - -<h2 id="WebM">WebM</h2> - -<p>Формат <a class="external" href="http://www.webmproject.org/" title="http://www.webmproject.org/">WebM</a> основан на ограниченной версии формата контейнера <a class="external" href="http://corecodec.com/products/matroska" title="http://corecodec.com/products/matroska">Matroska</a>. Формат всегда использует видео кодек VP8 или VP9 и аудио кодек Vorbis или Opus. WebM нативно поддерживается в десктопной и мобильной версиях Gecko (Firefox), Chrome и Opera. Поддержка формата может быть добавлена в Internet Explorer и Safari (но не на iOS) установкой плагина. Нативная поддержка VP9 WebM в Edge сейчас в стадии разработки.</p> - -<p>Формат WebM, а точнее видеокодек VP8, подвергся претензиям в нарушениях патентов от ряда компаний, отвечающих на требования, MPEG LA о фомировании списка патентов, но при этом <a href="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8">MPEG LA дала согласие на лицензирование этих патентов для Google</a> под лицензией "<a href="http://xiphmont.livejournal.com/59893.html?thread=310261#t310261">perpetual, transferable, royalty free license"</a>. Это фактически означает, что все известные патенты, относящиеся к формату WebM лицензированы для свободного использования всеми.</p> - -<p>Движок Gecko распознаёт следующие типы MIME как файлы WebM:</p> - -<dl> - <dt><code>video/webm</code></dt> - <dd>файл WebM, содержащий видео (а возможно, также и аудио).</dd> - <dt><code>audio/webm</code></dt> - <dd>Файл WebM, содержащий только аудиоданные.</dd> -</dl> - -<h2 id="Ogg_Theora_Vorbis">Ogg Theora Vorbis</h2> - -<p>The Ogg container format with the Theora video codec and the Vorbis audio codec is supported in desktop/mobile Gecko (Firefox), Chrome, and Opera, and support for the format can be added to Safari (but not on iOS) by installing an add-on. The format is not supported in Internet Explorer in any way.</p> - -<p>WebM is generally preferred over Ogg Theora Vorbis when available, because it provides a better compression to quality ratio and is supported in more browsers. The Ogg format can however be used to support older browser versions (for example Firefox 3.5/3.6 don't support WebM, but do support Ogg.)</p> - -<p>The patent situation of Theora is similar to that of WebM.</p> - -<p>You can learn more about creating Ogg media by reading the <a class="external" href="http://en.flossmanuals.net/ogg-theora/" title="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a>.</p> - -<p>Gecko recognizes the following MIME types as Ogg files:</p> - -<dl> - <dt><code>audio/ogg</code></dt> - <dd>An Ogg file containing only audio.</dd> - <dt><code>video/ogg</code></dt> - <dd>An ogg file containing video (and possibly also audio).</dd> - <dt><code>application/ogg</code></dt> - <dd>An Ogg file with unspecified content. Using one of the other two MIME types is preferred, but you can use this if you don't know what the contents of the file are.</dd> -</dl> - -<h2 id="Ogg_Opus">Ogg Opus</h2> - -<p>The Ogg container can also contain audio encoded using the <a class="external" href="http://www.opus-codec.org/" title="http://www.opus-codec.org/">Opus codec</a>. Support for this is available in Gecko 15.0 {{ geckoRelease("15.0") }} and later, on desktop and mobile browsers.</p> - -<h2 id="MP4_H.264_(AAC_or_MP3)">MP4 H.264 (AAC or MP3)</h2> - -<p>The MP4 container format with the H.264 video codec and the AAC audio codec is natively supported by desktop/mobile Internet Explorer, Safari and Chrome, but Chromium and Opera do not support the format. IE and Chrome also support the MP3 audio codec in the MP4 container, but Safari does not. Firefox/Firefox for Android/Firefox OS supports the format in some cases, but only when a third-party decoder is available, and the device hardware can handle the profile used to encode the MP4.</p> - -<div class="note"> -<p><strong>Note</strong>: MP4s encoded with a high profile will not run on lower end hardware, such as low end Firefox OS phones.</p> -</div> - -<p>The MPEG media formats are covered by patents, which are not freely licensed. All the necessary licenses can be bought from MPEG LA. Since H.264 is currently not a royalty free format, it is unfit for the open web platform, according to Mozilla [<a class="external" href="http://shaver.off.net/diary/2010/01/23/html5-video-and-codecs/" title="http://shaver.off.net/diary/2010/01/23/html5-video-and-codecs/">1</a>, <a class="external" href="http://robert.ocallahan.org/2010/01/video-freedom-and-mozilla_23.html" title="http://robert.ocallahan.org/2010/01/video-freedom-and-mozilla_23.html">2</a>], Google [<a class="external" href="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html" title="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html">1</a>, <a class="external" href="http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html" title="http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html">2</a>] and Opera. However, since royalty free formats are not supported by Internet Explorer and Safari, <a href="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/" title="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/">Mozilla has decided to support the format anyway</a>, and Google never fulfilled their promise to <span class="external">remove support for it in Chrome</span>.</p> - -<h2 id="MP3">MP3</h2> - -<p>MP3 аудио формат (.mp3, <code>audio/mpeg</code>; в отличии от выше MP3 аудио в случае MP4 контейнера) поддерживается в <code><audio></code> Firefox/Firefox для Android/Firefox OS когда операционая система обеспечивает MP3 декодер, и Internet Explorer, Chrome и Safari.</p> - -<h2 id="WAVE_PCM">WAVE PCM</h2> - -<p>The WAVE container format, with the PCM audio codec (WAVE codec "1") is supported by desktop/mobile Gecko (Firefox) and Safari. Files in the WAVE container format typically end with the ".wav" extension.</p> - -<div class="note"><strong>Note: </strong>See <a class="external" href="http://www.rfc-editor.org/rfc/rfc2361.txt" title="http://www.rfc-editor.org/rfc/rfc2361.txt">RFC 2361</a> for the WAVE codec registry.</div> - -<p>Gecko recognizes the following MIME types as WAVE audio files:</p> - -<ul> - <li><code>audio/wave</code> (preferred; does not work in Chrome)</li> - <li><code>audio/wav</code></li> - <li><code>audio/x-wav</code></li> - <li><code>audio/x-pn-wav</code></li> -</ul> - -<h2 id="Media_Source_Extensions_(MSE)">Media Source Extensions (MSE)</h2> - -<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html">Media Source Extensions</a> is a W3C working draft that plans to extend {{ domxref("HTMLMediaElement") }} to allow JavaScript to generate media streams for playback. Allowing JavaScript to generate streams facilitates a variety of use cases like adaptive streaming and time shifting live streams. This currently has experimental support in Firefox desktop, and other browsers too.<br> - <br> - For example, <a href="http://msopentech.com/blog/2014/01/03/streaming_video_player/">you could implement MPEG-DASH using JavaScript while offloading the decoding to MSE</a>.</p> - -<div class="note"> -<p><strong>Note</strong>: Time Shifting is the process of consuming a live stream some time after it happened.</p> -</div> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>3.0</td> - <td>{{ CompatGeckoDesktop("1.9.1") }}</td> - <td>9.0</td> - <td>10.50</td> - <td>3.1</td> - </tr> - <tr> - <td><code><audio></code>: PCM in WAVE</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatGeckoDesktop("1.9.1") }}</td> - <td>{{ CompatNo() }}</td> - <td>10.50</td> - <td>3.1</td> - </tr> - <tr> - <td><code><audio></code>: Vorbis in WebM</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatGeckoDesktop("2.0") }}</td> - <td>{{ CompatNo() }}</td> - <td>10.60</td> - <td>3.1 (must be installed separately)</td> - </tr> - <tr> - <td><code><audio></code>: Streaming Vorbis in WebM via <a href="https://w3c.github.io/media-source/">Media Source Extensions (MSE)</a></td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatGeckoDesktop("36.0") }} in Nightly/Dev edition only</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code><audio></code>: Vorbis in Ogg</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatGeckoDesktop("1.9.1") }}</td> - <td>{{ CompatNo() }}</td> - <td>10.50</td> - <td>3.1 (must be installed separately, e.g. <a class="external" href="http://www.xiph.org/quicktime/" title="http://www.xiph.org/quicktime/">XiphQT</a>)</td> - </tr> - <tr> - <td><audio>: MP3</td> - <td>{{ CompatVersionUnknown() }} (Not in Chromium)</td> - <td>Partial (see below)</td> - <td>9.0</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>3.1</td> - </tr> - <tr> - <td><code><audio></code>: MP3 in MP4</td> - <td> - <p>{{ CompatUnknown() }}</p> - </td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><code><audio></code>: AAC in MP4</td> - <td> - <p>{{ CompatVersionUnknown() }} (Main only) (Not in Chromium)</p> - </td> - <td> - <p>Partial (see below)</p> - </td> - <td>9.0</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>3.1</td> - </tr> - <tr> - <td><code><audio></code>: Opus in Ogg</td> - <td>27.0</td> - <td>{{ CompatGeckoDesktop("15.0") }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code><video></code>: VP8 and Vorbis in WebM</td> - <td>6.0</td> - <td>{{ CompatGeckoDesktop("2.0") }}</td> - <td>9.0 (<a class="external" href="http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx" title="http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx">must be installed separately</a>, e.g. <a class="external" href="http://tools.google.com/dlpage/webmmf/" title="http://tools.google.com/dlpage/webmmf/">WebM MF</a>)</td> - <td>10.60</td> - <td>3.1 (must be installed separately, e.g. <a class="external" href="http://perian.org/" title="http://perian.org/">Perian</a>)</td> - </tr> - <tr> - <td><code><video></code>: VP9 and Opus in WebM</td> - <td>29.0</td> - <td>{{ CompatGeckoDesktop("28.0") }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code><video></code>: Streaming VP9 and Opus/VP8 and Opus in WebM via <a href="https://w3c.github.io/media-source/">Media Source Extensions (MSE)</a></td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatGeckoDesktop("36.0") }} in Nightly/Dev edition only</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code><video></code>: Theora and Vorbis in Ogg</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatGeckoDesktop("1.9.1") }}</td> - <td>{{ CompatNo() }}</td> - <td>10.50</td> - <td>3.1 (must be installed separately, e.g. <a class="external" href="http://www.xiph.org/quicktime/" title="http://www.xiph.org/quicktime/">XiphQT</a>)</td> - </tr> - <tr> - <td><code><video></code>: H.264 and MP3 in MP4</td> - <td> - <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p> - </td> - <td>Partial (see below)</td> - <td>9.0</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><code><video></code>: H.264 and AAC in MP4</td> - <td> - <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p> - </td> - <td>Partial (see below)</td> - <td>9.0</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>3.1</td> - </tr> - <tr> - <td>any other format</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>3.1 (plays all formats available via QuickTime)</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Opera Mini</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>2.3</td> - <td>24.0</td> - <td>1.0.1</td> - <td>10.0</td> - <td>11.0</td> - <td>Partial (see below)</td> - <td>3.2</td> - <td>29.0</td> - </tr> - <tr> - <td><code><audio></code>: PCM in WAVE</td> - <td>{{ CompatUnknown() }}</td> - <td>24.0</td> - <td>1.0.1</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>Partial (see below)</td> - <td>3.2</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code><audio></code>: Vorbis in WebM</td> - <td>{{ CompatUnknown() }}</td> - <td>24.0</td> - <td>1.0.1</td> - <td>{{ CompatNo() }}</td> - <td>11.0</td> - <td>Partial (see below)</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code><audio></code>: Streaming Vorbis in WebM via <a href="https://w3c.github.io/media-source/">Media Source Extensions (MSE)</a></td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code><audio></code>: Vorbis in Ogg</td> - <td>{{ CompatUnknown() }}</td> - <td>24.0</td> - <td>1.0.1</td> - <td>{{ CompatNo() }}</td> - <td>11.0</td> - <td>Partial (see below)</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code><audio></code>: MP3</td> - <td>{{ CompatUnknown() }}</td> - <td>Partial (see below)</td> - <td>Partial (see below)</td> - <td>10.0</td> - <td>{{ CompatUnknown() }}</td> - <td>Partial (see below)</td> - <td>3.2</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code><audio></code>: MP3 in MP4</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code><audio></code>: AAC in MP4</td> - <td>{{ CompatUnknown() }}</td> - <td>Partial (see below)</td> - <td>Partial (see below)</td> - <td>10.0</td> - <td>{{ CompatUnknown() }}</td> - <td>Partial (see below)</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code><audio></code>: Opus in Ogg</td> - <td>{{ CompatNo() }}</td> - <td>24.0</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>Partial (see below)</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td><code><video></code>: VP8 and Vorbis in WebM</td> - <td>2.3</td> - <td>24.0</td> - <td>1.0.1</td> - <td>{{ CompatNo() }}</td> - <td>16.0</td> - <td>Partial (see below)</td> - <td>{{ CompatNo() }}</td> - <td>29.0</td> - </tr> - <tr> - <td><code><video></code>: VP9 and Opus in WebM</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code><video></code>: Streaming VP9 and Opus/VP8 and Opus in WebM via <a href="https://w3c.github.io/media-source/">Media Source Extensions (MSE)</a></td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code><video></code>: Theora and Vorbis in Ogg</td> - <td>{{ CompatNo() }}</td> - <td>24.0</td> - <td>1.0.1</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>Partial (see below)</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td><code><video></code>: H.264 and MP3 in MP4</td> - <td>Partial (see below)</td> - <td>24.0</td> - <td>Partial (see below)</td> - <td>10.0</td> - <td>Partial since 11.0, full since 16.0</td> - <td>Partial (see below)</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>29.0</td> - </tr> - <tr> - <td><code><video></code>: H.264 and AAC in MP4</td> - <td>Partial (see below)</td> - <td>24.0</td> - <td>Partial (see below)</td> - <td>10.0</td> - <td>Partial since 11.0, full since 16.0</td> - <td>Partial (see below)</td> - <td>3.2</td> - <td>29.0</td> - </tr> - <tr> - <td>any other format</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<p>Notes:</p> - -<ul> - <li>AAC is only supported in the MP4 container.</li> - <li>Opera Mini itself doesn't support any video or audio, but any video or audio is passed to the device to play if it has support for that format. Opera Mobile also does this with unsupported formats.</li> - <li>To get the default Android browser to play H.264 video, you need to jump through some hoops, as <a href="http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/">explained by Peter Gasston</a>.</li> - <li>In Firefox OS 1.0.1, when detecting <code><video></code> support for different formats, <code>HTMLMediaElement.prototype.canPlayType</code> incorrectly reports <code>true</code> for h.264 video whereas in actual fact h.264 is not supported. In Firefox OS 1.1 this problem has been fixed.</li> - <li>To avoid patent issues, support for MPEG 4, H.264, MP3 and AAC is not built directly into Firefox on desktop and mobile (Android and Firefox OS). Instead it relies on support from the OS or hardware (the hardware also needs to be able to support the profile used to encode the video, in the case of MP4). Firefox desktop supports these formats on the following platforms:</li> -</ul> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Platform</th> - <th scope="col">Firefox version</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825153" title="https://bugzilla.mozilla.org/show_bug.cgi?id=825153">Windows Vista</a>+</td> - <td>22.0+</td> - </tr> - <tr> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=748351" title="https://bugzilla.mozilla.org/show_bug.cgi?id=748351">Android</a></td> - <td>20.0+</td> - </tr> - <tr> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=714408" title="https://bugzilla.mozilla.org/show_bug.cgi?id=714408">Firefox OS</a></td> - <td>15.0+</td> - </tr> - <tr> - <td>Linux</td> - <td> - <p>26.0+ (relies on GStreamer codecs)</p> - </td> - </tr> - <tr> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=851290">OS X 10.7+</a></td> - <td>35.0+</td> - </tr> - </tbody> -</table> - -<ul> - <li><a class="external" href="http://dev.opera.com/articles/view/introduction-html5-video/#codecs" title="http://dev.opera.com/articles/view/introduction-html5-video/#codecs">Video codecs in Opera</a></li> - <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975073%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ff975073%28v=VS.85%29.aspx">Video codecs in Internet Explorer</a></li> - <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975061%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ff975061%28v=vs.85%29.aspx">Audio codecs in Internet Explorer</a></li> - <li><a href="http://www.chromium.org/audio-video" title="http://www.chromium.org/audio-video">Audio & Video codecs in Chrome</a></li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a class="internal" href="/en/Using_HTML5_audio_and_video" title="En/Using audio and video in Firefox">Using audio and video in Firefox</a></li> - <li><a href="http://bluishcoder.co.nz/2013/08/21/html-media-support-in-firefox.html">HTML media support in Firefox</a></li> - <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#media-elements" title="http://www.whatwg.org/specs/web-apps/current-work/#media-elements">Media elements</a> (HTML 5 specification)</li> - <li><code><a class="internal" href="/en/HTML/Element/Video" title="En/HTML/Element/Video">video</a></code></li> - <li><a class="internal" href="/en/HTML/Element/Audio" title="En/HTML/Element/Audio"><code>audio</code></a></li> -</ul> diff --git a/files/ru/web/http/авторизация/index.html b/files/ru/web/http/authentication/index.html index 99228e7633..99228e7633 100644 --- a/files/ru/web/http/авторизация/index.html +++ b/files/ru/web/http/authentication/index.html diff --git a/files/ru/web/http/basics_of_http/identifying_resources_on_the_web_ru/index.html b/files/ru/web/http/basics_of_http/identifying_resources_on_the_web/index.html index 2b52d642b2..2b52d642b2 100644 --- a/files/ru/web/http/basics_of_http/identifying_resources_on_the_web_ru/index.html +++ b/files/ru/web/http/basics_of_http/identifying_resources_on_the_web/index.html diff --git a/files/ru/web/http/кэширование/index.html b/files/ru/web/http/caching/index.html index 8e472eb126..8e472eb126 100644 --- a/files/ru/web/http/кэширование/index.html +++ b/files/ru/web/http/caching/index.html diff --git a/files/ru/web/http/куки/index.html b/files/ru/web/http/cookies/index.html index 154f05cdb0..154f05cdb0 100644 --- a/files/ru/web/http/куки/index.html +++ b/files/ru/web/http/cookies/index.html diff --git a/files/ru/web/http/заголовки/accept-charset/index.html b/files/ru/web/http/headers/accept-charset/index.html index 97fb4f65e4..97fb4f65e4 100644 --- a/files/ru/web/http/заголовки/accept-charset/index.html +++ b/files/ru/web/http/headers/accept-charset/index.html diff --git a/files/ru/web/http/заголовки/accept-language/index.html b/files/ru/web/http/headers/accept-language/index.html index 2e1cf9ae57..2e1cf9ae57 100644 --- a/files/ru/web/http/заголовки/accept-language/index.html +++ b/files/ru/web/http/headers/accept-language/index.html diff --git a/files/ru/web/http/заголовки/accept-patch/index.html b/files/ru/web/http/headers/accept-patch/index.html index 2dfa99d0ac..2dfa99d0ac 100644 --- a/files/ru/web/http/заголовки/accept-patch/index.html +++ b/files/ru/web/http/headers/accept-patch/index.html diff --git a/files/ru/web/http/заголовки/accept-ranges/index.html b/files/ru/web/http/headers/accept-ranges/index.html index 6637d01bbf..6637d01bbf 100644 --- a/files/ru/web/http/заголовки/accept-ranges/index.html +++ b/files/ru/web/http/headers/accept-ranges/index.html diff --git a/files/ru/web/http/заголовки/accept/index.html b/files/ru/web/http/headers/accept/index.html index 69ab96233b..69ab96233b 100644 --- a/files/ru/web/http/заголовки/accept/index.html +++ b/files/ru/web/http/headers/accept/index.html diff --git a/files/ru/web/http/заголовки/access-control-allow-headers/index.html b/files/ru/web/http/headers/access-control-allow-headers/index.html index d392143198..d392143198 100644 --- a/files/ru/web/http/заголовки/access-control-allow-headers/index.html +++ b/files/ru/web/http/headers/access-control-allow-headers/index.html diff --git a/files/ru/web/http/заголовки/access-control-allow-methods/index.html b/files/ru/web/http/headers/access-control-allow-methods/index.html index d3917204bc..d3917204bc 100644 --- a/files/ru/web/http/заголовки/access-control-allow-methods/index.html +++ b/files/ru/web/http/headers/access-control-allow-methods/index.html diff --git a/files/ru/web/http/заголовки/access-control-allow-origin/index.html b/files/ru/web/http/headers/access-control-allow-origin/index.html index 5dc5aa2b7c..5dc5aa2b7c 100644 --- a/files/ru/web/http/заголовки/access-control-allow-origin/index.html +++ b/files/ru/web/http/headers/access-control-allow-origin/index.html diff --git a/files/ru/web/http/заголовки/access-control-max-age/index.html b/files/ru/web/http/headers/access-control-max-age/index.html index 0d5d63b8b0..0d5d63b8b0 100644 --- a/files/ru/web/http/заголовки/access-control-max-age/index.html +++ b/files/ru/web/http/headers/access-control-max-age/index.html diff --git a/files/ru/web/http/заголовки/authorization/index.html b/files/ru/web/http/headers/authorization/index.html index 02679e19f1..02679e19f1 100644 --- a/files/ru/web/http/заголовки/authorization/index.html +++ b/files/ru/web/http/headers/authorization/index.html diff --git a/files/ru/web/http/заголовки/cache-control/index.html b/files/ru/web/http/headers/cache-control/index.html index 4dd0c2de68..4dd0c2de68 100644 --- a/files/ru/web/http/заголовки/cache-control/index.html +++ b/files/ru/web/http/headers/cache-control/index.html diff --git a/files/ru/web/http/заголовки/connection/index.html b/files/ru/web/http/headers/connection/index.html index 48a5a9dce5..48a5a9dce5 100644 --- a/files/ru/web/http/заголовки/connection/index.html +++ b/files/ru/web/http/headers/connection/index.html diff --git a/files/ru/web/http/заголовки/content-disposition/index.html b/files/ru/web/http/headers/content-disposition/index.html index 406cc0720c..406cc0720c 100644 --- a/files/ru/web/http/заголовки/content-disposition/index.html +++ b/files/ru/web/http/headers/content-disposition/index.html diff --git a/files/ru/web/http/заголовки/content-encoding/index.html b/files/ru/web/http/headers/content-encoding/index.html index 0f54a68395..0f54a68395 100644 --- a/files/ru/web/http/заголовки/content-encoding/index.html +++ b/files/ru/web/http/headers/content-encoding/index.html diff --git a/files/ru/web/http/заголовки/content-language/index.html b/files/ru/web/http/headers/content-language/index.html index dfe3007fc9..dfe3007fc9 100644 --- a/files/ru/web/http/заголовки/content-language/index.html +++ b/files/ru/web/http/headers/content-language/index.html diff --git a/files/ru/web/http/заголовки/content-length/index.html b/files/ru/web/http/headers/content-length/index.html index 0b2c087b65..0b2c087b65 100644 --- a/files/ru/web/http/заголовки/content-length/index.html +++ b/files/ru/web/http/headers/content-length/index.html diff --git a/files/ru/web/http/заголовки/content-type/index.html b/files/ru/web/http/headers/content-type/index.html index a6900ebab3..a6900ebab3 100644 --- a/files/ru/web/http/заголовки/content-type/index.html +++ b/files/ru/web/http/headers/content-type/index.html diff --git a/files/ru/web/http/заголовки/date/index.html b/files/ru/web/http/headers/date/index.html index 7dded6ea77..7dded6ea77 100644 --- a/files/ru/web/http/заголовки/date/index.html +++ b/files/ru/web/http/headers/date/index.html diff --git a/files/ru/web/http/заголовки/dnt/index.html b/files/ru/web/http/headers/dnt/index.html index a4e7f56864..a4e7f56864 100644 --- a/files/ru/web/http/заголовки/dnt/index.html +++ b/files/ru/web/http/headers/dnt/index.html diff --git a/files/ru/web/http/заголовки/etag/index.html b/files/ru/web/http/headers/etag/index.html index f64994ee97..f64994ee97 100644 --- a/files/ru/web/http/заголовки/etag/index.html +++ b/files/ru/web/http/headers/etag/index.html diff --git a/files/ru/web/http/заголовки/expect/index.html b/files/ru/web/http/headers/expect/index.html index 80a785befa..80a785befa 100644 --- a/files/ru/web/http/заголовки/expect/index.html +++ b/files/ru/web/http/headers/expect/index.html diff --git a/files/ru/web/http/заголовки/expires/index.html b/files/ru/web/http/headers/expires/index.html index 2d946f0724..2d946f0724 100644 --- a/files/ru/web/http/заголовки/expires/index.html +++ b/files/ru/web/http/headers/expires/index.html diff --git a/files/ru/web/http/заголовки/host/index.html b/files/ru/web/http/headers/host/index.html index 4b99e7233c..4b99e7233c 100644 --- a/files/ru/web/http/заголовки/host/index.html +++ b/files/ru/web/http/headers/host/index.html diff --git a/files/ru/web/http/заголовки/if-match/index.html b/files/ru/web/http/headers/if-match/index.html index e2c403a90f..e2c403a90f 100644 --- a/files/ru/web/http/заголовки/if-match/index.html +++ b/files/ru/web/http/headers/if-match/index.html diff --git a/files/ru/web/http/заголовки/if-modified-since/index.html b/files/ru/web/http/headers/if-modified-since/index.html index 28769b20ae..28769b20ae 100644 --- a/files/ru/web/http/заголовки/if-modified-since/index.html +++ b/files/ru/web/http/headers/if-modified-since/index.html diff --git a/files/ru/web/http/заголовки/if-unmodified-since/index.html b/files/ru/web/http/headers/if-unmodified-since/index.html index c451f97a4d..c451f97a4d 100644 --- a/files/ru/web/http/заголовки/if-unmodified-since/index.html +++ b/files/ru/web/http/headers/if-unmodified-since/index.html diff --git a/files/ru/web/http/заголовки/index.html b/files/ru/web/http/headers/index.html index 41c24031f8..41c24031f8 100644 --- a/files/ru/web/http/заголовки/index.html +++ b/files/ru/web/http/headers/index.html diff --git a/files/ru/web/http/заголовки/last-modified/index.html b/files/ru/web/http/headers/last-modified/index.html index e5d4b34510..e5d4b34510 100644 --- a/files/ru/web/http/заголовки/last-modified/index.html +++ b/files/ru/web/http/headers/last-modified/index.html diff --git a/files/ru/web/http/заголовки/origin/index.html b/files/ru/web/http/headers/origin/index.html index 8b8ad319c7..8b8ad319c7 100644 --- a/files/ru/web/http/заголовки/origin/index.html +++ b/files/ru/web/http/headers/origin/index.html diff --git a/files/ru/web/http/заголовки/pragma/index.html b/files/ru/web/http/headers/pragma/index.html index c53891dd44..c53891dd44 100644 --- a/files/ru/web/http/заголовки/pragma/index.html +++ b/files/ru/web/http/headers/pragma/index.html diff --git a/files/ru/web/http/заголовки/range/index.html b/files/ru/web/http/headers/range/index.html index 62b6d34a86..62b6d34a86 100644 --- a/files/ru/web/http/заголовки/range/index.html +++ b/files/ru/web/http/headers/range/index.html diff --git a/files/ru/web/http/заголовки/referer/index.html b/files/ru/web/http/headers/referer/index.html index 3ff8b8d51e..3ff8b8d51e 100644 --- a/files/ru/web/http/заголовки/referer/index.html +++ b/files/ru/web/http/headers/referer/index.html diff --git a/files/ru/web/http/заголовки/retry-after/index.html b/files/ru/web/http/headers/retry-after/index.html index 7e37acd766..7e37acd766 100644 --- a/files/ru/web/http/заголовки/retry-after/index.html +++ b/files/ru/web/http/headers/retry-after/index.html diff --git a/files/ru/web/http/заголовки/set-cookie/index.html b/files/ru/web/http/headers/set-cookie/index.html index d7822a1790..d7822a1790 100644 --- a/files/ru/web/http/заголовки/set-cookie/index.html +++ b/files/ru/web/http/headers/set-cookie/index.html diff --git a/files/ru/web/http/заголовки/strict-transport-security/index.html b/files/ru/web/http/headers/strict-transport-security/index.html index c63308c97e..c63308c97e 100644 --- a/files/ru/web/http/заголовки/strict-transport-security/index.html +++ b/files/ru/web/http/headers/strict-transport-security/index.html diff --git a/files/ru/web/http/заголовки/vary/index.html b/files/ru/web/http/headers/vary/index.html index a9bf3238e6..a9bf3238e6 100644 --- a/files/ru/web/http/заголовки/vary/index.html +++ b/files/ru/web/http/headers/vary/index.html diff --git a/files/ru/web/http/заголовки/x-content-type-options/index.html b/files/ru/web/http/headers/x-content-type-options/index.html index 7a1762e662..7a1762e662 100644 --- a/files/ru/web/http/заголовки/x-content-type-options/index.html +++ b/files/ru/web/http/headers/x-content-type-options/index.html diff --git a/files/ru/web/http/заголовки/x-forwarded-for/index.html b/files/ru/web/http/headers/x-forwarded-for/index.html index e44d3bd8da..e44d3bd8da 100644 --- a/files/ru/web/http/заголовки/x-forwarded-for/index.html +++ b/files/ru/web/http/headers/x-forwarded-for/index.html diff --git a/files/ru/web/http/заголовки/x-xss-protection/index.html b/files/ru/web/http/headers/x-xss-protection/index.html index 847ec38972..847ec38972 100644 --- a/files/ru/web/http/заголовки/x-xss-protection/index.html +++ b/files/ru/web/http/headers/x-xss-protection/index.html diff --git a/files/ru/web/http/server-side_access_control/index.html b/files/ru/web/http/server-side_access_control/index.html deleted file mode 100644 index c3d53cb730..0000000000 --- a/files/ru/web/http/server-side_access_control/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: Server-Side Access Control (CORS) -slug: Web/HTTP/Server-Side_Access_Control -translation_of: Web/HTTP/CORS -translation_of_original: Web/HTTP/Server-Side_Access_Control ---- -<p>Системы контроля доступа производят идентификацию <a href="http://searchsoftwarequality.techtarget.com/definition/authorization">авторизации</a>, <a href="http://searchsecurity.techtarget.com/definition/authentication">аутентификацию</a>, подтверждение доступа и подотчетность сущностей с помощью учетных данных для входа, включая <a href="http://searchsecurity.techtarget.com/definition/password">пароль</a>, личный идентификационный номер (PINs), <a href="http://searchsecurity.techtarget.com/definition/biometrics">биометрическое</a> сканирование и физический или электронный ключ.</p> - -<p>Контроль доступа --- это техника безопасности, которую можно использовать для регулирования процессом того, кто или что может видеть или использовать ресурсы в вычислительном окружении.</p> - -<p>{{HTTPSidebar}}</p> - -<p>Для меж-сайтовых запросов, произведенных с помощью {{domxref("XMLHttpRequest")}} или <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>, браузеры передают специальные <a href="/en-US/docs/Web/HTTP/Headers">HTTP заголовки</a>. Так же ожидаемо увидеть определенные HTTP заголовки, переданные обратно внутри меж-сайтового ответа. Обзор этих заголовков, включая примеры JavaScript кода, создающего запросы и обрабатывающего ответы от сервера, как и описание каждого из заголовков, <a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS">может быть найден в статье HTTP Access Control (CORS)</a> и должен быть прочитан вместе с данной. Эта статья покрывает обработку <strong>Запросов контроля доступа</strong> и формулировку <strong>Ответов контроля доступа </strong>в PHP. Целевая аудитория для этой статьи --- разработчики серверов и администраторы. Хотя примеры кода, приведенные тут, на PHP, подобная концепция применяется в ASP.net, Perl, Python, Java, etc.; в общем, эти концепции могут быть применены в любом сервером окружении, который обрабатывает HTTP запросы и динамически формирует HTTP ответы.</p> - -<h2 id="Discussion_of_HTTP_headers">Discussion of HTTP headers</h2> - -<p>The article <a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS">covering the HTTP headers used by both clients and servers is here</a>, and should be considered prerequisite reading.</p> - -<h2 id="Working_code_samples">Working code samples</h2> - -<p>The PHP snippets (and the JavaScript invocations to the server) in subsequent sections are taken from <a class="external" href="http://arunranga.com/examples/access-control/">the working code samples posted here.</a> These will work in browsers that implement cross-site {{domxref("XMLHttpRequest")}}.</p> - -<h2 id="Simple_cross-site_requests">Simple cross-site requests</h2> - -<p><a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS#Simple_requests">Simple Access Control Requests</a> are initiated when:</p> - -<ul> - <li>An HTTP/1.1 {{HTTPMethod("GET")}} or a {{HTTPMethod("POST")}} is used as request method. In the case of a POST, the {{HTTPHeader("Content-Type")}} of the request body is one of <code>application/x-www-form-urlencoded</code>, <code>multipart/form-data</code>, or <code>text/plain.</code></li> - <li>No custom headers are sent with the HTTP request (such as <code>X-Modified</code>, etc.)</li> -</ul> - -<p>In this case, responses can be sent back based on some considerations.</p> - -<ul> - <li>If the resource in question is meant to be widely accessed (just like any HTTP resource accessed by GET), then sending back the {{HTTPHeader("Access-Control-Allow-Origin")}}<code>: *</code> header will be sufficient, <strong>unless</strong> the resource needs credentials such as <a href="/en-US/docs/Web/HTTP/Cookies">Cookies</a> and HTTP Authentication information.</li> - <li>If the resource should be kept restricted based on requester domain, <strong>OR</strong> if the resource needs to be accessed with credentials (or sets credentials), then filtering by the request's {{HTTPHeader("Origin")}} header may be necessary, or at least echoing back the requester's <code>Origin</code> (e.g. {{HTTPHeader("Access-Control-Allow-Origin")}}<code>: <a class="external" href="http://arunranga.com" rel="freelink">http://arunranga.com</a></code>). Additionally, the {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> header will have to be sent. This is discussed in a <a class="internal" href="#Credentialed_Requests">subsequent section</a>.</li> -</ul> - -<p>The section on <a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS#Simple_requests">Simple Access Control Requests</a> shows you the header exchanges between client and server. Here is a PHP code segment that handles a Simple Request:</p> - -<pre class="brush: php"><?php - -// We'll be granting access to only the arunranga.com domain -// which we think is safe to access this resource as application/xml - -if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") { - header('Access-Control-Allow-Origin: http://arunranga.com'); - header('Content-type: application/xml'); - readfile('arunerDotNetResource.xml'); -} else { - header('Content-Type: text/html'); - echo "<html>"; - echo "<head>"; - echo " <title>Another Resource</title>"; - echo "</head>"; - echo "<body>", - "<p>This resource behaves two-fold:"; - echo "<ul>", - "<li>If accessed from <code>http://arunranga.com</code> it returns an XML document</li>"; - echo "<li>If accessed from any other origin including from simply typing in the URL into the browser's address bar,"; - echo "you get this HTML document</li>", - "</ul>", - "</body>", - "</html>"; -} -?> -</pre> - -<p>The above checks to see if the {{HTTPHeader("Origin")}} header sent by the browser (obtained through $_SERVER['HTTP_ORIGIN']) matches '<a class="external" href="http://arunranga.com" rel="freelink">http://arunranga.com</a>'. If yes, it returns {{HTTPHeader("Access-Control-Allow-Origin")}}<code>: <a class="external" href="http://arunranga.com" rel="freelink">http://arunranga.com</a></code>. This example can be <a class="external" href="http://arunranga.com/examples/access-control/">seen running here</a>.</p> - -<h2 id="Preflighted_requests">Preflighted requests</h2> - -<p><a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests">Preflighted Access Control Requests</a> occur when:</p> - -<ul> - <li>A method other than {{HTTPMethod("GET")}} or {{HTTPMethod("POST")}} is used, or if {{HTTPMethod("POST")}} is used with a {{HTTPHeader("Content-Type")}} <strong>other than</strong> one of <code>application/x-www-form-urlencoded</code>, <code>multipart/form-data</code>, or <code>text/plain</code>. For instance, if the <code>Content-Type</code> of the <code>POST</code> body is <code>application/xml</code>, a request is preflighted.</li> - <li>A custom header (such as <code>X-PINGARUNER</code>) is sent with the request.</li> -</ul> - -<p>The section on <a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests">Preflighted Access Control Requests</a> shows a header exchange between client and server. A server resource responding to a preflight requests needs to be able to make the following determinations:</p> - -<ul> - <li>Filtration based on {{HTTPHeader("Origin")}}, if any at all.</li> - <li>Response to an {{HTTPMethod("OPTIONS")}} request (which is the preflight request), including sending necessary values with {{HTTPHeader("Access-Control-Allow-Methods")}}, {{HTTPHeader("Access-Control-Allow-Headers")}} (if any additional headers are needed in order for the application to work), and, if credentials are necessary for this resource, {{HTTPHeader("Access-Control-Allow-Credentials")}}.</li> - <li>Response to the actual request, including handling <code>POST</code> data, etc.</li> -</ul> - -<p>Here is an example in PHP of handling a <a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests">preflighted request</a>:</p> - -<pre class="brush: php"><?php - -if($_SERVER['REQUEST_METHOD'] == "GET") { - - header('Content-Type: text/plain'); - echo "This HTTP resource is designed to handle POSTed XML input"; - echo "from arunranga.com and not be retrieved with GET"; - -} elseif($_SERVER['REQUEST_METHOD'] == "OPTIONS") { - // Tell the Client we support invocations from arunranga.com and - // that this preflight holds good for only 20 days - - if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") { - header('Access-Control-Allow-Origin: http://arunranga.com'); - header('Access-Control-Allow-Methods: POST, GET, OPTIONS'); - header('Access-Control-Allow-Headers: X-PINGARUNER'); - header('Access-Control-Max-Age: 1728000'); - header("Content-Length: 0"); - header("Content-Type: text/plain"); - //exit(0); - } else { - header("HTTP/1.1 403 Access Forbidden"); - header("Content-Type: text/plain"); - echo "You cannot repeat this request"; - } - -} elseif($_SERVER['REQUEST_METHOD'] == "POST") { - // Handle POST by first getting the XML POST blob, - // and then doing something to it, and then sending results to the client - - if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") { - $postData = file_get_contents('php://input'); - $document = simplexml_load_string($postData); - - // do something with POST data - - $ping = $_SERVER['HTTP_X_PINGARUNER']; - - header('Access-Control-Allow-Origin: http://arunranga.com'); - header('Content-Type: text/plain'); - echo // some string response after processing - } else { - die("POSTing Only Allowed from arunranga.com"); - } -} else { - die("No Other Methods Allowed"); -} -?> -</pre> - -<p>Note the appropriate headers being sent back in response to the {{HTTPMethod("OPTIONS")}} preflight as well as to the {{HTTPMethod("POST")}} data. One resource thus handles the preflight as well as the actual request. In the response to the <code>OPTIONS</code> request, the server notifies the client that the actual request can indeed be made with the <code>POST</code> method, and header fields such as <code>X-PINGARUNER</code> can be sent with the actual request. This example can be <a class="external" href="http://arunranga.com/examples/access-control/">seen running here</a>.</p> - -<h2 id="Credentialed_requests">Credentialed requests</h2> - -<p><a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS#Requests_with_credentials">Credentialed Access Control Requests</a> – that is, requests that are accompanied by <a href="/en-US/docs/Web/HTTP/Cookies">Cookies</a> or HTTP Authentication information (and which expect Cookies to be sent with responses) – can be either <a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS#Simple_requests">Simple</a> or <a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests">Preflighted</a>, depending on the request methods used.</p> - -<p>In a <a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS#Simple_requests">Simple Request</a> scenario, the request will be sent with Cookies (e.g. if the <code><a href="/en-US/docs/Web/API/XMLHttpRequest/withCredentials">withCredentials</a></code> flag is set on {{domxref("XMLHttpRequest")}}). If the server responds with {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> attached to the credentialed response, then the response is accepted by the client and exposed to web content. In a <a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests">Preflighted Request</a>, the server can respond with <code>Access-Control-Allow-Credentials: true</code> to the <code>OPTIONS</code> request.</p> - -<p>Here is some PHP that handles credentialed requests:</p> - -<pre class="brush: php"><?php - -if($_SERVER['REQUEST_METHOD'] == "GET") { - header('Access-Control-Allow-Origin: http://arunranga.com'); - header('Access-Control-Allow-Credentials: true'); - header('Cache-Control: no-cache'); - header('Pragma: no-cache'); - header('Content-Type: text/plain'); - - // First See if There Is a Cookie - if (!isset($_COOKIE["pageAccess"])) { - setcookie("pageAccess", 1, time()+2592000); - echo 'I do not know you or anyone like you so I am going to'; - echo 'mark you with a Cookie :-)'; - } else { - $accesses = $_COOKIE['pageAccess']; - setcookie('pageAccess', ++$accesses, time()+2592000); - echo 'Hello -- I know you or something a lot like you!'; - echo 'You have been to ', $_SERVER['SERVER_NAME'], '; - echo 'at least ', $accesses-1, ' time(s) before!'; - } -} elseif($_SERVER['REQUEST_METHOD'] == "OPTIONS") { - // Tell the Client this preflight holds good for only 20 days - if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") { - header('Access-Control-Allow-Origin: http://arunranga.com'); - header('Access-Control-Allow-Methods: GET, OPTIONS'); - header('Access-Control-Allow-Credentials: true'); - header('Access-Control-Max-Age: 1728000'); - header("Content-Length: 0"); - header("Content-Type: text/plain"); - } else { - header("HTTP/1.1 403 Access Forbidden"); - header("Content-Type: text/plain"); - echo "You cannot repeat this request"; - } -} else { - die("This HTTP Resource can ONLY be accessed with GET or OPTIONS"); -} -?> -</pre> - -<p>Note that in the case of credentialed requests, the <code>Access-Control-Allow-Origin:</code> header <strong>must not</strong> have a wildcard value of "*". It <strong>must</strong> mention a valid origin domain. The example above can be seen <a class="external" href="http://arunranga.com/examples/access-control/">running here</a>.</p> - -<h2 id="Apache_examples">Apache examples</h2> - -<h3 id="Restrict_access_to_certain_URIs">Restrict access to certain URIs</h3> - -<p>One helpful trick is to use an Apache rewrite, environment variable, and headers to apply <code>Access-Control-Allow-*</code> to certain URIs. This is useful, for example, to constrain cross-origin requests to <code>GET /api(.*).json</code> requests without credentials:</p> - -<pre>RewriteRule ^/api(.*)\.json$ /api$1.json [CORS=True] -Header set Access-Control-Allow-Origin "*" env=CORS -Header set Access-Control-Allow-Methods "GET" env=CORS -Header set Access-Control-Allow-Credentials "false" env=CORS -</pre> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a class="external" href="http://arunranga.com/examples/access-control/">Examples of Access Control in Action</a></li> - <li><a href="https://github.com/jackblackevo/cors-jsonp-sample">Client-Side & Server-Side (Java) sample for Cross-Origin Resource Sharing (CORS)</a></li> - <li><a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP Access Control covering the HTTP headers</a></li> - <li>{{domxref("XMLHttpRequest")}}</li> - <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li> -</ul> diff --git a/files/ru/web/javascript/о_javascript/index.html b/files/ru/web/javascript/about_javascript/index.html index 6d3682cf3a..6d3682cf3a 100644 --- a/files/ru/web/javascript/о_javascript/index.html +++ b/files/ru/web/javascript/about_javascript/index.html diff --git a/files/ru/web/javascript/guide/about/index.html b/files/ru/web/javascript/guide/about/index.html deleted file mode 100644 index 6d58fafb80..0000000000 --- a/files/ru/web/javascript/guide/about/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: Об этом учебнике -slug: Web/JavaScript/Guide/About -translation_of: Web/JavaScript/Guide/Introduction -translation_of_original: Web/JavaScript/Guide/About ---- -<p>JavaScript это кросс-платформенный, объектно-ориентированный интерпретируемый язык программирования. В этом учебнике описано все, что вам нужно знать для того, чтобы начать ипользовать JavaScript.</p> - -<h2 id="Особенности_разных_версий_JavaScript">Особенности разных версий JavaScript</h2> - -<p> </p> - -<ul> - <li><a class="new" href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.2" rel="nofollow">/ru/docs/Web/JavaScript/New_in_JavaScript/1.2</a></li> - <li><a class="new" href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.3" rel="nofollow">/ru/docs/Web/JavaScript/New_in_JavaScript/1.3</a></li> - <li><a class="new" href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.4" rel="nofollow">/ru/docs/Web/JavaScript/New_in_JavaScript/1.4</a></li> - <li><a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.5">Новое в JavaScript 1.5</a></li> - <li><a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.6">Новое в JavaScript 1.6</a></li> - <li><a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.7">Новое в JavaScript 1.7</a></li> - <li><a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.8">New in JavaScript 1.8</a></li> - <li><a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.8.1">Новое в JavaScript 1.8.1</a></li> - <li><a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.8.5">Новое в JavaScript 1.8.5</a></li> -</ul> - -<p> </p> - -<h2 id="Что_вы_уже_должны_знать">Что вы уже должны знать</h2> - -<p>Этот учебник предполагает, что у вас уже имеются некоторые знания и опыт:</p> - -<p>Общее понимание, что такое Интернет и всемирная сеть WWW. Знание языка разметки гипертекста (<a href="/en/HTML" title="en/HTML">HTML</a>) также привествуется.</p> - -<p>Некоторый опыт программирования на C или Visual Basic будет полезен, но не является обязательным.</p> - -<h2 id="Версии_JavaScript">Версии JavaScript</h2> - -<table class="standard-table"> - <caption>Таблица 1. Версии JavaScript и Navigator</caption> - <thead> - <tr> - <th scope="col">Версия JavaScript</th> - <th scope="col">Версия Navigator</th> - </tr> - </thead> - <tbody> - <tr> - <td>JavaScript 1.0</td> - <td>Navigator 2.0</td> - </tr> - <tr> - <td>JavaScript 1.1</td> - <td>Navigator 3.0</td> - </tr> - <tr> - <td>JavaScript 1.2</td> - <td>Navigator 4.0-4.05</td> - </tr> - <tr> - <td>JavaScript 1.3</td> - <td>Navigator 4.06-4.7x</td> - </tr> - <tr> - <td>JavaScript 1.4</td> - <td> </td> - </tr> - <tr> - <td>JavaScript 1.5</td> - <td>Navigator 6.0<br> - Mozilla (браузер с открытым исходным кодом)</td> - </tr> - <tr> - <td>JavaScript 1.6</td> - <td><a href="/en/Firefox_1.5_for_developers" title="en/Firefox_1.5_for_developers">Firefox 1.5</a>, другие, основанные на Mozilla 1.8 продукты</td> - </tr> - <tr> - <td>JavaScript 1.7</td> - <td><a href="/en/Firefox_2_for_developers" title="en/Firefox_2_for_developers">Firefox 2</a>, другие, основанные на Mozilla 1.8.1 продукты</td> - </tr> - <tr> - <td>JavaScript 1.8</td> - <td><a href="/en/Firefox_3_for_developers" title="en/Firefox_3_for_developers">Firefox 3</a>, другие, основанные на Mozilla 1.9 продукты</td> - </tr> - </tbody> -</table> - -<p>Каждая версия Netscape Enterprise Server также поддерживает разные версии JavaScript. Чтобы помочь вам писать скрипты совместимые с разными версиями Enterprise Server, это руководство пользуется аббревиатурой, которая однозначно идентифицирует версию сервера, в которой реализована каждая функциональность.</p> - -<p><br> - <strong style="font-style: inherit; font-weight: 700; line-height: 1.5;"> Таблица 2. Аббревиатуры версий Netscape Enterprise Server</strong></p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Abbreviation</th> - <th scope="col">Enterprise Server version</th> - </tr> - </thead> - <tbody> - <tr> - <td>NES 2.0</td> - <td>Netscape Enterprise Server 2.0</td> - </tr> - <tr> - <td>NES 3.0</td> - <td>Netscape Enterprise Server 3.0</td> - </tr> - </tbody> -</table> - -<h2 id="Где_найти_информацию_по_JavaScript">Где найти информацию по JavaScript</h2> - -<p>Документация JavaScript включает в себя следующие материалы:</p> - -<ul> - <li><a href="/ru/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide">Учебник JavaScript</a> (тот учебник, который вы сейчас читаете) содержит информацию о языке JavaScript и его объектах.</li> - <li><a href="/en/JavaScript/Reference" title="en/JavaScript/Reference">JavaScript Reference</a> содержит справочный материал по языку JavaScript.</li> -</ul> - -<p>Если вы новичок в JavaScript, то начните с <a href="/en/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide">Учебника </a><a href="/en/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide">JavaScript</a>. Как только вы усвоили фундаментальные основы, вы можете начать пользоваться <a href="/en/JavaScript/Reference" title="en/JavaScript/Reference">Справочником JavaScript</a>, чтобы получить больше информации об определенных объектах, выражениях и операторах.</p> - -<h2 id="Советы_изучающим_JavaScript">Советы изучающим JavaScript</h2> - -<p>Начать изучать JavaScript очень легко: все что вам нужно - это современный веб браузер. Этот учебник включает описание некоторых особенностей JavaScript, которые доступны только в самых последних версиях Firefox (и других браузерах основанных на движке Gecko), так что лучше всего воспользоваться самой последней версией Firefox.</p> - -<h3 id="Интерактивный_интерпретатор.">Интерактивный интерпретатор.</h3> - -<p>Интерактивная строка ввода JavaScript окажет бесценную услугу в изучении языка, так как позволит пробовать все вещи сразу же, вам не потребуется сохранять изменения в файле и обновлять страницу каждый раз. Консоль ошибок Firefox, доступна через меню Инструменты, предлагает простой способ попробовать выполнить JavaScript выражения: просто введите строку с кодом и нажмите кнопку "Evaluate".</p> - -<p><img alt="Image:ErrorConsole.png" class="internal" src="/@api/deki/files/192/=ErrorConsole.png"></p> - -<h3 id="Firebug">Firebug</h3> - -<p>Более продвинутое средство доступно в <a class="external" href="http://www.getfirebug.com/">Firebug</a>. Firebug это расширение Firefox. Хотя в последних версиях Firefox средства отладки становятся более совершенными и такой нужды Firebug уже нет. Выражения которые вы вводите интерпретируются как объекты и связываются c другими частями в Firebug. Например, вы можете сложить 5 плюс 5, заменить буквы в строке со строчных на прописные, получить кликабельную ссылку на документ, или получить ссылку на элемент в документе:</p> - -<p><img alt="" class="internal" src="/@api/deki/files/5188/=FirebugCommandLine.PNG" style="height: 281px; width: 728px;"></p> - -<p>Нажав на кнопке со стрелкой в нижнем правом углу вы можете открыть многострочный редактор скриптов.</p> - -<p>Firebug также имеет в составе продвинутый инспектор DOM, дебаггер JavaScript, инструменты профилирования и многие другие полезные утилиты. JavaScript код выполняемый на веб странице может вызвать функцию <code>console.log()</code>, которая выведет свой аргумент на консоль Firebug.</p> - -<p>Множество примеров в этом учебнике используют функцию <code>alert()</code>, чтобы вывести сообщение во время выполнения скрипта.</p> - -<h2 id="Принятые_соглашения_в_документе">Принятые соглашения в документе</h2> - -<p>JavaScript приложения выполняются на разных операционных системах; информация в этом учебнике актуальна в любом случае. Пути к директориям или файлам даны в формате Windows (обратный слеш как разделитель). Для версии Юникс, пути точно такие же, за исключением того, что используеся обычный слеш вместо обратного, а также соотвественно корневая директория начинается с '/' а не 'c:/' как это в Windows.</p> - -<p>Этот учебник использует единый локатор ресурсов (URL-ы) следующей формы:</p> - -<p><code>http://<em>server</em>.<em>domain</em>/<em>path</em>/<em>file</em>.html</code></p> - -<p>В этих URL-ах, <em>server</em> - это имя сервера на котором запущено ваше приложение, например <code>research1</code> или <code>www</code>; <em>domain</em> - это имя Internet домена, например <code>netscape.com</code> или <code>uiuc.edu</code>; <em>path</em> - структура директорий на сервере; и <em>file</em><code>.html</code> - имя файла, который расположен на вашем сервере. В общем, элементы выделенные курсивом в URL-ах это метки-заполнители, а элементы выделенные нормальным моноширинным шрифтом точные неизменные значения (например, конфиругацию сервера вы можете изменить, как и сменить доменное имя, структура каталогов может поменяться, а вот протокол всегда один, и расширение файла для вебстраниц тоже постоянно). Если ваш вебсервер поддерживает Secure Sockets Layer (SSL), то вы можете пользоваться <code>https</code> вместо <code>http</code> в URL.</p> - -<p>Этот учебник пользуется следующим соглашением об использовании шрифтов:</p> - -<ul> - <li><code>Моноширинный шрифт </code>используется для примеров кода и их вывода, API и элементов языка (например, имена методов или имена свойств), имена файлов, имена директорий, путей, тегов HTML, и любого другого текста, который должен быть выведен на экран. (<code><em>Моноширинный курсивный шрифт</em></code> использован для меток-заменителей встроенных в код.)</li> - <li><em>Курсивное начертание </em>использовано для оглавлений, особого выделения, переменных и меток-заменителей, и слов использованых в буквальном смысле.</li> - <li><strong>Жирное начертание </strong>использовано для терминов из глоссария.</li> -</ul> diff --git a/files/ru/web/javascript/guide/введение_в_javascript/index.html b/files/ru/web/javascript/guide/introduction/index.html index 1b49c45ddb..1b49c45ddb 100644 --- a/files/ru/web/javascript/guide/введение_в_javascript/index.html +++ b/files/ru/web/javascript/guide/introduction/index.html diff --git a/files/ru/web/javascript/guide/javascript_overview/index.html b/files/ru/web/javascript/guide/javascript_overview/index.html deleted file mode 100644 index 5db1f95ca4..0000000000 --- a/files/ru/web/javascript/guide/javascript_overview/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: Обзор JavaScript -slug: Web/JavaScript/Guide/JavaScript_Overview -translation_of: Web/JavaScript/Guide/Introduction -translation_of_original: Web/JavaScript/Guide/JavaScript_Overview ---- -<p>Эта глава является введением в JavaScript и описывает некоторые из базовых понятий.</p> - -<h3 id="What_is_JavaScript.3F" name="What_is_JavaScript.3F">Что такое JavaScript?</h3> - -<p>JavaScript это кросс-платформенный, объектно-ориентированный, скриптовый язык. JavaScript - это маленький и легковесный язык; он спроектирован не для создания законченных, полноценных приложений, а для легкого встраивания в другие продукты и приложения, например, в веб браузеры. Внутри основного приложения, JavaScript может соединяться с объектами этого приложения и осуществлять программный контроль над ними.</p> - -<p>Ядро JavaScript содержит набор базовых объектов, например Array, Date и Math, и набор элементов языка: операторов, управляющих структур, и выражений. Ядро JavaScript может быть расширено для различных целей с помощью дополнений, например:</p> - -<ul> - <li><em>Client-side JavaScript</em> расширяет ядро языка предоставляя объекты управления браузером (Navigator или другой веб-браузер) и его Document Object Model (DOM). Например, клиентские расширения позволяют приложению размещать элементы в HTML-форме и реагировать на пользовательские события, такие как щелчок мыши, ввод данных в форму и навигация по страницам.</li> - <li><em>Server-side JavaScript</em> расширяет ядро языка предоставляя объекты для запуска JavaScript на сервере. Например, server-side расширения позволяют приложению соединяться с реляционной базой данных, обеспечивать непрерывность информации между вызовами приложения, или выполнять операции над файлами на сервере.</li> -</ul> - -<p>Используя функции JavaScript LiveConnect, Вы можете позволить коду на Java и JavaScript общаться между собой. Вы можете создать экземпляр объекта Java из JavaScript и получить доступ к его публичным методам и свойствам. Из Java, Вы можете получить доступ к объектам, свойствам и методам JavaScript.</p> - -<p>Впервые JavaScript был использован в браузерах Netscape.</p> - -<h3 id="JavaScript_and_Java" name="JavaScript_and_Java">JavaScript и Java</h3> - -<p>JavaScript и Java схожи в некоторых отношениях, но принципиально отличаются в других. Язык JavaScript напоминает Java, но не имеет статической типизации и строгой проверки типов. В основном, JavaScript следует большей части синтакса Java в выражениях, именованиях и основного потока управления конструкциями, что стало причиной, почему он был переименован из LiveScript в JavaScript.</p> - -<p>В отличии от системы компилированных классов в Java, построенной на объявлениях, JavaScript поддерживает систему исполнения, основанную на небольшом количестве типов данных, представляющих числовые, логические и строковые значения. JavaScript обладает моделью объектов на базе прототипов вместо более общей модели объектов на базе классов. Модель объектов на базе прототипов делает возможным динамическое наследование; то есть, то, что унаследовано, может различаться для отдельных объектов. JavaScript также поддерживает функции без каких-либо специальных декларативных требований. Функции могут быть свойствами объектов, выполняться как слабо типизированные методы.</p> - -<p>По сравнению с Java, JavaScript - это язык с очень свободной формой языка. Вам не надо объявлять переменные, классы или методы. Вы не должны беспокоиться, является ли метод public, private или protected, Вам не надо реализовывать интерфейсы. Переменные, параметры и возвращаемые функциями типы не являются явно типизированными.</p> - -<p>Java - язык программирования на основе классов, предназначенный для быстрого выполнения и безопасности типов. Безопасность типов означает, например, что Вы не можете взять тип Java integer и привести его к типу object reference или получить доступ к закрытой памяти изменяя байт-код Java. Ориентированная на классы модель Java означает, что программы состоят исключительно из классов и их методов. Наследование классов и строгая типизация в Java обычно тербуют тесно связанную иерархию объектов. Эти требования делают программирование на Java более сложным чем на JavaScript.</p> - -<p>По духу JavaScript происходит от нескольких небольших, динамически типизированных языков программирования, таких как HyperTalk и dBASE. Эти скриптовые языки предлагают инструменты программирования для гораздо более широкой аудитории благодаря более простому синтаксису, специальной встроенной функциональности и минимальным требованиям для создания объектов.</p> - -<table class="standard-table"> - <caption>Таблица 1.1 Сравнение JavaScript и Java</caption> - <thead> - <tr> - <th scope="col">JavaScript</th> - <th scope="col">Java</th> - </tr> - </thead> - <tbody> - <tr> - <td>Объектно-ориентированный. Нет различий между типами объектов. Наследование реализовано через механизм прототипов, свойства и методы могут быть динамически добавлены к любому объекту.</td> - <td>На базе классов. Объекты делятся на классы и экземпляры с наследованием через иерархию классов. Классы и экземпляры не могут иметь динамически добавленные свойства и методы.</td> - </tr> - <tr> - <td>Типы данных переменных не объявлены (динамическая типизация).</td> - <td>Типы данных переменных должны быть объявлены (статическая типизация).</td> - </tr> - <tr> - <td>Не может автоматически записывать на жесткий диск.</td> - <td>Может автоматически записывать на жесткий диск.</td> - </tr> - </tbody> -</table> - -<p>Для получения дополнительной информации о различиях между JavaScript и Java, см. раздел <a href="/en/JavaScript/Guide/Details_of_the_Object_Model" title="en/JavaScript/Guide/Details of the Object Model">Details of the Object Model</a>.</p> - -<h3 id="JavaScript_and_the_ECMAScript_Specification" name="JavaScript_and_the_ECMAScript_Specification">JavaScript and the ECMAScript Specification</h3> - -<p>Netscape invented JavaScript, and JavaScript was first used in Netscape browsers. However, Netscape is working with <a class="external" href="http://www.ecma-international.org/">Ecma International</a> — the European association for standardizing information and communication systems (ECMA was formerly an acronym for the European Computer Manufacturers Association) to deliver a standardized, international programming language based on core JavaScript. This standardized version of JavaScript, called ECMAScript, behaves the same way in all applications that support the standard. Companies can use the open standard language to develop their implementation of JavaScript. The ECMAScript standard is documented in the ECMA-262 specification.</p> - -<p>The ECMA-262 standard is also approved by the <a class="external" href="http://www.iso.ch/">ISO</a> (International Organization for Standardization) as ISO-16262. You can find a <a class="external" href="http://www-archive.mozilla.org/js/language/E262-3.pdf" title="http://www-archive.mozilla.org/js/language/E262-3.pdf">PDF version of ECMA-262</a> (outdated version) at the Mozilla website. You can also find the specification on <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">the Ecma International website</a>. The ECMAScript specification does not describe the Document Object Model (DOM), which is standardized by the <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a>. The DOM defines the way in which HTML document objects are exposed to your script.</p> - -<h4 id="Relationship_between_JavaScript_Versions_and_ECMAScript_Editions" name="Relationship_between_JavaScript_Versions_and_ECMAScript_Editions">Relationship between JavaScript Versions and ECMAScript Editions</h4> - -<p>Netscape worked closely with Ecma International to produce the ECMAScript Specification (ECMA-262). The following table describes the relationship between JavaScript versions and ECMAScript editions.</p> - -<table class="standard-table"> - <caption>Table 1.2 JavaScript versions and ECMAScript editions</caption> - <thead> - <tr> - <th scope="row">JavaScript version</th> - <th scope="col">Relationship to ECMAScript edition</th> - </tr> - </thead> - <tbody> - <tr> - <td>JavaScript 1.1</td> - <td>ECMA-262, Edition 1 is based on JavaScript 1.1.</td> - </tr> - <tr> - <td>JavaScript 1.2</td> - <td>ECMA-262 was not complete when JavaScript 1.2 was released. JavaScript 1.2 is not fully compatible with ECMA-262, Edition 1, for the following reasons: - <ul> - <li>Netscape developed additional features in JavaScript 1.2 that were not considered for ECMA-262.</li> - <li>ECMA-262 adds two new features: internationalization using Unicode, and uniform behavior across all platforms. Several features of JavaScript 1.2, such as the <code>Date</code> object, were platform-dependent and used platform-specific behavior.</li> - </ul> - </td> - </tr> - <tr> - <td> - <p>JavaScript 1.3</p> - </td> - <td> - <p>JavaScript 1.3 is fully compatible with ECMA-262, Edition 1.</p> - - <p>JavaScript 1.3 resolved the inconsistencies that JavaScript 1.2 had with ECMA-262, while keeping all the additional features of JavaScript 1.2 except == and !=, which were changed to conform with ECMA-262.</p> - </td> - </tr> - <tr> - <td> - <p>JavaScript 1.4</p> - </td> - <td> - <p>JavaScript 1.4 is fully compatible with ECMA-262, Edition 1.</p> - - <p>The third version of the ECMAScript specification was not finalized when JavaScript 1.4 was released.</p> - </td> - </tr> - <tr> - <td>JavaScript 1.5</td> - <td>JavaScript 1.5 is fully compatible with ECMA-262, Edition 3.</td> - </tr> - </tbody> -</table> - -<div class="note"><strong>Note</strong>: ECMA-262, Edition 2 consisted of minor editorial changes and bug fixes to the Edition 1 specification. The current release by the TC39 working group of Ecma International is ECMAScript Edition 5.1</div> - -<p>The <a href="/en/JavaScript/Reference" title="en/JavaScript/Reference">JavaScript Reference</a> indicates which features of the language are ECMAScript-compliant.</p> - -<p>JavaScript will always include features that are not part of the ECMAScript Specification; JavaScript is compatible with ECMAScript, while providing additional features.</p> - -<h4 id="JavaScript_Documentation_versus_the_ECMAScript_Specification" name="JavaScript_Documentation_versus_the_ECMAScript_Specification">JavaScript Documentation versus the ECMAScript Specification</h4> - -<p>The ECMAScript specification is a set of requirements for implementing ECMAScript; it is useful if you want to determine whether a JavaScript feature is supported in other ECMAScript implementations. If you plan to write JavaScript code that uses only features supported by ECMAScript, then you may need to review the ECMAScript specification.</p> - -<p>The ECMAScript document is not intended to help script programmers; use the JavaScript documentation for information on writing scripts.</p> - -<h4 id="JavaScript_and_ECMAScript_Terminology">JavaScript and ECMAScript Terminology</h4> - -<p>The ECMAScript specification uses terminology and syntax that may be unfamiliar to a JavaScript programmer. Although the description of the language may differ in ECMAScript, the language itself remains the same. JavaScript supports all functionality outlined in the ECMAScript specification.</p> - -<p>The JavaScript documentation describes aspects of the language that are appropriate for a JavaScript programmer. For example:</p> - -<ul> - <li>The Global Object is not discussed in the JavaScript documentation because you do not use it directly. The methods and properties of the Global Object, which you do use, are discussed in the JavaScript documentation but are called top-level functions and properties.</li> - <li>The no parameter (zero-argument) constructor with the <code>Number</code> and <code>String</code> objects is not discussed in the JavaScript documentation, because what is generated is of little use. A <code>Number</code> constructor without an argument returns +0, and a <code>String</code> constructor without an argument returns "" (an empty string).</li> -</ul> diff --git a/files/ru/web/javascript/guide/циклы_и_итерации/index.html b/files/ru/web/javascript/guide/loops_and_iteration/index.html index 231bc70804..231bc70804 100644 --- a/files/ru/web/javascript/guide/циклы_и_итерации/index.html +++ b/files/ru/web/javascript/guide/loops_and_iteration/index.html diff --git a/files/ru/web/javascript/guide/predefined_core_objects/index.html b/files/ru/web/javascript/guide/predefined_core_objects/index.html deleted file mode 100644 index a0f5770315..0000000000 --- a/files/ru/web/javascript/guide/predefined_core_objects/index.html +++ /dev/null @@ -1,923 +0,0 @@ ---- -title: Predefined Core Objects -slug: Web/JavaScript/Guide/Predefined_Core_Objects -translation_of: Web/JavaScript/Guide -translation_of_original: Web/JavaScript/Guide/Predefined_Core_Objects ---- -<p>Эта глава описывает предопределённые объекты в стандартном JavaScript: <code>Array</code>, <code>Boolean</code>, <code>Date</code>, <code>Function</code>, <code>Math</code>, <code>Number</code>, <code>RegExp</code>, и <code>String</code>.</p> - -<h2 id="Объект_Array">Объект Array</h2> - -<p>В JavaScript массив как тип данных отсутствует. Тем не менее, вы можете использовать предопределённый объект <code>Array</code> и его методы, чтобы работать с массивами в ваших приложениях. Объект <code>Array</code> содержит различные методы для манипуляций с массивами, такими как объединение, обращение и сортировка. У него есть свойство для определения длины массива и другие свойства для работы с регулярными выражениями.</p> - -<p><em>Массив</em> - это упорядоченный набор значений, обращаться к которым можно с помощью имени и индекса. Например, можно создать массив <code>emp</code>, который содержит имена сотрудников фирмы, проиндексированные номерами. Тогда <code>emp[1]</code> будет соответствовать сотруднику номер один, <code>emp[2]</code> сотруднику номер два и так далее.</p> - -<h3 id="Создание_объекта_Array">Создание объекта Array</h3> - -<p>Следующие инструкции создают эквивалентные массивы:</p> - -<div style="margin-right: 270px;"> -<pre class="brush: js">var arr = new Array(element0, element1, ..., elementN); -var arr = Array(element0, element1, ..., elementN); -var arr = [element0, element1, ..., elementN]; -</pre> -</div> - -<p><code>element0, element1, ..., elementN</code> это список значений во вновь создаваемом массиве. Когда эти значения заданы, массив инициализирует ими свои эелементы. Длина массива определяется по числу аргументов и сохраняется в свойстве <code>length </code>(длина).</p> - -<p>Синтаксис с квадратными скобками называется "литералом массива" (array literal) или "инициализатором массива" (array initializer). Такая запись короче других и используется чаще. Подробности смотрите в <a href="/en-US/docs/JavaScript/Guide/Values,_Variables,_and_Literals#Array_Literals" title="en-US/docs/JavaScript/Guide/Values, Variables, and Literals#Array Literals">Array Literals</a>.</p> - -<p>Создать массив ненулевой длины, но без элементов, можно одним из следующих способов:</p> - -<pre class="brush: js">var arr = new Array(arrayLength); -var arr = Array(arrayLength); - -// This has exactly the same effect -var arr = []; -arr.length = arrayLength; -</pre> - -<p>Обратите внимание: в приведённом выше коде <code>arrayLength</code> должен быть значением типа <code>Number</code>, то есть числом, иначе будет создан массив с одним элементом (переданным конструктору значением). Вызов <code>arr.length</code> возвратит <code>arrayLength</code>, хотя на самом деле элемент содержит пустые (неопределённые, undefined) элементы. Итерация по массиву циклом for...in не возвратит никаких элементов.</p> - -<p>Массивы можно не только определить как и переменные, но и присвоить существующему объекту как свойство:</p> - -<pre class="brush: js">var obj = {}; -// ... -obj.prop = [element0, element1, ..., elementN]; - -// OR -var obj = {prop: [element0, element1, ...., elementN]} -</pre> - -<p>Если же вы хотите создать одноэлементный массив, содержащий число, придётся использовать запись с квадратными скобками, так как когда конструктору Array() передаётся одно-единственное число, оно трактуется как длина массива, а не как хранимвый элемент.</p> - -<pre><code>var arr = [42]; -var arr = Array(42); // Creates an array with no element, but with arr.length set to 42 - -// The above code is equivalent to -var arr = []; -arr.length = 42; -</code> -</pre> - -<p>Вызов <code>Array(N)</code> приводит к <code>RangeError</code>, если <code>N</code> не является целым числом, чья дробная часть не равна нулю. Следующий пример иллюстрирует это поведение.</p> - -<pre>var arr = Array(9.3); // RangeError: Invalid array length -</pre> - -<p>Если ваш код должен создавать массивы с отдельными элементами произвольного типа, безопаснее использовать литералы массива. Или, создайте пустой массив, прежде чем добавлять элементы к нему.</p> - -<h3 id="Заполнение_массива">Заполнение массива</h3> - -<p>You can populate an array by assigning values to its elements. For example,</p> - -<pre class="brush: js">var emp = []; -emp[0] = "Casey Jones"; -emp[1] = "Phil Lesh"; -emp[2] = "August West"; -</pre> - -<p><strong>Note:</strong> if you supply a non-integer value to the array operator in the code above, a property will be created in the object representing the array, instead of an array element.</p> - -<pre> var arr = []; -arr[3.4] = "Oranges"; -console.log(arr.length); // 0 -console.log(arr.hasOwnProperty(3.4)); // true -</pre> - -<p>You can also populate an array when you create it:</p> - -<pre class="brush: js">var myArray = new Array("Hello", myVar, 3.14159); -var myArray = ["Mango", "Apple", "Orange"] -</pre> - -<h3 id="Referring_to_Array_Elements">Referring to Array Elements</h3> - -<p>You refer to an array's elements by using the element's ordinal number. For example, suppose you define the following array:</p> - -<pre class="brush: js">var myArray = ["Wind", "Rain", "Fire"]; -</pre> - -<p>You then refer to the first element of the array as <code>myArray[0]</code> and the second element of the array as <code>myArray[1]</code>. The index of the elements begins with zero.</p> - -<p><strong>Note:</strong> the array operator (square brackets) is also used for accessing the array's properties (arrays are also objects in JavaScript). For example,</p> - -<pre> var arr = ["one", "two", "three"]; -arr[2]; // three -arr["length"]; // 3 -</pre> - -<h3 id="Understanding_length">Understanding length</h3> - -<p>At the implementation level, JavaScript's arrays actually store their elements as standard object properties, using the array index as the property name. The <code>length</code> property is special; it always returns the index of the last element plus one (in following example Dusty is indexed at 30 so cats.length returns 30 + 1). Remember, Javascript Array indexes are 0-based: they start at 0, not 1. This means that the <code><code>length</code></code> property will be one more than the highest index stored in the array:</p> - -<pre class="brush: js">var cats = []; -cats[30] = ['Dusty']; -print(cats.length); // 31 -</pre> - -<p>You can also assign to the <code>length</code> property. Writing a value that is shorter than the number of stored items truncates the array; writing 0 empties it entirely:</p> - -<pre class="brush: js">var cats = ['Dusty', 'Misty', 'Twiggy']; -console.log(cats.length); // 3 - -cats.length = 2; -console.log(cats); // prints "Dusty,Misty" - Twiggy has been removed - -cats.length = 0; -console.log(cats); // prints nothing; the cats array is empty - -cats.length = 3; -console.log(cats); // [undefined, undefined, undefined] -</pre> - -<h3 id="Iterating_over_arrays">Iterating over arrays</h3> - -<p>A common operation is to iterate over the values of an array, processing each one in some way. The simplest way to do this is as follows:</p> - -<pre class="brush: js">var colors = ['red', 'green', 'blue']; -for (var i = 0; i < colors.length; i++) { - console.log(colors[i]); -} -</pre> - -<p>If you know that none of the elements in your array evaluate to <code>false</code> in a boolean context — if your array consists only of <a href="/en-US/docs/DOM" title="en-US/docs/DOM">DOM</a> nodes, for example, you can use a more efficient idiom:</p> - -<pre class="brush: js">var divs = document.getElementsByTagName('div'); -for (var i = 0, div; div = divs[i]; i++) { - /* Process div in some way */ -} -</pre> - -<p>This avoids the overhead of checking the length of the array, and ensures that the <code>div</code> variable is reassigned to the current item each time around the loop for added convenience.</p> - -<p>The <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach"><code>forEach()</code></a> method, introduced in JavaScript 1.6, provides another way of iterating over an array:</p> - -<pre class="brush: js">var colors = ['red', 'green', 'blue']; -colors.forEach(function(color) { - console.log(color); -}); -</pre> - -<p>The function passed to <code>forEach</code> is executed once for every item in the array, with the array item passed as the argument to the function. Unassigned values are not iterated in a <code>forEach</code> loop.</p> - -<p>Note that the elements of array omitted when the array is defined are not listed when iterating by <code>forEach, </code>but are listed when <code>undefined</code> has been manually assigned to the element:</p> - -<pre class="brush: js">var array = ['first', 'second', , 'fourth']; - -// returns ['first', 'second', 'fourth']; -array.forEach(function(element) { - console.log(element); -}) - -if(array[2] === undefined) { console.log('array[2] is undefined'); } // true - -var array = ['first', 'second', undefined, 'fourth']; - -// returns ['first', 'second', undefined, 'fourth']; -array.forEach(function(element) { - console.log(element); -})</pre> - -<p>Since JavaScript elements are saved as standard object properties, it is not advisable to iterate through JavaScript arrays using for...in loops because normal elements and all enumerable properties will be listed.</p> - -<h3 id="Array_Methods">Array Methods</h3> - -<p>The <code>Array</code> object has the following methods:</p> - -<ul> - <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/concat" title="en-US/docs/JavaScript/Reference/Global - Objects/Array/concat"><code>concat()</code></a> joins two arrays and returns a new array. - - <pre class="brush: js">var myArray = new Array("1", "2", "3"); -myArray = myArray.concat("a", "b", "c"); // myArray is now ["1", "2", "3", "a", "b", "c"] -</pre> - </li> - <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/join" title="en-US/docs/JavaScript/Reference/Global - Objects/Array/join"><code>join(deliminator = ",")</code></a> joins all elements of an array into a string. - <pre class="brush: js">var myArray = new Array("Wind", "Rain", "Fire"); -var list = myArray.join(" - "); // list is "Wind - Rain - Fire" -</pre> - </li> - <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/push" title="en-US/docs/JavaScript/Reference/Global - Objects/Array/push"><code>push()</code></a> adds one or more elements to the end of an array and returns the resulting length of the array. - <pre class="brush: js">var myArray = new Array("1", "2"); -myArray.push("3"); // myArray is now ["1", "2", "3"] -</pre> - </li> - <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/pop" title="en-US/docs/JavaScript/Reference/Global - Objects/Array/pop"><code>pop()</code></a> removes the last element from an array and returns that element. - <pre class="brush: js">var myArray = new Array("1", "2", "3"); -var last = myArray.pop(); // myArray is now ["1", "2"], last = "3" -</pre> - </li> - <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/shift" title="en-US/docs/JavaScript/Reference/Global - Objects/Array/shift"><code>shift()</code></a> removes the first element from an array and returns that element. - <pre class="brush: js">var myArray = new Array ("1", "2", "3"); -var first = myArray.shift(); // myArray is now ["2", "3"], first is "1" -</pre> - </li> - <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/unshift" title="en-US/docs/JavaScript/Reference/Global - Objects/Array/unshift"><code>unshift()</code></a> adds one or more elements to the front of an array and returns the new length of the array. - <pre class="brush: js">var myArray = new Array ("1", "2", "3"); -myArray.unshift("4", "5"); // myArray becomes ["4", "5", "1", "2", "3"]</pre> - </li> - <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/slice" title="en-US/docs/JavaScript/Reference/Global - Objects/Array/slice"><code>slice(start_index, upto_index)</code></a> extracts a section of an array and returns a new array. - <pre class="brush: js">var myArray = new Array ("a", "b", "c", "d", "e"); -myArray = myArray.slice(1, 4); /* starts at index 1 and extracts all elements - until index 3, returning [ "b", "c", "d"] */ -</pre> - </li> - <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/splice" title="en-US/docs/JavaScript/Reference/Global - Objects/Array/splice"><code>splice(index, count_to_remove, addelement1, addelement2, ...)</code></a> removes elements from an array and (optionally) replaces them. - <pre class="brush: js">var myArray = new Array ("1", "2", "3", "4", "5"); -myArray.splice(1, 3, "a", "b", "c", "d"); // myArray is now ["1", "a", "b", "c", "d", "5"] - // This code started at index one (or where the "2" was), removed 3 elements there, - // and then inserted all consecutive elements in its place. -</pre> - </li> - <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/reverse" title="en-US/docs/JavaScript/Reference/Global - Objects/Array/reverse"><code>reverse()</code></a> transposes the elements of an array: the first array element becomes the last and the last becomes the first. - <pre class="brush: js">var myArray = new Array ("1", "2", "3"); -myArray.reverse(); // transposes the array so that myArray = [ "3", "2", "1" ] -</pre> - </li> - <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/sort" title="en-US/docs/JavaScript/Reference/Global - Objects/Array/sort"><code>sort()</code></a> sorts the elements of an array. - <pre class="brush: js">var myArray = new Array("Wind", "Rain", "Fire"); -myArray.sort(); // sorts the array so that myArrray = [ "Fire", "Rain", "Wind" ] -</pre> - - <p><code>sort()</code> can also take a callback function to determine how array elements are compared. The function compares two values and returns one of three values:</p> - - <ul> - <li>if <code>a</code> is less than <code>b</code> by the sorting system, return -1 (or any negative number)</li> - <li>if <code>a</code> is greater than <code>b</code> by the sorting system, return 1 (or any positive number)</li> - <li>if <code>a</code> and <code>b</code> are considered equivalent, return 0.</li> - </ul> - - <p>For instance, the following will sort by the last letter of an array:</p> - - <pre class="brush: js">var sortFn = function(a, b){ - if (a[a.length - 1] < b[b.length - 1]) return -1; - if (a[a.length - 1] > b[b.length - 1]) return 1; - if (a[a.length - 1] == b[b.length - 1]) return 0; -} -myArray.sort(sortFn); // sorts the array so that myArray = ["Wind","Fire","Rain"]</pre> - </li> -</ul> - -<p>Compatibility code for older browsers can be found for each of these functions on the individual pages. Native browser support for these features in various browsers can be found<a class="external" href="http://www.robertnyman.com/javascript/" title="http://www.robertnyman.com/javascript/"> here.</a></p> - -<ul> - <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/indexOf" title="en-US/docs/JavaScript/Reference/Global - Objects/Array/indexOf"><code>indexOf(searchElement[, fromIndex])</code></a> searches the array for <code>searchElement</code> and returns the index of the first match. - - <pre class="brush: js">var a = ['a', 'b', 'a', 'b', 'a']; -alert(a.indexOf('b')); // Alerts 1 -// Now try again, starting from after the last match -alert(a.indexOf('b', 2)); // Alerts 3 -alert(a.indexOf('z')); // Alerts -1, because 'z' was not found -</pre> - </li> - <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/lastIndexOf" title="en-US/docs/JavaScript/Reference/Global - Objects/Array/lastIndexOf"><code>lastIndexOf(searchElement[, fromIndex])</code></a> works like <code>indexOf</code>, but starts at the end and searches backwards. - <pre class="brush: js">var a = ['a', 'b', 'c', 'd', 'a', 'b']; -alert(a.lastIndexOf('b')); // Alerts 5 -// Now try again, starting from before the last match -alert(a.lastIndexOf('b', 4)); // Alerts 1 -alert(a.lastIndexOf('z')); // Alerts -1 -</pre> - </li> - <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="en-US/docs/JavaScript/Reference/Global - Objects/Array/forEach"><code>forEach(callback[, thisObject])</code></a> executes <code>callback</code> on every array item. - <pre class="brush: js">var a = ['a', 'b', 'c']; -a.forEach(alert); // Alerts each item in turn -</pre> - </li> - <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/map" title="en-US/docs/JavaScript/Reference/Global - Objects/Array/map"><code>map(callback[, thisObject])</code></a> returns a new array of the return value from executing <code>callback</code> on every array item. - <pre class="brush: js">var a1 = ['a', 'b', 'c']; -var a2 = a1.map(function(item) { return item.toUpperCase(); }); -alert(a2); // Alerts A,B,C -</pre> - </li> - <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/filter" title="en-US/docs/JavaScript/Reference/Global - Objects/Array/filter"><code>filter(callback[, thisObject])</code></a> returns a new array containing the items for which callback returned true. - <pre class="brush: js">var a1 = ['a', 10, 'b', 20, 'c', 30]; -var a2 = a1.filter(function(item) { return typeof item == 'number'; }); -alert(a2); // Alerts 10,20,30 -</pre> - </li> - <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/every" title="en-US/docs/JavaScript/Reference/Global - Objects/Array/every"><code>every(callback[, thisObject])</code></a> returns true if <code>callback</code> returns true for every item in the array. - <pre class="brush: js">function isNumber(value){ - return typeof value == 'number'; -} -var a1 = [1, 2, 3]; -alert(a1.every(isNumber)); // Alerts true -var a2 = [1, '2', 3]; -alert(a2.every(isNumber)); // Alerts false -</pre> - </li> - <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/some" title="en-US/docs/JavaScript/Reference/Global - Objects/Array/some"><code>some(callback[, thisObject])</code></a> returns true if <code>callback</code> returns true for at least one item in the array. - <pre class="brush: js">function isNumber(value){ - return typeof value == 'number'; -} -var a1 = [1, 2, 3]; -alert(a1.some(isNumber)); // Alerts true -var a2 = [1, '2', 3]; -alert(a2.some(isNumber)); // Alerts true -var a3 = ['1', '2', '3']; -alert(a3.some(isNumber)); // Alerts false -</pre> - </li> -</ul> - -<p>The methods above that take a callback are known as <em>iterative methods</em>, because they iterate over the entire array in some fashion. Each one takes an optional second argument called <code>thisObject</code>. If provided, <code>thisObject</code> becomes the value of the <code>this</code> keyword inside the body of the callback function. If not provided, as with other cases where a function is invoked outside of an explicit object context, <code>this</code> will refer to the global object (<a href="/en-US/docs/DOM/window" title="en-US/docs/DOM/window"><code>window</code></a>).</p> - -<p>The callback function is actually called with three arguments. The first is the value of the current item, the second is its array index, and the third is a reference to the array itself. JavaScript functions ignore any arguments that are not named in the parameter list so it is safe to provide a callback function that only takes a single argument, such as <code>alert</code>.</p> - -<ul> - <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/Reduce" title="en-US/docs/JavaScript/Reference/Global - Objects/Array/reduce"><code>reduce(callback[, initialValue])</code></a> applies <code>callback(firstValue, secondValue)</code> to reduce the list of items down to a single value. - - <pre class="brush: js">var a = [10, 20, 30]; -var total = a.reduce(function(first, second) { return first + second; }, 0); -alert(total) // Alerts 60 -</pre> - </li> - <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/ReduceRight" title="en-US/docs/JavaScript/Reference/Global - Objects/Array/reduceRight"><code>reduceRight(callback[, initialValue])</code></a> works like <code>reduce()</code>, but starts with the last element.</li> -</ul> - -<p><code>reduce</code> and <code>reduceRight</code> are the least obvious of the iterative array methods. They should be used for algorithms that combine two values recursively in order to reduce a sequence down to a single value.</p> - -<h3 id="Multi-Dimensional_Arrays">Multi-Dimensional Arrays</h3> - -<p>Arrays can be nested, meaning that an array can contain another array as an element. Using this characteristic of JavaScript arrays, multi-dimensional arrays can be created.</p> - -<p>The following code creates a two-dimensional array.</p> - -<pre class="brush: js">var a = new Array(4); -for (i = 0; i < 4; i++) { - a[i] = new Array(4); - for (j = 0; j < 4; j++) { - a[i][j] = "[" + i + "," + j + "]"; - } -} -</pre> - -<p>This example creates an array with the following rows:</p> - -<pre>Row 0: [0,0] [0,1] [0,2] [0,3] -Row 1: [1,0] [1,1] [1,2] [1,3] -Row 2: [2,0] [2,1] [2,2] [2,3] -Row 3: [3,0] [3,1] [3,2] [3,3] -</pre> - -<h3 id="Arrays_and_Regular_Expressions">Arrays and Regular Expressions</h3> - -<p>When an array is the result of a match between a regular expression and a string, the array returns properties and elements that provide information about the match. An array is the return value of <a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp/exec" title="en-US/docs/JavaScript/Reference/Global Objects/RegExp/exec"><code>RegExp.exec()</code></a>, <a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/match" title="en-US/docs/JavaScript/Reference/Global Objects/String/match"><code>String.match()</code></a>, and <a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/split" title="en-US/docs/JavaScript/Reference/Global -Objects/String/split"><code>String.split()</code></a>. For information on using arrays with regular expressions, see <a href="/en-US/docs/JavaScript/Guide/Regular_Expressions" title="en-US/docs/JavaScript/Guide/Regular Expressions">Regular Expressions</a>.</p> - -<h3 id="Working_with_Array-like_objects">Working with Array-like objects</h3> - -<p>Some JavaScript objects, such as the <a href="/en-US/docs/DOM/NodeList" title="en-US/docs/DOM/NodeList"><code>NodeList</code></a> returned by <a href="/en-US/docs/DOM/document.getElementsByTagName" title="en-US/docs/DOM/document.getElementsByTagName"><code>document.getElementsByTagName()</code></a> or the <a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments" title="en-US/docs/JavaScript/Reference/Functions and -function -scope/arguments"><code>arguments</code></a> object made available within the body of a function, look and behave like arrays on the surface but do not share all of their methods. The <code>arguments</code> object provides a <a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length" title="en-US/docs/JavaScript/Reference/Functions -and function -scope/arguments/length"><code>length</code></a> attribute but does not implement the <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="en-US/docs/JavaScript/Reference/Global Objects/Array/forEach"><code>forEach()</code></a> method, for example.</p> - -<p>Array generics, introduced in JavaScript 1.6, provide a way of running <code>Array</code> methods against other array-like objects. Each standard array method has a corresponding method on the <code>Array</code> object itself; for example:</p> - -<pre class="brush: js"> function alertArguments() { - Array.forEach(arguments, function(item) { - alert(item); - }); - } -</pre> - -<p>These generic methods can be emulated more verbosely in older versions of JavaScript using the call method provided by JavaScript function objects:</p> - -<pre class="brush: js"> Array.prototype.forEach.call(arguments, function(item) { - alert(item); - }); -</pre> - -<p>Array generic methods can be used on strings as well, since they provide sequential access to their characters in a similar way to arrays:</p> - -<pre class="brush: js">Array.forEach("a string", function(chr) { - alert(chr); -});</pre> - -<p>Here are some further examples of applying array methods to strings, also taking advantage of <a href="/en-US/docs/JavaScript/New_in_JavaScript/1.8#Expression_closures" title="en-US/docs/New_in_JavaScript_1.8#Expression_closures">JavaScript 1.8 expression closures</a>:</p> - -<pre class="brush: js">var str = 'abcdef'; -var consonantsOnlyStr = Array.filter(str, function (c) !(/[aeiou]/i).test(c)).join(''); // 'bcdf' -var vowelsPresent = Array.some(str, function (c) (/[aeiou]/i).test(c)); // true -var allVowels = Array.every(str, function (c) (/[aeiou]/i).test(c)); // false -var interpolatedZeros = Array.map(str, function (c) c+'0').join(''); // 'a0b0c0d0e0f0' -var numerologicalValue = Array.reduce(str, function (c, c2) c+c2.toLowerCase().charCodeAt()-96, 0); -// 21 (reduce() since JS v1.8) -</pre> - -<p>Note that <code>filter</code> and <code>map</code> do not automatically return the characters back into being members of a string in the return result; an array is returned, so we must use <code>join</code> to return back to a string.</p> - -<h3 id="Array_comprehensions">Array comprehensions</h3> - -<p>Introduced in JavaScript 1.7, array comprehensions provide a useful shortcut for constructing a new array based on the contents of another. Comprehensions can often be used in place of calls to <code>map()</code> and <code>filter()</code>, or as a way of combining the two.</p> - -<p>The following comprehension takes an array of numbers and creates a new array of the double of each of those numbers.</p> - -<pre class="brush: js">var numbers = [1, 2, 3, 4]; -var doubled = [i * 2 for (i of numbers)]; -alert(doubled); // Alerts 2,4,6,8 -</pre> - -<p>This is equivalent to the following <code>map()</code> operation:</p> - -<pre class="brush: js">var doubled = numbers.map(function(i){return i * 2;}); -</pre> - -<p>Comprehensions can also be used to select items that match a particular expression. Here is a comprehension which selects only even numbers:</p> - -<pre class="brush: js">var numbers = [1, 2, 3, 21, 22, 30]; -var evens = [i for (i of numbers) if (i % 2 === 0)]; -alert(evens); // Alerts 2,22,30 -</pre> - -<p><code>filter()</code> can be used for the same purpose:</p> - -<pre class="brush: js">var evens = numbers.filter(function(i){return i % 2 === 0;}); -</pre> - -<p><code>map()</code> and <code>filter()</code> style operations can be combined into a single array comprehension. Here is one that filters just the even numbers, then creates an array containing their doubles:</p> - -<pre class="brush: js">var numbers = [1, 2, 3, 21, 22, 30]; -var doubledEvens = [i * 2 for (i of numbers) if (i % 2 === 0)]; -alert(doubledEvens); // Alerts 4,44,60 -</pre> - -<p>The square brackets of an array comprehension introduce an implicit block for scoping purposes. New variables (such as i in the example) are treated as if they had been declared using <a href="/en-US/docs/JavaScript/Reference/Statements/let" title="/en-US/docs/JavaScript/Reference/Statements/let"><code>let</code></a>. This means that they will not be available outside of the comprehension.</p> - -<p>The input to an array comprehension does not itself need to be an array; <a href="/en-US/docs/JavaScript/Guide/Iterators_and_Generators" title="en-US/docs/JavaScript/Guide/Iterators and Generators">iterators and generators</a> can also be used.</p> - -<p>Even strings may be used as input; to achieve the filter and map actions (under Array-like objects) above:</p> - -<pre class="brush: js">var str = 'abcdef'; -var consonantsOnlyStr = [c for (c of str) if (!(/[aeiouAEIOU]/).test(c)) ].join(''); // 'bcdf' -var interpolatedZeros = [c+'0' for (c of str) ].join(''); // 'a0b0c0d0e0f0' -</pre> - -<p>Again, the input form is not preserved, so we have to use <code>join()</code> to revert back to a string.</p> - -<h2 id="Boolean_Object">Boolean Object</h2> - -<p>The <code>Boolean</code> object is a wrapper around the primitive Boolean data type. Use the following syntax to create a <code>Boolean</code> object:</p> - -<pre class="brush: js">var booleanObjectName = new Boolean(value); -</pre> - -<p>Do not confuse the primitive Boolean values <code>true</code> and <code>false</code> with the true and false values of the <code>Boolean</code> object. Any object whose value is not <code>undefined</code> , <code>null</code>, <code>0</code>, <code>NaN</code>, or the empty string, including a <code>Boolean</code> object whose value is false, evaluates to true when passed to a conditional statement. See <a href="/en-US/docs/JavaScript/Guide/Statements#if...else_Statement" title="en-US/docs/JavaScript/Guide/Statements#if...else Statement">if...else Statement</a> for more information.</p> - -<h2 id="Date_Object">Date Object</h2> - -<p>JavaScript does not have a date data type. However, you can use the <code>Date</code> object and its methods to work with dates and times in your applications. The <code>Date</code> object has a large number of methods for setting, getting, and manipulating dates. It does not have any properties.</p> - -<p>JavaScript handles dates similarly to Java. The two languages have many of the same date methods, and both languages store dates as the number of milliseconds since January 1, 1970, 00:00:00.</p> - -<p>The <code>Date</code> object range is -100,000,000 days to 100,000,000 days relative to 01 January, 1970 UTC.</p> - -<p>To create a <code>Date</code> object:</p> - -<pre class="brush: js">var dateObjectName = new Date([parameters]); -</pre> - -<p>where <code>dateObjectName</code> is the name of the <code>Date</code> object being created; it can be a new object or a property of an existing object.</p> - -<p>Calling <code>Date</code> without the <code>new</code> keyword simply converts the provided date to a string representation.</p> - -<p>The <code>parameters</code> in the preceding syntax can be any of the following:</p> - -<ul> - <li>Nothing: creates today's date and time. For example, <code>today = new Date();</code>.</li> - <li>A string representing a date in the following form: "Month day, year hours:minutes:seconds." For example, <code>var Xmas95 = new Date("December 25, 1995 13:30:00")</code>. If you omit hours, minutes, or seconds, the value will be set to zero.</li> - <li>A set of integer values for year, month, and day. For example, <code>var Xmas95 = new Date(1995, 11, 25)</code>.</li> - <li>A set of integer values for year, month, day, hour, minute, and seconds. For example, <code>var Xmas95 = new Date(1995, 11, 25, 9, 30, 0);</code>.</li> -</ul> - -<p><strong>JavaScript 1.2 and earlier</strong><br> - The <code>Date</code> object behaves as follows:</p> - -<ul> - <li>Dates prior to 1970 are not allowed.</li> - <li>JavaScript depends on platform-specific date facilities and behavior; the behavior of the <code>Date</code> object varies from platform to platform.</li> -</ul> - -<h3 id="Methods_of_the_Date_Object">Methods of the Date Object</h3> - -<p>The <code>Date</code> object methods for handling dates and times fall into these broad categories:</p> - -<ul> - <li>"set" methods, for setting date and time values in <code>Date</code> objects.</li> - <li>"get" methods, for getting date and time values from <code>Date</code> objects.</li> - <li>"to" methods, for returning string values from <code>Date</code> objects.</li> - <li>parse and UTC methods, for parsing <code>Date</code> strings.</li> -</ul> - -<p>With the "get" and "set" methods you can get and set seconds, minutes, hours, day of the month, day of the week, months, and years separately. There is a <code>getDay</code> method that returns the day of the week, but no corresponding <code>setDay</code> method, because the day of the week is set automatically. These methods use integers to represent these values as follows:</p> - -<ul> - <li>Seconds and minutes: 0 to 59</li> - <li>Hours: 0 to 23</li> - <li>Day: 0 (Sunday) to 6 (Saturday)</li> - <li>Date: 1 to 31 (day of the month)</li> - <li>Months: 0 (January) to 11 (December)</li> - <li>Year: years since 1900</li> -</ul> - -<p>For example, suppose you define the following date:</p> - -<pre class="brush: js">var Xmas95 = new Date("December 25, 1995"); -</pre> - -<p>Then <code>Xmas95.getMonth()</code> returns 11, and <code>Xmas95.getFullYear()</code> returns 1995.</p> - -<p>The <code>getTime</code> and <code>setTime</code> methods are useful for comparing dates. The <code>getTime</code> method returns the number of milliseconds since January 1, 1970, 00:00:00 for a <code>Date</code> object.</p> - -<p>For example, the following code displays the number of days left in the current year:</p> - -<pre class="brush: js">var today = new Date(); -var endYear = new Date(1995, 11, 31, 23, 59, 59, 999); // Set day and month -endYear.setFullYear(today.getFullYear()); // Set year to this year -var msPerDay = 24 * 60 * 60 * 1000; // Number of milliseconds per day -var daysLeft = (endYear.getTime() - today.getTime()) / msPerDay; -var daysLeft = Math.round(daysLeft); //returns days left in the year -</pre> - -<p>This example creates a <code>Date</code> object named <code>today</code> that contains today's date. It then creates a <code>Date</code> object named <code>endYear</code> and sets the year to the current year. Then, using the number of milliseconds per day, it computes the number of days between <code>today</code> and <code>endYear</code>, using <code>getTime</code> and rounding to a whole number of days.</p> - -<p>The <code>parse</code> method is useful for assigning values from date strings to existing <code>Date</code> objects. For example, the following code uses <code>parse</code> and <code>setTime</code> to assign a date value to the <code>IPOdate</code> object:</p> - -<pre class="brush: js">var IPOdate = new Date(); -IPOdate.setTime(Date.parse("Aug 9, 1995")); -</pre> - -<h3 id="Using_the_Date_Object_an_Example">Using the Date Object: an Example</h3> - -<p>In the following example, the function <code>JSClock()</code> returns the time in the format of a digital clock.</p> - -<pre class="brush: js">function JSClock() { - var time = new Date(); - var hour = time.getHours(); - var minute = time.getMinutes(); - var second = time.getSeconds(); - var temp = "" + ((hour > 12) ? hour - 12 : hour); - if (hour == 0) - temp = "12"; - temp += ((minute < 10) ? ":0" : ":") + minute; - temp += ((second < 10) ? ":0" : ":") + second; - temp += (hour >= 12) ? " P.M." : " A.M."; - return temp; -} -</pre> - -<p>The <code>JSClock</code> function first creates a new <code>Date</code> object called <code>time</code>; since no arguments are given, time is created with the current date and time. Then calls to the <code>getHours</code>, <code>getMinutes</code>, and <code>getSeconds</code> methods assign the value of the current hour, minute, and second to <code>hour</code>, <code>minute</code>, and <code>second</code>.</p> - -<p>The next four statements build a string value based on the time. The first statement creates a variable <code>temp</code>, assigning it a value using a conditional expression; if <code>hour</code> is greater than 12, (<code>hour - 12</code>), otherwise simply hour, unless hour is 0, in which case it becomes 12.</p> - -<p>The next statement appends a <code>minute</code> value to <code>temp</code>. If the value of <code>minute</code> is less than 10, the conditional expression adds a string with a preceding zero; otherwise it adds a string with a demarcating colon. Then a statement appends a seconds value to <code>temp</code> in the same way.</p> - -<p>Finally, a conditional expression appends "P.M." to <code>temp</code> if <code>hour</code> is 12 or greater; otherwise, it appends "A.M." to <code>temp</code>.</p> - -<h2 id="Function_Object">Function Object</h2> - -<p>The predefined <code>Function</code> object specifies a string of JavaScript code to be compiled as a function.</p> - -<p>To create a <code>Function</code> object:</p> - -<pre class="brush: js">var functionObjectName = new Function ([arg1, arg2, ... argn], functionBody); -</pre> - -<p><code>functionObjectName</code> is the name of a variable or a property of an existing object. It can also be an object followed by a lowercase event handler name, such as <code>window.onerror</code>.</p> - -<p><code>arg1</code>, <code>arg2</code>, ... <code>argn</code> are arguments to be used by the function as formal argument names. Each must be a string that corresponds to a valid JavaScript identifier; for example "x" or "theForm".</p> - -<p><code>functionBody</code> is a string specifying the JavaScript code to be compiled as the function body.</p> - -<p><code>Function</code> objects are evaluated each time they are used. This is less efficient than declaring a function and calling it within your code, because declared functions are compiled.</p> - -<p>In addition to defining functions as described here, you can also use the <a href="/en-US/docs/JavaScript/Reference/Statements/function" title="en-US/docs/JavaScript/Reference/Statements/function"><code>function</code> statement</a> and the function expression. See the <a href="/en-US/docs/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">JavaScript Reference</a> for more information.</p> - -<p>The following code assigns a function to the variable <code>setBGColor</code>. This function sets the current document's background color.</p> - -<pre class="brush: js">var setBGColor = new Function("document.bgColor = 'antiquewhite'"); -</pre> - -<p>To call the <code>Function</code> object, you can specify the variable name as if it were a function. The following code executes the function specified by the <code>setBGColor</code> variable:</p> - -<pre class="brush: js">var colorChoice="antiquewhite"; -if (colorChoice=="antiquewhite") {setBGColor()} -</pre> - -<p>You can assign the function to an event handler in either of the following ways:</p> - -<ol> - <li> - <pre class="brush: js">document.form1.colorButton.onclick = setBGColor; -</pre> - </li> - <li> - <pre class="brush: html"><INPUT NAME="colorButton" TYPE="button" - VALUE="Change background color" - onClick="setBGColor()"> -</pre> - </li> -</ol> - -<p>Creating the variable <code>setBGColor</code> shown above is similar to declaring the following function:</p> - -<pre class="brush: js">function setBGColor() { - document.bgColor = 'antiquewhite'; -} -</pre> - -<p>Assigning a function to a variable is similar to declaring a function, but there are differences:</p> - -<ul> - <li>When you assign a function to a variable using <code>var setBGColor = new Function("...")</code>, <code>setBGColor</code> is a variable for which the current value is a reference to the function created with <code>new Function()</code>.</li> - <li>When you create a function using <code>function setBGColor() {...}</code>, <code>setBGColor</code> is not a variable, it is the name of a function.</li> -</ul> - -<p>You can nest a function within a function. The nested (inner) function is private to its containing (outer) function:</p> - -<ul> - <li>The inner function can be accessed only from statements in the outer function.</li> - <li>The inner function can use the arguments and variables of the outer function. The outer function cannot use the arguments and variables of the inner function.</li> -</ul> - -<h2 id="Math_Object">Math Object</h2> - -<p>The predefined <code>Math</code> object has properties and methods for mathematical constants and functions. For example, the <code>Math</code> object's <code>PI</code> property has the value of pi (3.141...), which you would use in an application as</p> - -<pre class="brush: js">Math.PI -</pre> - -<p>Similarly, standard mathematical functions are methods of <code>Math</code>. These include trigonometric, logarithmic, exponential, and other functions. For example, if you want to use the trigonometric function sine, you would write</p> - -<pre class="brush: js">Math.sin(1.56) -</pre> - -<p>Note that all trigonometric methods of <code>Math</code> take arguments in radians.</p> - -<p>The following table summarizes the <code>Math</code> object's methods.</p> - -<table class="standard-table"> - <caption>Table 7.1 Methods of Math</caption> - <thead> - <tr> - <th scope="col">Method</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>abs</code></td> - <td>Absolute value</td> - </tr> - <tr> - <td><code>sin</code>, <code>cos</code>, <code>tan</code></td> - <td>Standard trigonometric functions; argument in radians</td> - </tr> - <tr> - <td><code>acos</code>, <code>asin</code>, <code>atan</code>, <code>atan2</code></td> - <td>Inverse trigonometric functions; return values in radians</td> - </tr> - <tr> - <td><code>exp</code>, <code>log</code></td> - <td>Exponential and natural logarithm, base <code>e</code></td> - </tr> - <tr> - <td><code>ceil</code></td> - <td>Returns least integer greater than or equal to argument</td> - </tr> - <tr> - <td><code>floor</code></td> - <td>Returns greatest integer less than or equal to argument</td> - </tr> - <tr> - <td><code>min</code>, <code>max</code></td> - <td>Returns greater or lesser (respectively) of two arguments</td> - </tr> - <tr> - <td><code>pow</code></td> - <td>Exponential; first argument is base, second is exponent</td> - </tr> - <tr> - <td><code>random</code></td> - <td>Returns a random number between 0 and 1.</td> - </tr> - <tr> - <td><code>round</code></td> - <td>Rounds argument to nearest integer</td> - </tr> - <tr> - <td><code>sqrt</code></td> - <td>Square root</td> - </tr> - </tbody> -</table> - -<p>Unlike many other objects, you never create a <code>Math</code> object of your own. You always use the predefined <code>Math</code> object.</p> - -<h2 id="Number_Object">Number Object</h2> - -<p>The <code>Number</code> object has properties for numerical constants, such as maximum value, not-a-number, and infinity. You cannot change the values of these properties and you use them as follows:</p> - -<pre class="brush: js">var biggestNum = Number.MAX_VALUE; -var smallestNum = Number.MIN_VALUE; -var infiniteNum = Number.POSITIVE_INFINITY; -var negInfiniteNum = Number.NEGATIVE_INFINITY; -var notANum = Number.NaN; -</pre> - -<p>You always refer to a property of the predefined <code>Number</code> object as shown above, and not as a property of a <code>Number</code> object you create yourself.</p> - -<p>The following table summarizes the <code>Number</code> object's properties.</p> - -<table class="standard-table"> - <caption>Table 7.2 Properties of Number</caption> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>MAX_VALUE</code></td> - <td>The largest representable number</td> - </tr> - <tr> - <td><code>MIN_VALUE</code></td> - <td>The smallest representable number</td> - </tr> - <tr> - <td><code>NaN</code></td> - <td>Special "not a number" value</td> - </tr> - <tr> - <td><code>NEGATIVE_INFINITY</code></td> - <td>Special negative infinite value; returned on overflow</td> - </tr> - <tr> - <td><code>POSITIVE_INFINITY</code></td> - <td>Special positive infinite value; returned on overflow</td> - </tr> - </tbody> -</table> - -<p>The Number prototype provides methods for retrieving information from Number objects in various formats. The following table summarizes the methods of <code>Number.prototype</code>.</p> - -<table class="fullwidth-table"> - <caption>Table 7.3 Methods of Number.prototype</caption> - <thead> - <tr> - <th scope="col">Method</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>toExponential</code></td> - <td>Returns a string representing the number in exponential notation.</td> - </tr> - <tr> - <td><code>toFixed</code></td> - <td>Returns a string representing the number in fixed-point notation.</td> - </tr> - <tr> - <td><code>toPrecision</code></td> - <td>Returns a string representing the number to a specified precision in fixed-point notation.</td> - </tr> - <tr> - <td><code>toSource</code></td> - <td>Returns an object literal representing the specified <code>Number</code> object; you can use this value to create a new object. Overrides the <code>Object.toSource</code> method.</td> - </tr> - <tr> - <td><code>toString</code></td> - <td>Returns a string representing the specified object. Overrides the <code>Object.toString </code>method.</td> - </tr> - <tr> - <td><code>valueOf</code></td> - <td>Returns the primitive value of the specified object. Overrides the <code>Object.valueOf </code>method.</td> - </tr> - </tbody> -</table> - -<h2 id="RegExp_Object">RegExp Object</h2> - -<p>The <code>RegExp</code> object lets you work with regular expressions. It is described in <a href="/en-US/docs/JavaScript/Guide/Regular_Expressions" title="en-US/docs/JavaScript/Guide/Regular Expressions">Regular Expressions</a>.</p> - -<h2 id="String_Object">String Object</h2> - -<p>The <code>String</code> object is a wrapper around the string primitive data type. Do not confuse a string literal with the <code>String</code> object. For example, the following code creates the string literal <code>s1</code> and also the <code>String</code> object <code>s2</code>:</p> - -<pre class="brush: js">var s1 = "foo"; //creates a string literal value -var s2 = new String("foo"); //creates a String object -</pre> - -<p>You can call any of the methods of the <code>String</code> object on a string literal value—JavaScript automatically converts the string literal to a temporary <code>String</code> object, calls the method, then discards the temporary <code>String</code> object. You can also use the <code>String.length</code> property with a string literal.</p> - -<p>You should use string literals unless you specifically need to use a <code>String</code> object, because <code>String</code> objects can have counterintuitive behavior. For example:</p> - -<pre class="brush: js">var s1 = "2 + 2"; //creates a string literal value -var s2 = new String("2 + 2"); //creates a String object -eval(s1); //returns the number 4 -eval(s2); //returns the string "2 + 2"</pre> - -<p>A <code>String</code> object has one property, <code>length</code>, that indicates the number of characters in the string. For example, the following code assigns <code>x</code> the value 13, because "Hello, World!" has 13 characters:</p> - -<pre class="brush: js">var mystring = "Hello, World!"; -var x = mystring.length; -</pre> - -<p>A <code>String</code> object has two types of methods: those that return a variation on the string itself, such as <code>substring</code> and <code>toUpperCase</code>, and those that return an HTML-formatted version of the string, such as <code>bold</code> and <code>link</code>.</p> - -<p>For example, using the previous example, both <code>mystring.toUpperCase()</code> and <code>"hello, world!".toUpperCase()</code> return the string "HELLO, WORLD!"</p> - -<p>The <code>substring</code> method takes two arguments and returns a subset of the string between the two arguments. Using the previous example, <code>mystring.substring(4, 9)</code> returns the string "o, Wo". See the <a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/substring" title="en-US/docs/JavaScript/Reference/Global Objects/String/substring"><code>substring</code></a> method of the <code>String</code> object in the JavaScript Reference for more information.</p> - -<p>The <code>String</code> object also has a number of methods for automatic HTML formatting, such as <code>bold</code> to create boldface text and <code>link</code> to create a hyperlink. For example, you could create a hyperlink to a hypothetical URL with the <code>link</code> method as follows:</p> - -<pre class="brush: js">mystring.link("http://www.helloworld.com") -</pre> - -<p>The following table summarizes the methods of <code>String</code> objects.</p> - -<table class="fullwidth-table"> - <caption>Table 7.4 Methods of String Instances</caption> - <thead> - <tr> - <th scope="col">Method</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/anchor" title="en-US/docs/JavaScript/Reference/Global_Objects/String/anchor">anchor</a></code></td> - <td>Creates HTML named anchor.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/big" title="en-US/docs/JavaScript/Reference/Global_Objects/String/big">big</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/blink" title="en-US/docs/JavaScript/Reference/Global_Objects/String/blink">blink</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/bold" title="en-US/docs/JavaScript/Reference/Global_Objects/String/bold">bold</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/fixed" title="en-US/docs/JavaScript/Reference/Global_Objects/String/fixed">fixed</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/italics" title="en-US/docs/JavaScript/Reference/Global_Objects/String/italics">italics</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/small" title="en-US/docs/JavaScript/Reference/Global_Objects/String/small">small</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/strike" title="en-US/docs/JavaScript/Reference/Global_Objects/String/strike">strike</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/sub" title="en-US/docs/JavaScript/Reference/Global_Objects/String/sub">sub</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/sup" title="en-US/docs/JavaScript/Reference/Global_Objects/String/sup">sup</a></code></td> - <td>Create HTML formatted string.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/charAt" title="en-US/docs/JavaScript/Reference/Global_Objects/String/charAt">charAt</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/charCodeAt" title="en-US/docs/JavaScript/Reference/Global_Objects/String/charCodeAt">charCodeAt</a></code></td> - <td>Return the character or character code at the specified position in string.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/indexOf" title="en-US/docs/JavaScript/Reference/Global_Objects/String/indexOf">indexOf</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/lastIndexOf" title="en-US/docs/JavaScript/Reference/Global_Objects/String/lastIndexOf">lastIndexOf</a></code></td> - <td>Return the position of specified substring in the string or last position of specified substring, respectively.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/link" title="en-US/docs/JavaScript/Reference/Global_Objects/String/link">link</a></code></td> - <td>Creates HTML hyperlink.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/concat" title="en-US/docs/JavaScript/Reference/Global_Objects/String/concat">concat</a></code></td> - <td>Combines the text of two strings and returns a new string.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/fromCharCode" title="en-US/docs/JavaScript/Reference/Global_Objects/String/fromCharCode">fromCharCode</a></code></td> - <td>Constructs a string from the specified sequence of Unicode values. This is a method of the String class, not a String instance.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/split" title="en-US/docs/JavaScript/Reference/Global_Objects/String/split">split</a></code></td> - <td>Splits a <code>String</code> object into an array of strings by separating the string into substrings.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/slice" title="en-US/docs/JavaScript/Reference/Global_Objects/String/slice">slice</a></code></td> - <td>Extracts a section of an string and returns a new string.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/substring" title="en-US/docs/JavaScript/Reference/Global_Objects/String/substring">substring</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/substr" title="en-US/docs/JavaScript/Reference/Global_Objects/String/substr">substr</a></code></td> - <td>Return the specified subset of the string, either by specifying the start and end indexes or the start index and a length.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/match" title="en-US/docs/JavaScript/Reference/Global_Objects/String/match">match</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/replace" title="en-US/docs/JavaScript/Reference/Global_Objects/String/replace">replace</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/search" title="en-US/docs/JavaScript/Reference/Global_Objects/String/search">search</a></code></td> - <td>Work with regular expressions.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/toLowerCase" title="en-US/docs/JavaScript/Reference/Global_Objects/String/toLowerCase">toLowerCase</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/toUpperCase" title="en-US/docs/JavaScript/Reference/Global_Objects/String/toUpperCase">toUpperCase</a></code></td> - <td> - <p>Return the string in all lowercase or all uppercase, respectively.</p> - </td> - </tr> - </tbody> -</table> - -<p>autoPreviousNext("JSGChapters")</p> diff --git a/files/ru/web/javascript/guide/ispolzovanie_promisov/index.html b/files/ru/web/javascript/guide/using_promises/index.html index a910dfca09..a910dfca09 100644 --- a/files/ru/web/javascript/guide/ispolzovanie_promisov/index.html +++ b/files/ru/web/javascript/guide/using_promises/index.html diff --git a/files/ru/web/javascript/guide/об_этом_руководстве/index.html b/files/ru/web/javascript/guide/об_этом_руководстве/index.html deleted file mode 100644 index 397327911c..0000000000 --- a/files/ru/web/javascript/guide/об_этом_руководстве/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Об этом руководстве -slug: Web/JavaScript/Guide/Об_этом_руководстве ---- -<p> </p> -<p><span id="result_box" lang="ru"><span class="hps">JavaScript</span> <span class="hps">является</span> <span class="hps">кросс-платформенным,</span> <span class="hps">объектно-ориентированный</span> <span class="hps">язык сценариев.</span> <span class="hps">Это руководство</span> <span class="hps">объясняет</span> <span class="hps">все, что нужно</span> <span class="hps">знать об использовании</span> <span class="hps">JavaScript.</span></span></p> -<h2 id="Новые_возможности_в_версиях_JavaScript"><span class="short_text" id="result_box" lang="ru"><span class="hps">Новые возможности в</span> <span class="hps">версиях</span> <span class="hps">JavaScript</span></span></h2> -<pre class="script" style="font-size: 16px;">/* Note: To add a link to new JavaScript version description -add version number to versionList variable below. The page linked to -must reside in /en/JavaScript/New_in_JavaScript/N, where N is version number. */ - -var versionList = ["1.5", "1.6", "1.7", "1.8", "1.8.1", "1.8.5"]; -var s = ""; -<ul> - foreach (var i in versionList){ - let s = "/en/JavaScript/New_in_JavaScript/" .. i; - <li>web.link(s, wiki.getPage(s).title)</li>; - } -</ul>; -</pre> -<h2 id="То_что_вы_должны_уже_знать"><span class="short_text" id="result_box" lang="ru"><span class="hps">То, что вы</span> <span class="hps">должны уже знать</span></span></h2> -<p>This guide assumes you have the following basic background:</p> -<ul> <li><span id="result_box" lang="ru"><span>Общее представление о</span> <span class="hps">сети Интернет и</span> <span class="hps atn">World Wide Web (</span><span>WWW).</span></span></li> <li><span id="result_box" lang="ru"><span class="hps">Хорошие</span> <span class="hps">знания</span> <span class="hps">языка</span> <span class="hps">гипертекстовой разметки</span> <span class="hps">(HTML).</span></span></li> -</ul> -<p><span id="result_box" lang="ru"><span class="hps">Некоторый опыт программирования</span> <span class="hps">на языках</span><span>, таких как</span> <span class="hps">C</span> <span class="hps">или</span> <span class="hps">Visual Basic,</span> <span class="hps">полезен,</span> <span class="hps">но не обязателен.</span></span></p> -<h2 id="Версии_JavaScript">Версии JavaScript</h2> -<table class="standard-table"> <caption>Таблица №1 версии JavaScript и веб-браузера Navigator</caption> <thead> <tr> <th scope="col">JavaScript version</th> <th scope="col">Navigator version</th> </tr> </thead> <tbody> <tr> <td>JavaScript 1.0</td> <td>Navigator 2.0</td> </tr> <tr> <td>JavaScript 1.1</td> <td>Navigator 3.0</td> </tr> <tr> <td>JavaScript 1.2</td> <td>Navigator 4.0-4.05</td> </tr> <tr> <td>JavaScript 1.3</td> <td>Navigator 4.06-4.7x</td> </tr> <tr> <td>JavaScript 1.4</td> <td> </td> </tr> <tr> <td>JavaScript 1.5</td> <td>Navigator 6.0<br> <span class="short_text" id="result_box" lang="ru"><span class="hps atn">Mozilla (</span><span>браузер с открытым</span> <span class="hps">исходным кодом)</span></span></td> </tr> <tr> <td>JavaScript 1.6</td> <td><a href="/en/Firefox_1.5_for_developers" title="en/Firefox_1.5_for_developers">Firefox 1.5</a>, other Mozilla 1.8-based products</td> </tr> <tr> <td>JavaScript 1.7</td> <td><a href="/en/Firefox_2_for_developers" title="en/Firefox_2_for_developers">Firefox 2</a>, other Mozilla 1.8.1-based products</td> </tr> <tr> <td>JavaScript 1.8</td> <td><a href="/en/Firefox_3_for_developers" title="en/Firefox_3_for_developers">Firefox 3</a>, other Gecko 1.9-based products</td> </tr> </tbody> -</table> -<p> </p> -<div class="almost_half_cell" id="gt-res-content"> <div dir="ltr" style="zoom: 1;"><span id="result_box" lang="ru"><span class="hps">Каждая версия</span> <span class="hps">Netscape</span> <span class="hps">Enterprise Server,</span> <span class="hps">также поддерживает</span> <span class="hps">различные версии</span> <span class="hps">JavaScript.</span> <span class="hps">Чтобы помочь вам</span> <span class="hps">писать сценарии</span><span>, которые совместимы</span> <span class="hps">с несколькими версиями</span> <span class="hps">Enterprise Server</span><span>, это руководство</span> <span class="hps">использует</span> <span class="hps">аббревиатуру</span> <span class="hps">для обозначения</span> <span class="hps">версии сервера</span><span>, в котором каждая</span> <span class="hps">функция была реализована</span><span>.</span></span></div> -</div> -<table class="standard-table"> <caption>Таблица №2 Аббревиатуры в версиях Netscape Enterprise Server</caption> <thead> <tr> <th scope="col">Аббревиатура</th> <th scope="col">Версия Server Enterprise</th> </tr> </thead> <tbody> <tr> <td>NES 2.0</td> <td>Netscape Enterprise Server 2.0</td> </tr> <tr> <td>NES 3.0</td> <td>Netscape Enterprise Server 3.0</td> </tr> </tbody> -</table> -<h2 id="Где_найти_информацию_о_JavaScript">Где найти информацию о JavaScript</h2> -<p><span id="result_box" lang="ru"><span class="hps">JavaScript</span> <span class="hps">документация включает в себя</span> <span class="hps">следующие книги:</span></span></p> -<ul> <li><a href="/en/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide">JavaScript Guide</a> <span id="result_box" lang="ru"><span class="hps atn">(</span><span>это руководство</span><span>) предоставляет информацию о</span> <span class="hps">языке</span> <span class="hps">JavaScript</span> <span class="hps">и его объектах.</span></span></li> <li><a href="/en/JavaScript/Reference" title="en/JavaScript/Reference">JavaScript Reference</a> <span class="short_text" id="result_box" lang="ru"><span class="hps">содержит справочный материал о</span> <span class="hps">языке</span> <span class="hps">JavaScript.</span></span></li> -</ul> -<p><span id="result_box" lang="ru"><span class="hps">Если</span> <span class="hps">вы новичок в</span> <span class="hps">JavaScript</span><span>, начните с</span></span> <a href="/en/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide"><span id="result_box" lang="ru"><span class="hps">руководства</span> <span class="hps">JavaScript.</span></span></a> <span id="result_box" lang="ru"><span class="hps">Если у вас есть</span> <span class="hps">твердое понимание</span> <span class="hps">основы</span><span>, вы можете использовать</span></span> <a href="/en/JavaScript/Reference" title="en/JavaScript/Reference">Справочник по JavaScript</a> <span id="result_box" lang="ru"><span>чтобы получить</span> <span class="hps">более подробную информацию</span> <span class="hps">на отдельных</span> <span class="hps">объектах и операторах.</span></span></p> -<h2 id="Советы_для_изучения_JavaScript"><span class="short_text" id="result_box" lang="ru"><span class="hps">Советы</span> <span class="hps">для изучения</span> <span class="hps">JavaScript</span></span></h2> -<p><span id="result_box" lang="ru"><span class="hps">Начало работы с</span> <span class="hps">JavaScript</span> <span class="hps">очень просто:</span> <span class="hps">все, что вам</span> <span class="hps">нужно, это</span> <span class="hps">современный</span> <span class="hps">веб-браузер.</span> <span class="hps">Это руководство</span> <span class="hps">включает в себя некоторые</span> <span class="hps">функции</span> <span class="hps">JavaScript</span><span>, которые только</span> <span class="hps">в настоящее время</span> <span class="hps">доступна в последней</span> <span class="hps">версии</span> <span class="hps atn">Firefox (</span><span>и других</span> браузеров с движком Gecko<span class="hps">)</span><span>, поэтому </span></span><span id="result_box" lang="ru"><span class="hps">рекомендуется</span></span><span id="result_box" lang="ru"><span> использование</span> <span class="hps">самых</span> <span class="hps">последних версий</span> <span class="hps">Firefox</span><span class="hps">.</span></span></p> -<h3 id="Интерактивный_интерпретатор"><span class="short_text" id="result_box" lang="ru"><span>Интерактивный интерпретатор</span></span></h3> -<p>Диалоговый JavaScript незамедлительно - неоценимая помощь изучению языка, так как это предоставляет вам возможность пробовать вещи в интерактивном режиме без необходимости сохранить файл и обновить страницу. Ошибочная Консоль Firefox, доступная через меню Инструменты, обеспечивает простой путь пробовать диалоговый JavaScript: Только вводят линию кода и щелкают кнопку "Evaluate".</p> -<p><img alt="Image:ErrorConsole.png" class="internal" src="/@api/deki/files/192/=ErrorConsole.png"></p> -<h3 id="Firebug">Firebug</h3> -<p>Более передовой диалоговый незамедлительно - доступный использующий <a class="external" href="http://www.getfirebug.com/">Firebug</a>, дополнение к Firefox. Выражения, которые вы печатаете, интерпретируются как объекты <span id="result_box" lang="ru"><span class="hps">и</span> <span class="hps">связанные с</span> <span class="hps">другими частями</span> <span class="hps">Firebug.</span></span> <span id="result_box" lang="ru"><span class="hps">Например, вы</span> <span class="hps">можете добавить</span> <span class="hps">5 плюс</span> <span class="hps">5,</span> <span class="hps">изменять регистр</span> <span class="hps">строки</span><span>,</span></span> get a clickable link to the document, or get a link to an element:</p> -<p><img alt="" class="internal" src="/@api/deki/files/5188/=FirebugCommandLine.PNG" style="width: 728px; height: 281px;"></p> -<p><span id="result_box" lang="ru"><span class="hps">Использование</span> <span class="hps">стрелки на</span> <span class="hps">правом нижнем углу</span> <span class="hps">дает</span> <span class="hps">команду</span> <span class="hps">редактор для</span> <span class="hps">многострочного</span> <span class="hps">сценариев.</span></span></p> -<p>Firebug also provides an advanced DOM inspector, a JavaScript debugger, a profiling tool and various other utilities. JavaScript code running in a Web page can call, <code>console.log()</code>, a function that prints its arguments to the Firebug console.</p> -<p>Many of the examples in this guide use <code>alert()</code> to show messages as they execute. If you have Firebug installed you can use <code>console.log()</code> in place of <code>alert()</code> when running these examples.</p> -<h2 id="Document_conventions">Document conventions</h2> -<p>JavaScript applications run on many operating systems; the information in this book applies to all versions. File and directory paths are given in Windows format (with backslashes separating directory names). For Unix versions, the directory paths are the same, except that you use slashes instead of backslashes to separate directories.</p> -<p>This guide uses uniform resource locators (URLs) of the following form:</p> -<p><code>http://<em>server</em>.<em>domain</em>/<em>path</em>/<em>file</em>.html</code></p> -<p>In these URLs, <em>server</em> represents the name of the server on which you run your application, such as <code>research1</code> or <code>www</code>; <em>domain</em> represents your Internet domain name, such as <code>netscape.com</code> or <code>uiuc.edu</code>; <em>path</em> represents the directory structure on the server; and <em>file</em><code>.html</code> represents an individual file name. In general, items in italics in URLs are placeholders and items in normal monospace font are literals. If your server has Secure Sockets Layer (SSL) enabled, you would use <code>https</code> instead of <code>http</code> in the URL.</p> -<p>This guide uses the following font conventions:</p> -<ul> <li><code>The monospace font</code> is used for sample code and code listings, API and language elements (such as method names and property names), file names, path names, directory names, HTML tags, and any text that must be typed on the screen. (<code><em>Monospace italic font</em></code> is used for placeholders embedded in code.)</li> <li><em>Italic type</em> is used for book titles, emphasis, variables and placeholders, and words used in the literal sense.</li> <li><strong>Boldface</strong> type is used for glossary terms.</li> -</ul> -<pre class="script" style="font-size: 16px;">autoPreviousNext("JSGChapters"); -wiki.languages({ - "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/關於", - "es": "es/Gu\u00eda_JavaScript_1.5/Acerca_de_esta_gu\u00eda", - "fr": "fr/Guide_JavaScript_1.5/\u00c0_propos", - "ja": "ja/Core_JavaScript_1.5_Guide/About", - "ko": "ko/Core_JavaScript_1.5_Guide/About", - "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/O_tym_przewodniku", - "zh-cn": "cn/Core_JavaScript_1.5_Guide/\u5173\u4e8e" -}) -</pre> diff --git a/files/ru/web/javascript/introduction_to_object-oriented_javascript/index.html b/files/ru/web/javascript/introduction_to_object-oriented_javascript/index.html deleted file mode 100644 index d07cf043cc..0000000000 --- a/files/ru/web/javascript/introduction_to_object-oriented_javascript/index.html +++ /dev/null @@ -1,356 +0,0 @@ ---- -title: Вступление в Объектно-ориентированный JavaScript -slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript -translation_of: Learn/JavaScript/Objects -translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript ---- -<p>Объектно-ориентированный до основания, JavaScript предоставляет мощные и гибкие {{Glossary("OOP")}} возможности. Эта статья начинается с введения в объектно-ориентированное программирование, затем рассматривает модель объекта JavaScript и, наконец, демонстрирует концепции объектно-ориентированного программирования в JavaScript.</p> - -<h2 id="JavaScript_Review" name="JavaScript_Review">Обзор JavaScript</h2> - -<p>Если вы неуверенно владеете такими концепциями JavaScript, как переменные, типы, функции и области видимости, вы можете прочитать об этих темах в <a href="/ru/docs/Web/JavaScript/A_re-introduction_to_JavaScript">Повторное вступление в JavaScript</a>. Вы также можете обратиться к <a href="/ru/docs/Web/JavaScript/Guide">JavaScript Guide</a>.</p> - -<h2 id="Object-oriented_programming" name="Object-oriented_programming">Объектно-ориентированное программирование</h2> - -<p>Объектно-ориентированное программирование (ООП) — это парадигма программирования, которая использует {{glossary("абстракции")}}, чтобы создавать модели, основанные на объектах реального мира. ООП использует несколько техник из ранее признанных парадигм, включая {{glossary("модульность")}}, {{glossary("полиморфизм")}} и {{glossary("инкапсуляция")}}. На сегодняшний день многие популярные языки программирования (такие как Java, JavaScript, C#, C++, Python, PHP, Ruby и Objective-C) поддерживают ООП.</p> - -<p>ООП представляет программное обеспечение как совокупность взаимодействующих объектов, а не набор функций или просто список команд (как в традиционном представлении). В ООП, каждый объект может получать сообщения, обрабатывать данные, и отправлять сообщения другим объектам. Каждый объект может быть представлен как маленькая независимая машина с отдельной ролью или ответственностью.</p> - -<p>ООП способствует большей гибкости и поддерживаемости в программировании, и широко распространена в крупномасштабном программном инжиниринге. Так как ООП настоятельно подчеркивает модульность, объектно-ориентированный код проще в разработке и проще для понимания впоследствии. Объектно-ориентированный код способствует более точному анализу, кодированию и пониманию сложных ситуаций и процедур, чем методы программирования с меньшей модульностью.<a href="#cite-1"><sup>1</sup></a></p> - -<h2 id="Terminology" name="Terminology">Терминология</h2> - -<dl> - <dt>{{Glossary("Пространство имён")}}</dt> - <dd>Контейнер, который позволяет разработчикам связать весь функционал под уникальным, специфичным для приложения именем.</dd> - <dt>{{Glossary("Класс")}}</dt> - <dd>Определяет характеристики объекта. Класс является описанием шаблона свойств и методов объекта.</dd> - <dt>{{Glossary("Объект")}}</dt> - <dd>Экземпляр класса.</dd> - <dt>{{Glossary("Свойство")}}</dt> - <dd>Характеристика объекта, например, цвет.</dd> - <dt>{{Glossary("Метод")}}</dt> - <dd>Возможности объекта, такие как ходьба. Это подпрограммы или функции, связанные с классом.</dd> - <dt>{{Glossary("Конструктор")}}</dt> - <dd>Метод, вызываемый в момент создания экземпляра объекта. Он, как правило, имеет то же имя, что и класс, содержащий его.</dd> - <dt>{{Glossary("Наследование")}}</dt> - <dd>Класс может наследовать характеристики от другого класса.</dd> - <dt>{{Glossary("Инкапсуляция")}}</dt> - <dd>Способ комплектации данных и методов, которые используют данные.</dd> - <dt>{{Glossary("Абстракция")}}</dt> - <dd>Совокупность комплексных наследований, методов и свойств объекта должны адекватно отражать модель реальности.</dd> - <dt>{{Glossary("Полиморфизм")}}</dt> - <dd>Поли означает "<em>много</em>", а морфизм "<em>формы</em>". Различные классы могут объявить один и тот же метод или свойство.</dd> -</dl> - -<p>Для более обширного описания объектно-ориентированного программирования, см {{interwiki("wikipedia", "Объектно-ориентированное_программирование")}} в Wikipedia.</p> - -<h2 id="Прототипное_программирование">Прототипное программирование</h2> - -<p>Прототипное программирование — это модель ООП которая не использует классы, а вместо этого сначала выполняет поведение класса и затем использует его повторно (эквивалент наследования в языках на базе классов), декорируя (или расширяя) существующие<em> </em>объекты <em>прототипы</em>. (Также называемое бесклассовое, прототипно-ориентированное, или экземплярно-ориентированное программирование.)</p> - -<p>Оригинальный (и наиболее каноничный) пример прототипно-ориентированного языка это {{interwiki("wikipedia", "Self (programming language)", "Self")}} разработанный Дэвидом Ангаром и Ренделлом Смитом. Однако бесклассовый стиль программирования стал набирать популярность позднее, и был принят для таких языков программирования, как JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (при использовании фреймворка Viewer для манипуляции компонентами Morphic) и некоторых других.<a href="#cite-1"><sup>1</sup></a></p> - -<h2 id="JavaScript_Object_Oriented_Programming" name="JavaScript_Object_Oriented_Programming">Объектно-ориентированное программирование в JavaScript</h2> - -<h3 id="Пространство_имён">Пространство имён</h3> - -<p>Пространство имён — это контейнер, который позволяет разработчикам собрать функциональность под уникальным именем приложения. <strong>Пространство имён в JavaScript — это объект, содержащий методы, свойства и другие объекты.</strong></p> - -<div class="note"> -<p>Важно отметить, что на уровне языка в JavaScript нет разницы между пространством имён и любым другим объектом. Это отличает JS от множества других объектно-ориентированных языков и может стать причиной путаницы у начинающих JS программистов.</p> -</div> - -<p>Принцип работы пространства имён в JS прост: создать один глобальный объект и все переменные, методы и функции объявлять как свойства этого объекта. Также использование пространств имён снижает вероятность возникновения конфликтов имён в приложении так как каждый объект приложения является свойством глобального объекта.</p> - -<p>Давайте создадим глобальный объект MYAPP:</p> - -<pre class="brush: js">// Глобальное пространство имён -var MYAPP = MYAPP || {};</pre> - -<p>Во фрагменте кода выше мы сначала проверяем определён ли объект MYAPP (в текущем файле или другом файле). Если да, то используем существующий глобальный объект MYAPP, иначе создаём пустой объект MYAPP, в котором мы инкапсулируем все методы, функции, переменные и объекты.</p> - -<p>Также мы можем создать подпространство имён (учтите, что сначала нужно объявить глобальный объект):</p> - -<pre class="brush: js">// Подпространство имён -MYAPP.event = {};</pre> - -<p>Далее следует пример синтаксиса создания пространства имён и добавления переменных, функций и методов:</p> - -<pre class="brush: js">// Создаём контейнер MYAPP.commonMethod для общих методов и свойств -MYAPP.commonMethod = { - regExForName: "", // определяет регулярное выражение для валидации имени - regExForPhone: "", // определяет регулярное выражение для валидации телефона - validateName: function(name){ - // Сделать что-то с name, вы можете получить доступ к переменной regExForName - // используя "this.regExForName" - }, - - validatePhoneNo: function(phoneNo){ - // Сделать что-то с номером телефона - } -} - -// Объект вместе с объявлением методов -MYAPP.event = { - addListener: function(el, type, fn) { - // код - }, - removeListener: function(el, type, fn) { - // код - }, - getEvent: function(e) { - // код - } - - // Можно добавить другие свойства и методы -} - -// Синтаксис использования метода addListener: -MYAPP.event.addListener("yourel", "type", callback);</pre> - -<h3 id="Core_Objects" name="Core_Objects">Стандартные встроенные объекты</h3> - -<p>В JavaScript есть несколько объектов, встроенных в ядро, например {{jsxref("Math")}}, {{jsxref("Object")}}, {{jsxref("Array")}} и {{jsxref("String")}}. Пример ниже показывает как использовать объект Math, чтобы получить случайное число, используя его метод random().</p> - -<pre class="brush: js">console.log(Math.random()); -</pre> - -<div class="note"><strong>Примечание:</strong> В данном примере и далее мы будем использовать глобальную функцию {{domxref("console.log()")}}. Если точнее, то функция <code>console.log()</code> не является частью JavaScript, но она поддерживается многими браузерами для облегчения отладки.</div> - -<p>Смотрите <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects" title="en-US/docs/Web/JavaScript/Reference/Global_Objects">JavaScript Reference: Standard built-in objects</a>, чтобы ознакомиться со списком всех встроенных объектов JavaScript.</p> - -<p>Каждый объект в JavaScript является экземпляром объекта <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>, следовательно наследует все его свойства и методы.</p> - -<h3 id="Custom_Objects" name="Custom_Objects">Объекты, создаваемые пользователем</h3> - -<h4 id="The_Class" name="The_Class">Класс</h4> - -<p>JavaScript — это прототипно-ориентированный язык, и в нём нет оператора <code>class</code>, который имеет место в C++ или Java. Иногда это сбивает с толку программистов, привыкших к языкам с оператором <code>class</code>. Вместо этого JavaScript использует функции как конструкторы классов. Объявить класс так же просто как объявить функцию. В примере ниже мы объявляем новый класс Person с пустым конструктором:</p> - -<pre class="brush: js">var Person = function () {}; -</pre> - -<h4 id="The_Object_.28Class_Instance.29" name="The_Object_.28Class_Instance.29">Объект (экземпляр класса)</h4> - -<p>Для создания нового экзмепляра объекта <code>obj</code> мы используем оператор <code>new obj</code>, присваивая результат (который имеет тип <code>obj</code>) в переменную.</p> - -<p>В примере выше мы определили класс <code>Person</code>. В примере ниже мы создаём два его экземпляра (<code>person1</code> и <code>person2</code>).</p> - -<pre class="brush: js">var person1 = new Person(); -var person2 = new Person(); -</pre> - -<div class="note">Ознакомьтесь с {{jsxref("Object.create()")}}, новым, дополнительным методом инстанцирования, который создаёт неинициализированный экземпляр.</div> - -<h4 id="The_Constructor" name="The_Constructor">Конструктор</h4> - -<p>Конструктор вызывается в момент создания экземпляра класса (в тот самый момент, когда создается объект). Конструктор является методом класса. В JavaScript функция служит конструктором объекта, поэтому нет необходимости явно определять метод конструктор. Любое действие определенное в конструкторе будет выполненно в момент создания экземпляра класса.</p> - -<p>Конструктор используется для задания свойств объекта или для вызова методов, которые подготовят объект к использованию. Добавление методов и их описаний производится с использованием другого синтаксиса, описанного далее в этой статье.</p> - -<p>В примере ниже, конструктор класса <code>Person</code> выводит в консоль сообщение в момент создания нового экземпляра <code>Person</code>.</p> - -<pre class="brush: js">var Person = function () { - console.log('instance created'); -}; - -var person1 = new Person(); -var person2 = new Person(); -</pre> - -<h4 id="The_Property_.28object_attribute.29" name="The_Property_.28object_attribute.29">Свойство (аттрибут объекта)</h4> - -<p>Свойства — это переменные, содержащиеся в классе; каждый экземпляр объекта имеет эти свойства. Свойства устанавливаются в конструкторе (функции) класса, таким образом они создаются для каждого экземпляра.</p> - -<p>Ключевое слово <code>this</code>, которое ссылается на текущий объект, позволяет вам работать со свойствами класса. Доступ (чтение и запись) к свойствам снаружи класса осуществляется синтаксисом <code>InstanceName.Property,</code> так же как в C++, Java и некоторых других языках. (Внутри класса для получения и изменения значений свойств используется синтаксис <code>this.Property</code>)</p> - -<p>В примере ниже, мы определяем свойство <code>firstName</code> для класса <code>Person</code> при создании экземпляра:</p> - -<pre class="brush: js">var Person = function (firstName) { - this.firstName = firstName; - console.log('Person instantiated'); -}; - -var person1 = new Person('Alice'); -var person2 = new Person('Bob'); - -// Выводит свойство firstName в консоль -console.log('person1 is ' + person1.firstName); // выведет "person1 is Alice" -console.log('person2 is ' + person2.firstName); // выведет "person2 is Bob" -</pre> - -<h4 id="The_methods" name="The_methods">Методы</h4> - -<p>Методы — это функции (и определяются как функции), но с другой стороны следуют той же логике, что и свойства. Вызов метода похож на доступ к свойству, но вы добавляете () на конце имени метода, возможно, с аргументами. Чтобы объявить метод, присвойте функцию в именованное свойство свойства <code>prototype</code> класса. Потом вы сможете вызвать метод объекта под тем именем, которое вы присвоили функции.</p> - -<p>В примере ниже мы определяем и используем метод <code>sayHello()</code> для класса <code>Person</code>.</p> - -<pre class="brush: js">var Person = function (firstName) { - this.firstName = firstName; -}; - -Person.prototype.sayHello = function() { - console.log("Hello, I'm " + this.firstName); -}; - -var person1 = new Person("Alice"); -var person2 = new Person("Bob"); - -// вызываем метод sayHello() класса Person -person1.sayHello(); // выведет "Hello, I'm Alice" -person2.sayHello(); // выведет "Hello, I'm Bob" -</pre> - -<p>В JavaScript методы это — обычные объекты функций, связанные с объектом как свойства: это означает, что вы можете вызывать методы "вне контекста". Рассмотрим следующий пример:</p> - -<pre class="brush: js">var Person = function (firstName) { - this.firstName = firstName; -}; - -Person.prototype.sayHello = function() { - console.log("Hello, I'm " + this.firstName); -}; - -var person1 = new Person("Alice"); -var person2 = new Person("Bob"); -var helloFunction = person1.sayHello; - -// выведет "Hello, I'm Alice" -person1.sayHello(); - -// выведет "Hello, I'm Bob" -person2.sayHello(); - -// выведет "Hello, I'm undefined" (or fails -// with a TypeError in strict mode) -helloFunction(); - -// выведет true -console.log(helloFunction === person1.sayHello); - -// выведет true -console.log(helloFunction === Person.prototype.sayHello); - -// выведет "Hello, I'm Alice" -helloFunction.call(person1);</pre> - -<p>Как показывает пример, все ссылки, которые мы имеем на функцию <code>sayHello</code> — <code>person1</code>, <code>Person.prototype</code>, переменная <code>helloFunction</code> и т.д. — ссылаются на одну и ту же функцию. Значение <code>this</code> в момент вызова функции зависит от того, как мы её вызываем. Наиболее часто мы обращаемся к <code>this</code> в выражениях, где мы получаем функцию из свойства объекта — <code>person1.sayHello()</code> — <code>this</code> устанавливается на объект, из которого мы получили функцию (<code>person1</code>), вот почему <code>person1.sayHello()</code> использует имя "Alice", а <code>person2.sayHello()</code> использует имя "Bob". Но если вызов будет совершён иначе, то <code>this</code> будет иным: вызов <code>this</code> из переменной — <code>helloFunction()</code> — установит <code>this</code> на глобальный объект (<code>window</code> в браузерах). Так как этот объект (вероятно) не имеет свойства <code>firstName</code>, функция выведет "Hello, I'm undefined" (так произойдёт в нестрогом режиме; в <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> всё будет иначе (ошибка), не будем сейчас вдаваться в подробности, чтобы избежать путаницы). Или мы можем указать <code>this</code> явно с помощью <code>Function#call</code> (или <code>Function#apply</code>) как показано в конце примера.</p> - -<div class="note"><strong>Примечание:</strong> Смотрите подробнее о <code>this</code> в <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call">Function#call</a> и <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply">Function#apply</a></div> - -<h4 id="Inheritance" name="Inheritance">Наследование</h4> - -<p>Наследование — это способ создать класс как специализированную версию одного или нескольких классов (JavaScript поддерживает только одиночное наследование). Специализированный класс, как правило, называют потомком, а другой класс родителем. В JavaScript наследование осуществляется присвоением экземпляра класса родителя классу потомку. В современных браузерах вы можете реализовать наследование с помощью <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create">Object.create</a>.</p> - -<div class="note"><strong>Примечание:</strong> JavaScript не обнаружит <code>prototype.constructor</code> класса потомка (смотрите <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype">Object.prototype</a>) так что мы должны указать его вручную. Смотрите вопрос "<a href="http://stackoverflow.com/questions/8453887/why-is-it-necessary-to-set-the-prototype-constructor">Why is it necessary to set the prototype constructor?</a>" на Stackoverflow.</div> - -<p>В примере ниже мы определяем класс <code>Student</code> как потомка класса <code>Person</code>. Потом мы переопределяем метод <code>sayHello()</code> и добавляем метод <code>addGoodBye()</code>.</p> - -<pre class="brush: js">// Определяем конструктор Person -var Person = function(firstName) { - this.firstName = firstName; -}; - -// Добавляем пару методов в Person.prototype -Person.prototype.walk = function(){ - console.log("I am walking!"); -}; - -Person.prototype.sayHello = function(){ - console.log("Hello, I'm " + this.firstName); -}; - -// Определяем конструктор Student -function Student(firstName, subject) { - // Вызываем конструктор родителя, убедившись (используя Function#call) - // что "this" в момент вызова установлен корректно - Person.call(this, firstName); - - // Инициируем свойства класса Student - this.subject = subject; -}; - -// Создаём объект Student.prototype, который наследуется от Person.prototype. -// Примечание: Рспространённая ошибка здесь, это использование "new Person()", чтобы создать -// Student.prototype. Это неверно по нескольким причинам, не в последнюю очередь -// потому, что нам нечего передать в Person в качестве аргумента "firstName" -// Правильное место для вызова Person показано выше, где мы вызываем -// его в конструкторе Student. -Student.prototype = Object.create(Person.prototype); // Смотрите примечание выше - -// Устанавливаем свойство "constructor" для ссылки на класс Student -Student.prototype.constructor = Student; - -// Заменяем метод "sayHello" -Student.prototype.sayHello = function(){ - console.log("Hello, I'm " + this.firstName + ". I'm studying " - + this.subject + "."); -}; - -// Добавляем метод "sayGoodBye" -Student.prototype.sayGoodBye = function(){ - console.log("Goodbye!"); -}; - -// Пример использования: -var student1 = new Student("Janet", "Applied Physics"); -student1.sayHello(); // "Hello, I'm Janet. I'm studying Applied Physics." -student1.walk(); // "I am walking!" -student1.sayGoodBye(); // "Goodbye!" - -// Проверяем, что instanceof работает корректно -console.log(student1 instanceof Person); // true -console.log(student1 instanceof Student); // true -</pre> - -<p>Относительно строки <code>Student.prototype = Object.create(Person.prototype);</code>: В старых движках JavaScript, в которых нет <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a></code> можно использовать полифилл (ещё известный как "shim") или функцию которая достигает тех же результатов, такую как:</p> - -<pre class="brush: js">function createObject(proto) { - function ctor() { } - ctor.prototype = proto; - return new ctor(); -} - -// Пример использования: -Student.prototype = createObject(Person.prototype); -</pre> - -<div class="note"><strong>Примечание:</strong> Смотрите <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a> для более подробной информации, и shim для реализации на старых движках.</div> - -<h4 id="Encapsulation" name="Encapsulation">Инкапсуляция</h4> - -<p>В примере выше классу <code>Student</code> нет необходимости знать о реализации метода <code>walk()</code> класса <code>Person</code>, но он может его использовать; Класс <code>Student</code> не должен явно определять этот метод, пока мы не хотим его изменить. Это называется <strong>инкапсуляция</strong>, благодаря чему каждый класс собирает данные и методы в одном блоке.</p> - -<p>Сокрытие информации распространённая особенность, часто реализуемая в других языках программирования как приватные и защищённые методы/свойства. Однако в JavaScript можно лишь имитировать нечто подобное, это не является необходимым требованием объектно-ориентированного программирования.<a href="#cite-2"><sup>2</sup></a></p> - -<h4 id="Abstraction" name="Abstraction">Абстракция</h4> - -<p>Абстракция это механизм который позволяет смоделировать текущий фрагмент рабочей проблемы, с помощью наследования (специализации) или композиции. JavaScript достигает специализации наследованием, а композиции возможностью экземплярам класса быть значениями атрибутов других объектов.</p> - -<p>В JavaScript класс <code>Function</code> наследуется от класса <code>Object</code> (это демонстрирует специализацию), а свойство <code>Function.prototype</code> это экземпляр класса <code>Object</code> (это демонстрирует композицию).</p> - -<pre class="brush: js">var foo = function () {}; - -// выведет "foo is a Function: true" -console.log('foo is a Function: ' + (foo instanceof Function)); - -// выведет "foo.prototype is an Object: true" -console.log('foo.prototype is an Object: ' + (foo.prototype instanceof Object));</pre> - -<h4 id="Polymorphism" name="Polymorphism">Полиморфизм</h4> - -<p>Так как все методы и свойства определяются внутри свойства <code>prototype</code>, различные классы могут определять методы с одинаковыми именами; методы находятся в области видимости класса в котором они определены, пока два класса не имеют связи родитель-потомок (например, один наследуется от другого в цепочке наследований).</p> - -<h2 id="Notes" name="Notes">Примечания</h2> - -<p>Это не все способы которыми можно реализовать объектно-ориентированное программирование в JavaScript, который очень гибок в этом отношении. Также способы рассмотренные здесь не отражают всех возможностей JavaScript и не подражают реализации теории объектов в других языках.</p> - -<p>Существуют другие способы, которые реализуют ещё более продвинутое объектно-ориентированное программирование на JavaScript, но они выходят за рамки этой вводной статьи.</p> - -<h2 id="References" name="References">Ссылки</h2> - -<ol> - <li><a name="cite-1"></a>Wikipedia. "<a href="http://en.wikipedia.org/wiki/Object-oriented_programming">Object-oriented programming</a>"</li> - <li><a name="cite-2"></a>Wikipedia. "<a href="http://en.wikipedia.org/wiki/Encapsulation_%28object-oriented_programming%29">Encapsulation (object-oriented programming)</a>"</li> -</ol> diff --git a/files/ru/web/javascript/reference/об/index.html b/files/ru/web/javascript/reference/about/index.html index bbb30f131d..bbb30f131d 100644 --- a/files/ru/web/javascript/reference/об/index.html +++ b/files/ru/web/javascript/reference/about/index.html diff --git a/files/ru/web/javascript/reference/classes/приватные_поля_класса/index.html b/files/ru/web/javascript/reference/classes/private_class_fields/index.html index 09fe2505e2..09fe2505e2 100644 --- a/files/ru/web/javascript/reference/classes/приватные_поля_класса/index.html +++ b/files/ru/web/javascript/reference/classes/private_class_fields/index.html diff --git a/files/ru/web/javascript/reference/classes/class_fields/index.html b/files/ru/web/javascript/reference/classes/public_class_fields/index.html index ade4b8151f..ade4b8151f 100644 --- a/files/ru/web/javascript/reference/classes/class_fields/index.html +++ b/files/ru/web/javascript/reference/classes/public_class_fields/index.html diff --git a/files/ru/web/javascript/reference/errors/переменные_скрывают_аргумент/index.html b/files/ru/web/javascript/reference/errors/var_hides_argument/index.html index 85ad505cbd..85ad505cbd 100644 --- a/files/ru/web/javascript/reference/errors/переменные_скрывают_аргумент/index.html +++ b/files/ru/web/javascript/reference/errors/var_hides_argument/index.html diff --git a/files/ru/web/javascript/reference/functions/определиние_методов/index.html b/files/ru/web/javascript/reference/functions/method_definitions/index.html index 2f50dfe53f..2f50dfe53f 100644 --- a/files/ru/web/javascript/reference/functions/определиние_методов/index.html +++ b/files/ru/web/javascript/reference/functions/method_definitions/index.html diff --git a/files/ru/web/javascript/reference/global_objects/array/prototype/index.html b/files/ru/web/javascript/reference/global_objects/array/prototype/index.html deleted file mode 100644 index 4d04fc0736..0000000000 --- a/files/ru/web/javascript/reference/global_objects/array/prototype/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: Array.prototype -slug: Web/JavaScript/Reference/Global_Objects/Array/prototype -tags: - - Array - - JavaScript - - Property - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype ---- -<div>{{JSRef("Global_Objects", "Array")}}</div> - -<h2 id="Summary" name="Summary">Сводка</h2> - -<p>Свойство <strong><code>Array.prototype</code></strong> представляет прототип для конструктора {{jsxref("Global_Objects/Array", "Array", "массива")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description" name="Description">Описание</h2> - -<p>Экземпляры <span class="internal"><code>Array</code></span> наследуются от <code>Array.prototype</code>. Как и с остальными конструкторами, вы можете изменять прототип конструктора объекта для применения изменений ко всем экземплярам класса <code>Array</code>.</p> - -<p>Небольшой факт: <code>Array.prototype</code> сам является экземпляром <code>Array</code>:</p> - -<pre class="brush: js">Array.isArray(Array.prototype); // true</pre> - -<h2 id="Properties" name="Properties">Свойства</h2> - -<dl> - <dt><code>Array.prototype.constructor</code></dt> - <dd>Определяет функцию, создающую прототип объекта.</dd> - <dt>{{jsxref("Array.prototype.length")}}</dt> - <dd>Отражает количество элементов в массиве.</dd> -</dl> - -<h2 id="Methods" name="Methods">Методы</h2> - -<h3 id="Mutator_methods" name="Mutator_methods">Методы изменения</h3> - -<p>Эти методы изменяют массив:</p> - -<dl> - <dt>{{jsxref("Array.prototype.copyWithin()")}} {{experimental_inline}}</dt> - <dd>Копирует последовательность элементов массива внутри массива.</dd> - <dt>{{jsxref("Array.prototype.fill()")}} {{experimental_inline}}</dt> - <dd>Заполняет все элементы массива от начального индекса до конечного индекса указанным значением.</dd> - <dt>{{jsxref("Array.prototype.pop()")}}</dt> - <dd>Удаляет последний элемент из массива и возвращает его.</dd> - <dt>{{jsxref("Array.prototype.push()")}}</dt> - <dd>Добавляет один или более элементов в конец массива и возвращает новую длину массива.</dd> - <dt>{{jsxref("Array.prototype.reverse()")}}</dt> - <dd>Переворачивает порядок элементов в массиве — первый элемент становится последним, а последний — первым.</dd> - <dt>{{jsxref("Array.prototype.shift()")}}</dt> - <dd>Удаляет первый элемент из массива и возвращает его.</dd> - <dt>{{jsxref("Array.prototype.sort()")}}</dt> - <dd>Сортирует элементы массива на месте и возвращает отсортированный массив.</dd> - <dt>{{jsxref("Array.prototype.splice()")}}</dt> - <dd>Добавляет и/или удаляет элементы из массива.</dd> - <dt>{{jsxref("Array.prototype.unshift()")}}</dt> - <dd>Добавляет один или более элементов в начало массива и возвращает новую длину массива.</dd> -</dl> - -<h3 id="Accessor_methods" name="Accessor_methods">Методы доступа</h3> - -<p>Эти методы не изменяют массив, а просто возвращают его в ином представлении.</p> - -<dl> - <dt>{{jsxref("Array.prototype.concat()")}}</dt> - <dd>Возвращает новый массив, состоящий из данного массива, соединённого с другим массивом и/или значением (списком массивов/значений).</dd> - <dt>{{jsxref("Array.prototype.includes()")}} {{experimental_inline}}</dt> - <dd>Определяет, содержится ли в массиве указанный элемент, возвращая, соответственно, <code>true</code> или <code>false</code>.</dd> - <dt>{{jsxref("Array.prototype.join()")}}</dt> - <dd>Объединяет все элементы массива в строку.</dd> - <dt>{{jsxref("Array.prototype.slice()")}}</dt> - <dd>Извлекает диапазон значений и возвращает его в виде нового массива.</dd> - <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>Возвращает литеральное представление указанного массива; вы можете использовать это значение для создания нового массива. Переопределяет метод {{jsxref("Object.prototype.toSource()")}}.</dd> - <dt>{{jsxref("Array.prototype.toString()")}}</dt> - <dd>Возвращает строковое представление массива и его элементов. Переопределяет метод {{jsxref("Object.prototype.toString()")}}.</dd> - <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt> - <dd>Возвращает локализованное строковое представление массива и его элементов. Переопределяет метод {{jsxref("Object.prototype.toLocaleString()")}}.</dd> - <dt>{{jsxref("Array.prototype.indexOf()")}}</dt> - <dd>Возвращает первый (наименьший) индекс элемента внутри массива, равный указанному значению; или -1, если значение не найдено.</dd> - <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt> - <dd>Возвращает последний (наибольший) индекс элемента внутри массива, равный указанному значению; или -1, если значение не найдено.</dd> -</dl> - -<h3 id="Iteration_methods" name="Iteration_methods">Методы обхода</h3> - -<p>Некоторые методы принимают в качестве аргументов функции, вызываемые при обработке массива. Когда вызываются эти методы, достаётся длина массива, и любой элемент, добавленный свыше этой длины изнутри функции обратного вызова не посещается. Другие изменения в массиве (установка значения или удаление элемента) могут повлиять на результаты операции, если изменённый элемент метод посещает после изменения. Хотя специфическое поведение этих методов в таких случаях хорошо определено, вы не должны на него полагаться, чтобы не запутывать других людей, читающих ваш код. Если вам нужно изменить массив, лучше вместо этого скопируйте его в новый массив.</p> - -<dl> - <dt>{{jsxref("Array.prototype.forEach()")}}</dt> - <dd>Вызывает функцию для каждого элемента в массиве.</dd> - <dt>{{jsxref("Array.prototype.entries()")}} {{experimental_inline}}</dt> - <dd>Возвращает новый объект итератора массива <code>Array Iterator</code>, содержащий пары ключ / значение для каждого индекса в массиве.</dd> - <dt>{{jsxref("Array.prototype.every()")}}</dt> - <dd>Возвращает <code>true</code>, если каждый элемент в массиве удовлетворяет условию проверяющей функции.</dd> - <dt>{{jsxref("Array.prototype.some()")}}</dt> - <dd>Возвращает <code>true</code>, если хотя бы один элемент в массиве удовлетворяет условию проверяющей функции.</dd> - <dt>{{jsxref("Array.prototype.filter()")}}</dt> - <dd>Создаёт новый массив со всеми элементами этого массива, для которых функция фильтрации возвращает <code>true</code>.</dd> - <dt>{{jsxref("Array.prototype.find()")}} {{experimental_inline}}</dt> - <dd>Возвращает искомое значение в массиве, если элемент в массиве удовлетворяет условию проверяющей функции или {{jsxref("Global_Objects/undefined", "undefined")}}, если такое значение не найдено.</dd> - <dt>{{jsxref("Array.prototype.findIndex()")}} {{experimental_inline}}</dt> - <dd>Возвращает искомый индекс в массиве, если элемент в массиве удовлетворяет условию проверяющей функции или -1, если такое значение не найдено.</dd> - <dt>{{jsxref("Array.prototype.keys()")}} {{experimental_inline}}</dt> - <dd>Возвращает новый итератор массива, содержащий ключи каждого индекса в массиве.</dd> - <dt>{{jsxref("Array.prototype.map()")}}</dt> - <dd>Создаёт новый массив с результатами вызова указанной функции на каждом элементе данного массива.</dd> - <dt>{{jsxref("Array.prototype.reduce()")}}</dt> - <dd>Применяет функцию к аккумулятору и каждому значению массива (слева-направо), сводя его к одному значению.</dd> - <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt> - <dd>Применяет функцию к аккумулятору и каждому значению массива (справа-налево), сводя его к одному значению.</dd> - <dt>{{jsxref("Array.prototype.values()")}} {{experimental_inline}}</dt> - <dd>Возвращает новый объект итератора массива <code>Array Iterator</code>, содержащий значения для каждого индекса в массиве.</dd> - <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}} {{experimental_inline}}</dt> - <dd>Возвращает новый объект итератора массива <code>Array Iterator</code>, содержащий значения для каждого индекса в массиве.</dd> -</dl> - -<h3 id="Generic_methods" name="Generic_methods">Общие методы</h3> - -<p>Многие методы JavaScript-массива спроектированы таким образом, чтобы иметь возможность применяться ко всем объектам, «выглядящим похоже» на массивы. То есть, они могут использоваться на любом объекте, имеющим свойство <code>length</code> и к элементам которого можно получить доступ через числовые имена свойств (как при индексации: <code>array[5]</code>). <span class="comment">TODO: предоставить примеры с Array.prototype.forEach.call и добавлением методов к объекту, как сделано для {{jsxref("Global_Objects/JavaArray", "JavaArray")}} или {{jsxref("Global_Objects/String", "String")}}.</span> Некоторые методы, например {{jsxref("Array.join", "join")}}, только читают свойство <code>length</code> и числовые свойства объекта, на котором они вызываются. Другие, вроде {{jsxref("Array.reverse", "reverse")}} требуют, чтобы числовые свойства и свойство <code>length</code> объекта были изменяемыми; эти методы не могут вызываться на объектах вроде {{jsxref("Global_Objects/String", "String")}}, которые не позволяют установку своего свойства <code>length</code> или синтезирование числовых свойств.</p> - -<h2 id="Specifications" name="Specifications">Спецификации</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарий</th> - </tr> - <tr> - <td>ECMAScript 1-е издание.</td> - <td>Стандарт</td> - <td>Изначальное определение.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> - -<p> </p> - -<div class="hidden"> -<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> -</div> - -<p>{{Compat("javascript.builtins.Array.prototype")}}</p> - -<p> </p> - -<div> </div> - -<h2 id="See_also" name="See_also">Смотрите также</h2> - -<ul> - <li>{{jsxref("Global_Objects/Array", "Array")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/ru/web/javascript/reference/global_objects/asyncfunction/prototype/index.html b/files/ru/web/javascript/reference/global_objects/asyncfunction/prototype/index.html deleted file mode 100644 index 9d0c21f241..0000000000 --- a/files/ru/web/javascript/reference/global_objects/asyncfunction/prototype/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: AsyncFunction.prototype -slug: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype ---- -<div>{{JSRef}}</div> - -<p>Свойство <code><strong>AsyncFunction.prototype</strong></code> представляет прототип объекта {{jsxref("AsyncFunction")}} .</p> - -<h2 id="Описание">Описание</h2> - -<p>Объект {{jsxref("AsyncFunction")}} наследуется от <code>AsyncFunction.prototype</code>. <code>AsyncFunction.prototype</code> не может быть модифицирован.</p> - -<h2 id="Свойства">Свойства</h2> - -<dl> - <dt><code><strong>AsyncFunction.constructor</strong></code></dt> - <dd>Начальное значение {{jsxref("AsyncFunction")}}.</dd> - <dt><code><strong>AsyncFunction.prototype[@@toStringTag]</strong></code></dt> - <dd>Возвращает "AsyncFunction".</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-async-function-constructor-prototype', 'AsyncFunction.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Initial definition in ES2017.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("javascript.builtins.AsyncFunction.prototype")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("AsyncFunction")}}</li> - <li>{{jsxref("Function")}}</li> -</ul> diff --git a/files/ru/web/javascript/reference/global_objects/boolean/prototype/index.html b/files/ru/web/javascript/reference/global_objects/boolean/prototype/index.html deleted file mode 100644 index f0188080f1..0000000000 --- a/files/ru/web/javascript/reference/global_objects/boolean/prototype/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Boolean.prototype -slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype -tags: - - Boolean - - JavaScript - - Property - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Boolean -translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype ---- -<div>{{JSRef("Global_Objects", "Boolean")}}</div> - -<h2 id="Summary" name="Summary">Сводка</h2> -<p>Свойство <strong><code>Boolean.prototype</code></strong> представляет прототип конструктора объекта {{jsxref("Global_Objects/Boolean", "Boolean")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description" name="Description">Описание</h2> -<p>Экземпляры объекта {{jsxref("Global_Objects/Boolean", "Boolean")}} наследуются от <code>Boolean.prototype</code>. Вы можете использовать протитип конструктора объекта для добавления свойств или методов ко всем экземплярам объекта {{jsxref("Global_Objects/Boolean", "Boolean")}}.</p> - -<h2 id="Properties" name="Properties">Свойства</h2> -<dl> - <dt><code>Boolean.prototype.constructor</code></dt> - <dd>Возвращает функцию, создающую экземпляр прототипа. По умолчанию, это функция {{jsxref("Global_Objects/Boolean", "Boolean")}}.</dd> -</dl> -<div>{{jsOverrides("Object", "properties", "constructor")}}</div> - -<h2 id="Methods" name="Methods">Методы</h2> -<dl> - <dt>{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>Возвращает строку, содержащую исходный код объекта {{jsxref("Global_Objects/Boolean", "Boolean")}}; вы можете использовать эту строку для создания эквивалентного объекта. Переопределяет метод {{jsxref("Object.prototype.toSource()")}}.</dd> - <dt>{{jsxref("Boolean.prototype.toString()")}}</dt> - <dd>Возвращает строку <code>"true"</code> или <code>"false"</code>, в зависимости от значения объекта. Переопределяет метод {{jsxref("Object.prototype.toString()")}}.</dd> - <dt>{{jsxref("Boolean.prototype.valueOf()")}}</dt> - <dd>Возвращает примитивное значение объекта {{jsxref("Global_Objects/Boolean", "Boolean")}}. Переопределяет метод {{jsxref("Object.prototype.valueOf()")}}.</dd> -</dl> -<div>{{jsOverrides("Object", "methods", "toSource", "toString", "valueOf")}}</div> - -<h2 id="Specifications" name="Specifications">Спецификации</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарии</th> - </tr> - <tr> - <td>ECMAScript 1-е издание.</td> - <td>Стандарт</td> - <td>Изначальное определение. Реализована в JavaScript 1.0.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> -<div>{{CompatibilityTable}}</div> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Android</th> - <th>Chrome для Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> - </table> -</div> diff --git a/files/ru/web/javascript/reference/global_objects/date/prototype/index.html b/files/ru/web/javascript/reference/global_objects/date/prototype/index.html deleted file mode 100644 index 956a7555a1..0000000000 --- a/files/ru/web/javascript/reference/global_objects/date/prototype/index.html +++ /dev/null @@ -1,229 +0,0 @@ ---- -title: Date.prototype -slug: Web/JavaScript/Reference/Global_Objects/Date/prototype -tags: - - Date - - JavaScript - - Property - - Prototype - - Reference - - Référence(2) -translation_of: Web/JavaScript/Reference/Global_Objects/Date -translation_of_original: Web/JavaScript/Reference/Global_Objects/Date/prototype ---- -<div>{{JSRef("Global_Objects", "Date")}}</div> - -<h2 id="Summary" name="Summary">Сводка</h2> - -<p>Свойство <strong><code>Date.prototype</code></strong> представляет прототип конструктора {{jsxref("Global_Objects/Date", "Date")}}.</p> - -<div>{{js_property_attributes(0, 0, 1)}}</div> - -<h2 id="Description" name="Description">Описание</h2> - -<p>Все экземпляры {{jsxref("Global_Objects/Date", "Date")}} наследуются от <code>Date.prototype</code>. Объект прототипа конструктора {{jsxref("Global_Objects/Date", "Date")}} может быть изменён для затрагивания всех экземпляров объекта {{jsxref("Global_Objects/Date", "Date")}}.</p> - -<p>Для совместимости с вычислениями тысячелетия (другими словами, для учёта 2000 года), вы всегда должны указывать полный год; например, использовать число 1998, а не 98. Чтобы помочь вам определить полный год, JavaScript включает методы {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}, {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}}, {{jsxref("Date.prototype.getUTCFullYear()", "getUTCFullYear()")}} и {{jsxref("Date.prototype.setUTCFullYear()", "setUTCFullYear()")}}.</p> - -<h2 id="Properties" name="Properties">Свойства</h2> - -<dl> - <dt><code>Date.prototype.constructor</code></dt> - <dd>Возвращает функцию, создавшую этот экземпляр объекта. По умолчанию ей является объект {{jsxref("Global_Objects/Date", "Date")}}.</dd> -</dl> - -<div>{{jsOverrides("Object", "properties", "constructor")}}</div> - -<h2 id="Methods" name="Methods">Методы</h2> - -<h3 id="Getter" name="Getter">Получения значения</h3> - -<dl> - <dt>{{jsxref("Date.prototype.getDate()")}}</dt> - <dd>Возвращает день месяца (1-31) указанной даты по местному времени.</dd> - <dt>{{jsxref("Date.prototype.getDay()")}}</dt> - <dd>Возвращает день недели (0-6) указанной даты по местному времени.</dd> - <dt>{{jsxref("Date.prototype.getFullYear()")}}</dt> - <dd>Возвращает год (4 цифры для 4-х значного года) указанной даты по местному времени.</dd> - <dt>{{jsxref("Date.prototype.getHours()")}}</dt> - <dd>Возвращает часы (0-23) указанной даты по местному времени.</dd> - <dt>{{jsxref("Date.prototype.getMilliseconds()")}}</dt> - <dd>Возвращает миллисекунды (0-999) указанной даты по местному времени.</dd> - <dt>{{jsxref("Date.prototype.getMinutes()")}}</dt> - <dd>Возвращает минуты (0-59) указанной даты по местному времени.</dd> - <dt>{{jsxref("Date.prototype.getMonth()")}}</dt> - <dd>Возвращает месяц (0-11) указанной даты по местному времени.</dd> - <dt>{{jsxref("Date.prototype.getSeconds()")}}</dt> - <dd>Возвращает секунды (0-59) указанной даты по местному времени.</dd> - <dt>{{jsxref("Date.prototype.getTime()")}}</dt> - <dd>Возвращает числовое значение указанной даты как количество миллисекунд, прошедших с 1 января 1970 года 00:00:00 по UTC (отрицательное значение для даты до этого момента).</dd> - <dt>{{jsxref("Date.prototype.getTimezoneOffset()")}}</dt> - <dd>Возвращает смещение часового пояса в минутах для текущей локали.</dd> - <dt>{{jsxref("Date.prototype.getUTCDate()")}}</dt> - <dd>Возвращает день месяца (1-31) указанной даты по всемирному координированному времени.</dd> - <dt>{{jsxref("Date.prototype.getUTCDay()")}}</dt> - <dd>Возвращает день недели (0-6) указанной даты по всемирному координированному времени.</dd> - <dt>{{jsxref("Date.prototype.getUTCFullYear()")}}</dt> - <dd>Возвращает год (4 цифры для 4-х значного года) указанной даты по всемирному координированному времени.</dd> - <dt>{{jsxref("Date.prototype.getUTCHours()")}}</dt> - <dd>Возвращает часы (0-23) указанной даты по всемирному координированному времени.</dd> - <dt>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</dt> - <dd>Возвращает миллисекунды (0-999) указанной даты по всемирному координированному времени.</dd> - <dt>{{jsxref("Date.prototype.getUTCMinutes()")}}</dt> - <dd>Возвращает минуты (0-59) указанной даты по всемирному координированному времени.</dd> - <dt>{{jsxref("Date.prototype.getUTCMonth()")}}</dt> - <dd>Возвращает месяц (0-11) указанной даты по всемирному координированному времени.</dd> - <dt>{{jsxref("Date.prototype.getUTCSeconds()")}}</dt> - <dd>Возвращает секунды (0-59) указанной даты по всемирному координированному времени.</dd> - <dt>{{jsxref("Date.prototype.getYear()")}} {{deprecated_inline}}</dt> - <dd>Возвращает год (обычно 2-3 цифры) указанной даты по всемирному координированному времени. Вместо него используйте метод {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}.</dd> -</dl> - -<h3 id="Setter" name="Setter">Установки значения</h3> - -<dl> - <dt>{{jsxref("Date.prototype.setDate()")}}</dt> - <dd>Устанавливает день месяца указанной даты по местному времени.</dd> - <dt>{{jsxref("Date.prototype.setFullYear()")}}</dt> - <dd>Устанавливает полный год (4 цифры для 4-х значного года) указанной даты по местному времени.</dd> - <dt>{{jsxref("Date.prototype.setHours()")}}</dt> - <dd>Устанавливает часы указанной даты по местному времени.</dd> - <dt>{{jsxref("Date.prototype.setMilliseconds()")}}</dt> - <dd>Устанавливает миллисекунды указанной даты по местному времени.</dd> - <dt>{{jsxref("Date.prototype.setMinutes()")}}</dt> - <dd>Устанавливает минуты указанной даты по местному времени.</dd> - <dt>{{jsxref("Date.prototype.setMonth()")}}</dt> - <dd>Устанавливает месяц указанной даты по местному времени.</dd> - <dt>{{jsxref("Date.prototype.setSeconds()")}}</dt> - <dd>Устанавливает секунды указанной даты по местному времени.</dd> - <dt>{{jsxref("Date.prototype.setTime()")}}</dt> - <dd>Устанавливает объект {{jsxref("Global_Objects/Date", "Date")}} во время, представляемое количеством миллисекунд, прошедших с 1 января 1970 года 00:00:00 по UTC (отрицательное значение устанавливает даты до этого момента).</dd> - <dt>{{jsxref("Date.prototype.setUTCDate()")}}</dt> - <dd>Устанавливает день месяца указанной даты по всемирному координированному времени.</dd> - <dt>{{jsxref("Date.prototype.setUTCFullYear()")}}</dt> - <dd>Устанавливает полный год (4 цифры для 4-х значного года) указанной даты по всемирному координированному времени.</dd> - <dt>{{jsxref("Date.prototype.setUTCHours()")}}</dt> - <dd>Устанавливает часы указанной даты по всемирному координированному времени.</dd> - <dt>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</dt> - <dd>Устанавливает миллисекунды указанной даты по всемирному координированному времени.</dd> - <dt>{{jsxref("Date.prototype.setUTCMinutes()")}}</dt> - <dd>Устанавливает минуты указанной даты по всемирному координированному времени.</dd> - <dt>{{jsxref("Date.prototype.setUTCMonth()")}}</dt> - <dd>Устанавливает месяц указанной даты по всемирному координированному времени.</dd> - <dt>{{jsxref("Date.prototype.setUTCSeconds()")}}</dt> - <dd>Устанавливает секунды указанной даты по всемирному координированному времени.</dd> - <dt>{{jsxref("Date.prototype.setYear()")}} {{deprecated_inline}}</dt> - <dd>Устанавливает год (обычно 2-3 цифры) указанной даты по всемирному координированному времени. Вместо него используйте метод {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}}.</dd> -</dl> - -<h3 id="Conversion_getter" name="Conversion_getter">Получения преобразованного значения</h3> - -<dl> - <dt>{{jsxref("Date.prototype.toDateString()")}}</dt> - <dd>Возвращает часть, содержащую только дату объекта {{jsxref("Global_Objects/Date", "Date")}} в качестве человеко-читаемой строки.</dd> - <dt>{{jsxref("Date.prototype.toISOString()")}}</dt> - <dd>Преобразует дату в строку, следуя расширенному формату ISO 8601.</dd> - <dt>{{jsxref("Date.prototype.toJSON()")}}</dt> - <dd>Возвращает строку, представляющую объект {{jsxref("Global_Objects/Date", "Date")}}, используя метод {{jsxref("Date.prototype.toISOString()", "toISOString()")}}. Предназначен для использования методом {{jsxref("JSON.stringify()")}}.</dd> - <dt>{{jsxref("Date.prototype.toGMTString()")}} {{deprecated_inline}}</dt> - <dd>Возвращает строку, представляющую объект {{jsxref("Global_Objects/Date", "Date")}}, на основе часового пояса GMT (всемирное время). Вместо него используйте метод {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}}.</dd> - <dt>{{jsxref("Date.prototype.toLocaleDateString()")}}</dt> - <dd>Возвращает строку с датой, чьё представление зависит от системных настроек локали.</dd> - <dt>{{jsxref("Date.prototype.toLocaleFormat()")}} {{non-standard_inline}}</dt> - <dd>Преобразует дату в строку, используя строку форматирования.</dd> - <dt>{{jsxref("Date.prototype.toLocaleString()")}}</dt> - <dd>Возвращает строку, чьё представление зависит от настроек локали. Переопределяет метод {{jsxref("Object.prototype.toLocaleString()")}}.</dd> - <dt>{{jsxref("Date.prototype.toLocaleTimeString()")}}</dt> - <dd>Возвращает строку со временем, чьё представление зависит от системных настроек локали.</dd> - <dt>{{jsxref("Date.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>Возвращает строковое представление исходного кода эквивалентного объекта {{jsxref("Global_Objects/Date", "Date")}}; вы можете использовать это значение для создания нового объекта. Переопределяет метод {{jsxref("Object.prototype.toSource()")}}.</dd> - <dt>{{jsxref("Date.prototype.toString()")}}</dt> - <dd>Возвращает строковое представление указанного объекта {{jsxref("Global_Objects/Date", "Date")}}. Переопределяет метод {{jsxref("Object.prototype.toString()")}}.</dd> - <dt>{{jsxref("Date.prototype.toTimeString()")}}</dt> - <dd>Возвращает часть, содержащую только время объекта {{jsxref("Global_Objects/Date", "Date")}} в качестве человеко-читаемой строки.</dd> - <dt>{{jsxref("Date.prototype.toUTCString()")}}</dt> - <dd>Преобразует дату в строку, используя часовой пояс UTC.</dd> - <dt>{{jsxref("Date.prototype.valueOf()")}}</dt> - <dd>Возвращает примитивное значение объекта {{jsxref("Global_Objects/Date", "Date")}}. Переопределяет метод {{jsxref("Object.prototype.valueOf()")}}.</dd> -</dl> - -<div>{{jsOverrides("Object", "methods", "getDate", "getDay", "getFullYear", "getHours", "getMilliseconds", "getMinutes", "getMonth", "getSeconds", "getTime", "getTimezoneOffset", "getUTCDate", "getUTCDay", "getUTCFullYear", "getUTCHours", "getUTCMilliseconds", "getUTCMinutes", "getUTCMonth", "getUTCSeconds", "getYear", "setdate", "setFullYear", "setHours", "setMilliseconds", "setMinutes", "setMontth", "setSeconds", "setTime", "setUTCDate", "setUTCFullYear", "setUTCHours", "setUTCMilliseconds", "setUTCMinutes", "setUTCMonth", "setUTCSeconds", "setYear", "toDateString", "toGMTString", "toLocaleDateString", "toLocaleFormat", "toLocaleString", "toLocaleTimeString", "toSource", "toString", "toTimeString", "toUTCString", "valueOf")}}</div> - -<h2 id="Specifications" name="Specifications">Спецификации</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарии</th> - </tr> - <tr> - <td>ECMAScript 1-е издание.</td> - <td>Стандарт</td> - <td>Изначальное определение. Реализована в JavaScript 1.1.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.9.5', 'Date.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Android</th> - <th>Chrome для Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/ru/web/javascript/reference/global_objects/error/prototype/index.html b/files/ru/web/javascript/reference/global_objects/error/prototype/index.html deleted file mode 100644 index 668277c4e0..0000000000 --- a/files/ru/web/javascript/reference/global_objects/error/prototype/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: Error.prototype -slug: Web/JavaScript/Reference/Global_Objects/Error/prototype -tags: - - Error - - JavaScript - - Property -translation_of: Web/JavaScript/Reference/Global_Objects/Error -translation_of_original: Web/JavaScript/Reference/Global_Objects/Error/prototype ---- -<div>{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}</div> - -<h2 id="Summary" name="Summary">Сводка</h2> - -<p>Свойство <code><strong>Error.prototype</strong></code> представляет прототип конструктора объекта {{jsxref("Global_Objects/Error", "Error")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description" name="Description">Описание</h2> - -<p>Все экземпляры {{jsxref("Global_Objects/Error", "Error")}} и экземпляры {{jsxref("Global_Objects/Error", "неуниверсальных ошибок", "#Error_types", 1)}} наследуются от <code>Error.prototype</code>. Как и со всеми функциями-конструкторами, вы можете использовать прототип конструктора для добавления свойств и методов ко всем экземплярам, создаваемым этим конструктором.</p> - -<h2 id="Properties" name="Properties">Свойства</h2> - -<h3 id="Standard_properties" name="Standard_properties">Стандартные свойства</h3> - -<dl> - <dt><code>Error.prototype.constructor</code></dt> - <dd>Определяет функцию, создающую прототип экземпляра ошибки.</dd> - <dt>{{jsxref("Error.prototype.message")}}</dt> - <dd>Сообщение ошибки.</dd> - <dt>{{jsxref("Error.prototype.name")}}</dt> - <dd>Название ошибки.</dd> -</dl> - -<h3 id="Vendor-specific_extensions" name="Vendor-specific_extensions">Расширения вендоров</h3> - -<div>{{non-standard_header}}</div> - -<h4 id="Microsoft" name="Microsoft">Microsoft</h4> - -<dl> - <dt>{{jsxref("Error.prototype.description")}}</dt> - <dd>Описание ошибки. Аналогично свойству {{jsxref("Error.prototype.message", "message")}}.</dd> - <dt>{{jsxref("Error.prototype.number")}}</dt> - <dd>Номер ошибки.</dd> -</dl> - -<h4 id="Mozilla" name="Mozilla">Mozilla</h4> - -<dl> - <dt>{{jsxref("Error.prototype.fileName")}}</dt> - <dd>Путь к файлу, в котором возникла эта ошибка.</dd> - <dt>{{jsxref("Error.prototype.lineNumber")}}</dt> - <dd>Номер строки в файле, в котором возникла эта ошибка.</dd> - <dt>{{jsxref("Error.prototype.columnNumber")}}</dt> - <dd>Номер колонки в строке, на которой возникла эта ошибка.</dd> - <dt>{{jsxref("Error.prototype.stack")}}</dt> - <dd>Стек вызовов.</dd> -</dl> - -<h2 id="Methods" name="Methods">Методы</h2> - -<dl> - <dt>{{jsxref("Error.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>Возвращает строку, содержащую исходный код указанного объекта {{jsxref("Global_Objects/Error", "Error")}}; вы можете использовать это значение для создания нового объекта. Переопределяет метод {{jsxref("Object.prototype.toSource()")}}.</dd> - <dt>{{jsxref("Error.prototype.toString()")}}</dt> - <dd>Возвращает строку, представляющую указанный объект. Переопределяет метод {{jsxref("Object.prototype.toString()")}}.</dd> -</dl> - -<h2 id="Specifications" name="Specifications">Спецификации</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарии</th> - </tr> - <tr> - <td>ECMAScript 1-е издание.</td> - <td>Стандарт</td> - <td>Изначальное определение. Реализована в JavaScript 1.1.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.3.1', 'Error')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-error.prototype', 'Error')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Android</th> - <th>Chrome для Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also" name="See_also">Смотрите также</h2> - -<ul> - <li>{{jsxref("Error")}}</li> - <li>{{jsxref("Object.prototype")}}</li> -</ul> diff --git a/files/ru/web/javascript/reference/global_objects/evalerror/prototype/index.html b/files/ru/web/javascript/reference/global_objects/evalerror/prototype/index.html deleted file mode 100644 index e7de1a018e..0000000000 --- a/files/ru/web/javascript/reference/global_objects/evalerror/prototype/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: EvalError.prototype -slug: Web/JavaScript/Reference/Global_Objects/EvalError/prototype -tags: - - Error - - EvalError - - JavaScript - - Property -translation_of: Web/JavaScript/Reference/Global_Objects/EvalError -translation_of_original: Web/JavaScript/Reference/Global_Objects/EvalError/prototype ---- -<div>{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}</div> - -<h2 id="Summary" name="Summary">Сводка</h2> -<p>Свойство <code><strong>EvalError.prototype</strong></code> представляет прототип конструктора объекта {{jsxref("EvalError")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description" name="Description">Описание</h2> -<p>Все экземпляры {{jsxref("EvalError")}} наследуются от объекта <code>EvalError.prototype</code>. Вы можете использовать прототип для добавления свойств или методов ко всем экземплярам.</p> - -<h2 id="Properties" name="Properties">Свойства</h2> -<dl> - <dt><code>EvalError.prototype.constructor</code></dt> - <dd>Определяет функцию, создающую прототип экземпляра.</dd> - <dt>{{jsxref("Error.prototype.message", "EvalError.prototype.message")}}</dt> - <dd>Сообщение ошибки. Хотя стандарт ECMA-262 определяет, что {{jsxref("EvalError")}} должен предоставлять своё собственное свойство <code>message</code>, в <a href="/ru/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> он наследует свойство {{jsxref("Error.prototype.message")}}.</dd> - <dt>{{jsxref("Error.prototype.name", "EvalError.prototype.name")}}</dt> - <dd>Название ошибки. Унаследовано от {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "EvalError.prototype.fileName")}}</dt> - <dd>Путь к файлу, в котором возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "EvalError.prototype.lineNumber")}}</dt> - <dd>Номер строки в файле, в котором возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "EvalError.prototype.columnNumber")}}</dt> - <dd>Номер колонки в строке, на которой возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.stack", "EvalError.prototype.stack")}}</dt> - <dd>Стек вызовов. Унаследовано от {{jsxref("Error")}}.</dd> -</dl> - -<h2 id="Methods" name="Methods">Методы</h2> -<p>Хотя объект прототипа {{jsxref("EvalError")}} не содержит собственных методов, экземпляры {{jsxref("EvalError")}} наследуют некоторые методы из цепочки прототипов.</p> - -<h2 id="Specifications" name="Specifications">Спецификации</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарии</th> - </tr> - <tr> - <td>ECMAScript 3-е издание.</td> - <td>Стандарт</td> - <td>Изначальное определение.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Определено как <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Определено как <code><em>NativeError</em>.prototype</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> -<div>{{CompatibilityTable}}</div> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Android</th> - <th>Chrome для Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> - </table> -</div> - -<h2 id="See_also" name="See_also">Смотрите также</h2> -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/ru/web/javascript/reference/global_objects/function/prototype/index.html b/files/ru/web/javascript/reference/global_objects/function/prototype/index.html deleted file mode 100644 index acf9fc5c6e..0000000000 --- a/files/ru/web/javascript/reference/global_objects/function/prototype/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: Function.prototype -slug: Web/JavaScript/Reference/Global_Objects/Function/prototype -tags: - - Function - - JavaScript - - Property - - Prototype - - Reference - - Référence(2) -translation_of: Web/JavaScript/Reference/Global_Objects/Function -translation_of_original: Web/JavaScript/Reference/Global_Objects/Function/prototype ---- -<div>{{JSRef("Global_Objects", "Function")}}</div> - -<h2 id="Summary" name="Summary">Сводка</h2> - -<p>Свойство <code><strong>Function.prototype</strong></code> представляет прототип объекта {{jsxref("Global_Objects/Function", "Function")}}.</p> - -<h2 id="Description" name="Description">Описание</h2> - -<p>Объекты {{jsxref("Global_Objects/Function", "Function")}} наследуются от <code>Function.prototype</code>. Объект <code>Function.prototype</code> не может быть изменён.</p> - -<h2 id="Properties" name="Properties">Свойства</h2> - -<dl> - <dt>{{jsxref("Function.arguments")}} {{deprecated_inline}}</dt> - <dd>Массив, соответствующий аргументам, переданным в функцию. Это устаревшее свойство {{jsxref("Global_Objects/Function", "Function")}}, используйте вместо него объект {{jsxref("Functions_and_function_scope/arguments", "arguments")}}, доступный внутри функции.</dd> - <dt><s class="obsoleteElement">{{jsxref("Function.arity")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">Использовалось для определения количества аргументов, ожидаемых функцией, но было удалено. Вместо него используйте свойство {{jsxref("Function.length", "length")}}.</s></dd> - <dt>{{jsxref("Function.caller")}} {{non-standard_inline}}</dt> - <dd>Определяет функцию, вызвавшую текущую выполняющуюся функцию.</dd> - <dt>{{jsxref("Function.length")}}</dt> - <dd>Определяет количество аргументов, ожидаемых функцией.</dd> - <dt>{{jsxref("Function.name")}} {{non-standard_inline}}</dt> - <dd>Имя функции.</dd> - <dt>{{jsxref("Function.displayName")}} {{non-standard_inline}}</dt> - <dd>Отображаемое имя функции.</dd> - <dt><code>Function.prototype.constructor</code></dt> - <dd>Определяет функцию, создающую прототип объекта. Смотрите документацию по {{jsxref("Object.prototype.constructor")}}.</dd> -</dl> - -<h2 id="Methods" name="Methods">Методы</h2> - -<dl> - <dt>{{jsxref("Function.prototype.apply()")}}</dt> - <dd>Вызывает функцию и устанавливает <strong><code>this </code></strong>в контекст предоставленного значения; аргументы передаются объектом {{jsxref("Global_Objects/Array", "Array")}}.</dd> - <dt>{{jsxref("Function.prototype.bind()")}}</dt> - <dd>Создаёт новую функцию, которая, при вызове, самостоятельно вызывает эту функцию в контексте предоставленного значения, с данной последовательностью аргументов, предшествующих любым аргументам, переданным в новую функцию при её вызове. Устанавливает <strong><code>this </code></strong>в контекст предоставленного значения.</dd> - <dt>{{jsxref("Function.prototype.call()")}}</dt> - <dd>Вызывает (выполняет) функцию и устанавливает <strong><code>this </code></strong>в контекст предоставленного значения; аргументы передаются как есть.</dd> - <dt>{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}</dt> - <dd>Возвращает <code>true</code>, если функция является <a href="/ru/docs/Web/JavaScript/Guide/Iterators_and_Generators">генератором</a>; в противном случае возвращает <code>false</code>.</dd> - <dt>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>Возвращает строку, представляющую исходный код функции. Переопределяет метод {{jsxref("Object.prototype.toSource")}}.</dd> - <dt>{{jsxref("Function.prototype.toString()")}}</dt> - <dd>Возвращает строку, представляющую исходный код функции. Переопределяет метод {{jsxref("Object.prototype.toString")}}.</dd> -</dl> - -<h2 id="Specifications" name="Specifications">Спецификации</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарии</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Изначальное определение. Реализована в JavaScript 1.1.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.3.3.1', 'Function.prototype')}}<br> - Для экземпляров объекта {{jsxref("Global_Objects/Function", "Function")}}:<br> - {{SpecName('ES5.1', '#sec-15.3.5.2', 'Function.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-function.prototype', 'Function.prototype')}}<br> - Для экземпляров объекта {{jsxref("Global_Objects/Function", "Function")}}:<br> - {{SpecName('ES6', '#sec-function-instances-prototype', 'Function.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-function-instances-prototype', 'Function.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Android</th> - <th>Chrome для Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also" name="See_also">Смотрите также</h2> - -<ul> - <li>{{jsxref("Global_Objects/Function", "Function")}}</li> -</ul> diff --git a/files/ru/web/javascript/reference/global_objects/generatorfunction/prototype/index.html b/files/ru/web/javascript/reference/global_objects/generatorfunction/prototype/index.html deleted file mode 100644 index b9974a46a3..0000000000 --- a/files/ru/web/javascript/reference/global_objects/generatorfunction/prototype/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: GeneratorFunction.prototype -slug: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction -translation_of_original: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype ---- -<div>{{JSRef}}</div> - -<p>Свойство <code><strong>GeneratorFunction.prototype</strong></code> представляет собой прототип объекта {{jsxref("GeneratorFunction")}} .</p> - -<h2 id="Описание">Описание</h2> - -<p>Объект {{jsxref("GeneratorFunction")}} наследуется из <code>GeneratorFunction.prototype</code>. <code>GeneratorFunction.prototype</code> не может быть изменён.</p> - -<h2 id="Свойства">Свойства</h2> - -<dl> - <dt><code><strong>GeneratorFunction.constructor</strong></code></dt> - <dd>Изначальное значение {{jsxref("GeneratorFunction")}}.</dd> - <dt><code><strong>GeneratorFunction.prototype.prototype</strong></code></dt> - <dd>Значение <code>%GeneratorPrototype%</code>.</dd> -</dl> - -<h2 id="Спецификации">Спецификации</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарий</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Изначальное определение.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> - -<div> - - -<p>{{Compat("javascript.builtins.GeneratorFunction.prototype")}}</p> -</div> - -<h2 id="Смотрите_также">Смотрите также</h2> - -<ul> - <li>{{jsxref("GeneratorFunction")}}</li> - <li>{{jsxref("Function")}}</li> -</ul> diff --git a/files/ru/web/javascript/reference/global_objects/internalerror/prototype/index.html b/files/ru/web/javascript/reference/global_objects/internalerror/prototype/index.html deleted file mode 100644 index 633ffbf9fb..0000000000 --- a/files/ru/web/javascript/reference/global_objects/internalerror/prototype/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: InternalError.prototype -slug: Web/JavaScript/Reference/Global_Objects/InternalError/prototype -tags: - - Error - - InternalError - - JavaScript - - Non-standard - - Property -translation_of: Web/JavaScript/Reference/Global_Objects/InternalError -translation_of_original: Web/JavaScript/Reference/Global_Objects/InternalError/prototype ---- -<div>{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}} {{non-standard_header}}</div> - -<h2 id="Summary" name="Summary">Сводка</h2> -<p>Свойство <code><strong>InternalError.prototype</strong></code> представляет прототип конструктора объекта {{jsxref("InternalError")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description" name="Description">Описание</h2> -<p>Все экземпляры {{jsxref("InternalError")}} наследуются от объекта <code>InternalError.prototype</code>. Вы можете использовать прототип для добавления свойств или методов ко всем экземплярам.</p> - -<h2 id="Properties" name="Properties">Свойства</h2> -<dl> - <dt><code>InternalError.prototype.constructor</code></dt> - <dd>Определяет функцию, создающую прототип экземпляра.</dd> - <dt>{{jsxref("Error.prototype.message", "InternalError.prototype.message")}}</dt> - <dd>Сообщение ошибки. Унаследовано от {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.name", "InternalError.prototype.name")}}</dt> - <dd>Название ошибки. Унаследовано от {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "InternalError.prototype.fileName")}}</dt> - <dd>Путь к файлу, в котором возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "InternalError.prototype.lineNumber")}}</dt> - <dd>Номер строки в файле, в котором возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "InternalError.prototype.columnNumber")}}</dt> - <dd>Номер колонки в строке, на которой возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.stack", "InternalError.prototype.stack")}}</dt> - <dd>Стек вызовов. Унаследовано от {{jsxref("Error")}}.</dd> -</dl> - -<h2 id="Methods" name="Methods">Методы</h2> -<p>Хотя объект прототипа {{jsxref("InternalError")}} не содержит собственных методов, экземпляры {{jsxref("InternalError")}} наследуют некоторые методы из цепочки прототипов.</p> - -<h2 id="Specifications" name="Specifications">Спецификации</h2> -<p>Не является частью какой-либо спецификации.</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> -<div>{{CompatibilityTable}}</div> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Android</th> - <th>Chrome для Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> - </table> -</div> - -<h2 id="See_also" name="See_also">Смотрите также</h2> -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/ru/web/javascript/reference/global_objects/intl/collator/prototype/index.html b/files/ru/web/javascript/reference/global_objects/intl/collator/prototype/index.html deleted file mode 100644 index eb708cca36..0000000000 --- a/files/ru/web/javascript/reference/global_objects/intl/collator/prototype/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Intl.Collator.prototype -slug: Web/JavaScript/Reference/Global_Objects/Intl/Collator/prototype -tags: - - Collator - - Internationalization - - JavaScript - - Property - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator -translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/Collator/prototype ---- -<div>{{JSRef("Global_Objects", "Collator", "Intl,DateTimeFormat,NumberFormat")}}</div> - -<h2 id="Summary" name="Summary">Сводка</h2> -<p>Свойство <strong><code>Intl.Collator.prototype</code></strong> представляет объект прототипа конструктора {{jsxref("Global_Objects/Collator", "Intl.Collator")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description" name="Description">Описание</h2> -<p>Смотрите {{jsxref("Global_Objects/Collator", "Collator")}} для описания экземпляров <code>Intl.NumberFormat</code>.</p> -<p>Экземпляры {{jsxref("Global_Objects/Collator", "Intl.Collator")}} наследуются от <code>Intl.NumberFormat.prototype</code>. Изменения объекта прототипа наследуются всеми экземплярами {{jsxref("Global_Objects/Collator", "Intl.Collator")}}.</p> - -<h2 id="Properties" name="Properties">Свойства</h2> -<dl> - <dt><code>Intl.Collator.prototype.constructor</code></dt> - <dd>Ссылка на {{jsxref("Global_Objects/Collator", "Intl.Collator")}}.</dd> - <dt>{{jsxref("Collator.compare", "Intl.Collator.prototype.compare")}}</dt> - <dd>Геттер; возвращает функцию, сравнивающую две строки согласно порядку сортировки этого объекта {{jsxref("Global_Objects/Collator", "Collator")}}.</dd> -</dl> - -<h2 id="Methods" name="Methods">Методы</h2> -<dl> - <dt>{{jsxref("Collator.resolvedOptions", "Intl.Collator.prototype.resolvedOptions()")}}</dt> - <dd>Возвращает новый объект со свойствами, отражающими локаль и опции сравнения строк, вычисленные при инициализации объекта.</dd> -</dl> - -<h2 id="Specifications" name="Specifications">Спецификации</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарии</th> - </tr> - <tr> - <td>{{SpecName('ES Int 1.0', '#sec-10.2.1', 'Intl.Collator.prototype')}}</td> - <td>{{Spec2('ES Int 1.0')}}</td> - <td>Изначальное определение.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> -<div>{{CompatibilityTable}}</div> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatChrome("24")}}</td> - <td>{{CompatGeckoDesktop("29")}}</td> - <td>{{CompatIE("11")}}</td> - <td>{{CompatOpera("15")}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Android</th> - <th>Chrome для Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome("26")}}</td> - <td> - {{CompatNo}}<br> - {{bug("864843")}} - </td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> - </table> -</div> - -<h2 id="See_also" name="See_also">Смотрите также</h2> -<ul> - <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li> -</ul> diff --git a/files/ru/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html b/files/ru/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html deleted file mode 100644 index a22ec7aeaa..0000000000 --- a/files/ru/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Intl.DateTimeFormat.prototype -slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype -tags: - - DateTimeFormat - - Internationalization - - JavaScript - - Property - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat -translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype ---- -<div>{{JSRef("Global_Objects", "DateTimeFormat", "Intl,Collator,NumberFormat")}}</div> - -<h2 id="Summary" name="Summary">Сводка</h2> -<p>Свойство <strong><code>Intl.DateTimeFormat.prototype</code></strong> представляет объект прототипа конструктора {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description" name="Description">Описание</h2> -<p>Смотрите {{jsxref("Global_Objects/DateTimeFormat", "DateTimeFormat")}} для описания экземпляров <code>Intl.NumberFormat</code>.</p> -<p>Экземпляры {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}} наследуются от <code>Intl.NumberFormat.prototype</code>. Изменения объекта прототипа наследуются всеми экземплярами {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}.</p> - -<h2 id="Properties" name="Properties">Свойства</h2> -<dl> - <dt><code>Intl.DateTimeFormat.prototype.constructor</code></dt> - <dd>Ссылка на {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}.</dd> - <dt>{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format")}}</dt> - <dd>Геттер; возвращает функцию, форматирующую дату согласно локали и опциям форматирования этого объекта {{jsxref("Global_Objects/DateTimeFormat", "DateTimeFormat")}}.</dd> -</dl> - -<h2 id="Methods" name="Methods">Методы</h2> -<dl> - <dt>{{jsxref("DateTimeFormat.resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}</dt> - <dd>Возвращает новый объект со свойствами, отражающими локаль и опции форматирования, вычисленные при инициализации объекта.</dd> -</dl> - -<h2 id="Specifications" name="Specifications">Спецификации</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарии</th> - </tr> - <tr> - <td>{{SpecName('ES Int 1.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}</td> - <td>{{Spec2('ES Int 1.0')}}</td> - <td>Изначальное определение.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> -<div>{{CompatibilityTable}}</div> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatChrome("24")}}</td> - <td>{{CompatGeckoDesktop("29")}}</td> - <td>{{CompatIE("11")}}</td> - <td>{{CompatOpera("15")}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Android</th> - <th>Chrome для Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome("26")}}</td> - <td> - {{CompatNo}}<br> - {{bug("864843")}} - </td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> - </table> -</div> - -<h2 id="See_also" name="See_also">Смотрите также</h2> -<ul> - <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> -</ul> diff --git a/files/ru/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html b/files/ru/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html deleted file mode 100644 index fd9fbeeac8..0000000000 --- a/files/ru/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Intl.NumberFormat.prototype -slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype -tags: - - Internationalization - - JavaScript - - NumberFormat - - Property - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat -translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype ---- -<div>{{JSRef("Global_Objects", "NumberFormat", "Intl,Collator,DateTimeFormat")}}</div> - -<h2 id="Summary" name="Summary">Сводка</h2> -<p>Свойство <strong><code>Intl.NumberFormat.prototype</code></strong> представляет объект прототипа конструктора {{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description" name="Description">Описание</h2> -<p>Смотрите {{jsxref("NumberFormat")}} для описания экземпляров <code>Intl.NumberFormat</code>.</p> -<p>Экземпляры {{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}} наследуются от <code>Intl.NumberFormat.prototype</code>. Изменения объекта прототипа наследуются всеми экземплярами {{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}.</p> - -<h2 id="Properties" name="Properties">Свойства</h2> -<dl> - <dt><code>Intl.NumberFormat.prototype.constructor</code></dt> - <dd>Ссылка на {{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}.</dd> - <dt>{{jsxref("NumberFormat.format", "Intl.NumberFormat.prototype.format")}}</dt> - <dd>Геттер; возвращает функцию, форматирующую число согласно локали и опциям форматирования этого объекта {{jsxref("Global_Objects/NumberFormat", "NumberFormat")}}.</dd> -</dl> - -<h2 id="Methods" name="Methods">Методы</h2> -<dl> - <dt>{{jsxref("NumberFormat.resolvedOptions", "Intl.NumberFormat.prototype.resolvedOptions()")}}</dt> - <dd>Возвращает новый объект со свойствами, отражающими локаль и опции сравнения, вычисленные при инициализации объекта.</dd> -</dl> - -<h2 id="Specifications" name="Specifications">Спецификации</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарии</th> - </tr> - <tr> - <td>{{SpecName('ES Int 1.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}</td> - <td>{{Spec2('ES Int 1.0')}}</td> - <td>Изначальное определение.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> -<div>{{CompatibilityTable}}</div> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatChrome("24")}}</td> - <td>{{CompatGeckoDesktop("29")}}</td> - <td>{{CompatIE("11")}}</td> - <td>{{CompatOpera("15")}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Android</th> - <th>Chrome для Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome("26")}}</td> - <td> - {{CompatNo}}<br> - {{bug("864843")}} - </td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> - </table> -</div> - -<h2 id="See_also" name="See_also">Смотрите также</h2> -<ul> - <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li> -</ul> diff --git a/files/ru/web/javascript/reference/global_objects/map/prototype/index.html b/files/ru/web/javascript/reference/global_objects/map/prototype/index.html deleted file mode 100644 index a3af6a0c61..0000000000 --- a/files/ru/web/javascript/reference/global_objects/map/prototype/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Map.prototype -slug: Web/JavaScript/Reference/Global_Objects/Map/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Map -translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype ---- -<div>{{JSRef}}</div> - -<p>Свойство <code><strong>Map</strong></code><strong><code>.prototype</code></strong> представляет собой прототип конструктора {{jsxref("Map")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Описание">Описание</h2> - -<p>Экземпляры {{jsxref("Map")}} наследуются от {{jsxref("Map.prototype")}}. Вы можете использовать объект конструктора прототипа для добавления свойств и методов ко всем экземплярам <code>Map</code>.</p> - -<h2 id="Свойства">Свойства</h2> - -<dl> - <dt><code>Map.prototype.constructor</code></dt> - <dd>Возвращает функцию, создающую экземпляр прототипа. Это функция {{jsxref("Map")}} по умолчанию. </dd> - <dt>{{jsxref("Map.prototype.size")}}</dt> - <dd>Возвращает количество пар key/value, содержащихся в объекте <code>Map</code>.</dd> -</dl> - -<h2 id="Методы">Методы</h2> - -<dl> - <dt>{{jsxref("Map.prototype.clear()")}}</dt> - <dd>Удаляет все пары key/value из объекта <code>Map</code>.</dd> - <dt>{{jsxref("Map.delete", "Map.prototype.delete(key)")}}</dt> - <dd>Возвращает <code>true</code>, если элемент присутствовал в объекте <code>Map</code> и был удалён, или <code>false</code>, если элемент отсутствует. После вызова этого метода <code>Map.prototype.has(key)</code> вернёт <code>false</code>.</dd> - <dt>{{jsxref("Map.prototype.entries()")}}</dt> - <dd>Возвращает новый объект итератора - new <code>Iterator</code>, который содержит <strong>массив из [key, value]</strong> для каждого элемента в объекте <code>Map</code> в порядке добавления.</dd> - <dt>{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}</dt> - <dd>Вызывает callbackFn для каждой пары key/value, находящейся в объекте <code>Map</code>, в порядке добавления. Если указан параметр thisArg, он будет использоваться в качестве значения this при каждом вызове callbackFn. </dd> - <dt>{{jsxref("Map.get", "Map.prototype.get(key)")}}</dt> - <dd>Возвращает значение по указанному ключу <code>key</code> или <code>undefined</code>, если значение отсутствует. </dd> - <dt>{{jsxref("Map.has", "Map.prototype.has(key)")}}</dt> - <dd>Возвращает <code>true</code> или <code>false</code> в зависимости от того, было ли значение связано с <code>key</code> в объекте <code>Map</code> или нет.</dd> - <dt>{{jsxref("Map.prototype.keys()")}}</dt> - <dd>Возвращает новый объект итератора - new <code>Iterator</code>, который содержит <strong>keys</strong> для каждого элемента в объекте <code>Map</code> в порядке добавления.</dd> - <dt>{{jsxref("Map.set", "Map.prototype.set(key, value)")}}</dt> - <dd>Устанавлиевает value для <code>key</code> в объекте <code>Map</code>. Возвращает объект <code>Map</code>.</dd> - <dt>{{jsxref("Map.prototype.values()")}}</dt> - <dd>Возвращает новый объект итератора - new <code>Iterator</code>, который содержит <strong>values</strong> для каждого элемента в объекте <code>Map</code> в порядке добавления.</dd> - <dt>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</dt> - <dd>Возвращает новый объект итератора - new <code>Iterator</code>, который содержит <strong>массив из [key, value]</strong> для каждого элемента в объекте <code>Map</code> в порядке добавления. </dd> -</dl> - -<h2 id="Спецификации">Спецификации</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарии</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-map.prototype', 'Map.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>38</td> - <td>{{ CompatGeckoDesktop("13") }}</td> - <td>11</td> - <td>25</td> - <td>7.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatNo}}</td> - <td>38</td> - <td>{{CompatGeckoMobile("13")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td> - <p>8</p> - </td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Смотрите_также">Смотрите также</h2> - -<ul> - <li>{{jsxref("Set.prototype")}}</li> -</ul> diff --git a/files/ru/web/javascript/reference/global_objects/math/метод_math.max()_/index.html b/files/ru/web/javascript/reference/global_objects/math/метод_math.max()_/index.html deleted file mode 100644 index ab66d8acb0..0000000000 --- a/files/ru/web/javascript/reference/global_objects/math/метод_math.max()_/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: Метод Math.max() -slug: Web/JavaScript/Reference/Global_Objects/Math/Метод_Math.max()_ -tags: - - JavaScript - - Math - - Method - - Reference ---- -<div>{{JSRef("Global_Objects", "Math")}}</div> - -<div> </div> - -<h2 id="Summary" name="Summary">Сводка</h2> - -<p>Метод <strong><code>Math.max()</code></strong> возвращает наибольшее из нуля или более чисел.</p> - -<h2 id="Syntax" name="Syntax">Синтаксис</h2> - -<pre class="syntaxbox"><code>Math.max([<var>value1</var>[, <var>value2</var>[, ...]]])</code></pre> - -<h3 id="Parameters" name="Parameters">Параметры</h3> - -<dl> - <dt><code>value1, value2, ...</code></dt> - <dd>Числа.</dd> -</dl> - -<h2 id="Description" name="Description">Описание</h2> - -<p>Поскольку метод <code>max()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.max()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p> - -<p>При вызове без аргументов результатом вызова будет значение -{{jsxref("Global_Objects/Infinity", "Infinity")}}.</p> - -<p>Если хотя бы один из аргументов не может быть преобразован в число, результатом будет {{jsxref("Global_Objects/NaN", "NaN")}}.</p> - -<h2 id="Examples" name="Examples">Примеры</h2> - -<h3 id="Example:_Using_Math.max" name="Example:_Using_Math.max">Пример: использование метода <code>Math.max()</code></h3> - -<pre class="brush: js">Math.max(10, 20); // 20 -Math.max(-10, -20); // -10 -Math.max(-10, 20); // 20 -</pre> - -<p>Следующая функция использует метод {{jsxref("Function.prototype.apply()")}} для нахождения максимального элемента в числовом массиве. Вызов <code>getMaxOfArray([1, 2, 3])</code> эквивалентен вызову <code>Math.max(1, 2, 3)</code>, однако вы можете использовать функцию <code>getMaxOfArray()</code> вместе с программно сконструированными массивами любого размера.</p> - -<pre class="brush: js">function getMaxOfArray(numArray) { - return Math.max.apply(null, numArray); -} -</pre> - -<h2 id="Specifications" name="Specifications">Спецификации</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарии</th> - </tr> - <tr> - <td>ECMAScript 1-е издание.</td> - <td>Стандарт</td> - <td>Изначальное определение. Реализована в JavaScript 1.0.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.8.2.11', 'Math.max')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-math.max', 'Math.max')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Android</th> - <th>Chrome для Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also" name="See_also">Смотрите также</h2> - -<ul> - <li>{{jsxref("Math.min()")}}</li> -</ul> diff --git a/files/ru/web/javascript/reference/global_objects/number/prototype/index.html b/files/ru/web/javascript/reference/global_objects/number/prototype/index.html deleted file mode 100644 index 259d8a3fb3..0000000000 --- a/files/ru/web/javascript/reference/global_objects/number/prototype/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: Number.prototype -slug: Web/JavaScript/Reference/Global_Objects/Number/prototype -tags: - - JavaScript - - Number - - Property - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Number -translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype ---- -<div>{{JSRef("Global_Objects", "Number")}}</div> - -<h2 id="Summary" name="Summary">Сводка</h2> -<p>Свойство <strong><code>Number.prototype</code></strong> представляет прототип конструктора {{jsxref("Global_Objects/Number", "Number")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description" name="Description">Описание</h2> -<p>Все экземпляры {{jsxref("Global_Objects/Number", "Number")}} наследуются от <code>Number.prototype</code>. Объект прототипа конструктора {{jsxref("Global_Objects/Number", "Number")}} может быть изменён для затрагивания всех экземпляров объекта {{jsxref("Global_Objects/Number", "Number")}}.</p> - -<h2 id="Properties" name="Properties">Свойства</h2> -<dl> - <dt><code>Number.prototype.constructor</code></dt> - <dd>Возвращает функцию, создавшую этот экземпляр объекта. По умолчанию ей является объект {{jsxref("Global_Objects/Number", "Number")}}.</dd> -</dl> - -<div>{{jsOverrides("Object", "properties", "constructor")}}</div> - -<h2 id="Methods" name="Methods">Методы</h2> -<dl> - <dt>{{jsxref("Number.prototype.toExponential()")}}</dt> - <dd>Возвращает строку, представляющую число в экспоненциальной записи.</dd> - <dt>{{jsxref("Number.prototype.toFixed()")}}</dt> - <dd>Возвращает строку, представляющую число в записи с фиксированной запятой.</dd> - <dt>{{jsxref("Number.prototype.toLocaleString()")}}</dt> - <dd>Возвращает строку с языко-зависимым представлением числа. Переопределяет метод {{jsxref("Object.prototype.toLocaleString()")}}.</dd> - <dt>{{jsxref("Number.prototype.toPrecision()")}}</dt> - <dd>Возвращает строку, представляющую число с указанной точностью в экспоненциальной записи, либо записи с фиксированной запятой.</dd> - <dt>{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>Возвращает объектный литерал, представляющий объект {{jsxref("Global_Objects/Number", "Number")}}; вы можете использовать это значение для создания нового объекта. Переопределяет метод {{jsxref("Object.prototype.toSource()")}}.</dd> - <dt>{{jsxref("Number.prototype.toString()")}}</dt> - <dd>Возвращает строку, представляющую указанный объект по указанному основанию системы счисления. Переопределяет метод {{jsxref("Object.prototype.toString()")}}.</dd> - <dt>{{jsxref("Number.prototype.valueOf()")}}</dt> - <dd>Возвращает примитивное значение указанного объекта. Переопределяет метод {{jsxref("Object.prototype.valueOf()")}}.</dd> -</dl> - -<div>{{jsOverrides("Object", "methods", "toExponential", "toFixed", "toLocaleString", "toPrecision", "toSource", "toString", "valueOf")}}</div> - -<h2 id="Specifications" name="Specifications">Спецификации</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарии</th> - </tr> - <tr> - <td>ECMAScript 1-е издание.</td> - <td>Стандарт</td> - <td>Изначальное определение. Реализована в JavaScript 1.1.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> -<div>{{CompatibilityTable}}</div> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Android</th> - <th>Chrome для Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> - </table> -</div> diff --git a/files/ru/web/javascript/reference/global_objects/object/prototype/index.html b/files/ru/web/javascript/reference/global_objects/object/prototype/index.html deleted file mode 100644 index aaa398171d..0000000000 --- a/files/ru/web/javascript/reference/global_objects/object/prototype/index.html +++ /dev/null @@ -1,205 +0,0 @@ ---- -title: Object.prototype -slug: Web/JavaScript/Reference/Global_Objects/Object/prototype -tags: - - JavaScript - - Object - - Property - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object -translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype ---- -<div>{{JSRef("Global_Objects", "Object")}}</div> - -<h2 id="Summary" name="Summary">Сводка</h2> - -<p>Свойство <code><strong>Object.prototype</strong></code> представляет объект прототипа {{jsxref("Global_Objects/Object", "Object")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description" name="Description">Описание</h2> - -<p>Все объекты в JavaScript являются потомками {{jsxref("Global_Objects/Object", "Object")}}; все объекты наследуют методы и свойства из прототипа объекта <code>Object.prototype</code>, хотя они и могут быть переопределены (за исключением объекта <code>Object</code> с прототипом <code>null</code>, то есть, созданным вызовом <code>Object.create(null)</code>). Например, прототипы других конструкторов переопределяют свойство <code>constructor</code> и предоставляют свои собственные методы {{jsxref("Object.prototype.toString()", "toString()")}}. Изменения в объекте прототипа {{jsxref("Global_Objects/Object", "Object")}} распространяются на все объекты до тех пор, пока свойства и методы, учитывающие эти изменения, не переопределяются дальше по цепочке прототипов.</p> - -<h2 id="Properties" name="Properties">Свойства</h2> - -<dl> - <dt>{{jsxref("Object.prototype.constructor")}}</dt> - <dd>Определяет функцию, создающую прототип объекта.</dd> - <dt>{{jsxref("Object.proto", "Object.prototype.__proto__")}} {{non-standard_inline}}</dt> - <dd>Указывает на объект, который использовался в качестве прототипа при инстанцировании объекта.</dd> - <dt>{{jsxref("Object.noSuchMethod", "Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}</dt> - <dd>Позволяет определить функцию, выполняющуюся при вызове в качестве метода неопределённого члена объекта.</dd> - <dt><s class="obsoleteElement">{{jsxref("Object.count", "Object.prototype.__count__")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">Использовалось для возврата количества перечисляемых свойств, определённых напрямую на пользовательском объекте, но было удалено.</s></dd> - <dt><s class="obsoleteElement">{{jsxref("Object.parent", "Object.prototype.__parent__")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">Использовалось для указания контекста объекта, но было удалено.</s></dd> -</dl> - -<h2 id="Methods" name="Methods">Методы</h2> - -<dl> - <dt>{{jsxref("Object.defineGetter", "Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> - <dd>Ассоциирует функцию со свойством, которое, при доступе к нему, выполняет эту функцию и возвращает её возвращаемое значение.</dd> - <dt>{{jsxref("Object.defineSetter", "Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> - <dd>Ассоциирует функцию со свойством, которое, при его установке, выполняет эту функцию, изменяющую свойство.</dd> - <dt>{{jsxref("Object.lookupGetter", "Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> - <dd>Возвращает функцию, ассоциированную с указанным свойством методом {{jsxref("Object.defineGetter", "__defineGetter__")}}.</dd> - <dt>{{jsxref("Object.lookupSetter", "Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> - <dd>Возвращает функцию, ассоциированную с указанным свойством методом {{jsxref("Object.defineSetter", "__defineSetter__")}}.</dd> - <dt>{{jsxref("Object.prototype.hasOwnProperty()")}}</dt> - <dd>Возвращает логическое значение, указывающее, содержит ли указанное свойство непосредственно объект, или он унаследовал его по цепочке прототипов.</dd> - <dt>{{jsxref("Object.prototype.isPrototypeOf()")}}</dt> - <dd>Возвращает логическое значение, указывающее, состоит ли указанный объект в цепочке прототипов объекта, на котором был вызван данный метод.</dd> - <dt>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</dt> - <dd>Возвращает логическое значение, указывающее, установлен ли внутренний <a href="/ru/docs/ECMAScript_DontEnum_attribute">атрибут ECMAScript DontEnum</a>.</dd> - <dt>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>Возвращает строку, содержащую исходный код объекта в литеральной форме, представляющего объект, на котором был вызван данный метод; вы можете использовать это значение для создания нового объекта.</dd> - <dt>{{jsxref("Object.prototype.toLocaleString()")}}</dt> - <dd>Вызывает {{jsxref("Object.toString", "toString()")}}.</dd> - <dt>{{jsxref("Object.prototype.toString()")}}</dt> - <dd>Возвращает строковое представление объекта.</dd> - <dt>{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}</dt> - <dd>Удаляет точку наблюдения (watchpoint) со свойства объекта.</dd> - <dt>{{jsxref("Object.prototype.valueOf()")}}</dt> - <dd>Возвращает значение примитива указанного объекта.</dd> - <dt>{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}</dt> - <dd>Добавляет точку наблюдения (watchpoint) к свойству объекта.</dd> - <dt><s class="obsoleteElement">{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">Использовался для вычисления строки с JavaScript-кодом в контексте указанного объекта, но был удалён.</s></dd> -</dl> - -<h2 id="Examples" name="Examples">Примеры</h2> - -<p>Поскольку Javascript, строго говоря, не имеет объекты подклассов, прототип является полезным обходным путём создания объекта «базового класса» из определённых функций, которые выступают в роли объектов. Например:</p> - -<pre class="brush: js">var Person = function(name) { - this.name = name; - this.canTalk = true; - this.greet = function() { - if (this.canTalk) { - console.log('Привет, я ' + this.name); - } - }; -}; - -var Employee = function(name, title) { - this.name = name; - this.title = title; - this.greet = function() { - if (this.canTalk) { - console.log('Привет, я ' + this.name + ', ' + this.title); - } - }; -}; -Employee.prototype = new Person(); - -var Customer = function(name) { - this.name = name; -}; -Customer.prototype = new Person(); - -var Mime = function(name) { - this.name = name; - this.canTalk = false; -}; -Mime.prototype = new Person(); - -var bob = new Employee('Боб', 'Строитель'); -var joe = new Customer('Джо'); -var rg = new Employee('Ред Грин', 'Разнорабочий'); -var mike = new Customer('Майк'); -var mime = new Mime('Мим'); -bob.greet(); -joe.greet(); -rg.greet(); -mike.greet(); -mime.greet(); -</pre> - -<p>Вывод будет следующим:</p> - -<pre class="brush: js">Привет, я Боб, Строитель -Привет, я Джо -Привет, я Ред Грин, Разнорабочий -Привет, я Майк -</pre> - -<h2 id="Specifications" name="Specifications">Спецификации</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарии</th> - </tr> - <tr> - <td>ECMAScript 1-е издание.</td> - <td>Стандарт</td> - <td>Изначальное определение. Реализована в JavaScript 1.0.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Android</th> - <th>Chrome для Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/ru/web/javascript/reference/global_objects/promise/prototype/index.html b/files/ru/web/javascript/reference/global_objects/promise/prototype/index.html deleted file mode 100644 index 65384e8346..0000000000 --- a/files/ru/web/javascript/reference/global_objects/promise/prototype/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Promise.prototype -slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype -tags: - - JavaScript - - Обещание - - Свойство -translation_of: Web/JavaScript/Reference/Global_Objects/Promise -translation_of_original: Web/JavaScript/Reference/Global_Objects/Promise/prototype ---- -<div>{{JSRef}}</div> - -<p>Cвойство <code><strong>Promise</strong></code><strong><code>.prototype</code></strong> представляет собой прототип конструктора {{jsxref("Promise")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Описание">Описание</h2> - -<p>{{jsxref("Promise")}} обьект наследованный от {{jsxref("Promise.prototype")}}. Вы можете использовать прототип конструктора чтобы добавлять свойства или методы во все объекты обещаний.</p> - -<h2 id="Свойства">Свойства</h2> - -<dl> - <dt><code>Promise.prototype.constructor</code></dt> - <dd>Возвращает функцию, которая создала прототип экземпляра. Это функция всех обещаний по умолчанию.</dd> -</dl> - -<h2 id="Методы">Методы</h2> - -<dl> - <dt>{{jsxref("Promise.catch", "Promise.prototype.catch(onRejected)")}}</dt> - <dd>Добавляет функцию обратного вызова для обработки отклонения обещания, которая возвращает новое обещание выполненное с переданным значением, если она вызвана, или оригинальное значение resolve, если обещание выполнено.</dd> - <dt>{{jsxref("Promise.then", "Promise.prototype.then(onFulfilled, onRejected)")}}</dt> - <dd style="margin-bottom: 0.5cm;">Добавляет обработчик выполнения и отклонения обещания, и возвращает новое обещание выполненное со значением вызванного обработчика, или оригинальное значение, если обещание не было обработано (т.е. если соответствующий обработчик onFulfilled или onRejected не является функцией).</dd> -</dl> - -<h2 id="Спецификация">Спецификация</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-promise.prototype', 'Promise.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> - - - -<h2 id="Смотри_также">Смотри также</h2> - -<ul> - <li>{{jsxref("Promise")}}</li> -</ul> diff --git a/files/ru/web/javascript/reference/global_objects/proxy/handler/index.html b/files/ru/web/javascript/reference/global_objects/proxy/handler/index.html deleted file mode 100644 index 472e9d4735..0000000000 --- a/files/ru/web/javascript/reference/global_objects/proxy/handler/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Proxy handler -slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler -tags: - - ECMAScript 2015 - - JavaScript - - NeedsTranslation - - Proxy - - TopicStub - - Прокси - - Русский - - ловушки -translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy -translation_of_original: Web/JavaScript/Reference/Global_Objects/Proxy/handler ---- -<div>{{JSRef}}</div> - -<p>Объект-обработчик прокси - это объект, который содержит ловушки для {{jsxref("Proxy", "proxies", "", 1)}}.</p> - -<h2 id="Методы">Методы</h2> - -<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Все ловушки ставятся по желанию разработчика.</span></span> <span class="ChMk0b JLqJ4b"><span>Если ловушка не была определена, то, по умолчанию, операция перенаправляется на исходный объект (target).</span></span></span></p> - -<dl> - <dt>{{jsxref("Global_Objects/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}</dt> - <dd>Ловушка для {{jsxref("Object.getPrototypeOf")}}.</dd> - <dt>{{jsxref("Global_Objects/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}</dt> - <dd>Ловушка для {{jsxref("Object.setPrototypeOf")}}.</dd> - <dt>{{jsxref("Global_Objects/Proxy/handler/isExtensible", "handler.isExtensible()")}}</dt> - <dd>Ловушка для {{jsxref("Object.isExtensible")}}.</dd> - <dt>{{jsxref("Global_Objects/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}</dt> - <dd>Ловушка для {{jsxref("Object.preventExtensions")}}.</dd> - <dt>{{jsxref("Global_Objects/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}</dt> - <dd>Ловушка для {{jsxref("Object.getOwnPropertyDescriptor")}}.</dd> - <dt>{{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty()")}}</dt> - <dd>Ловушка для {{jsxref("Object.defineProperty")}}.</dd> - <dt>{{jsxref("Global_Objects/Proxy/handler/has", "handler.has()")}}</dt> - <dd>Ловушка для оператора {{jsxref("Operators/in", "in")}}.</dd> - <dt>{{jsxref("Global_Objects/Proxy/handler/get", "handler.get()")}}</dt> - <dd>Ловушка для получения значений из свойств.</dd> - <dt>{{jsxref("Global_Objects/Proxy/handler/set", "handler.set()")}}</dt> - <dd>Ловушка для установки значений в свойства.</dd> - <dt>{{jsxref("Global_Objects/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}</dt> - <dd>Ловушка для оператора {{jsxref("Operators/delete", "delete")}}.</dd> - <dt>{{jsxref("Global_Objects/Proxy/handler/ownKeys", "handler.ownKeys()")}}</dt> - <dd>Ловушка для {{jsxref("Object.getOwnPropertyNames")}} и {{jsxref("Object.getOwnPropertySymbols")}}.</dd> - <dt>{{jsxref("Global_Objects/Proxy/handler/apply", "handler.apply()")}}</dt> - <dd>Ловушка для вызова функции.</dd> - <dt>{{jsxref("Global_Objects/Proxy/handler/construct", "handler.construct()")}}</dt> - <dd>Ловушка для оператора {{jsxref("Operators/new", "new")}}.</dd> -</dl> - -<p>Некоторые нестандартные ловушки <a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#Proxy">устарели и были удалены</a>.</p> - -<h2 id="Спецификации">Спецификации</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарий</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Определении при инициализации.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Обработчик <code>enumerate</code> был удален.</td> - </tr> - </tbody> -</table> - -<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>49 [1]</td> - <td>{{ CompatGeckoDesktop("18") }}</td> - <td>12</td> - <td>{{CompatOpera(36)}}</td> - <td>{{CompatSafari(10)}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{ CompatGeckoDesktop("18") }}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] <a href="https://www.chromestatus.com/features/4811188005240832">Разрешен по умолчанию</a>.</p> - -<h2 id="Смотрите_также">Смотрите также</h2> - -<ul> - <li>{{jsxref("Proxy")}}</li> -</ul> diff --git a/files/ru/web/javascript/reference/global_objects/proxy/handler/deleteproperty/index.html b/files/ru/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.html index a796a08e26..a796a08e26 100644 --- a/files/ru/web/javascript/reference/global_objects/proxy/handler/deleteproperty/index.html +++ b/files/ru/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.html diff --git a/files/ru/web/javascript/reference/global_objects/proxy/handler/set/index.html b/files/ru/web/javascript/reference/global_objects/proxy/proxy/set/index.html index 88b030ecc4..88b030ecc4 100644 --- a/files/ru/web/javascript/reference/global_objects/proxy/handler/set/index.html +++ b/files/ru/web/javascript/reference/global_objects/proxy/proxy/set/index.html diff --git a/files/ru/web/javascript/reference/global_objects/rangeerror/prototype/index.html b/files/ru/web/javascript/reference/global_objects/rangeerror/prototype/index.html deleted file mode 100644 index 0e1df7fb7c..0000000000 --- a/files/ru/web/javascript/reference/global_objects/rangeerror/prototype/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: RangeError.prototype -slug: Web/JavaScript/Reference/Global_Objects/RangeError/prototype -tags: - - Error - - JavaScript - - Property - - Prototype - - RangeError -translation_of: Web/JavaScript/Reference/Global_Objects/RangeError -translation_of_original: Web/JavaScript/Reference/Global_Objects/RangeError/prototype ---- -<div>{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}</div> - -<h2 id="Summary" name="Summary">Сводка</h2> -<p>Свойство <code><strong>RangeError.prototype</strong></code> представляет прототип конструктора объекта {{jsxref("RangeError")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description" name="Description">Описание</h2> -<p>Все экземпляры {{jsxref("RangeError")}} наследуются от объекта <code>RangeError.prototype</code>. Вы можете использовать прототип для добавления свойств или методов ко всем экземплярам.</p> - -<h2 id="Properties" name="Properties">Свойства</h2> -<dl> - <dt><code>RangeError.prototype.constructor</code></dt> - <dd>Определяет функцию, создающую прототип экземпляра.</dd> - <dt>{{jsxref("Error.prototype.message", "RangeError.prototype.message")}}</dt> - <dd>Сообщение ошибки. Хотя стандарт ECMA-262 определяет, что {{jsxref("RangeError")}} должен предоставлять своё собственное свойство <code>message</code>, в <a href="/ru/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> он наследует свойство {{jsxref("Error.prototype.message")}}.</dd> - <dt>{{jsxref("Error.prototype.name", "RangeError.prototype.name")}}</dt> - <dd>Название ошибки. Унаследовано от {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "RangeError.prototype.fileName")}}</dt> - <dd>Путь к файлу, в котором возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "RangeError.prototype.lineNumber")}}</dt> - <dd>Номер строки в файле, в котором возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "RangeError.prototype.columnNumber")}}</dt> - <dd>Номер колонки в строке, на которой возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.stack", "RangeError.prototype.stack")}}</dt> - <dd>Стек вызовов. Унаследовано от {{jsxref("Error")}}.</dd> -</dl> - -<h2 id="Methods" name="Methods">Методы</h2> -<p>Хотя объект прототипа {{jsxref("RangeError")}} не содержит собственных методов, экземпляры {{jsxref("RangeError")}} наследуют некоторые методы из цепочки прототипов.</p> - -<h2 id="Specifications" name="Specifications">Спецификации</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарии</th> - </tr> - <tr> - <td>ECMAScript 3-е издание.</td> - <td>Стандарт</td> - <td>Изначальное определение.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Определено как <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Определено как <code><em>NativeError</em>.prototype</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> -<div>{{CompatibilityTable}}</div> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Android</th> - <th>Chrome для Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> - </table> -</div> - -<h2 id="See_also" name="See_also">Смотрите также</h2> -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/ru/web/javascript/reference/global_objects/referenceerror/prototype/index.html b/files/ru/web/javascript/reference/global_objects/referenceerror/prototype/index.html deleted file mode 100644 index 1c73b6cb4e..0000000000 --- a/files/ru/web/javascript/reference/global_objects/referenceerror/prototype/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: ReferenceError.prototype -slug: Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype -tags: - - Error - - JavaScript - - Property - - Prototype - - ReferenceError -translation_of: Web/JavaScript/Reference/Global_Objects/ReferenceError -translation_of_original: Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype ---- -<div>{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}</div> - -<h2 id="Summary" name="Summary">Сводка</h2> -<p>Свойство <code><strong>ReferenceError.prototype</strong></code> представляет прототип конструктора объекта {{jsxref("ReferenceError")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description" name="Description">Описание</h2> -<p>Все экземпляры {{jsxref("ReferenceError")}} наследуются от объекта <code>ReferenceError.prototype</code>. Вы можете использовать прототип для добавления свойств или методов ко всем экземплярам.</p> - -<h2 id="Properties" name="Properties">Свойства</h2> -<dl> - <dt><code>ReferenceError.prototype.constructor</code></dt> - <dd>Определяет функцию, создающую прототип экземпляра.</dd> - <dt>{{jsxref("Error.prototype.message", "ReferenceError.prototype.message")}}</dt> - <dd>Сообщение ошибки. Хотя стандарт ECMA-262 определяет, что {{jsxref("ReferenceError")}} должен предоставлять своё собственное свойство <code>message</code>, в <a href="/ru/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> он наследует свойство {{jsxref("Error.prototype.message")}}.</dd> - <dt>{{jsxref("Error.prototype.name", "ReferenceError.prototype.name")}}</dt> - <dd>Название ошибки. Унаследовано от {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "ReferenceError.prototype.fileName")}}</dt> - <dd>Путь к файлу, в котором возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "ReferenceError.prototype.lineNumber")}}</dt> - <dd>Номер строки в файле, в котором возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "ReferenceError.prototype.columnNumber")}}</dt> - <dd>Номер колонки в строке, на которой возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.stack", "ReferenceError.prototype.stack")}}</dt> - <dd>Стек вызовов. Унаследовано от {{jsxref("Error")}}.</dd> -</dl> - -<h2 id="Methods" name="Methods">Методы</h2> -<p>Хотя объект прототипа {{jsxref("ReferenceError")}} не содержит собственных методов, экземпляры {{jsxref("ReferenceError")}} наследуют некоторые методы из цепочки прототипов.</p> - -<h2 id="Specifications" name="Specifications">Спецификации</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарии</th> - </tr> - <tr> - <td>ECMAScript 3-е издание.</td> - <td>Стандарт</td> - <td>Изначальное определение.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Определено как <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Определено как <code><em>NativeError</em>.prototype</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> -<div>{{CompatibilityTable}}</div> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Android</th> - <th>Chrome для Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> - </table> -</div> - -<h2 id="See_also" name="See_also">Смотрите также</h2> -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/ru/web/javascript/reference/global_objects/regexp/prototype/index.html b/files/ru/web/javascript/reference/global_objects/regexp/prototype/index.html deleted file mode 100644 index b0a655760c..0000000000 --- a/files/ru/web/javascript/reference/global_objects/regexp/prototype/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: RegExp.prototype -slug: Web/JavaScript/Reference/Global_Objects/RegExp/prototype -tags: - - JavaScript - - Property - - Prototype - - Reference - - RegExp - - регулярные выражения -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp -translation_of_original: Web/JavaScript/Reference/Global_Objects/RegExp/prototype ---- -<div>{{JSRef("Global_Objects", "RegExp")}}</div> - -<h2 id="Summary" name="Summary">Сводка</h2> -<p>Свойство <strong><code>RegExp.prototype</code></strong> представляет объект прототипа для констуктора {{jsxref("Global_Objects/RegExp", "RegExp")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description" name="Description">Описание</h2> -<p>Описание экземпляров регулярных выражений смотрите на странице документации, посвящёной объекту {{jsxref("Global_Objects/RegExp", "RegExp")}}. Экземпляры регулярных выражений наследуются от <code>RegExp.prototype</code>. Изменение объекта прототипа распространяется на все экземпляры регулярных выражений.</p> - -<h2 id="Properties" name="Properties">Свойства</h2> -<p>Также смотрите <a href="/ru/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#RegExp_Properties">устаревшие свойства объекта <code>RegExp</code></a></p> -<p>Обратите внимание, что некоторые свойста объекта {{jsxref("Global_Objects/RegExp", "RegExp")}} имеют как длинные, так и короткие (Perl-подобные) имена. Оба имени всегда ссылаются на одно и тоже значение. Perl — это язык программирования, откуда JavaScript взял свои регулярные выражения.</p> -<dl> - <dt><code>RegExp.prototype.constructor</code></dt> - <dd>Определяет функцию, создающую прототип объекта.</dd> - <dt>{{jsxref("RegExp.prototype.global")}}</dt> - <dd>Определяет, надо ли проверять регулярное выражение на все возможные сопоставления со строкой, или достаточно только первый раз.</dd> - <dt>{{jsxref("RegExp.prototype.ignoreCase")}}</dt> - <dd>Определяет, надо ли игнорировать регистр символов при попытке сопоставления со строкой.</dd> - <dt>{{jsxref("RegExp.prototype.lastIndex")}}</dt> - <dd>Индекс, по которому начинается следующее сопоставление.</dd> - <dt>{{jsxref("RegExp.prototype.multiline")}}</dt> - <dd>Определяет, надо ли искать по нескольким строкам.</dd> - <dt>{{jsxref("RegExp.prototype.source")}}</dt> - <dd>Текст шаблона.</dd> - <dt>{{jsxref("RegExp.prototype.sticky")}} {{experimental_inline}}</dt> - <dd>Определяет, включён ли режим «липкого» поиска.</dd> - <dt>{{jsxref("RegExp.prototype.flags")}} {{experimental_inline}}</dt> - <dd>Строка, состоящая из флагов объекта регулярного выражения.</dd> -</dl> -<div>{{jsOverrides("Object", "properties", "constructor", "global", "ignoreCase", "lastIndex", "multiline", "source", "sticky")}}</div> - -<h2 id="Methods" name="Methods">Методы</h2> -<p>Также смотрите <a href="/ru/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#RegExp_Methods">устаревшие методы объекта <code>RegExp</code></a></p> -<dl> - <dt>{{jsxref("RegExp.prototype.exec()")}}</dt> - <dd>Выполняет поиск сопоставлений регулярного выражения в своём строковом параметре.</dd> - <dt>{{jsxref("RegExp.prototype.test()")}}</dt> - <dd>Пытается сопоставить регулярное выражение своему строковому параметру.</dd> - <dt>{{jsxref("RegExp.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>Возвращает объектный литерал, представляющий указаный объект; вы можете использовать это значение для создания нового объекта. Переопределяет метод {{jsxref("Object.prototype.toSource()")}}.</dd> - <dt>{{jsxref("RegExp.prototype.toString()")}}</dt> - <dd>Возвращает строку, представляющую указаннный объект. Переопределяет метод {{jsxref("Object.prototype.toString()")}}.</dd> -</dl> -<div>{{jsOverrides("Object", "Methods", "exec", "test", "toSource", "toString")}}</div> - -<h2 id="Specifications" name="Specifications">Спецификации</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарии</th> - </tr> - <tr> - <td>ECMAScript 1-е издание.</td> - <td>Стандарт</td> - <td>Изначальное определение. Реализована в JavaScript 1.1.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.10.5.1', 'RegExp')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-regexp.prototype', 'RegExp.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> -<div>{{CompatibilityTable}}</div> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Android</th> - <th>Chrome для Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> - </table> -</div> - -<h2 id="See_also" name="See_also">Смотрите также</h2> -<ul> - <li>Глава про <a href="/ru/docs/Web/JavaScript/Guide/Regular_Expressions">регулярные выражения</a> в <a href="/ru/docs/Web/JavaScript/Guide">руководстве по JavaScript</a></li> - <li>{{jsxref("Global_Objects/RegExp", "RegExp")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/ru/web/javascript/reference/global_objects/set/prototype/index.html b/files/ru/web/javascript/reference/global_objects/set/prototype/index.html deleted file mode 100644 index a09b758046..0000000000 --- a/files/ru/web/javascript/reference/global_objects/set/prototype/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Set.prototype -slug: Web/JavaScript/Reference/Global_Objects/Set/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Set -translation_of_original: Web/JavaScript/Reference/Global_Objects/Set/prototype ---- -<div>{{JSRef}}</div> - -<p>The <code><strong>Set</strong></code><strong><code>.prototype</code></strong> property represents the prototype for the {{jsxref("Set")}} constructor.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Description">Description</h2> - -<p>{{jsxref("Set")}} instances inherit from {{jsxref("Set.prototype")}}. You can use the constructor's prototype object to add properties or methods to all <code>Set</code> instances.</p> - -<h2 id="Свойства">Свойства</h2> - -<dl> - <dt><code>Set.prototype.constructor</code></dt> - <dd>Возвращает функцию, которая создала прототип экземпляра. Это функция {{jsxref("Set")}} по умолчанию.</dd> - <dt>{{jsxref("Set.prototype.size")}}</dt> - <dd>Возвращает количество элементов в объекте <code>Set</code>.</dd> -</dl> - -<h2 id="Методы">Методы</h2> - -<dl> - <dt>{{jsxref("Set.add", "Set.prototype.add(value)")}}</dt> - <dd>Добавляет новый элемент с переданным значением в <code>Set</code> объект. Возвращает <code>Set</code> объект.</dd> - <dt>{{jsxref("Set.prototype.clear()")}}</dt> - <dd>Removes all elements from the <code>Set</code> object.</dd> - <dt>{{jsxref("Set.delete", "Set.prototype.delete(value)")}}</dt> - <dd>Removes the element associated to the <code>value</code> and returns the value that <code>Set.prototype.has(value)</code> would have previously returned. <code>Set.prototype.has(value)</code> will return <code>false</code> afterwards.</dd> - <dt>{{jsxref("Set.prototype.entries()")}}</dt> - <dd>Returns a new <code>Iterator</code> object that contains<strong> an array of <code>[value, value]</code></strong> for each element in the <code>Set</code> object, in insertion order. This is kept similar to the <code>Map</code> object, so that each entry has the same value for its <em>key</em> and <em>value</em> here.</dd> - <dt>{{jsxref("Set.forEach", "Set.prototype.forEach(callbackFn[, thisArg])")}}</dt> - <dd>Calls <code>callbackFn</code> once for each value present in the <code>Set</code> object, in insertion order. If a <code>thisArg</code> parameter is provided to <code>forEach</code>, it will be used as the <code>this</code> value for each callback.</dd> - <dt>{{jsxref("Set.has", "Set.prototype.has(value)")}}</dt> - <dd>Returns a boolean asserting whether an element is present with the given value in the <code>Set</code> object or not.</dd> - <dt>{{jsxref("Set.prototype.keys()")}}</dt> - <dd>Is the same function as the <strong><code>values()</code></strong> function and returns a new <code>Iterator</code> object that contains the values for each element in the <code>Set</code> object in insertion order.</dd> - <dt>{{jsxref("Set.prototype.values()")}}</dt> - <dd>Returns a new <code>Iterator</code> object that contains the <strong>values</strong> for each element in the <code>Set</code> object in insertion order.</dd> - <dt>{{jsxref("Set.prototype.@@iterator()", "Set.prototype[@@iterator]()")}}</dt> - <dd>Returns a new <code>Iterator</code> object that contains the <strong>values</strong> for each element in the <code>Set</code> object in insertion order.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-set.prototype', 'Set.prototype')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-set.prototype', 'Set.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("javascript.builtins.Set.prototype")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Map.prototype")}}</li> -</ul> diff --git a/files/ru/web/javascript/reference/global_objects/string/prototype/index.html b/files/ru/web/javascript/reference/global_objects/string/prototype/index.html deleted file mode 100644 index 66537d9ae8..0000000000 --- a/files/ru/web/javascript/reference/global_objects/string/prototype/index.html +++ /dev/null @@ -1,230 +0,0 @@ ---- -title: String.prototype -slug: Web/JavaScript/Reference/Global_Objects/String/prototype -tags: - - JavaScript - - Property - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String -translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype ---- -<div>{{JSRef("Global_Objects", "String")}}</div> - -<h2 id="Summary" name="Summary">Сводка</h2> - -<p>Свойство <strong><code>String.prototype</code></strong> представляет прототип объекта {{jsxref("Global_Objects/String", "String")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description" name="Description">Описание</h2> - -<p>Все объекты {{jsxref("Global_Objects/String", "String")}} наследуются от <code>String.prototype</code>. Изменения в прототипе объекта {{jsxref("Global_Objects/String", "String")}} распространяются на все его экземпляры.</p> - -<h2 id="Properties" name="Properties">Свойства</h2> - -<dl> - <dt><code>String.prototype.constructor</code></dt> - <dd>Определяет функцию, создающую прототип этого объекта.</dd> - <dt>{{jsxref("String.prototype.length")}}</dt> - <dd>Отражает длину строки.</dd> - <dt><code><em>N</em></code></dt> - <dd>Используется для доступа к символу в позиции <em>N</em>, где <em>N</em> — это целое число между 0 и длиной строки {{jsxref("String.length", "length")}} минус один. Эти свойства доступны только для чтения.</dd> -</dl> - -<h2 id="Methods" name="Methods">Методы</h2> - -<h3 id="Methods_unrelated_to_HTML" name="Methods_unrelated_to_HTML">Методы, не относящиеся к HTML</h3> - -<dl> - <dt>{{jsxref("String.prototype.charAt()")}}</dt> - <dd>Возвращает символ по указанному индексу.</dd> - <dt>{{jsxref("String.prototype.charCodeAt()")}}</dt> - <dd>Возвращает число, представляющее значение символа в Юникоде по указанному индексу.</dd> - <dt>{{jsxref("String.prototype.codePointAt()")}} {{experimental_inline}}</dt> - <dd>Возвращает неотрицательное целое число, представляющее закодированную в UTF-16 кодовую точку значения по указанной позиции.</dd> - <dt>{{jsxref("String.prototype.concat()")}}</dt> - <dd>Объединяет текст двух строк и возвращает новую строку.</dd> - <dt>{{jsxref("String.prototype.includes()")}} {{experimental_inline}}</dt> - <dd>Определяет, находится ли строка внутри другой строки.</dd> - <dt>{{jsxref("String.prototype.endsWith()")}} {{experimental_inline}}</dt> - <dd>Определяет, заканчивается ли строка символами другой строки.</dd> - <dt>{{jsxref("String.prototype.indexOf()")}}</dt> - <dd>Возвращает индекс первого вхождения указанного значения в объекте {{jsxref("Global_Objects/String", "String")}}, на котором был вызван этот метод, или -1, если вхождений нет.</dd> - <dt>{{jsxref("String.prototype.lastIndexOf()")}}</dt> - <dd>Возвращает индекс последнего вхождения указанного значения в объекте {{jsxref("Global_Objects/String", "String")}}, на котором был вызван этот метод, или -1, если вхождений нет.</dd> - <dt>{{jsxref("String.prototype.localeCompare()")}}</dt> - <dd>Возвращает число, указывающее, находится ли образцовая строка до, после или на том же самом месте, что и указанная строка в порядке сортировки.</dd> - <dt>{{jsxref("String.prototype.match()")}}</dt> - <dd>Используется для сопоставления строке регулярного выражения.</dd> -</dl> - -<dl> - <dt>{{jsxref("String.prototype.matchAll()")}}</dt> - <dd>Возвращает итератор по всем результатам при сопоставлении строки с регулярным выражением.</dd> -</dl> - -<dl> - <dt>{{jsxref("String.prototype.normalize()")}} {{experimental_inline}}</dt> - <dd>Возвращает форму нормализации Юникода для строкового значения.</dd> - <dt><s class="obsoleteElement">{{jsxref("String.prototype.quote()")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">Оборачивает строку в двойные кавычки ("<code>"</code>").</s></dd> - <dt>{{jsxref("String.prototype.repeat()")}} {{experimental_inline}}</dt> - <dd>Возвращает строку. состоящую из элементов объекта, повторённых указанное количество раз.</dd> - <dt>{{jsxref("String.prototype.replace()")}}</dt> - <dd>Используется для сопоставления строке регулярного выражения и для замены совпавшей подстроки на новую подстроку.</dd> - <dt>{{jsxref("String.prototype.search()")}}</dt> - <dd>Выполняет поиск совпадения регулярного выражения со строкой.</dd> - <dt>{{jsxref("String.prototype.slice()")}}</dt> - <dd>Извлекает часть строки и возвращает новую строку.</dd> - <dt>{{jsxref("String.prototype.split()")}}</dt> - <dd>Разбивает объект {{jsxref("Global_Objects/String", "String")}} на массив строк, разделёных указанной строкой на подстроки.</dd> - <dt>{{jsxref("String.prototype.startsWith()")}} {{experimental_inline}}</dt> - <dd>Определяет, начинается ли строка символами другой строки.</dd> - <dt>{{jsxref("String.prototype.substr()")}}</dt> - <dd>Возвращает указанное количество символов в строке, начинающихся с указанной позиции.</dd> - <dt>{{jsxref("String.prototype.substring()")}}</dt> - <dd>Возвращает символы в строке между двумя индексами.</dd> - <dt>{{jsxref("String.prototype.toLocaleLowerCase()")}}</dt> - <dd>Приводит символы в строке к нижнему регистру согласно текущей локали. Для большинства языков, метод делает то же самое, что и метод {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}.</dd> - <dt>{{jsxref("String.prototype.toLocaleUpperCase()")}}</dt> - <dd>Приводит символы в строке к верхнему регистру согласно текущей локали. Для большинства языков, метод делает то же самое, что и метод {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}.</dd> - <dt>{{jsxref("String.prototype.toLowerCase()")}}</dt> - <dd>Возвращает строковое значение с символами в нижнем регистре.</dd> - <dt>{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>Возвращает литерал объекта, представляющий указанный объект; вы можете использовать это значениедля создания нового объекта. Переопределяет метод {{jsxref("Object.prototype.toSource()")}}.</dd> - <dt>{{jsxref("String.prototype.toString()")}}</dt> - <dd>Возвращает строковое представление указаного объекта. Переопределяет метод {{jsxref("Object.prototype.toString()")}}.</dd> - <dt>{{jsxref("String.prototype.toUpperCase()")}}</dt> - <dd>Возвращает строковое значение с символами в верхнем регистре.</dd> - <dt>{{jsxref("String.prototype.trim()")}}</dt> - <dd>Обрезает пробельные символы в начале и в конце строки. Часть стандарта ECMAScript 5.</dd> - <dt>{{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}</dt> - <dd>Обрезает пробельные символы с левой стороны строки.</dd> - <dt>{{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}</dt> - <dd>Обрезает пробельные символы с правой стороны строки.</dd> - <dt>{{jsxref("String.prototype.valueOf()")}}</dt> - <dd>Возвращает примитивное значение указанного объекта. Переопределяет метод {{jsxref("Object.prototype.valueOf()")}}.</dd> - <dt>{{jsxref("String.prototype.@@iterator()", "String.prototype[@@iterator]()")}} {{experimental_inline}}</dt> - <dd>Возвращает новый объект итератора <code>Iterator</code>, который итерируется по кодовым точкам строки и возвращает каждую кодовую точку в виде строкового значения.</dd> -</dl> - -<h3 id="HTML_wrapper_methods" name="HTML_wrapper_methods">Методы-обёртки HTML</h3> - -<p>Эти методы имеют ограниченное применение, поскольку они представляют только ограниченное подмножество доступных тегов и атрибутов HTML.</p> - -<dl> - <dt>{{jsxref("String.prototype.anchor()")}} {{deprecated_inline}}</dt> - <dd><code><a href="/ru/docs/Web/HTML/Element/a#attr-name"><a name="<em>имя</em>"></a></code> (цель гипертекста)</dd> - <dt>{{jsxref("String.prototype.big()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("big")}}</dd> - <dt>{{jsxref("String.prototype.blink()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("blink")}}</dd> - <dt>{{jsxref("String.prototype.bold()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("b")}}</dd> - <dt>{{jsxref("String.prototype.fixed()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("tt")}}</dd> - <dt>{{jsxref("String.prototype.fontcolor()")}} {{deprecated_inline}}</dt> - <dd><a href="/ru/docs/Web/HTML/Element/font#attr-color"><code><font color="<em>цвет</em>"></code></a></dd> - <dt>{{jsxref("String.prototype.fontsize()")}} {{deprecated_inline}}</dt> - <dd><a href="/ru/docs/Web/HTML/Element/font#attr-size"><code><font size="<em>размер</em>"></code></a></dd> - <dt>{{jsxref("String.prototype.italics()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("i")}}</dd> - <dt>{{jsxref("String.prototype.link()")}} {{deprecated_inline}}</dt> - <dd><a href="/ru/docs/Web/HTML/Element/a#attr-href"><code><a href="<em>url</em>"></code></a> (ссылка на URL)</dd> - <dt>{{jsxref("String.prototype.small()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("small")}}</dd> - <dt>{{jsxref("String.prototype.strike()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("strike")}}</dd> - <dt>{{jsxref("String.prototype.sub()")}} {{deprecated_inline}}}</dt> - <dd>{{HTMLElement("sub")}}</dd> - <dt>{{jsxref("String.prototype.sup()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("sup")}}</dd> -</dl> - -<h2 id="Specifications" name="Specifications">Спецификации</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарии</th> - </tr> - <tr> - <td>ECMAScript 1-е издание.</td> - <td>Стандарт</td> - <td>Изначальное определение.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Android</th> - <th>Chrome для Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also" name="See_also">Смотрите также</h2> - -<ul> - <li>{{jsxref("Global_Objects/String", "String")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/ru/web/javascript/reference/global_objects/string/trimright/index.html b/files/ru/web/javascript/reference/global_objects/string/trimend/index.html index 4a7bd8e907..4a7bd8e907 100644 --- a/files/ru/web/javascript/reference/global_objects/string/trimright/index.html +++ b/files/ru/web/javascript/reference/global_objects/string/trimend/index.html diff --git a/files/ru/web/javascript/reference/global_objects/string/trimleft/index.html b/files/ru/web/javascript/reference/global_objects/string/trimstart/index.html index f60326e795..f60326e795 100644 --- a/files/ru/web/javascript/reference/global_objects/string/trimleft/index.html +++ b/files/ru/web/javascript/reference/global_objects/string/trimstart/index.html diff --git a/files/ru/web/javascript/reference/global_objects/symbol/prototype/index.html b/files/ru/web/javascript/reference/global_objects/symbol/prototype/index.html deleted file mode 100644 index b9ce5254e6..0000000000 --- a/files/ru/web/javascript/reference/global_objects/symbol/prototype/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Symbol.prototype -slug: Web/JavaScript/Reference/Global_Objects/Symbol/prototype -tags: - - ECMAScript6 - - JavaScript - - Свойство - - Символы -translation_of: Web/JavaScript/Reference/Global_Objects/Symbol -translation_of_original: Web/JavaScript/Reference/Global_Objects/Symbol/prototype ---- -<div>{{JSRef}}</div> - -<p>Свойство <code><strong>Symbol</strong></code><strong><code>.prototype</code></strong> указывает на прототип конструктора {{jsxref("Symbol")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Описание">Описание</h2> - -<p>Экземпляры типа {{jsxref("Symbol")}} наследуют {{jsxref("Symbol.prototype")}}. Вы можете использовать прототип конструктора, чтобы добавить свойства и методы ко всем экземплярам типа <code>Symbol</code>.</p> - -<h2 id="Свойства">Свойства</h2> - -<dl> - <dt><code>Symbol.prototype.constructor</code></dt> - <dd>Указывает на функцию, создавшую прототип экземпляра. По умолчанию это функция {{jsxref("Symbol")}}.</dd> -</dl> - -<h2 id="Методы">Методы</h2> - -<dl> - <dt>{{jsxref("Symbol.prototype.toSource()")}} {{Non-standard_inline}}</dt> - <dd>Возвращает строку, содержащую исходный код объекта {{jsxref("Global_Objects/Symbol", "Symbol")}}. Перегружает метод {{jsxref("Object.prototype.toSource()")}}.</dd> - <dt>{{jsxref("Symbol.prototype.toString()")}}</dt> - <dd>Возвращает строку, содержащую описание символа. Перегружает метод {{jsxref("Object.prototype.toString()")}}.</dd> - <dt>{{jsxref("Symbol.prototype.valueOf()")}}</dt> - <dd>Возвращает примитивное значение объекта {{jsxref("Symbol")}}. Перегружает метод {{jsxref("Object.prototype.valueOf()")}}.</dd> -</dl> - -<h2 id="Спецификации">Спецификации</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарий</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-symbol.prototype', 'Symbol.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Изначальное определение.</td> - </tr> - </tbody> -</table> - -<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoDesktop("36.0") }}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoMobile("36.0") }}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/ru/web/javascript/reference/global_objects/syntaxerror/prototype/index.html b/files/ru/web/javascript/reference/global_objects/syntaxerror/prototype/index.html deleted file mode 100644 index 840ac61f2b..0000000000 --- a/files/ru/web/javascript/reference/global_objects/syntaxerror/prototype/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: SyntaxError.prototype -slug: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype -tags: - - Error - - JavaScript - - Property - - Prototype - - SyntaxError -translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError -translation_of_original: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype ---- -<div>{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}</div> - -<h2 id="Summary" name="Summary">Сводка</h2> -<p>Свойство <code><strong>SyntaxError.prototype</strong></code> представляет прототип конструктора объекта {{jsxref("SyntaxError")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description" name="Description">Описание</h2> -<p>Все экземпляры {{jsxref("SyntaxError")}} наследуются от объекта <code>SyntaxError.prototype</code>. Вы можете использовать прототип для добавления свойств или методов ко всем экземплярам.</p> - -<h2 id="Properties" name="Properties">Свойства</h2> -<dl> - <dt><code>SyntaxError.prototype.constructor</code></dt> - <dd>Определяет функцию, создающую прототип экземпляра.</dd> - <dt>{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}</dt> - <dd>Сообщение ошибки. Хотя стандарт ECMA-262 определяет, что {{jsxref("SyntaxError")}} должен предоставлять своё собственное свойство <code>message</code>, в <a href="/ru/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> он наследует свойство {{jsxref("Error.prototype.message")}}.</dd> - <dt>{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}</dt> - <dd>Название ошибки. Унаследовано от {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}</dt> - <dd>Путь к файлу, в котором возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}</dt> - <dd>Номер строки в файле, в котором возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}</dt> - <dd>Номер колонки в строке, на которой возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}</dt> - <dd>Стек вызовов. Унаследовано от {{jsxref("Error")}}.</dd> -</dl> - -<h2 id="Methods" name="Methods">Методы</h2> -<p>Хотя объект прототипа {{jsxref("SyntaxError")}} не содержит собственных методов, экземпляры {{jsxref("SyntaxError")}} наследуют некоторые методы из цепочки прототипов.</p> - -<h2 id="Specifications" name="Specifications">Спецификации</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарии</th> - </tr> - <tr> - <td>ECMAScript 3-е издание.</td> - <td>Стандарт</td> - <td>Изначальное определение.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Определено как <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Определено как <code><em>NativeError</em>.prototype</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> -<div>{{CompatibilityTable}}</div> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Android</th> - <th>Chrome для Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> - </table> -</div> - -<h2 id="See_also" name="See_also">Смотрите также</h2> -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/ru/web/javascript/reference/global_objects/typedarray/prototype/index.html b/files/ru/web/javascript/reference/global_objects/typedarray/prototype/index.html deleted file mode 100644 index 1b79a06ad9..0000000000 --- a/files/ru/web/javascript/reference/global_objects/typedarray/prototype/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: TypedArray.prototype -slug: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype -tags: - - TypedArray - - Типизированный массив -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray -translation_of_original: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype ---- -<div>{{JSRef}}</div> - -<p><code><strong>Свойство TypedArray</strong></code><strong><code>.prototype</code></strong> является прототипом для {{jsxref("TypedArray")}}-конструкторов.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Описание">Описание</h2> - -<p>Экземпляры {{jsxref("TypedArray")}} наследуются от {{jsxref("TypedArray.prototype")}}. Вы можете использовать объект прототипа конструктора для добавления в свойств и методов во все экземпляры <em>TypedArray</em>, где <em>TypedArray</em> это один из <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">типизированных массивов</a>.</p> - -<p>Также смотрите описание <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Description"><em>TypedArray</em></a> для детальной информации о наследниках.</p> - -<h2 id="Свойства"><a id="Properties" name="Properties">Свойства</a></h2> - -<dl> - <dt><code>TypedArray.prototype.constructor</code></dt> - <dd>Возвращает функцию, которая создала прототип экземпляра. Это единственное, что для объектов <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">типизированных массивов</a> функционирует по умолчанию.</dd> - <dt>{{jsxref("TypedArray.prototype.buffer")}} {{readonlyInline}}</dt> - <dd>Возвращает {{jsxref("ArrayBuffer")}}, на который ссылается типизированный массив. Значение фиксировано с времени создания и доступно <strong>только для чтения</strong>.</dd> - <dt>{{jsxref("TypedArray.prototype.byteLength")}} {{readonlyInline}}</dt> - <dd>Возвращает длину (в байтах) типизированного массива (с начала {{jsxref("ArrayBuffer")}}). Значение фиксировано с времени создания и доступно <strong>только для чтения</strong>.</dd> - <dt>{{jsxref("TypedArray.prototype.byteOffset")}} {{readonlyInline}}</dt> - <dd>Возвращает смещение (в байтах) типизированного массива от его {{jsxref("ArrayBuffer")}}. Значение фиксировано с времени создания и доступно <strong>только для чтения</strong>.</dd> - <dt>{{jsxref("TypedArray.prototype.length")}} {{readonlyInline}}</dt> - <dd>Возвращает число элементов типизированного массива. Значение фиксировано с времени создания и доступно <strong>только для чтения</strong>.</dd> -</dl> - -<h2 id="Методы"><a id="Methods" name="Methods">Методы</a></h2> - -<dl> - <dt>{{jsxref("TypedArray.prototype.copyWithin()")}}</dt> - <dd>Копирует последовательность элементов массива внутри него. Подробнее {{jsxref("Array.prototype.copyWithin()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.entries()")}}</dt> - <dd>Возвращает новый объект итератора <code><strong>Array Iterator</strong></code>, содержащий пары ключ / значение для каждого индекса массива. Подробнее {{jsxref("Array.prototype.entries()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.every()")}}</dt> - <dd>Проверяет, удовлетворяют ли все элементы массива условию, заданному в передаваемой функции. Подробнее {{jsxref("Array.prototype.every()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.fill()")}}</dt> - <dd>Заполняет все элементы массива от начального индекта до конечного индекса указанным значением. Подробнее {{jsxref("Array.prototype.fill()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.filter()")}}</dt> - <dd>Создаёт новый массив с теми элементами текущего массива, с которыми фильтрующая функция вернёт <code>true</code>. Подробнее {{jsxref("Array.prototype.filter()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.find()")}}</dt> - <dd>Возвращает значение элемента массива, если элемент удовлетворяет условию проверяющей функции, иначе возвращается <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="Значение глобального свойства undefined представляет значение undefined. Это одно из примитивных значений JavaScript."><code>undefined</code></a>. Подробнее {{jsxref("Array.prototype.find()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.findIndex()")}}</dt> - <dd>Возвращает индекс элемента массива, если элемент удовлетворяет условию проверяющей функции, иначе возвращается -1. Подробнее {{jsxref("Array.prototype.findIndex()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.forEach()")}}</dt> - <dd>Выполняет указанную функцию один раз для каждого элемента в массиве. Подробнее {{jsxref("Array.prototype.forEach()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.includes()")}} {{experimental_inline}}</dt> - <dd>Определяет, содержит ли массив определённый элемент, возвращая в зависимости от этого <code>true</code> или <code>false</code>. Подробнее {{jsxref("Array.prototype.includes()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.indexOf()")}}</dt> - <dd>Возвращает первый (меньший) индекс элемента, значение которого равно указанному значению или -1, если такого индекса нет. Подробнее {{jsxref("Array.prototype.indexOf()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.join()")}}</dt> - <dd>Объединяет все элементы массива в строку . Подробнее {{jsxref("Array.prototype.join()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.keys()")}}</dt> - <dd>Возвращает новый итератор массива <code><strong>Array Iterator</strong></code>, содержащий ключи каждого индекса в массиве. Подробнее {{jsxref("Array.prototype.keys()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</dt> - <dd>Возвращает последний (больший) индекс элемента, значение которого равно заданному значению или -1, если такого индекса нет. Подробнее {{jsxref("Array.prototype.lastIndexOf()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.map()")}}</dt> - <dd>Создаёт новый массив с результатом вызова указанной функции для каждого элемента массива. Подробнее {{jsxref("Array.prototype.map()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt> - <dd>Ранний нестандартный вариант от {{jsxref("TypedArray.prototype.copyWithin()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.reduce()")}}</dt> - <dd>Применяет функцию к аккумулятору и каждому значению массива (слева-направо), сводя его к одному значению. Подробнее {{jsxref("Array.prototype.reduce()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.reduceRight()")}}</dt> - <dd>Применяет функцию к аккумулятору и каждому значению массива (справа-налево), сводя его к одному значению. Подробнее {{jsxref("Array.prototype.reduceRight()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.reverse()")}}</dt> - <dd>Обращает порядок следования элементов массива. Первый элемент массива становится последним, а последний — первым. Подробнее {{jsxref("Array.prototype.reverse()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.set()")}}</dt> - <dd>Сохраняет несколько значений в типизированном массиве, получая входные значения из указанного массива.</dd> - <dt>{{jsxref("TypedArray.prototype.slice()")}}</dt> - <dd>Возвращает часть массива в новый объект массива. Подробнее {{jsxref("Array.prototype.slice()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.some()")}}</dt> - <dd>Возвращает <code>true</code>, если хоть какой-нибудь элемент массива удовлетворяет условию, заданному в передаваемой функции. Подробнее {{jsxref("Array.prototype.some()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.sort()")}}</dt> - <dd>На месте сортирует элементы массива и возвращает отсортированный массив. Подробнее {{jsxref("Array.prototype.sort()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.subarray()")}}</dt> - <dd>Возвращает новый <code>TypedArray</code>-объект, начиная с указанного стартового и кончая указанным конечным индексом элемента массива.</dd> - <dt>{{jsxref("TypedArray.prototype.values()")}}</dt> - <dd>Возвращает новый объект итератора массива <strong><code>Array Iterator</code></strong>, содержащий значения для каждого индекса в массиве. Подробнее {{jsxref("Array.prototype.values()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.toLocaleString()")}}</dt> - <dd>Возвращает локализованное строковое представление элементов массива. Подробнее {{jsxref("Array.prototype.toLocaleString()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.toString()")}}</dt> - <dd>Возвращает строковое представление указанного массива и его элементов . Подробнее {{jsxref("Array.prototype.toString()")}}.</dd> - <dt>{{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}</dt> - <dd>Возвращает новый объект итератора массива <strong><code>Array Iterator</code></strong>, содержащий значения для каждого индекса массива.</dd> -</dl> - -<h2 id="Спецификации">Спецификации</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Описание</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Первоначальное определение</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Совместимость_браузеров">Совместимость браузеров</h2> - -<div class="hidden">Таблица совместимости для этой страницы сгенерирована из структуры. Если вы хотите дополнить эти данные, то обратитесь к странице <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте запрос в "pull request".</div> - -<p>{{Compat("javascript.builtins.TypedArray.prototype")}}</p> - -<h2 id="Смотрите_также">Смотрите также</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li> - <li>{{jsxref("TypedArray")}}</li> -</ul> diff --git a/files/ru/web/javascript/reference/global_objects/typeerror/prototype/index.html b/files/ru/web/javascript/reference/global_objects/typeerror/prototype/index.html deleted file mode 100644 index 87a22a4a94..0000000000 --- a/files/ru/web/javascript/reference/global_objects/typeerror/prototype/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: TypeError.prototype -slug: Web/JavaScript/Reference/Global_Objects/TypeError/prototype -tags: - - Error - - JavaScript - - Property - - Prototype - - TypeError -translation_of: Web/JavaScript/Reference/Global_Objects/TypeError -translation_of_original: Web/JavaScript/Reference/Global_Objects/TypeError/prototype ---- -<div>{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}</div> - -<h2 id="Summary" name="Summary">Сводка</h2> -<p>Свойство <code><strong>TypeError.prototype</strong></code> представляет прототип конструктора объекта {{jsxref("TypeError")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description" name="Description">Описание</h2> -<p>Все экземпляры {{jsxref("TypeError")}} наследуются от объекта <code>TypeError.prototype</code>. Вы можете использовать прототип для добавления свойств или методов ко всем экземплярам.</p> - -<h2 id="Properties" name="Properties">Свойства</h2> -<dl> - <dt><code>TypeError.prototype.constructor</code></dt> - <dd>Определяет функцию, создающую прототип экземпляра.</dd> - <dt>{{jsxref("Error.prototype.message", "TypeError.prototype.message")}}</dt> - <dd>Сообщение ошибки. Хотя стандарт ECMA-262 определяет, что {{jsxref("TypeError")}} должен предоставлять своё собственное свойство <code>message</code>, в <a href="/ru/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> он наследует свойство {{jsxref("Error.prototype.message")}}.</dd> - <dt>{{jsxref("Error.prototype.name", "TypeError.prototype.name")}}</dt> - <dd>Название ошибки. Унаследовано от {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "TypeError.prototype.fileName")}}</dt> - <dd>Путь к файлу, в котором возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "TypeError.prototype.lineNumber")}}</dt> - <dd>Номер строки в файле, в котором возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "TypeError.prototype.columnNumber")}}</dt> - <dd>Номер колонки в строке, на которой возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.stack", "TypeError.prototype.stack")}}</dt> - <dd>Стек вызовов. Унаследовано от {{jsxref("Error")}}.</dd> -</dl> - -<h2 id="Methods" name="Methods">Методы</h2> -<p>Хотя объект прототипа {{jsxref("TypeError")}} не содержит собственных методов, экземпляры {{jsxref("TypeError")}} наследуют некоторые методы из цепочки прототипов.</p> - -<h2 id="Specifications" name="Specifications">Спецификации</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарии</th> - </tr> - <tr> - <td>ECMAScript 3-е издание.</td> - <td>Стандарт</td> - <td>Изначальное определение.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Определено как <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Определено как <code><em>NativeError</em>.prototype</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> -<div>{{CompatibilityTable}}</div> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Android</th> - <th>Chrome для Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> - </table> -</div> - -<h2 id="See_also" name="See_also">Смотрите также</h2> -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/ru/web/javascript/reference/global_objects/urierror/prototype/index.html b/files/ru/web/javascript/reference/global_objects/urierror/prototype/index.html deleted file mode 100644 index 9998443521..0000000000 --- a/files/ru/web/javascript/reference/global_objects/urierror/prototype/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: URIError.prototype -slug: Web/JavaScript/Reference/Global_Objects/URIError/prototype -tags: - - Error - - JavaScript - - Property - - Prototype - - URIError -translation_of: Web/JavaScript/Reference/Global_Objects/URIError -translation_of_original: Web/JavaScript/Reference/Global_Objects/URIError/prototype ---- -<div>{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}</div> - -<h2 id="Summary" name="Summary">Сводка</h2> -<p>Свойство <code><strong>URIError.prototype</strong></code> представляет прототип конструктора объекта {{jsxref("URIError")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description" name="Description">Описание</h2> -<p>Все экземпляры {{jsxref("URIError")}} наследуются от объекта <code>URIError.prototype</code>. Вы можете использовать прототип для добавления свойств или методов ко всем экземплярам.</p> - -<h2 id="Properties" name="Properties">Свойства</h2> -<dl> - <dt><code>URIError.prototype.constructor</code></dt> - <dd>Определяет функцию, создающую прототип экземпляра.</dd> - <dt>{{jsxref("Error.prototype.message", "URIError.prototype.message")}}</dt> - <dd>Сообщение ошибки. Хотя стандарт ECMA-262 определяет, что {{jsxref("URIError")}} должен предоставлять своё собственное свойство <code>message</code>, в <a href="/ru/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> он наследует свойство {{jsxref("Error.prototype.message")}}.</dd> - <dt>{{jsxref("Error.prototype.name", "URIError.prototype.name")}}</dt> - <dd>Название ошибки. Унаследовано от {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "URIError.prototype.fileName")}}</dt> - <dd>Путь к файлу, в котором возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "URIError.prototype.lineNumber")}}</dt> - <dd>Номер строки в файле, в котором возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "URIError.prototype.columnNumber")}}</dt> - <dd>Номер колонки в строке, на которой возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.stack", "URIError.prototype.stack")}}</dt> - <dd>Стек вызовов. Унаследовано от {{jsxref("Error")}}.</dd> -</dl> - -<h2 id="Methods" name="Methods">Методы</h2> -<p>Хотя объект прототипа {{jsxref("URIError")}} не содержит собственных методов, экземпляры {{jsxref("URIError")}} наследуют некоторые методы из цепочки прототипов.</p> - -<h2 id="Specifications" name="Specifications">Спецификации</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарии</th> - </tr> - <tr> - <td>ECMAScript 3-е издание.</td> - <td>Стандарт</td> - <td>Изначальное определение.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Определено как <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Определено как <code><em>NativeError</em>.prototype</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> -<div>{{CompatibilityTable}}</div> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Android</th> - <th>Chrome для Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> - </table> -</div> - -<h2 id="See_also" name="See_also">Смотрите также</h2> -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/ru/web/javascript/reference/global_objects/weakmap/prototype/index.html b/files/ru/web/javascript/reference/global_objects/weakmap/prototype/index.html deleted file mode 100644 index 56e1cf2fd8..0000000000 --- a/files/ru/web/javascript/reference/global_objects/weakmap/prototype/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: WeakMap.prototype -slug: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap -translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype ---- -<div>{{JSRef}}</div> - -<p><code><strong>WeakMap</strong></code><strong><code>.prototype</code></strong> свойство указыкает на прототип {{jsxref("WeakMap")}} конструктора.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Описание">Описание</h2> - -<p>{{jsxref("WeakMap")}} экзепляры унаследывают {{jsxref("WeakMap.prototype")}}. Вы можите использовать прототип конструктора объекта для добавления нових свойств и/или методов всем экзепляра класса <code>WeakMap</code>.</p> - -<p><code>WeakMap.prototype</code> является простым объектом:</p> - -<pre class="brush: js">Object.prototype.toString.call(WeakMap.prototype); // "[object Object]"</pre> - -<h2 id="Свойства">Свойства</h2> - -<dl> - <dt><code>WeakMap.prototype.constructor</code></dt> - <dd>Возвращает функцию, создавшую экземпляр. {{jsxref("WeakMap")}} function by default.</dd> -</dl> - -<h2 id="Методы">Методы</h2> - -<dl> - <dt>{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(key)")}}</dt> - <dd>Удаление значение по ключу. <code>WeakMap.prototype.has(key)</code> вернет <code>false</code> после.</dd> - <dt>{{jsxref("WeakMap.get", "WeakMap.prototype.get(key)")}}</dt> - <dd>Возвращает значение по ключу, or <code>undefined</code> такового нет.</dd> - <dt>{{jsxref("WeakMap.has", "WeakMap.prototype.has(key)")}}</dt> - <dd>Вернет логическое значение, связанное с существованием ключа.</dd> - <dt>{{jsxref("WeakMap.set", "WeakMap.prototype.set(key, value)")}}</dt> - <dd>Устанавливает значение по ключу, после возвращает самого себя.</dd> - <dt><s class="obsoleteElement">{{jsxref("WeakMap.prototype.clear()")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">Удаляет все ключи-значения из <code>WeakMap</code> объекта. Заметьте, что это возможно, только есть <code>WeakMap</code>-like объект имеет<code>.clear()</code> метод путем инкапсулирования <code>WeakMap</code> объекта, раннее неимевшего его (смотри пример на странице {{jsxref("WeakMap")}})</s></dd> -</dl> - -<h2 id="Спецификации">Спецификации</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Совместимость">Совместимость</h2> - - - -<p>{{Compat("javascript.builtins.WeakMap.prototype")}}</p> - -<h2 id="Рекомендуем">Рекомендуем</h2> - -<ul> - <li>{{jsxref("Map.prototype")}}</li> -</ul> diff --git a/files/ru/web/javascript/reference/global_objects/weakset/prototype/index.html b/files/ru/web/javascript/reference/global_objects/weakset/prototype/index.html deleted file mode 100644 index 00725e2331..0000000000 --- a/files/ru/web/javascript/reference/global_objects/weakset/prototype/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: WeakSet.prototype -slug: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype -tags: - - ECMAScript6 - - JavaScript - - Property - - WeakSet -translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet -translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype ---- -<div>{{JSRef("Global_Objects", "WeakSet")}}</div> - -<p>Свойство <code><strong>WeakSet</strong></code><strong><code>.prototype</code></strong> представляет прототип для конструктора {{jsxref("WeakSet")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Description" name="Description">Описание</h2> - -<p>Экземпляры {{jsxref("WeakSet")}} наследуются от {{jsxref("WeakSet.prototype")}}. Вы можете изменять прототип конструктора объекта для применения изменений ко всем экземплярам класса <code>WeakSet.</code></p> - -<p><code>WeakSet.prototype</code> сам по себе является обычным объектом:</p> - -<pre class="brush: js">Object.prototype.toString.call(WeakSet.prototype); // "[object Object]"</pre> - -<h2 id="Properties" name="Properties">Свойства</h2> - -<dl> - <dt><code>WeakSet.prototype.constructor</code></dt> - <dd>Возвращает функцию, создающую экземпляр прототипа. По умолчанию, это функция {{jsxref("WeakSet")}}.</dd> -</dl> - -<h2 id="Methods" name="Methods">Методы</h2> - -<dl> - <dt>{{jsxref("WeakSet.add", "WeakSet.prototype.add(value)")}}</dt> - <dd>Добавляет объект value в WeakSet. </dd> - <dt>{{jsxref("WeakSet.delete", "WeakSet.prototype.delete(value)")}}</dt> - <dd>Удаляет из WeakSet элемент value. После удаления вызов <code>WeakSet.prototype.has(value) возвращает false.</code> </dd> - <dt>{{jsxref("WeakSet.has", "WeakSet.prototype.has(value)")}}</dt> - <dd>Определяет, содержит WeakSet объект value или нет, возвращая, соответственно, true или false. </dd> - <dt><s class="obsoleteElement">{{jsxref("WeakSet.prototype.clear()")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">Удаляет все элементы из объекта WeakSet.</s></dd> -</dl> - -<h2 id="Specifications" name="Specifications">Спецификации</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-weakset.prototype', 'WeakSet.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Изначальное определение.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-weakset.prototype', 'WeakSet.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>36</td> - <td>{{ CompatGeckoDesktop(34) }}</td> - <td>{{CompatNo}}</td> - <td>23</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>Ordinary object</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("40")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome for Android</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{ CompatGeckoMobile(34) }}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>Ordinary object</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("40")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also" name="See_also">Смотрите также</h2> - -<ul> - <li>{{jsxref("Set.prototype")}}</li> - <li>{{jsxref("WeakMap.prototype")}}</li> -</ul> diff --git a/files/ru/web/javascript/reference/operators/arithmetic_operators/index.html b/files/ru/web/javascript/reference/operators/arithmetic_operators/index.html deleted file mode 100644 index f1091e3706..0000000000 --- a/files/ru/web/javascript/reference/operators/arithmetic_operators/index.html +++ /dev/null @@ -1,291 +0,0 @@ ---- -title: Арифметические операции -slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators -tags: - - JavaScript - - Операторы -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators ---- -<div> -<div>{{jsSidebar("Operators")}}</div> -</div> - -<p><strong>Арифметические операции</strong> принимают в качестве операндов числовые значения (это может быть и литерал и переменная) и возвращают результат в виде одного числового значения. Стандартными арифметическими операциями являются сложение (<code>+</code>), вычитание (<code>-</code>), умножение (<code>*</code>) и деление (<code>/</code>).</p> - -<h2 id="Сложение"><a name="Addition">Сложение (+)</a></h2> - -<p>Оператор сложения возвращает сумму числовых операндов или объединяет строки.</p> - -<h3 id="Syntax" name="Syntax">Синтаксис</h3> - -<pre class="syntaxbox"><strong>Operator:</strong> x + y -</pre> - -<h3 id="Examples" name="Examples">Примеры</h3> - -<pre class="brush: js">// Number + Number -> сложение -1 + 2 // 3 - -// Boolean + Number -> сложение -true + 1 // 2 - -// Boolean + Boolean -> сложение -false + false // 0 - -// Number + String -> конкатенация -5 + "foo" // "5foo" - -// String + Boolean -> конкатенация -"foo" + false // "foofalse" - -// String + String -> конкатенация -"foo" + "bar" // "foobar" -</pre> - -<h2 id="Вычитание_-"><a name="Subtraction">Вычитание (-)</a></h2> - -<p>Оператор вычитания вычитает один операнд из другого и возвращает разницу.</p> - -<h3 id="Syntax_2" name="Syntax_2">Синтаксис</h3> - -<pre class="syntaxbox"><strong>Operator:</strong> x - y -</pre> - -<h3 id="Examples_2" name="Examples_2">Примеры</h3> - -<pre class="brush: js">5 - 3 // 2 -3 - 5 // -2 -"foo" - 3 // NaN</pre> - -<h2 id="Деление"><a name="Division">Деление (/)</a></h2> - -<p>Оператор деления производит деление его операндов, где левый операнд - делимый, а правый - делитель.</p> - -<h3 id="Syntax_3" name="Syntax_3">Синтаксис</h3> - -<pre class="syntaxbox"><strong>Operator:</strong> x / y -</pre> - -<h3 id="Examples_3" name="Examples_3">Примеры</h3> - -<pre class="brush: js">1 / 2 // возвращает 0.5 в JavaScript -1 / 2 // возвращает 0 в Java -// (так числа не с плавающими точками) - -1.0 / 2.0 // возвращает 0.5 и в JavaScript и в Java - -2.0 / 0 // возвращает Infinity в JavaScript -2.0 / 0.0 // тоже возвращает Infinity -2.0 / -0.0 // возвращает -Infinity в JavaScript</pre> - -<h2 id="Умножение_*"><a name="Multiplication">Умножение (*)</a></h2> - -<p>Оператор умножения возвращает произведение операндов.</p> - -<h3 id="Syntax_4" name="Syntax_4">Синтаксис</h3> - -<pre class="syntaxbox"><strong>Operator:</strong> x * y -</pre> - -<h3 id="Examples_4" name="Examples_4">Примеры</h3> - -<pre class="brush: js">2 * 2 // 4 --2 * 2 // -4 -Infinity * 0 // NaN -Infinity * Infinity // Infinity -"foo" * 2 // NaN -</pre> - -<h2 id="Остаток_от_деления"><a name="Remainder">Остаток от деления (%)</a></h2> - -<p>Оператор возвращает целый остаток от деления левого операнда на правый. Возвращаемое значение всегда получает знак делимого, а не делителя. Он использует встроенную функцию <code>modulo</code>, для получения результата, которая является целочисленным остатком деления <code>var1</code> на <code>var2</code> — например— <code>var1</code> modulo <code>var2</code>. <a href="http://wiki.ecmascript.org/doku.php?id=strawman:modulo_operator" title="http://wiki.ecmascript.org/doku.php?id=strawman:modulo_operator">Есть предложение добавить оператор modulo в будущие версии ECMAScript</a>, с той разницей, что оператор будет брать знак делителя, а не делимого.</p> - -<h3 id="Syntax_5" name="Syntax_5">Синтаксис</h3> - -<pre class="syntaxbox"><strong>Оператор:</strong> var1 % var2 -</pre> - -<h3 id="Examples_5" name="Examples_5">Примеры</h3> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="number token">12</span> <span class="operator token">%</span> <span class="number token">5</span> <span class="comment token">// 2</span> -<span class="operator token">-</span><span class="number token">1</span> <span class="operator token">%</span> <span class="number token">2</span> <span class="comment token">// -1</span> -<span class="number token">NaN</span> <span class="operator token">%</span> <span class="number token">2</span> <span class="comment token">// NaN</span> -<span class="number token">1</span> <span class="operator token">%</span> <span class="number token">2</span> <span class="comment token">// 1</span> -<span class="number token">2</span> <span class="operator token">%</span> <span class="number token">3</span> <span class="comment token">// 2</span> -<span class="operator token">-</span><span class="number token">4</span> <span class="operator token">%</span> <span class="number token">2</span> <span class="comment token">// -0</span> -<span class="number token">5.5</span> <span class="operator token">%</span> <span class="number token">2</span> <span class="comment token">// 1.5</span></code></pre> - -<h2 id="Возведение_в_степень_**"><a name="Exponentiation">Возведение в степень (**)</a></h2> - -<p>Оператор возведения в степень возвращает результат первого операнда в степень. это, <code>var1</code><sup><code>var2</code></sup>, в предыдущем выражении, где <code>var1</code> и <code>var2</code> - переменные. Он право ассоциативен. <code>a ** b ** c</code> равно <code>a ** (b ** c)</code>.</p> - -<h3 id="Синтаксис">Синтаксис</h3> - -<pre class="syntaxbox"><strong>Оператор:</strong> var1 ** var2</pre> - -<h3 id="Замечания">Замечания</h3> - -<p>Во многих языках, таких как PHP и Python и других, есть оператор возведения возведения в степень (обычно ^ или **), оператор определён имеющим приоритет выше, чем у унарных операторов, таких как унарный + и унарный -, но есть несколько исключений. Например, в Bash оператор ** создан имеющим приоритет ниже, чем у унарных операторов. В JavaScript невозможно написать двухсмысленное выражение, т.е. вы не можете ставить унарный оператор (<code>+/-/~/!/delete/void/typeof</code>) непосредственно перед базовым числом.</p> - -<pre class="brush: js">-2 ** 2; -// 4 в Bash, -4 в других языках. -// Это некорректно в JavaScript, т.е. операция двухсмыслена. - - --(2 ** 2); -// -4 в JavaScript, намерения автора однозначны.</pre> - -<h3 id="Примеры">Примеры</h3> - -<pre class="brush: js">2 ** 3 // 8 -3 ** 2 // 9 -3 ** 2.5 // 15.588457268119896 -10 ** -1 // 0.1 -NaN ** 2 // NaN - -2 ** 3 ** 2 // 512 -2 ** (3 ** 2) // 512 -(2 ** 3) ** 2 // 64</pre> - -<p>Изменим знак результата возведения в степень:</p> - -<pre class="brush: js">-(2 ** 2) // -4</pre> - -<p>Насильная установка основания как отрицательного числа:</p> - -<pre class="brush: js">(-2) ** 2 // 4</pre> - -<h2 id="Инкремент"><a name="Increment">Инкремент (++)</a></h2> - -<p>Оператор инкремента увеличивает на единицу(инкрементирует) операнд и возвращает значение.</p> - -<ul> - <li>Если операция используется как постфикс, с оператором после операнда (например, x++), значение операнда возвращается, а затем увеличивается на единицу.</li> - <li>Если используется префиксная форма с оператором перед операндом (например, ++x), значение операнда возвращается увеличенным на единицу.</li> -</ul> - -<h3 id="Syntax_6" name="Syntax_6">Синтаксис</h3> - -<pre class="syntaxbox"><strong>Оператор:</strong> x++ или ++x -</pre> - -<h3 id="Examples_6" name="Examples_6">Примеры</h3> - -<pre class="brush: js">// Постфиксный -var x = 3; -y = x++; // y = 3, x = 4 - -// Префиксный -var a = 2; -b = ++a; // a = 3, b = 3 -</pre> - -<h2 id="sect1"></h2> - -<h2 id="Декремент_--"><a name="Decrement">Декремент (--)</a></h2> - -<p>Операция декремента уменьшает на 1 (отнимает единицу) свой операнд и возвращает значение.</p> - -<ul> - <li>Если операция используется как постфикс (например, x--), значение операнда возвращается, а затем уменьшается на единицу.</li> - <li>Если используется префиксная форма (например, --x), значение операнда возвращается уменьшенным на единицу.</li> -</ul> - -<h3 id="Syntax_7" name="Syntax_7">Синтаксис</h3> - -<pre class="syntaxbox"><strong>Оператор:</strong> x-- или --x -</pre> - -<h3 id="Examples_7" name="Examples_7">Примеры</h3> - -<pre class="brush: js">// Постфиксный -var x = 3; -y = x--; // y = 3, x = 2 - -// Префиксный -var a = 2; -b = --a; // a = 1, b = 1 -</pre> - -<h2 id="Унарный_минус_-"><a name="Unary_negation">Унарный минус (-)</a></h2> - -<p>Унарный минус ставится перед своим операндом и возвращает его математическое отрицание.</p> - -<h3 id="Syntax_8" name="Syntax_8">Синтаксис</h3> - -<pre class="syntaxbox"><strong>Оператор:</strong> -x -</pre> - -<h3 id="Examples_8" name="Examples_8">Примеры</h3> - -<pre class="brush: js">var x = 3; -y = -x; // y = -3, x = 3 -</pre> - -<h2 id="Унарный_плюс"><a name="Unary_plus">Унарный плюс</a> (+)</h2> - -<p>Оператор унарный плюс предшедствует своему операнду и оценивает его, пытается преобразовать его в число, если он им не является. Хотя, унарное отрицание (-) также конвертирует не числа, унарный плюс - быстрейший и предпочитаемый способ конвертирования чего-либо в число потому, что он не выполняет каких-либо операций с числом. Он может конвертировать строковые представления целых и чисел с плавающей точкой, а также нестроковые значения <code>true</code>, <code>false</code> и <code>null</code>. Поддерживаются числа в десятичном и шестнадцатиричном (с префиксом "0x") формате. Отрицательные числа тоже поддерживаются (но не 16-ричные). Если он не может вычислить конкретное значение, выполнится как <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a>.</p> - -<h3 id="Syntax_9" name="Syntax_9">Синтаксис</h3> - -<pre class="syntaxbox"><strong>Оператор:</strong> +x -</pre> - -<h3 id="Examples_9" name="Examples_9">Примеры</h3> - -<pre class="brush: js">+3 // 3 -+"3" // 3 -+true // 1 -+false // 0 -+null // 0 -</pre> - -<h2 id="Specifications" name="Specifications">Спецификации</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Примечание</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Изначальное определение</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.3')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Определено в нескольких секциях специфии: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Additive operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.5">Multiplicative operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.3">Postfix expressions</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4">Unary operators</a>.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-postfix-expressions')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Определено в нескольких секциях специфии: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-additive-operators">Additive operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-multiplicative-operators">Multiplicative operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-postfix-expressions">Postfix expressions</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-unary-operators">Unary operators</a>.</td> - </tr> - <tr> - <td>{{SpecName('ES7', '#sec-postfix-expressions')}}</td> - <td>{{Spec2('ES7')}}</td> - <td>Добавлен <a href="https://github.com/rwaldron/exponentiation-operator">Оператор возведения в степень</a>.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-postfix-expressions')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> - - - -<p>{{Compat("javascript.operators.arithmetic")}}</p> - -<h2 id="See_also" name="See_also">Смотрите также</h2> - -<ul> - <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Операторы присваивания</a></li> -</ul> diff --git a/files/ru/web/javascript/reference/operators/присваивание/index.html b/files/ru/web/javascript/reference/operators/assignment/index.html index 0517dc2ccd..0517dc2ccd 100644 --- a/files/ru/web/javascript/reference/operators/присваивание/index.html +++ b/files/ru/web/javascript/reference/operators/assignment/index.html diff --git a/files/ru/web/javascript/reference/operators/assignment_operators/index.html b/files/ru/web/javascript/reference/operators/assignment_operators/index.html deleted file mode 100644 index 5399324df0..0000000000 --- a/files/ru/web/javascript/reference/operators/assignment_operators/index.html +++ /dev/null @@ -1,431 +0,0 @@ ---- -title: Операторы присваивания -slug: Web/JavaScript/Reference/Operators/Assignment_Operators -tags: - - JavaScript - - Оператор -translation_of: Web/JavaScript/Reference/Operators#Assignment_operators -translation_of_original: Web/JavaScript/Reference/Operators/Assignment_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>Оператор присваивания</strong> присваивает левому операнду значение, основанное на значении правого операнда.</p> - -<h2 id="Описание">Описание</h2> - -<p>Основной оператор присваивания - это знак равно (<code>=</code>), он и присваивает значение правого операнда, левому. То есть - <code>x = y</code> присваивает значение переменной <code>y</code>, переменной <code>x</code>. Другие операторы присваивания, как следует из приведенной ниже таблицы с определениями и примерами, являются сокращениями стандартных операций.</p> - -<table class="standard-table"> - <tbody> - <tr> - <th>Имя</th> - <th>Сокращенный оператор</th> - <th>Смысл</th> - </tr> - <tr> - <td><a href="#Assignment">Присваивание</a></td> - <td><code>x = y</code></td> - <td><code>x = y</code></td> - </tr> - <tr> - <td><a href="#Addition_assignment">Присваивание со сложением</a></td> - <td><code>x += y</code></td> - <td><code>x = x + y</code></td> - </tr> - <tr> - <td><a href="#Subtraction_assignment">Присваивание с вычитанием</a></td> - <td><code>x -= y</code></td> - <td><code>x = x - y</code></td> - </tr> - <tr> - <td><a href="#Multiplication_assignment">Присваивание с умножением</a></td> - <td><code>x *= y</code></td> - <td><code>x = x * y</code></td> - </tr> - <tr> - <td><a href="#Division_assignment">Присваивание с делением</a></td> - <td><code>x /= y</code></td> - <td><code>x = x / y</code></td> - </tr> - <tr> - <td><a href="#Remainder_assignment">Присваивание по модулю</a></td> - <td><code>x %= y</code></td> - <td><code>x = x % y</code></td> - </tr> - <tr> - <td><a href="#Left_shift_assignment">Присваивание с левым сдвигом</a></td> - <td><code>x <<= y</code></td> - <td><code>x = x << y</code></td> - </tr> - <tr> - <td><a href="#Right_shift_assignment">Присваивание с правым сдвигом</a></td> - <td><code>x >>= y</code></td> - <td><code>x = x >> y</code></td> - </tr> - <tr> - <td><a href="#Unsigned_right_shift_assignment">Присваивание с беззнаковым сдвигом вправо</a></td> - <td><code>x >>>= y</code></td> - <td><code>x = x >>> y</code></td> - </tr> - <tr> - <td><a href="#Bitwise_AND_assignment">Присваивание с побитовым AND</a></td> - <td><code>x &= y</code></td> - <td><code>x = x & y</code></td> - </tr> - <tr> - <td><a href="#Bitwise_XOR_assignment">Присваивание с побитовым XOR</a></td> - <td><code>x ^= y</code></td> - <td><code>x = x ^ y</code></td> - </tr> - <tr> - <td><a href="#Bitwise_OR_assignment">Присваивание с побитовым OR</a></td> - <td><code>x |= y</code></td> - <td><code>x = x | y</code></td> - </tr> - </tbody> -</table> - -<h2 id="Присваивание">Присваивание</h2> - -<p>Простой оператор присваивания, который задает значение переменной. Цепочка операторов присваивания может быть использована для назначения нескольким переменным одного и того же значения. Смотрите пример.</p> - -<h4 id="Синтаксис">Синтаксис</h4> - -<pre class="syntaxbox"><strong>Оператор:</strong> x = y -</pre> - -<h4 id="Примеры">Примеры</h4> - -<pre class="brush: js">// Например, следующие переменные: -// x = 5 -// y = 10 -// z = 25 - -x = y // x - 10 -x = y = z // x, y и z все равны 25 -</pre> - -<h2 id="Присваивание_со_сложением">Присваивание со сложением</h2> - -<p>Оператор добавочного присваивания, <strong>добавляет</strong> значение правого операнда к значению левого, и сохраняет результат в переменную левого операнда.<strong> </strong>Типы значений обоих операндов, определяют поведение оператора добавочного присваивания. Возможны сложение и конкатенация. Смотрите {{jsxref("Operators/Arithmetic_Operators", "addition operator", "#Addition", 1)}} для подробностей.</p> - -<h4 id="Синтаксис_2">Синтаксис</h4> - -<pre class="syntaxbox"><strong>Оператор:</strong> x += y -<strong>Значение:</strong> x = x + y -</pre> - -<h4 id="Примеры_2">Примеры</h4> - -<pre class="brush: js">// Например, следующие переменные: -// foo = "foo" -// bar = 5 -// baz = true - -// Результат исполнения каждого нижеприведенного примера -// представлен в изоляции от предыдущих примеров (как если -// бы значения переменных foo, bar, baz возвращались на -// первоначальные) - -// Number + Number -> сложение -bar += 2 // 7 - -// Boolean + Number -> сложение -baz += 1 // 2 - -// Boolean + Boolean -> сложение -baz += false // 1 - -// Number + String -> конкатенация -bar += "foo" // "5foo" - -// String + Boolean -> конкатенация -foo += false // "foofalse" - -// String + String -> конкатенация -foo += "bar" // "foobar" -</pre> - -<h2 id="Присваивание_с_вычитанием">Присваивание с вычитанием</h2> - -<p>Оператор вычитаемого присваивания <strong>вычитает</strong> значение правого операнда из значения левого, и присваивает результат переменной левого операнда. Смотрите {{jsxref("Operators/Arithmetic_Operators", "subtraction operator", "#Subtraction", 1)}} для подробностей.</p> - -<h4 id="Синтаксис_3">Синтаксис</h4> - -<pre class="syntaxbox"><strong>Оператор:</strong> x -= y -<strong>Значение:</strong> x = x - y -</pre> - -<h4 id="Примеры_3">Примеры</h4> - -<pre class="brush: js">// Например, следующие переменные: -// bar = 5 - -bar -= 2 // 3 -bar -= "foo" // NaN -</pre> - -<h3 id="Присваивание_с_умножением"><a name="Multiplication_assignment">Присваивание с умножением</a></h3> - -<p>The multiplication assignment operator <strong>multiplies</strong> a variable by the value of the right operand and assigns the result to the variable. See the {{jsxref("Operators/Arithmetic_Operators", "multiplication operator", "#Multiplication", 1)}} for more details.</p> - -<h4 id="Синтаксис_4">Синтаксис</h4> - -<pre class="syntaxbox"><strong>Оператор:</strong> x *= y -<strong>Значение:</strong> x = x * y -</pre> - -<h4 id="Примеры_4">Примеры</h4> - -<pre class="brush: js">// Assuming the following variable -// bar = 5 - -bar *= 2 // 10 -bar *= "foo" // NaN -</pre> - -<h3 id="Присваивание_с_делением"><a name="Division_assignment">Присваивание с делением</a></h3> - -<p>The division assignment operator <strong>divides</strong> a variable by the value of the right operand and assigns the result to the variable. See the {{jsxref("Operators/Arithmetic_Operators", "division operator", "#Division", 1)}} for more details.</p> - -<h4 id="Синтаксис_5">Синтаксис</h4> - -<pre class="syntaxbox"><strong>Оператор:</strong> x /= y -<strong>Значение:</strong> x = x / y -</pre> - -<h4 id="Примеры_5">Примеры</h4> - -<pre class="brush: js">// Assuming the following variable -// bar = 5 - -bar /= 2 // 2.5 -bar /= "foo" // NaN -bar /= 0 // Infinity -</pre> - -<h3 id="Присваивание_по_модулю"><a name="Remainder_assignment">Присваивание по модулю</a></h3> - -<p>The remainder assignment operator <strong>divides</strong> a variable by the value of the right operand and assigns the <strong>remainder</strong> to the variable. See the {{jsxref("Operators/Arithmetic_Operators", "remainder operator", "#Remainder", 1)}} for more details.</p> - -<h4 id="Синтаксис_6">Синтаксис</h4> - -<pre class="syntaxbox"><strong>Оператор:</strong> x %= y -<strong>Значение:</strong> x = x % y -</pre> - -<h4 id="Примеры_6">Примеры</h4> - -<pre class="brush: js">// Assuming the following variable -// bar = 5 - -bar %= 2 // 1 -bar %= "foo" // NaN -bar %= 0 // NaN -</pre> - -<h3 id="Присваивание_с_левым_сдвигом"><a name="Left_shift_assignment">Присваивание с левым сдвигом</a></h3> - -<p>The left shift assignment operator moves the specified amount of bits to the left and assigns the result to the variable. See the {{jsxref("Operators/Bitwise_Operators", "left shift operator", "#Left_shift", 1)}} for more details.</p> - -<h4 id="Синтаксис_7">Синтаксис</h4> - -<pre class="syntaxbox"><strong>Оператор:</strong> x <<= y -<strong>Значение:</strong> x = x << y -</pre> - -<h4 id="Примеры_7">Примеры</h4> - -<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) -bar <<= 2; // 20 (00000000000000000000000000010100) -</pre> - -<h3 id="Присваивание_с_правым_сдвигом"><a name="Right_shift_assignment">Присваивание с правым сдвигом</a></h3> - -<p>The right shift assignment operator moves the specified amount of bits to the right and assigns the result to the variable. See the {{jsxref("Operators/Bitwise_Operators", "right shift operator", "#Right_shift", 1)}} for more details.</p> - -<h4 id="Синтаксис_8">Синтаксис</h4> - -<pre class="syntaxbox"><strong>Оператор:</strong> x >>= y -<strong>Значение:</strong> x = x >> y -</pre> - -<h4 id="Примеры_8">Примеры</h4> - -<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) -bar >>= 2; // 1 (00000000000000000000000000000001) - -var bar -5; // (-00000000000000000000000000000101) -bar >>= 2; // -2 (-00000000000000000000000000000010) -</pre> - -<h3 id="Присваивание_с_беззнаковым_сдвигом_вправо"><a name="Unsigned_right_shift_assignment">Присваивание с беззнаковым сдвигом вправо</a></h3> - -<p>The unsigned right shift assignment operator moves the specified amount of bits to the right and assigns the result to the variable. See the {{jsxref("Operators/Bitwise_Operators", " unsigned right shift operator", "#Unsigned_right_shift", 1)}} for more details.</p> - -<h4 id="Синтаксис_9">Синтаксис</h4> - -<pre class="syntaxbox"><strong>Оператор:</strong> x >>>= y -<strong>Значение:</strong> x = x >>> y -</pre> - -<h4 id="Примеры_9">Примеры</h4> - -<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) -bar >>>= 2; // 1 (00000000000000000000000000000001) - -var bar = -5; // (-00000000000000000000000000000101) -bar >>>= 2; // 1073741822 (00111111111111111111111111111110)</pre> - -<h3 id="Присваивание_с_побитовым_AND"><a name="Bitwise_AND_assignment">Присваивание с побитовым AND</a></h3> - -<p>The bitwise AND assignment operator uses the binary representation of both operands, does a bitwise AND operation on them and assigns the result to the variable. See the {{jsxref("Operators/Bitwise_Operators", "bitwise AND operator", "#Bitwise_AND", 1)}} for more details.</p> - -<h4 id="Синтаксис_10">Синтаксис</h4> - -<pre class="syntaxbox"><strong>Оператор:</strong> x &= y -<strong>Значение:</strong> x = x & y -</pre> - -<h4 id="Примеры_10">Примеры</h4> - -<pre class="brush: js">var bar = 5; -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -bar &= 2; // 0 -</pre> - -<h3 id="Присваивание_с_побитовым_XOR"><a name="Bitwise_XOR_assignment">Присваивание с побитовым XOR</a></h3> - -<p>Побитовый оператор присваивания XOR использует двоичное представление обоих операндов, выполняет побитовую XOR-операцию и присваивает результат переменной. Для получения более подробной информации см. {{jsxref("Operators/Bitwise_Operators", "Побитовый оператор XOR", "#Bitwise_XOR", 1)}}.</p> - -<h4 id="Синтаксис_11">Синтаксис</h4> - -<pre class="syntaxbox"><strong>Оператор:</strong> x ^= y -<strong>Значение:</strong> x = x ^ y -</pre> - -<h4 id="Примеры_11">Примеры</h4> - -<pre class="brush: js">var bar = 5; -bar ^= 2; // 7 -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -// ----------------------------------- -// 7: 00000000000000000000000000000111 -</pre> - -<h3 id="Присваиванием_с_побитовым_OR"><a name="Bitwise_OR_assignment">Присваиванием с побитовым OR</a></h3> - -<p>Побитовый оператор присваивания OR использует двоичное (бинарное) представление обоих операндов, выполняет побитовое ИЛИ для них и присваивает результат переменной. Дополнительную информацию см. {{jsxref("Operators/Bitwise_Operators", "Побитовый оператор OR", "#Bitwise_OR", 1)}}.</p> - -<h4 id="Синтаксис_12">Синтаксис</h4> - -<pre class="syntaxbox"><strong>Оператор:</strong> x |= y -<strong>Значение:</strong> x = x | y -</pre> - -<h4 id="Примеры_12">Примеры</h4> - -<pre class="brush: js">var bar = 5; -bar |= 2; // 7 -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -// ----------------------------------- -// 7: 00000000000000000000000000000111 -</pre> - -<h2 id="Примеры_13">Примеры</h2> - -<h3 id="Левый_операнд_с_другим_оператором_присваивания">Левый операнд с другим оператором присваивания</h3> - -<p>В необычных ситуациях оператор присваивания, например, <em>x += y</em> не идентичен выражению, <em>x = x + y</em>. Когда левый операнд оператора присваивания содержит оператор присваивания, левый операнд оценивается только один раз. Например:</p> - -<pre class="brush: js">a[i++] += 5 // i оценивается только один раз -a[i++] = a[i++] + 5 // i оценивается дважды -</pre> - -<h2 id="Спецификации">Спецификации</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарий</th> - </tr> - <tr> - <td>ECMAScript 1-е издание.</td> - <td>Стандарт</td> - <td>Изначальное определение.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.13', 'Операторы присваивания')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-assignment-operators', 'Операторы присваивания')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Смотрите_также">Смотрите также</h2> - -<ul> - <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">Арифметические операции</a></li> -</ul> diff --git a/files/ru/web/javascript/reference/operators/bitwise_operators/index.html b/files/ru/web/javascript/reference/operators/bitwise_operators/index.html deleted file mode 100644 index ba4703c2c3..0000000000 --- a/files/ru/web/javascript/reference/operators/bitwise_operators/index.html +++ /dev/null @@ -1,626 +0,0 @@ ---- -title: Битовые операции -slug: Web/JavaScript/Reference/Operators/Bitwise_Operators -tags: - - JavaScript - - Оператор -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<h2 id="Summary" name="Summary">Сводка</h2> - -<p>Битовые операции обращаются со своими операндами как с 32-х разрядными последовательностями нулей и единиц, а не как с десятичными, восьмеричными или шестнадцатиричными числами. К примеру десятичное число 9 в двоичном представлении будет выглядеть как 1001. Битовые операции производят свои преобразования именно с двоичным представлением числа, но возвращают стандартные числовые значения языка JavaScript.</p> - -<table class="fullwidth-table"> - <tbody> - <tr> - <td class="header" colspan="2">Операторы</td> - </tr> - <tr> - <td>Реализованы в:</td> - <td>JavaScript 1.0</td> - </tr> - <tr> - <td>Версия ECMA:</td> - <td>ECMA-262</td> - </tr> - </tbody> -</table> - -<p>Следующая таблица содержит сводные данные о битовых операциях в JavaScript:</p> - -<table class="fullwidth-table"> - <tbody> - <tr> - <th>Оператор</th> - <th>Использование</th> - <th>Описание</th> - </tr> - <tr> - <td>Побитовое И</td> - <td style="white-space: nowrap;"><code>a & b</code></td> - <td>Возвращает 1 в тех разрядах, которые у обоих операндов были равны 1.</td> - </tr> - <tr> - <td>Побитовое ИЛИ</td> - <td style="white-space: nowrap;"><code>a | b</code></td> - <td>Возвращает 1 в тех разрядах, которые хотя бы у одного из операндов были равны 1.</td> - </tr> - <tr> - <td>Побитовое исключающее ИЛИ</td> - <td style="white-space: nowrap;"><code>a ^ b</code></td> - <td>Возвращает 1 в тех позициях, которые только у одного из операндов были равны 1.</td> - </tr> - <tr> - <td>Побитовое НЕ</td> - <td style="white-space: nowrap;"><code>~ a</code></td> - <td>Инвертирует биты операнда.</td> - </tr> - <tr> - <td>Сдвиг влево</td> - <td style="white-space: nowrap;"><code>a << b</code></td> - <td>Сдвигает двоичное представление числа a на b разрядов влево заполняя освободившиеся справа разряды нулями.</td> - </tr> - <tr> - <td>Арифметический сдвиг вправо</td> - <td style="white-space: nowrap;"><code>a >> b</code></td> - <td>Сдвигает двоичное представление числа a на b разрядов вправо. Освобождающиеся разряды заполняются знаковым битом.</td> - </tr> - <tr> - <td>Логический сдвиг вправо</td> - <td style="white-space: nowrap;"><code>a >>> b</code></td> - <td>Сдвигает двоичное представление числа a на b разрядов вправо. Освобождающиеся разряды заполняются нулями.</td> - </tr> - </tbody> -</table> - -<h3 id="Signed_32-bit_integers" name="Signed_32-bit_integers">Представление чисел (Signed 32-bit integers)</h3> - -<p>Операнды всех битовых операций конвертируются в 32-х битовые целые со знаком представленные в дополнительном коде и с использованием порядка битов от "старшего к младшему". Порядок битов "от старшего к младшему" означает, что наиболее значимый бит (бит с наибольшим значением) находится слева если 32-х разрядное число представлено в виде горизонтальной линии (шкалы). Представление в дополнительном коде означает, что отрицательное значение числа (например 5 и -5) получается путем инвертирования числа (операция "побитовое НЕ", также известное как "обратный код") и прибавления к нему единицы.</p> - -<p>Возьмем, к примеру, число 314. Представим его в двоичном коде:</p> - -<pre class="eval">00000000000000000000000100111010 -</pre> - -<p>Следующая строка представляет собой его обратный код или ~314:</p> - -<pre class="eval">11111111111111111111111011000101 -</pre> - -<p>Прибавив к нему единицу, мы получаем двоичное представление числа -314, оно же 314 в дополнительном коде:</p> - -<pre class="eval">11111111111111111111111011000110</pre> - -<p>Дополнение до 2-х гарантирует нам, что у положительного числа самый левый бит равен 0, в то время как у отрицательного он равен 1. Он зовется <em>знаковым битом</em>.</p> - -<p><br> - Число 0 есть число, у которого во ввсех битовых позициях записаны нули.</p> - -<pre class="line-numbers language-html"><code class="language-html">0 (base 10) = 00000000000000000000000000000000 </code></pre> - -<p>Число -1 есть число, у которого во всех битовых позициях записаны единицы.</p> - -<pre class="line-numbers language-html"><code class="language-html">-1 (base 10) = 11111111111111111111111111111111 </code></pre> - -<p>Число <code>-2147483648</code> (в шестнадцатиричной системе счисления: <code>-0x80000000</code>) - это вещественное число, которое состоит только из 0, заисключением самого первого слева, который есть 1 (отвечает за знак числа).</p> - -<pre class="line-numbers language-html"><code class="language-html">-2147483648 (base 10) = 10000000000000000000000000000000</code></pre> - -<p>Число <code>2147483648</code> (в шестнадцатиричной системе счисления: <code>0x80000000</code>) - это вещественное число, которое состоит только из 1, заисключением самого первого слева, который есть 0 (отвечает за знак числа).</p> - -<pre class="line-numbers language-html"><code class="language-html">2147483647 (base 10) = 01111111111111111111111111111111</code></pre> - -<p><code>-2147483648 и 2147483647 - это самое минимальное и самое максимальное числа, которые можно представить в 32 разрядной ячейке памяти.</code></p> - -<h2 id="Bitwise_logical_operators" name="Bitwise_logical_operators">Побитовые логические операции</h2> - -<p>Побитовые логические операции работают следующим образом:</p> - -<ul> - <li>Операнды конвертируются в 32-х битовые числа отображаемые последовательностью нулей и единиц. Числа более 32-х бит теряют свои старшие биты. Например:</li> -</ul> - -<pre class="line-numbers language-html"><code class="language-html">До: 11100110111110100000000000000110000000000001 -После: 10100000000000000110000000000001</code> -</pre> - -<ul> - <li>Каждый бит первого операнда считается парным соотвествующему биту второго операнда. Первый бит - первому, второй второму итд.</li> - <li>Операция применяется к каждой паре битов, and the result is constructed bitwise.</li> -</ul> - -<h3 id="_.28Bitwise_AND.29" name="&_.28Bitwise_AND.29">& (Побитовое AND)</h3> - -<p>Производит побитовое И над каждой парой битов. Операция <code>a</code> AND <code>b</code> веренет 1 если только и <code>a</code> и <code>b</code> равны 1. Таблица истинности для этой операции выглядит так:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a AND b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>0</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>1</td> - </tr> - </tbody> -</table> - -<p>Пример:</p> - -<pre class="eval"> 9 (основание 10) = 00000000000000000000000000001001 (основание 2) - 14 (основание 10) = 00000000000000000000000000001110 (основание 2) - -------------------------------- -14 & 9 (основание 10) = 00000000000000000000000000001000 (осн. 2) = 8 (осн. 10) -</pre> - -<p>Побитовое AND любого числа x с нулем вернет 0.</p> - -<p>Побитовое AND любого числа x с числом -1 вернет х.</p> - -<h3 id="_.28Bitwise_OR.29" name="|_.28Bitwise_OR.29">| (Побитовое OR)</h3> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Производит побитовое ИЛИ над каждой парой битов. Операция <code style="color: rgb(37, 34, 29); font-weight: inherit;">a</code> OR <code style="color: rgb(37, 34, 29); font-weight: inherit;">b</code> веренет 1 если <code style="color: rgb(37, 34, 29); font-weight: inherit;">a</code> или <code style="color: rgb(37, 34, 29); font-weight: inherit;">b</code> равны 1. Таблица истинности для этой операции выглядит так:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a OR b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>1</td> - </tr> - </tbody> -</table> - -<pre class="eval">Пример: - -9 (осн. 10) = 00000000000000000000000000001001 (осн. 2) -14 (осн. 10) = 00000000000000000000000000001110 (осн. 2) - -------------------------------- -14 | 9 (осн. 10) = 00000000000000000000000000001111 (осн. 2) = 15 (осн. 10) -</pre> - -<p>Побитовое OR любого числа x c нулем вернет x.</p> - -<p>Побитовое OR любого числа x с числом -1 вернет -1.</p> - -<h3 id=".5E_.28Bitwise_XOR.29" name=".5E_.28Bitwise_XOR.29">^ (Побитовое XOR)</h3> - -<p>Производит побитовое XOR над каждой парой битов. Операция <code>a</code> XOR <code>b</code> вернет 1 если <code>a</code> и <code>b</code> различны. Таблица истинности для этой операции выглядит так:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a XOR b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>0</td> - </tr> - </tbody> -</table> - -<p>Пример:</p> - -<pre class="eval"> 9 (осн. 10) = 00000000000000000000000000001001 (осн. 2) - 14 (осн. 10) = 00000000000000000000000000001110 (осн. 2) - -------------------------------- -14 ^ 9 (осн. 10) = 00000000000000000000000000000111 (осн. 2) = 7 (осн. 10) -</pre> - -<p>Побитовое XOR любого числа x c нулем вернет x.</p> - -<p>Побитовое XOR любого числа x c числом -1 вернет ~x.</p> - -<h3 id=".7E_.28Bitwise_NOT.29" name=".7E_.28Bitwise_NOT.29">~ (Побитовое NOT)</h3> - -<p>Производит операцию NOT над каждым битом. NOT <code>a</code> вернет побитово инвертированное значение (обратный код) операнда. Таблица истинности для этой операции выглядит так:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">NOT a</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - </tr> - </tbody> -</table> - -<p>Пример:</p> - -<pre class="eval"> 9 (осн. 10) = 00000000000000000000000000001001 (осн. 2) - -------------------------------- -~9 (осн. 10) = 11111111111111111111111111110110 (осн. 2) = -10 (осн. 10) -</pre> - -<p>Побитовое NOT любого числа x вернет -(x + 1). Например, ~5 вернет -6.</p> - -<h2 id="Bitwise_shift_operators" name="Bitwise_shift_operators">Побитовые операции сдвига</h2> - -<p>Оператор побитового сдвига принимает в себя два операнда: первый - величина, которую сдвигают, второй - число позиций, на которое сдвигаются биты первого операнда. Направление сдвига зависит от используемого оператора.</p> - -<p>Операторы сдвига конвертируют операнды в 32-ух разрядные числа с порядком байтов от старшего к младшему, а результат возвращает того же типа, что и левый операнд.</p> - -<h3 id=".3C.3C_.28Left_shift.29" name=".3C.3C_.28Left_shift.29"><< (Сдвиг влево)</h3> - -<p>Оператор побитового сдвига влево сдвигает первый операнд на заданное число битов влево. Лишние биты отбрасываются.</p> - -<p>Например, <code>9 << 2</code> в результате даст 36:</p> - -<pre class="eval"> 9 (осн. 10): 00000000000000000000000000001001 (осн. 2) - -------------------------------- -9 << 2 (осн. 10): 00000000000000000000000000100100 (осн. 2) = 36 (осн. 10) - - -</pre> - -<p>Побитовй сдвиг любого числа <code>x</code> влево на <code>y</code> бит в результате дает <code>x * 2 ** y</code>.</p> - -<h3 id=".3E.3E_.28Sign-propagating_right_shift.29" name=".3E.3E_.28Sign-propagating_right_shift.29">>> (Сдвиг вправо с сохранением знака)</h3> - -<p>Оператор побитового сдвига вправо сдвигает первый операнд на заданное число битов вправо. Лишние биты отбрасываются. Слева добавляется заданное число битов равных первому биту исходного числа. Поскольку значение первого бита, определяющего знак числа, останется неизменным, знак получившегося результата будет таким же как у первого аргумента. Отсюда "с сохранением знака" в названи.</p> - -<p>Например, <code>9 >> 2</code> в результате даст 2:</p> - -<pre class="eval"> 9 (осн. 10): 00000000000000000000000000001001 (осн. 2) - -------------------------------- -9 >> 2 (осн. 10): 00000000000000000000000000000010 (осн. 2) = 2 (осн. 10) -</pre> - -<p>Аналогично, <code>-9 >> 2</code> даст в результате -3, так как знак сохранен:</p> - -<pre class="eval"> -9 (осн. 10): 11111111111111111111111111110111 (осн. 2) - -------------------------------- --9 >> 2 (осн. 10): 11111111111111111111111111111101 (осн. 2) = -3 (осн. 10) -</pre> - -<h3 id=".3E.3E_.28Sign-propagating_right_shift.29" name=".3E.3E_.28Sign-propagating_right_shift.29">>>> (Сдвиг вправо с заполнением нулями)</h3> - -<p>Оператор побитового сдвига вправо сдвигает первый операнд на заданное число битов вправо. Лишние биты отбрасываются. Слева добавляется заданное число нулевых битов. Поскольку значение первого бита, определяющего знак числа, становится нулевым, результатом операции всегда будет положительное число.</p> - -<p>Для положительных чисел, сдвиг вправо с сохранением знака и сдвиг вправо с заполнением нулями эквивалентны.</p> - -<p>Например, <code>9 >>> 2</code> дает в результате 2, как и <code>9 >> 2</code>:</p> - -<pre class="eval"> 9 (осн. 10): 00000000000000000000000000001001 (осн. 2) - -------------------------------- -9 >>> 2 (осн. 10): 00000000000000000000000000000010 (осн. 2) = 2 (осн. 10) -</pre> - -<p>Важно отметить, что для отрицательных результаты будут разными. Например, <code>-9 >>> 2</code> дает в результате 1073741821, что отличается от результата <code>-9 >> 2</code> (равно -3):</p> - -<pre class="eval"> -9 (осн. 10): 11111111111111111111111111110111 (осн. 2) - -------------------------------- --9 >>> 2 (осн. 10): 00111111111111111111111111111101 (осн. 2) = 1073741821 (осн. 10) -</pre> - -<h3 id="Examples" name="Examples">Примеры</h3> - -<h4 id="Example_Flags_and_bitmasks" name="Example:_Flags_and_bitmasks">Пример: флаги и битовые маски</h4> - -<p>Побитовые логические операторы часто используются для создания, обработки и чтения последовательности флагов, которые осуществляются также, как и двоичные переменные. Переменные могут быть использованы вместо этих последовательностей, но двоичные флаги занимают гораздо меньше памяти (в 32 разрядной ячейке памяти).</p> - -<p>Предположим, существует 4 флага:</p> - -<ul> - <li>флаг A: у нас есть проблема с муравьями</li> - <li>флаг B: у нас есть летучая мышь</li> - <li>флаг C: у нас есть кошка</li> - <li>флаг D: у нас есть утка</li> -</ul> - -<p>Эти флаги представлены последовательностью битов: DCBA. Считается, что флаг <em>установлен (the flag is set)</em>, если его значение равно 1. Флаг <em>сброшен (the flag is cleared)</em>, если его значение равно 0. Предположим, что переменная <code>flags</code> содержит двоичное значение 0101:</p> - -<pre class="eval">var flags = 0x5; // двоичное 0101 -</pre> - -<p>Из этого значения следует:</p> - -<ul> - <li>флаг A установлен (у нас есть проблема с муравьями);</li> - <li>флаг B сброшен (у нас нет летучей мыши);</li> - <li>флаг C установлен (у нас есть кошка);</li> - <li>флаг D сброшен (у нас нет утки);</li> -</ul> - -<p>Так как битовые операторы 32-битные, то 0101 в действительности представлено значением 00000000000000000000000000000101, но ведущие нули могут быть опущены, потому, что не содержат значимой информации.</p> - -<p><em>Битовая маска, </em>это последовательность битов, которая позволяет манипулировать и/или считывать значения флагов. Обычно для каждого флага задаётся "примитивная" битовая маска:</p> - -<pre class="eval">var FLAG_A = 0x1; // 0001 -var FLAG_B = 0x2; // 0010 -var FLAG_C = 0x4; // 0100 -var FLAG_D = 0x8; // 1000 -</pre> - -<p>New bitmasks can be created by using the bitwise logical operators on these primitive bitmasks. For example, the bitmask 1011 can be created by ORing FLAG_A, FLAG_B, and FLAG_D:</p> - -<pre class="eval">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011 -</pre> - -<p>Individual flag values can be extracted by ANDing them with a bitmask, where each bit with the value of one will "extract" the corresponding flag. The bitmask <em>masks</em> out the non-relevant flags by ANDing with zeros (hence the term "bitmask"). For example, the bitmask 0100 can be used to see if flag C is set:</p> - -<pre class="eval">// if we own a cat -if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true - // do stuff -} -</pre> - -<p>A bitmask with multiple set flags acts like an "either/or". For example, the following two are equivalent:</p> - -<pre class="eval">// if we own a bat or we own a cat -if ((flags & FLAG_B) || (flags & FLAG_C)) { // (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true - // do stuff -} -</pre> - -<pre class="eval">// if we own a bat or cat -var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110 -if (flags & mask) { // 0101 & 0110 => 0100 => true - // do stuff -} -</pre> - -<p>Flags can be set by ORing them with a bitmask, where each bit with the value one will set the corresponding flag, if that flag isn't already set. For example, the bitmask 1010 can be used to set flags C and D:</p> - -<pre class="eval">// yes, we own a cat and a duck -var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100 -flags |= mask; // 0101 | 1100 => 1101 -</pre> - -<p>Flags can be cleared by ANDing them with a bitmask, where each bit with the value zero will clear the corresponding flag, if it isn't already cleared. This bitmask can be created by NOTing primitive bitmasks. For example, the bitmask 1010 can be used to clear flags A and C:</p> - -<pre class="eval">// no, we don't neither have an ant problem nor own a cat -var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010 -flags &= mask; // 1101 & 1010 => 1000 -</pre> - -<p>The mask could also have been created with <code>~FLAG_A & ~FLAG_C</code> (De Morgan's law):</p> - -<pre class="eval">// no, we don't have an ant problem, and we don't own a cat -var mask = ~FLAG_A & ~FLAG_C; -flags &= mask; // 1101 & 1010 => 1000 -</pre> - -<p>Flags can be toggled by XORing them with a bitmask, where each bit with the value one will toggle the corresponding flag. For example, the bitmask 0110 can be used to toggle flags B and C:</p> - -<pre class="eval">// if we didn't have a bat, we have one now, and if we did have one, bye-bye bat -// same thing for cats -var mask = FLAG_B | FLAG_C; -flags = flags ^ mask; // 1100 ^ 0110 => 1010 -</pre> - -<p>Finally, the flags can all be flipped with the NOT operator:</p> - -<pre class="eval">// entering parallel universe... -flags = ~flags; // ~1010 => 0101 - -</pre> - -<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td><a href="#Bitwise_NOT">Битовый NOT (<code>~</code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a href="#Bitwise_AND">Битовый AND (<code>&</code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a href="#Bitwise_OR">Битовый OR (<code>|</code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a href="#Bitwise_XOR">Битовый XOR (<code>^</code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a href="#Left_shift">Сдвиг влево (<code><<</code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a href="#Right_shift">Сдвиг вправо (<code>>></code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a href="#Unsigned_right_shift">Беззнаковый сдвиг вправо (<code>>>></code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td><a href="#Bitwise_NOT">Битовый NOT (<code>~</code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a href="#Bitwise_AND">Битовый AND (<code>&</code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a href="#Bitwise_OR">Битовый OR (<code>|</code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a href="#Bitwise_XOR">Битовый XOR (<code>^</code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a href="#Left_shift">Сдвиг влево (<code><<</code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a href="#Right_shift">Сдвиг вправо (<code>>></code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a href="#Unsigned_right_shift">Беззнаковый сдвиг вправо (<code>>>></code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also" name="See_also">Смотрите также</h2> - -<ul> - <li><a class="external" href="http://ru.wikipedia.org/wiki/%D0%91%D0%B8%D1%82%D0%BE%D0%B2%D1%8B%D0%B5_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%86%D0%B8%D0%B8" title="http://ru.wikipedia.org/wiki/Битовые_операции">Wikipedia Битовые операции</a></li> - <li><a class="external" href="http://ru.wikipedia.org/wiki/%D0%94%D0%BE%D0%BF%D0%BE%D0%BB%D0%BD%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9_%D0%BA%D0%BE%D0%B4_(%D0%BF%D1%80%D0%B5%D0%B4%D1%81%D1%82%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D1%87%D0%B8%D1%81%D0%BB%D0%B0)" title="http://ru.wikipedia.org/wiki/Дополнительный_код_(представление_числа)">Wikipedia Дополнительный код</a></li> - <li><a class="external" href="http://ru.wikipedia.org/wiki/%D0%9E%D0%B1%D1%80%D0%B0%D1%82%D0%BD%D1%8B%D0%B9_%D0%BA%D0%BE%D0%B4_(%D0%BF%D1%80%D0%B5%D0%B4%D1%81%D1%82%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D1%87%D0%B8%D1%81%D0%BB%D0%B0)" title="http://ru.wikipedia.org/wiki/Обратный_код_(представление_числа)">Wikipedia Обратный код</a></li> - <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/Logical_Operators">Логические операции</a></li> -</ul> diff --git a/files/ru/web/javascript/reference/operators/оператор_запятая/index.html b/files/ru/web/javascript/reference/operators/comma_operator/index.html index 471c81ba88..471c81ba88 100644 --- a/files/ru/web/javascript/reference/operators/оператор_запятая/index.html +++ b/files/ru/web/javascript/reference/operators/comma_operator/index.html diff --git a/files/ru/web/javascript/reference/operators/условный_оператор/index.html b/files/ru/web/javascript/reference/operators/conditional_operator/index.html index 344d7f21d9..344d7f21d9 100644 --- a/files/ru/web/javascript/reference/operators/условный_оператор/index.html +++ b/files/ru/web/javascript/reference/operators/conditional_operator/index.html diff --git a/files/ru/web/javascript/reference/operators/группировка/index.html b/files/ru/web/javascript/reference/operators/grouping/index.html index ecc180ab21..ecc180ab21 100644 --- a/files/ru/web/javascript/reference/operators/группировка/index.html +++ b/files/ru/web/javascript/reference/operators/grouping/index.html diff --git a/files/ru/web/javascript/reference/operators/конвейерный_оператор/index.html b/files/ru/web/javascript/reference/operators/pipeline_operator/index.html index fa43c6d346..fa43c6d346 100644 --- a/files/ru/web/javascript/reference/operators/конвейерный_оператор/index.html +++ b/files/ru/web/javascript/reference/operators/pipeline_operator/index.html diff --git a/files/ru/web/javascript/reference/operators/логические_операторы/index.html b/files/ru/web/javascript/reference/operators/логические_операторы/index.html deleted file mode 100644 index b840f1e584..0000000000 --- a/files/ru/web/javascript/reference/operators/логические_операторы/index.html +++ /dev/null @@ -1,300 +0,0 @@ ---- -title: Логические операторы -slug: Web/JavaScript/Reference/Operators/Логические_операторы -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<div>Логические операторы используются, как правило, с примитивами {{jsxref("Boolean")}} (логического) типа. В этом случае результатом работы оператора является значение типа Boolean. Между тем операторы && и || возвращают, вообще говоря, значение одного из операнда, потому при использовании в качестве аргументов этих операторов величин, тип которых отличен от Boolean, тип возвращаемого значения может быть отличным от Boolean.</div> - -<div></div> - -<h2 id="Описание">Описание</h2> - -<p>В таблице приведены описания логических операторов:</p> - -<table class="fullwidth-table"> - <tbody> - <tr> - <th>Оператор</th> - <th>Использование</th> - <th>Описание</th> - </tr> - <tr> - <td>Логическое И (&&)</td> - <td><code><em>expr1</em> && <em>expr2</em></code></td> - <td>Возвращает значение <code>expr1</code>, если оно может быть преобразовано в false; иначе возвращает значение <code>expr2</code>. Таким образом, при использовании с величинами типа Boolean оператор && вернет true, если оба операнда могут быть преобразованы в true; иначе оператор && вернет false. </td> - </tr> - <tr> - <td>Логическое ИЛИ (<code>||</code>)</td> - <td><code><em>expr1</em> || <em>expr2</em></code></td> - <td> - <p>Возвращает значение <code>expr1</code>, если оно может быть преобразовано в true; иначе возвращает значение <code>expr2.</code> Таким образом, при использовании с величинами типа Boolean оператор <code>||</code> вернет <code>true</code> если хоть один из них равен <code>true</code>; в других случаях вернет <code>false</code>.</p> - </td> - </tr> - <tr> - <td>Логическое НЕ (<code>!</code>)</td> - <td><code>!<em>expr</em></code></td> - <td>Возвращает false если значение <code>expr </code>можно<font face="Consolas, Liberation Mono, Courier, monospace"> </font>привести к <code>true</code>; в противоположном случае возвращает <code>true</code>.</td> - </tr> - </tbody> -</table> - -<p>Примеры значений выражений, которые могут быть преобразованы в <code>false</code>:</p> - -<ul> - <li><code>null</code>;</li> - <li><code>NaN;</code></li> - <li><code>0</code>;</li> - <li>пустая строка (<code>""</code>); </li> - <li><code>undefined</code>.</li> -</ul> - -<p>Хоть операторы <code>&&</code> и <code>||</code> могут использовать операнды с не булевыми значениями, но они всёравно рассматриваются, как булевы операторы, т.к. их возвращаемые ими значения всегда могут быть сконвертированы в булевы значения.</p> - -<h3 id="Короткая_схема_вычислений">Короткая схема вычислений</h3> - -<p>Так как логические операторы выполняются слева направо, они проверяются на "короткие вычисления" по следующим правилам:</p> - -<ul> - <li><code>false && (<em>anything)</em></code> короткое вычисление дающее false.</li> - <li><code>true || (<em>anything)</em></code> короткое замыкание дающее true.</li> -</ul> - -<p>Часть выражения <code>(<em>anything)</em></code> не вычисляется. Если в ней есть вызов функции, то эта функция не будет вызвана.</p> - -<p>Например, следующие две функции делают одно и тоже:</p> - -<pre class="brush: js">function shortCircuitEvaluation() { - doSomething() || doSomethingElse() -} - -function equivalentEvaluation() { - var flag = doSomething(); - if (!flag) { - doSomethingElse(); - } -} -</pre> - -<p>Однако, следующие выражения дают разный результат в связи с <a href="/ru/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">приоритетом операторов</a>.</p> - -<pre class="brush: js">false && true || true // вернёт true -false && (true || true) // вернёт false</pre> - -<h3 id="Логическое_И"><a name="Logical_AND">Логическое И (<code>&&</code>)</a></h3> - -<p>Следующий код показывает пример оператора <code>&&</code> (логическое И).</p> - -<pre class="brush: js">a1 = true && true // t && t вернёт true -a2 = true && false // t && f вернёт false -a3 = false && true // f && t вернёт false -a4 = false && (3 == 4) // f && f вернёт false -a5 = "Cat" && "Dog" // t && t вернёт "Dog" -a6 = false && "Cat" // f && t вернёт false -a7 = "Cat" && false // t && f вернёт false -</pre> - -<h3 id="Логическое_ИЛИ"><a name="Logical_OR">Логическое ИЛИ (<code>||</code>)</a></h3> - -<p>Это код представляет собой пример оператора <code>||</code> (логическое ИЛИ).</p> - -<pre class="brush: js">o1 = true || true // t || t вернёт true -o2 = false || true // f || t вернёт true -o3 = true || false // t || f вернёт true -o4 = false || (3 == 4) // f || f вернёт false -o5 = "Cat" || "Dog" // t || t вернёт "Cat" -o6 = false || "Cat" // f || t вернёт "Cat" -o7 = "Cat" || false // t || f вернёт "Cat" -</pre> - -<h3 id="Логическое_НЕ_!"><a name="Logical_NOT">Логическое НЕ (<code>!</code>)</a></h3> - -<p>Следующий код является примером оператора <code>!</code> (логическое НЕ).</p> - -<pre class="brush: js">n1 = !true // !t вернёт false -n2 = !false // !f вернёт true -n3 = !"Cat" // !t вернёт false -</pre> - -<h3 id="Правила_преобразования">Правила преобразования</h3> - -<h4 id="Конвертирование_И_в_ИЛИ">Конвертирование И в ИЛИ</h4> - -<p>следующая операция использует булев тип:</p> - -<pre class="brush: js">bCondition1 && bCondition2</pre> - -<p>это всегда равно:</p> - -<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre> - -<h4 id="Конвертирование_ИЛИ_в_И">Конвертирование ИЛИ в И</h4> - -<p>эта операция использует булев тип:</p> - -<pre class="brush: js">bCondition1 || bCondition2</pre> - -<p>что эквивалентно:</p> - -<pre class="brush: js">!(!bCondition1 && !bCondition2)</pre> - -<h4 id="Конвертирование_многих_НЕ">Конвертирование многих НЕ</h4> - -<p>следующая операция использует булев тип:</p> - -<pre class="brush: js">!!bCondition</pre> - -<p>что равно:</p> - -<pre class="brush: js">bCondition</pre> - -<h3 id="Удаление_вложенных_скобок">Удаление вложенных скобок</h3> - -<p>Так как логические выражения выполняются слева направо, становится возможным удалить круглые скобки из комплексного выражения, следуя следующим правилам.</p> - -<h4 id="Удаление_вложенных_И">Удаление вложенных И</h4> - -<p>Это составное выражение использует булев тип:</p> - -<pre class="brush: js">bCondition1 || (bCondition2 && bCondition3)</pre> - -<p>что будет равным:</p> - -<pre class="brush: js">bCondition1 || bCondition2 && bCondition3</pre> - -<h4 id="Удаление_вложенного_ИЛИ">Удаление вложенного ИЛИ</h4> - -<p>Следующее составное выражение использует булев тип:</p> - -<pre class="brush: js">bCondition1 && (bCondition2 || bCondition3)</pre> - -<p>всегда равно:</p> - -<pre class="brush: js">!(!bCondition1 || !bCondition2 && !bCondition3)</pre> - -<h2 id="Спецификации">Спецификации</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарий</th> - </tr> - <tr> - <td>{{SpecName('ES5.1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Изначальное определение</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.11')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Определено в нескольких секциях спецификации: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Логический оператор НЕ</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Бинарные логические операторы</a></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Определено в нескольких секциях спецификации: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Логический оператор НЕ</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Бинарные логические операторы</a></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Определено в нескольких секциях спецификации: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Логический оператор НЕ</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Бинарные логические операторы</a></td> - </tr> - </tbody> -</table> - -<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td><a href="#Logical_AND">Логическое И (<code>&&</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Logical_OR">Логическое ИЛИ (<code>||</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Logical_NOT">Логическое НЕ (<code>!</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td><a href="#Logical_AND">Логическое И (<code>&&</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Logical_OR">Логическое ИЛИ (<code>||</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Logical_NOT">Логическое НЕ (<code>!</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Смотрите_также">Смотрите также</h2> - -<ul> - <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Битовые операторы</a></li> - <li><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></li> -</ul> diff --git a/files/ru/web/javascript/reference/operators/операторы_сравнения/index.html b/files/ru/web/javascript/reference/operators/операторы_сравнения/index.html deleted file mode 100644 index ee0565dc94..0000000000 --- a/files/ru/web/javascript/reference/operators/операторы_сравнения/index.html +++ /dev/null @@ -1,286 +0,0 @@ ---- -title: Операторы сравнения -slug: Web/JavaScript/Reference/Operators/Операторы_сравнения -tags: - - JavaScript - - Операторы -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>В JavaScript имеются как строгие сравнения, так и сравнения с преобразованием типа операндов. Строгие сравнения (к примеру, ===) истинны только в том случае, если типы сравниваемых значений являются одинаковыми (к примеру: string-string, number-number). Однако, чаще используются сравнения с преобразованием типов (к примеру, ==). Такой тип сравнения, перед тем как непосредственно выполнить сравнение, приводит операнды к одному типу. В случае же абстрактного реляционного сравнения, операнды сперва преобразуются в примитивы, затем приводятся к одному типу, и только после этого сравниваются.</p> - -<p>Строки сравниваются на основе стандартного лексикографического упорядочения, используя значения Unicode.</p> - -<p>Особенности сравнений:</p> - -<ul> - <li>Две строки строго равны только в том случае, если они имеют одинаковую длину, и те же символы в одинаковой последовательности и соответствующих позициях.</li> - <li>Два числа строго равны в том случае, если они численно равны. <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="NaN">NaN</a> не равно ничему, в том числе и NaN. Нули с положительным и отрицательным знаком равны.</li> - <li>Два логических значения (boolean) равны только в том случае, если они оба <code>истинны (true)</code> или <code>ложны (false</code>).</li> - <li>Два различных объекта никогда не равны как в строгих, так и в абстрактных сравнениях.</li> - <li>Сравнение объекта истинно лишь в том случае, если оба операнда ссылаются на один и тот же объект в памяти.</li> - <li>Виды <code>null</code> и <code>undefined</code> равны себе как в строгом сравнении, так и в абстрактном.</li> -</ul> - -<p><strong>При использовании сравнения с преобразованием типов, следует быть крайне осторожным, так как это может привести к непредвиденным проблемам, связанным с особенностями конвертации различных типов (см. параграф "Использование операторов равенства").</strong></p> - -<h2 id="Операторы_равенства">Операторы равенства</h2> - -<h3 id="Равно"><a name="Equality">Равно (==)</a></h3> - -<p><em>Оператор равно</em> сначала приводит операнды к одному типу, и затем применяет строгое сравнение. Если оба операнда являются объектами, то JavaScript сравнивает внутренние ссылки, которые равны в том случае, если они ссылаются на один и тот же объект в памяти.</p> - -<h4 id="Синтаксис">Синтаксис</h4> - -<pre class="syntaxbox notranslate">x == y -</pre> - -<h4 id="Примеры">Примеры</h4> - -<pre class="brush: js notranslate"> 1 == 1 // истина -"1" == 1 // истина - 1 == '1' // истина - 3 == 5 // ложь - 0 == false // истина -"foo" == "bar" // ложь -</pre> - -<h3 id="Не_равно_!"><a name="Inequality">Не равно (!=)</a></h3> - -<p><em>Оператор не равно</em> возвращает <code>true</code> в том случае, если операнды не равны.<em>Он </em>аналогичен оператору равенства, перед сравнением приводит операнды к одному типу. В случае если оба операнда являются объектами, JavaScript сравнивает внутренние ссылки, которые не равны в том случае, если относятся к разным объектам в памяти.</p> - -<h4 id="Синтаксис_2">Синтаксис</h4> - -<pre class="syntaxbox notranslate">x != y</pre> - -<h4 id="Примеры_2">Примеры</h4> - -<pre class="brush: js notranslate">1 != 2 // истина -1 != "1" // ложь -1 != '1' // ложь -1 != true // ложь -0 != false // ложь -"foo" != "bar" // истина -</pre> - -<h3 id="Строго_равно"><a name="Identity">Строго равно (===)</a></h3> - -<p>Оператор возвращает истину в том случае, если операнды строго равны (см. выше). В отличие от <em>оператора равно</em>, данный оператор <strong>не приводит операнды к одному типу.</strong></p> - -<h4 id="Синтаксис_3">Синтаксис</h4> - -<pre class="syntaxbox notranslate">x === y</pre> - -<h4 id="Примеры_3">Примеры</h4> - -<pre class="brush: js notranslate">3 === 3 // истина -3 === '3' // ложь -'foo' === 'foo' // истина -</pre> - -<h3 id="Строго_не_равно_!"><a name="Nonidentity">Строго не равно (!==)</a></h3> - -<p><em>Оператор строго не равно </em>возвращает истину в том случае, <strong>если операнды не равны, или их типы отличаются друг от друга.</strong></p> - -<h4 id="Синтаксис_4">Синтаксис</h4> - -<pre class="syntaxbox notranslate">x !== y</pre> - -<h4 id="Примеры_4">Примеры</h4> - -<pre class="brush: js notranslate">3 !== '3' // истина -4 !== 3 // истина -</pre> - -<h2 id="Операторы_сравнения">Операторы сравнения</h2> - -<h3 id="Больше_>"><a name="Greater_than_operator">Больше (>)</a></h3> - -<p><em>Оператор больше</em> возвращает истину в том случае, если значение левого операнда больше, чем правого.</p> - -<h4 id="Синтаксис_5">Синтаксис</h4> - -<pre class="syntaxbox notranslate">x > y</pre> - -<h4 id="Примеры_5">Примеры</h4> - -<pre class="brush: js notranslate">4 > 3 // истина -1 > 5 // ложь -</pre> - -<h3 id="Больше_или_равно_>"><a name="Greater_than_or_equal_operator">Больше или равно (>=)</a></h3> - -<p><em>Оператор больше или равно, </em>возвращает истину в том случае, если значение операнда слева больше или равно значению операнда справа.</p> - -<h4 id="Синтаксис_6">Синтаксис</h4> - -<pre class="syntaxbox notranslate"> x >= y</pre> - -<h4 id="Примеры_6">Примеры</h4> - -<pre class="brush: js notranslate">4 >= 3 // истина -3 >= 3 // истина -</pre> - -<h3 id="Меньше<"><a name="Less_than_operator">Меньше(<)</a></h3> - -<p><em>Оператор меньше, </em>возвращает истину в том случае, если значение операнда слева меньше, чем значение операнда справа.</p> - -<h4 id="Синтаксис_7">Синтаксис</h4> - -<pre class="syntaxbox notranslate"> x < y</pre> - -<h4 id="Примеры_7">Примеры</h4> - -<pre class="brush: js notranslate">3 < 4 // истина -5 < 2 // ложь -</pre> - -<h3 id="Меньше_или_равно_<"><a id="Less_than_or_equal_operator" name="Less_than_or_equal_operator">Меньше или равно (<=)</a></h3> - -<p><em>Оператор меньше или равно, </em>возвращает истину в том случае, если значение операнда слева меньше, или равно значению операнда справа.</p> - -<h4 id="Синтаксис_8">Синтаксис</h4> - -<pre class="syntaxbox notranslate"> x <= y</pre> - -<h4 id="Примеры_8">Примеры</h4> - -<pre class="brush: js notranslate">3 <= 4 // истина -3 <= 3 // истина -</pre> - -<h2 id="Использование_операторов_равенства">Использование операторов равенства</h2> - -<p>Стандартные операции равенства с преобразованием типов (<code>==</code> и <code>!=</code>) используют <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">Абстрактный Алгоритм Эквивалентного Сравнения</a> для сравнения двух операндов. Если у операндов различные типы, то JavaScript пытается привести их к одному типу, перед тем как сравнивать их. К примеру, в выражении <code>5 == '5'</code>, строка справа конвертируется в число, и только потом сравнивается.</p> - -<p><em>Операторы строгого равентсва</em> (<code>===</code> и <code>!==</code>) используют Строгий Алгоритм Эквивалентного Сравнения, и предназначены для сравнения операндов одного типа. <strong>Если операнды имеют разные типы, то результат операции сравнения всегда будет ложью.</strong> К примеру, выражение <code>5 !== '5'</code> будет истинным.</p> - -<p>Используйте <em>операторы строгого равенства</em> в тех случаях, когда необходимо проверять не только значения операндов, но так же и их типы. Во противном случае, используйте операторы стандартного равенства, которые позволяют сравнить два операнда вне зависимости от их типов.</p> - -<p>Когда происходит преобразование типов (т.е в случаях использования нестрогого сравнения), JavaScript преобразует типы String, Number, Boolean и Object, следующим образом:</p> - -<ul> - <li>При сравнении числа <code>(Number)</code> и строки <code>(String)</code>, JavaScript пытается преобразовать числовой литерал строки в число. Затем полученное число округляется до ближайшего возможного значения типа <code>Number</code>.</li> - <li>Если один из операндов является логическим <code>(Boolean)</code>, то он преобразуется в значение типа <code>(Number)</code>. <strong>Если значение логического операнда равняется истине <code>(true)</code>, то значение этого операнда преобразуется в 1. Иначе - в 0 <code>(ложь / false)</code>.</strong></li> - <li>Если объект сравнивается с числом или строкой, JavaScript пытается получить значение по умолчанию для данного объекта. Полученное значение преобразуется в примитив, посредством методов <strong><code>valueOf()</code></strong> и <strong><code>toString()</code></strong>. Если преобразовать объект не удается, генерируется ошибка времени выполнения.</li> - <li>Обратите внимание на то, что объект преобразуется в примитив, если, и только если, второй операнд является примитивом. В ином случае, операнды сравниваются как объекты, соответственно, операция сравнения вернет истину в том случае, если внутренние ссылки обоих объектов ссылаются на один и тот же объект в памяти.</li> -</ul> - -<div class="note"><strong>Внимание:</strong> Объекты String имеют тип Object, а не String. Такие объекты используются редко, так что следующий код может вас сильно удивить.</div> - -<pre class="brush:js notranslate">// Истина, так как оба операнда имеют тип String -'foo' === 'foo' - -var a = new String('foo'); -var b = new String('foo'); - -// Ложь, так как операнды являются объектами, внутренние ссылки которых, ссылаются на разные объекты в памяти -a == b - -// Ложь, так как операнды являются объектами, внутренние ссылки которых, ссылаются на разные объекты в памяти -a === b - -// Истина, так как объект a (String) будет преобразован в строку 'foo', перед сопоставлением -a == 'foo' </pre> - -<h2 id="Спецификации">Спецификации</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарий</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Появление в спецификации. Выполняется в JavaScript 1.0</td> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Добавлены операторы <code>===</code> и <code>!==</code>. Выполняется в JavaScript 1.3</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.8')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Определено в нескольких секциях спецификации: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Относительные операторы</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Операторы равенства</a></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-relational-operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Определено в нескольких секциях спецификации: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Относительные операторы</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Операторы равенства</a></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-relational-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Определено в нескольких секциях спецификации: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Относительные операторы</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Операторы равенства</a></td> - </tr> - </tbody> -</table> - -<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th></th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td> - <p>{{CompatVersionUnknown}}</p> - </td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table" style="height: 73px; width: 1078px;"> - <tbody> - <tr> - <th></th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Смотрите_также"><br> - Смотрите также</h2> - -<ul> - <li>{{jsxref("Object.is()")}}</li> - <li><a href="/ru/docs/Web/JavaScript/Equality_comparisons_and_sameness">Операторы сравнения и одинаковость</a></li> -</ul> diff --git a/files/ru/web/javascript/reference/statements/блок/index.html b/files/ru/web/javascript/reference/statements/block/index.html index 4122fea24d..4122fea24d 100644 --- a/files/ru/web/javascript/reference/statements/блок/index.html +++ b/files/ru/web/javascript/reference/statements/block/index.html diff --git a/files/ru/web/javascript/reference/statements/default/index.html b/files/ru/web/javascript/reference/statements/default/index.html deleted file mode 100644 index c1f3f6b923..0000000000 --- a/files/ru/web/javascript/reference/statements/default/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: default -slug: Web/JavaScript/Reference/Statements/default -tags: - - JavaScript - - Keyword - - Switch - - export -translation_of: Web/JavaScript/Reference/Statements/switch -translation_of_original: Web/JavaScript/Reference/Statements/default ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>В JavaScript ключевое слово <strong>default </strong>используется в двух случаях: внутри конструкции {{jsxref("Statements/switch", "switch")}} или с конструкцией {{jsxref("Statements/export", "export")}}.</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<p>В конструкции {{jsxref("Statements/switch", "switch")}}:</p> - -<pre class="syntaxbox">switch (expression) { - case value1: - // Выражение выполнится, когда значение expression соответствует value1 - [break;] - default: - // Выражение выполнится, когда ни одно из значений не будет соответствовать значению expression - [break;] -}</pre> - -<p>С конструкцией {{jsxref("Statements/export", "export")}}:</p> - -<pre class="syntaxbox">export default <em>nameN</em> </pre> - -<h2 id="Описание">Описание</h2> - -<p>Для получения дополнительной информации смотрите:</p> - -<ul> - <li>{{jsxref("Statements/switch", "switch")}}</li> - <li>{{jsxref("Statements/export", "export")}}</li> -</ul> - -<h2 id="Примеры">Примеры</h2> - -<h3 id="Использование_default_в_switch">Использование <code>default</code> в <code>switch</code></h3> - -<p>В следующем примере, если <code>expr</code> имеет значение "Апельсины" или "Яблоки", то программа сопоставит это значение с "Апельсины" или с "Яблоки", а затем выполнит соответствующее выражение. В других случаях поможет ключевое слово <strong>default,</strong> выполня связанное выражение.</p> - -<pre class="brush: js">switch (expr) { - case 'Апельсины': - console.log('Апельсины стоят $0.59 за фунт.'); - break; - case 'Яблоки': - console.log('Яблоки стоят $0.32 за фунт.'); - break; - default: - console.log(`Извините, у нас закончились ${expr}.`); -}</pre> - -<h3 id="Использование_default_с_export">Использование <code>default</code> с<font face="Open Sans, arial, sans-serif"> </font><code>export</code></h3> - -<p>При необходимости экспорта единственного значения или резервирования (fallback) значения для модуля, можно воспользоваться<strong> </strong>экспортом по-умолчанию: </p> - -<pre class="brush: js">// модуль "my-module.js" -let cube = function cube(x) { - return x * x * x; -}; -export default cube;</pre> - -<p>Тогда, в другом файле JavaScript, становится возможным просто импортировать экспортируемое по-умолчанию значение:</p> - -<pre class="brush: js">// модуль "my-module.js" -import myFunction from 'my-module'; -console.log(myFunction(3)); // 27 -</pre> - -<h2 id="Спецификация">Спецификация</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарий</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> - -<p>{{Compat("javascript.statements.default")}}</p> - -<h2 id="Смотрите_также">Смотрите также</h2> - -<ul> - <li>{{jsxref("Statements/export", "export")}}</li> - <li>{{jsxref("Statements/switch", "switch")}}</li> -</ul> diff --git a/files/ru/web/javascript/reference/template_strings/index.html b/files/ru/web/javascript/reference/template_literals/index.html index d8b4b9a442..d8b4b9a442 100644 --- a/files/ru/web/javascript/reference/template_strings/index.html +++ b/files/ru/web/javascript/reference/template_literals/index.html diff --git a/files/ru/web/javascript/javascript_шеллы/index.html b/files/ru/web/javascript/shells/index.html index b6e3421b96..b6e3421b96 100644 --- a/files/ru/web/javascript/javascript_шеллы/index.html +++ b/files/ru/web/javascript/shells/index.html diff --git a/files/ru/web/manifest/serviceworker/index.html b/files/ru/web/manifest/serviceworker/index.html deleted file mode 100644 index 11681a7060..0000000000 --- a/files/ru/web/manifest/serviceworker/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: serviceworker -slug: Web/Manifest/serviceworker -tags: - - Manifest - - ServiceWorker - - Web -translation_of: Web/Manifest/serviceworker ---- -<div>{{QuickLinksWithSubpages("/ru/docs/Web/Manifest")}}</div> - -<div>{{obsolete_header}}</div> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Type</th> - <td><code>Object</code></td> - </tr> - <tr> - <th scope="row">Mandatory</th> - <td>No</td> - </tr> - <tr> - <th scope="row">Example</th> - <td> - <pre class="brush: json no-line-numbers"> -"serviceworker": { - "src": "./serviceworker.js" -}</pre> - </td> - </tr> - </tbody> -</table> - -<p><dfn><code>serviceworker</code></dfn> описывает {{domxref('Service_Worker_API', 'рабочий сервис')}}, который разработчик намеревается установить для управления PWA.</p> - -<h2 id="Examples">Examples</h2> - -<pre class="brush: json">"serviceworker": { - "src": "./serviceworker.js", - "scope": "/app", - "type": "", - "update_via_cache": "none" -} -</pre> - -<h2 id="Значения">Значения</h2> - -<p>Сервисный работник может содержать следующие значения (требуется только src):</p> - -<table class="fullwidth-table standard-table"> - <thead> - <tr> - <th scope="col">Параметр</th> - <th scope="col">Описание</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>src</code></td> - <td> - <p>URL-адрес для загрузки сценария рабочего сервиса. Это единственный обязательный параметр для <code>serviceworker</code>.</p> - </td> - </tr> - <tr> - <td><code>scope</code></td> - <td> - <p>Строка, представляющая URL, который определяет область регистрации рабочего сервиса; то есть, какой диапазон URL-адресов может контролировать рабочий сервис. Обычно это относительный URL-адрес, относительно базового URL-адреса приложения. По умолчанию в качестве области действия для регистрации рабочего сервиса задан каталог, в котором находится сценарий рабочий сервис.</p> - </td> - </tr> - <tr> - <td><code>type</code></td> - <td>?</td> - </tr> - <tr> - <td><code>update_via_cache</code></td> - <td> - <p>Нужно ли обходить кэш пользовательского агента при получении рабочего сервиса.</p> - </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div class="hidden"> -<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> -</div> - -<p>{{Compat("html.manifest.serviceworker")}}</p> diff --git a/files/ru/web/mathml/атрибут/index.html b/files/ru/web/mathml/attribute/index.html index 1c99572a49..1c99572a49 100644 --- a/files/ru/web/mathml/атрибут/index.html +++ b/files/ru/web/mathml/attribute/index.html diff --git a/files/ru/web/mathml/примеры/deriving_the_quadratic_formula/index.html b/files/ru/web/mathml/examples/deriving_the_quadratic_formula/index.html index 16bfc22d61..16bfc22d61 100644 --- a/files/ru/web/mathml/примеры/deriving_the_quadratic_formula/index.html +++ b/files/ru/web/mathml/examples/deriving_the_quadratic_formula/index.html diff --git a/files/ru/web/mathml/примеры/index.html b/files/ru/web/mathml/examples/index.html index abc8097197..abc8097197 100644 --- a/files/ru/web/mathml/примеры/index.html +++ b/files/ru/web/mathml/examples/index.html diff --git a/files/ru/web/mathml/примеры/mathml_pythagorean_theorem/index.html b/files/ru/web/mathml/examples/mathml_pythagorean_theorem/index.html index 185702052e..185702052e 100644 --- a/files/ru/web/mathml/примеры/mathml_pythagorean_theorem/index.html +++ b/files/ru/web/mathml/examples/mathml_pythagorean_theorem/index.html diff --git a/files/ru/web/media/formats/webrtc_кодеки/index.html b/files/ru/web/media/formats/webrtc_codecs/index.html index 4643eb9ccd..4643eb9ccd 100644 --- a/files/ru/web/media/formats/webrtc_кодеки/index.html +++ b/files/ru/web/media/formats/webrtc_codecs/index.html diff --git a/files/ru/web/performance/производительность_анимации/index.html b/files/ru/web/performance/animation_performance_and_frame_rate/index.html index 8d8054dade..8d8054dade 100644 --- a/files/ru/web/performance/производительность_анимации/index.html +++ b/files/ru/web/performance/animation_performance_and_frame_rate/index.html diff --git a/files/ru/web/performance/основы/index.html b/files/ru/web/performance/fundamentals/index.html index fd97d25650..fd97d25650 100644 --- a/files/ru/web/performance/основы/index.html +++ b/files/ru/web/performance/fundamentals/index.html diff --git a/files/ru/web/progressive_web_apps/заметный/index.html b/files/ru/web/progressive_web_apps/заметный/index.html deleted file mode 100644 index 1ed152b1e8..0000000000 --- a/files/ru/web/progressive_web_apps/заметный/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Заметный -slug: Web/Progressive_web_apps/Заметный -tags: - - Веб-манифест - - Видимый - - Манифест - - Приложения - - Прогрессивные веб-приложения - - Современные веб-приложения -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Progressive_web_apps/Discoverable ---- -<div class="column-container summary"> -<div class="column-11">Как только вы опубликуете новое веб-приложение, вы захотите, чтобы мир узнал об этом. Поисковые системы, конечно, помогают, но, обычно, большее внимание уделяется тому, как Ваши приложения представлены на результатах поиска. Новый манифест W3C для веб-приложений может помочь с этим и предоставить дополнительные возможности.</div> - -<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12654/discoverable.svg" style="height: 43px; width: 34px;"></div> -</div> - -<p>Возможные перспективы для веб-приложения:</p> - -<ul> - <li>Лучшее представление сайта в поисковых системах.</li> - <li>Упрощение администрирования</li> - <li>Размещение мета-данных, поддерживаемых браузерами для получения дополнительных возможностей</li> -</ul> - -<h2 id="Основные_руководства">Основные руководства</h2> - -<p>None written as yet; contributions appreciated.</p> - -<h2 id="Технологии">Технологии</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Технология</th> - <th scope="col">Описание</th> - <th scope="col">Поддержка</th> - <th scope="col">Последняя спецификация</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <p><a href="/en-US/docs/Web/Manifest">Манифест веб-приложения</a></p> - </td> - <td>Устанавливает свойства приложения, такие как имя, иконка, окно загрузки и цвета темы для использования в каталогах приложений и т.д.</td> - <td>Экспериментальный, поддерживается в Chrome, ограниченная поддержка в Firefox (<a href="/en-US/docs/Web/Manifest#Browser_compatibility">больше деталей</a>)</td> - <td>{{SpecName('Manifest')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Инструменты">Инструменты</h2> - -<p>Добавьте ссылки на полезные библиотеки и инструменты.</p> - -<h2 id="Смотрите_также">Смотрите также</h2> - -<dl> - <dt><a href="http://ogp.me/">Open Graph (англ.)</a></dt> - <dd>Стандарт, описывающий формат размещения мета-данных в тегах <code><head></code>, используя мета-тэги в HTML. Поддерживается Facebook и другими.</dd> -</dl> diff --git a/files/ru/web/security/csp/index.html b/files/ru/web/security/csp/index.html deleted file mode 100644 index 5a3bfeae33..0000000000 --- a/files/ru/web/security/csp/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: CSP (Политика Защиты Контента) -slug: Web/Security/CSP -tags: - - CSP - - Landing -translation_of: Web/HTTP/CSP -translation_of_original: Web/Security/CSP ---- -<div>{{gecko_minversion_header("2.0")}}</div> - -<p><strong>Политика защиты контента</strong> (CSP) — это дополнительный уровень безопасности, который помогает обнаружить и смягчить некоторые виды атак, в том числе межсайтовый скриптинг (XSS) и инъекцию данных. Эти атаки используются для всего, от кражи данных до порчи сайтов и распространения вредоносного ПО.</p> - -<p>Хотя CSP выпустила первую в Firefox 4, с использованием <code>X-Content-Security-Policy</code> предварительно из-за наличия формальной спецификации для CSP. Firefox 23 содержит обновленную реализацию CSP, которая используется без префикса заголовка Content-Security-Policy и директив, как описано в W3C CSP 1.0 spec.</p> - -<h2 id="Разделы_CSP">Разделы CSP</h2> - -<dl> - <dt><a href="/en-US/docs/Security/CSP/Introducing_Content_Security_Policy">Introducing Content Security Policy</a></dt> - <dd>Обзор того, что такое CSP и как это может сделать ваш сайт более безопасным.</dd> - <dt><a href="/en-US/docs/Security/CSP/CSP_policy_directives">CSP policy directives</a></dt> - <dd>Ссылка на CSP директивы политик.</dd> - <dt><a href="/en-US/docs/Security/CSP/Using_Content_Security_Policy">Using Content Security Policy</a></dt> - <dd>Вы можете настроить поведение CSP при настройке наборов правил политик. Это позволяет ослабить или усилить меры безопасности для отдельных видов ресурсов, исходя из потребностей вашего сайта. Эта статья описывает, как настроить CSP, а также о том, как включить его для вашего сайта.</dd> - <dt><a href="/en-US/docs/Security/CSP/Using_CSP_violation_reports">Using CSP violation reports</a></dt> - <dd>Как использовать сообщения CSP о нарушениях, чтобы контролировать попытки атаковать ваш сайт и его пользователей.</dd> - <dt><a href="/en-US/docs/Security/CSP/Default_CSP_restrictions">Default CSP restrictions </a>{{obsolete_inline("15.0")}}</dt> - <dd>Подробности об ограничениях внедренных по умолчанию в CSP.</dd> -</dl> - -<h2 id="См._также">См. также</h2> - -<ul> - <li><a href="/en-US/docs/Security">Security</a></li> - <li><a href="/en-US/docs/HTTP_access_control">HTTP access control</a></li> - <li><a class="link-https" href="http://www.w3.org/TR/CSP/">CSP 1.0 specification</a></li> - <li><a class="link-https" href="http://w3c.github.io/webappsec/specs/content-security-policy/csp-specification.dev.html">CSP 2 specification</a></li> - <li><a href="/docs/Apps/CSP">CSP restrictions for Open Web Apps</a></li> -</ul> - -<div id="__if72ru4rkjahiuyi_once" style="display: none;"> </div> - -<div id="__hggasdgjhsagd_once" style="display: none;"> </div> diff --git a/files/ru/web/security/information_security_basics/index.html b/files/ru/web/security/information_security_basics/index.html deleted file mode 100644 index 0d36d99bad..0000000000 --- a/files/ru/web/security/information_security_basics/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Основы по информационной безопасности -slug: Web/Security/Information_Security_Basics -translation_of: Web/Security/Information_Security_Basics ---- -<p><span class="seoSummary">Базовое понимание информационной безопасности, поможет обезопасить ваше программное обеспечение и сайты от уязвимостей открывающим доступ к финансовым махинациям и прочим противоправным действиям. Из этих статей вы сможете узнать все что для этого необходимо.</span> Вооружившись этой информацией, вы поймете роль и важность безопасности начиная от цикла веб-разработки вплоть до размещения вашего контента. </p> - -<dl> - <dt><a href="/en-US/docs/Web/Security/Information_Security_Basics/Confidentiality,_Integrity,_and_Availability">Конфиденциальность, целостность и доступность</a></dt> - <dd>Статья описывает фундаментальные понятия по главным задачам безопасности</dd> - <dt><a href="/en-US/docs/Web/Security/Information_Security_Basics/Vulnerabilities">Уязвимости</a></dt> - <dd>Определяет основные категории уязвимостей и рассказывает о их существовании в программном обеспечении</dd> - <dt><a href="/en-US/docs/Web/Security/Information_Security_Basics/Threats">Угрозы</a></dt> - <dd>Вкратце знакомит с основными принципами угроз</dd> - <dt><a href="/en-US/docs/Web/Security/Information_Security_Basics/Security_Controls">Контроль безопасности</a> </dt> - <dd>Определяет основные категории контроля безопасности и рассказывает о их потенциальных слабостях</dd> - <dt><a href="/en-US/docs/Web/Security/Information_Security_Basics/TCP_IP_Security">Безопасность TCP/IP</a></dt> - <dd>Обзор TCP/IP модели, с упором на вопросы безопасности для SSL</dd> -</dl> - -<h2 id="Смотрите_так_же">Смотрите так же</h2> - -<ul> - <li><a href="/en-US/docs/Mozilla/Security">Браузерная безопасность</a></li> - <li><a href="/en-US/docs/Web/Security">Сетевая безопасность</a></li> - <li><a href="/en-US/docs/Web/Security/Securing_your_site">Безопасность вашего сайта</a></li> - <li><a href="/en-US/docs/Security/Firefox_Security_Basics_For_Developers">Основы безопасности в Firefox для Разработчиков</a></li> -</ul> - -<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}</p> diff --git a/files/ru/web/svg/attribute/onload/index.html b/files/ru/web/svg/attribute/onload/index.html deleted file mode 100644 index b6a5d49ea2..0000000000 --- a/files/ru/web/svg/attribute/onload/index.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: onload -slug: Web/SVG/Attribute/onload ---- -<p>Link not exist</p> diff --git a/files/ru/web/svg/элемент/a/index.html b/files/ru/web/svg/element/a/index.html index 97c2daf793..97c2daf793 100644 --- a/files/ru/web/svg/элемент/a/index.html +++ b/files/ru/web/svg/element/a/index.html diff --git a/files/ru/web/svg/элемент/animate/index.html b/files/ru/web/svg/element/animate/index.html index 90988b58f8..90988b58f8 100644 --- a/files/ru/web/svg/элемент/animate/index.html +++ b/files/ru/web/svg/element/animate/index.html diff --git a/files/ru/web/svg/элемент/animatemotion/index.html b/files/ru/web/svg/element/animatemotion/index.html index 3b1259dcb3..3b1259dcb3 100644 --- a/files/ru/web/svg/элемент/animatemotion/index.html +++ b/files/ru/web/svg/element/animatemotion/index.html diff --git a/files/ru/web/svg/элемент/circle/index.html b/files/ru/web/svg/element/circle/index.html index 3f1907b3bf..3f1907b3bf 100644 --- a/files/ru/web/svg/элемент/circle/index.html +++ b/files/ru/web/svg/element/circle/index.html diff --git a/files/ru/web/svg/элемент/defs/index.html b/files/ru/web/svg/element/defs/index.html index 0312b05e34..0312b05e34 100644 --- a/files/ru/web/svg/элемент/defs/index.html +++ b/files/ru/web/svg/element/defs/index.html diff --git a/files/ru/web/svg/элемент/ellipse/index.html b/files/ru/web/svg/element/ellipse/index.html index f04083c1e1..f04083c1e1 100644 --- a/files/ru/web/svg/элемент/ellipse/index.html +++ b/files/ru/web/svg/element/ellipse/index.html diff --git a/files/ru/web/svg/элемент/feblend/index.html b/files/ru/web/svg/element/feblend/index.html index acd3547dcd..acd3547dcd 100644 --- a/files/ru/web/svg/элемент/feblend/index.html +++ b/files/ru/web/svg/element/feblend/index.html diff --git a/files/ru/web/svg/элемент/foreignobject/index.html b/files/ru/web/svg/element/foreignobject/index.html index 64e32d019f..64e32d019f 100644 --- a/files/ru/web/svg/элемент/foreignobject/index.html +++ b/files/ru/web/svg/element/foreignobject/index.html diff --git a/files/ru/web/svg/элемент/g/index.html b/files/ru/web/svg/element/g/index.html index c425f3c5b8..c425f3c5b8 100644 --- a/files/ru/web/svg/элемент/g/index.html +++ b/files/ru/web/svg/element/g/index.html diff --git a/files/ru/web/svg/элемент/image/index.html b/files/ru/web/svg/element/image/index.html index e417a4ac65..e417a4ac65 100644 --- a/files/ru/web/svg/элемент/image/index.html +++ b/files/ru/web/svg/element/image/index.html diff --git a/files/ru/web/svg/элемент/index.html b/files/ru/web/svg/element/index.html index b65942e344..b65942e344 100644 --- a/files/ru/web/svg/элемент/index.html +++ b/files/ru/web/svg/element/index.html diff --git a/files/ru/web/svg/элемент/line/index.html b/files/ru/web/svg/element/line/index.html index b7f75c6a96..b7f75c6a96 100644 --- a/files/ru/web/svg/элемент/line/index.html +++ b/files/ru/web/svg/element/line/index.html diff --git a/files/ru/web/svg/элемент/lineargradient/index.html b/files/ru/web/svg/element/lineargradient/index.html index 37ab6a334d..37ab6a334d 100644 --- a/files/ru/web/svg/элемент/lineargradient/index.html +++ b/files/ru/web/svg/element/lineargradient/index.html diff --git a/files/ru/web/svg/элемент/path/index.html b/files/ru/web/svg/element/path/index.html index 7dc97ca989..7dc97ca989 100644 --- a/files/ru/web/svg/элемент/path/index.html +++ b/files/ru/web/svg/element/path/index.html diff --git a/files/ru/web/svg/элемент/pattern/index.html b/files/ru/web/svg/element/pattern/index.html index 2d572737d3..2d572737d3 100644 --- a/files/ru/web/svg/элемент/pattern/index.html +++ b/files/ru/web/svg/element/pattern/index.html diff --git a/files/ru/web/svg/элемент/polygon/index.html b/files/ru/web/svg/element/polygon/index.html index b1baf626a3..b1baf626a3 100644 --- a/files/ru/web/svg/элемент/polygon/index.html +++ b/files/ru/web/svg/element/polygon/index.html diff --git a/files/ru/web/svg/элемент/radialgradient/index.html b/files/ru/web/svg/element/radialgradient/index.html index 04906d4fd5..04906d4fd5 100644 --- a/files/ru/web/svg/элемент/radialgradient/index.html +++ b/files/ru/web/svg/element/radialgradient/index.html diff --git a/files/ru/web/svg/элемент/rect/index.html b/files/ru/web/svg/element/rect/index.html index 8e4b7c9af7..8e4b7c9af7 100644 --- a/files/ru/web/svg/элемент/rect/index.html +++ b/files/ru/web/svg/element/rect/index.html diff --git a/files/ru/web/svg/элемент/svg/index.html b/files/ru/web/svg/element/svg/index.html index 12e37bee9d..12e37bee9d 100644 --- a/files/ru/web/svg/элемент/svg/index.html +++ b/files/ru/web/svg/element/svg/index.html diff --git a/files/ru/web/svg/элемент/text/index.html b/files/ru/web/svg/element/text/index.html index d63d1b47dd..d63d1b47dd 100644 --- a/files/ru/web/svg/элемент/text/index.html +++ b/files/ru/web/svg/element/text/index.html diff --git a/files/ru/web/svg/элемент/use/index.html b/files/ru/web/svg/element/use/index.html index 12d7007932..12d7007932 100644 --- a/files/ru/web/svg/элемент/use/index.html +++ b/files/ru/web/svg/element/use/index.html diff --git a/files/ru/web/svg/tutorial/основные_фигуры/index.html b/files/ru/web/svg/tutorial/basic_shapes/index.html index e95fd31f68..e95fd31f68 100644 --- a/files/ru/web/svg/tutorial/основные_фигуры/index.html +++ b/files/ru/web/svg/tutorial/basic_shapes/index.html diff --git a/files/ru/web/svg/tutorial/базовые_преобразования/index.html b/files/ru/web/svg/tutorial/basic_transformations/index.html index 6aa2b20b16..6aa2b20b16 100644 --- a/files/ru/web/svg/tutorial/базовые_преобразования/index.html +++ b/files/ru/web/svg/tutorial/basic_transformations/index.html diff --git a/files/ru/web/svg/tutorial/введение/index.html b/files/ru/web/svg/tutorial/introduction/index.html index 0ecb1c5f1c..0ecb1c5f1c 100644 --- a/files/ru/web/svg/tutorial/введение/index.html +++ b/files/ru/web/svg/tutorial/introduction/index.html diff --git a/files/ru/web/svg/tutorial/позиции/index.html b/files/ru/web/svg/tutorial/positions/index.html index 7a660c2d0f..7a660c2d0f 100644 --- a/files/ru/web/svg/tutorial/позиции/index.html +++ b/files/ru/web/svg/tutorial/positions/index.html diff --git a/files/ru/web/guide/css/getting_started/svg_и_css/index.html b/files/ru/web/svg/tutorial/svg_and_css/index.html index a69c4281af..a69c4281af 100644 --- a/files/ru/web/guide/css/getting_started/svg_и_css/index.html +++ b/files/ru/web/svg/tutorial/svg_and_css/index.html diff --git a/files/ru/web/web_components/использование_пользовательских_элементов/index.html b/files/ru/web/web_components/using_custom_elements/index.html index bcb5b5d733..bcb5b5d733 100644 --- a/files/ru/web/web_components/использование_пользовательских_элементов/index.html +++ b/files/ru/web/web_components/using_custom_elements/index.html diff --git a/files/ru/web/webapi/index.html b/files/ru/web/webapi/index.html deleted file mode 100644 index 9ffb624bc7..0000000000 --- a/files/ru/web/webapi/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: WebAPI -slug: Web/WebAPI -tags: - - API -translation_of: Web/API -translation_of_original: WebAPI ---- -<p><strong>WebAPI</strong> is a term used to refer to a suite of device compatibility and access APIs that allow Web apps and content to access device hardware (such as battery status or the device vibration hardware), as well as access to data stored on the device (such as the calendar or contacts list). By adding these APIs, we hope to expand what the Web can do today to also include what only proprietary platforms were able to do in the past.</p> - -<div class="note"> -<p><strong>Note:</strong> For a brief explanation of each badge, please see the <a href="/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps" title="Web/Apps/Packaged_apps#Types_of_packaged_apps">packaged apps</a> documentation.</p> -</div> - -<p> </p> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="Communication_APIs" name="Communication_APIs">Communication APIs</h2> - -<dl> - <dt><a href="/en-US/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">Network Information API</a></dt> - <dd>Provides basic information about the current network connection, such as connection speed.</dd> - <dt><a href="/en-US/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth">Bluetooth</a> {{NonStandardBadge}}</dt> - <dd>The WebBluetooth API provides low-level access to the device's Bluetooth hardware.</dd> - <dt><a href="/en-US/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">Mobile Connection API</a> {{NonStandardBadge}}</dt> - <dd>Exposes information about the device's cellular connectivity, such as signal strength, operator information, and so forth.</dd> - <dt><a href="/en-US/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">Network Stats API</a> {{NonStandardBadge}}</dt> - <dd>Monitors data usage and exposes this data to privileged applications.</dd> - <dt><a href="/en-US/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">Telephony</a> {{NonStandardBadge}}</dt> - <dd>Lets apps place and answer phone calls and use the built-in telephony user interface.</dd> - <dt><a href="/en-US/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS </a>{{NonStandardBadge}}</dt> - <dd>Lets apps send and receive SMS text messages, as well as to access and manage the messages stored on the device.</dd> - <dt><a href="/en-US/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">WiFi Information API</a> {{NonStandardBadge}}</dt> - <dd>A privileged API which provides information about signal strength, the name of the current network, available WiFi networks, and so forth.</dd> -</dl> - -<h2 class="Documentation" id="Hardware_access_APIs" name="Hardware_access_APIs">Hardware access APIs</h2> - -<dl> - <dt><a href="/en-US/docs/WebAPI/Using_Light_Events">Ambient Light Sensor API</a></dt> - <dd>Provides access to the ambient light sensor, which lets your app detect the ambient light level in the vicinity of the device.</dd> - <dt><a href="/en-US/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">Battery Status API</a></dt> - <dd>Provides information about the battery's charge level and whether or not the device is currently plugged in and charging.</dd> - <dt><a href="/en-US/docs/Using_geolocation" title="Using_geolocation">Geolocation API</a></dt> - <dd>Provides information about the device's physical location.</dd> - <dt><a href="/en-US/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> - <dd>Lets apps lock access to the mouse and gain access to movement deltas rather than absolute coordinates; this is great for gaming.</dd> - <dt><a href="/en-US/docs/WebAPI/Proximity" title="WebAPI/Proximity">Proximity API</a></dt> - <dd>Lets you detect proximity of the device to a nearby object, such as the user's face.</dd> - <dt><a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">Device Orientation API</a></dt> - <dd>Provides notifications when the device's orientation changes.</dd> - <dt><a href="/en-US/docs/WebAPI/Managing_screen_orientation" title="WebAPI/Detecting_device_orientation">Screen Orientation API</a></dt> - <dd>Provides notifications when the screen's orientation changes. You can also use this API to let your app indicate what orientation it prefers.</dd> - <dt><a href="/en-US/docs/WebAPI/Vibration" title="WebAPI/Vibration">Vibration API</a></dt> - <dd>Lets apps control the device's vibration hardware for things such as haptic feedback in games. This is <strong>not</strong> intended for things such as notification vibrations. See the <a href="/en-US/docs/WebAPI/Alarm" title="WebAPI/Alarm">Alarm API</a> for that.</dd> - <dt><a href="/en-US/docs/WebAPI/Camera" title="WebAPI/Camera">Camera API</a> {{NonStandardBadge}}</dt> - <dd>Allows apps to take photographs and/or record video using the device's built-in camera.</dd> - <dt><a href="/en-US/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">Power Management API </a>{{NonStandardBadge}}</dt> - <dd>Lets apps turn on and off the screen, CPU, device power, and so forth. Also provides support for listening for and inspecting resource lock events.</dd> -</dl> - -<p><span class="alllinks"><a href="/en-US/docs/tag/WebAPI" title="tag/CSS">View All...</a></span></p> -</div> - -<div class="section"> -<h2 class="Documentation" id="Data_management_APIs" name="Data_management_APIs">Data management APIs</h2> - -<dl> - <dt><a href="/en-US/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">FileHandle API</a> {{NonStandardBadge}}</dt> - <dd>Provides support for writable files with locking support.</dd> - <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> - <dd>Client-side storage of structured data with support for high-performance searches.</dd> - <dt><a href="/en-US/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a> {{NonStandardBadge}}</dt> - <dd>Lets apps examine and change system-wide configuration options that are permanently stored on the device.</dd> -</dl> - -<h2 class="Documentation" id="Other_APIs" name="Other_APIs">Other APIs</h2> - -<dl> - <dt><a href="/en-US/docs/WebAPI/Alarm" title="WebAPI/Alarm">Alarm API</a></dt> - <dd>Lets apps schedule notifications. Also provides support for automatically launching an app at a specific time.</dd> - <dt><a href="/en-US/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">Simple Push API</a></dt> - <dd>Lets the platform send notification messages to specific applications.</dd> - <dt><a href="/en-US/docs/Web/API/Push_API">Push API</a></dt> - <dd>Gives web applications the ability to receive messages pushed to them from a server, whether or not the web app is in the foreground, or even currently loaded, on a user agent.</dd> - <dt><a href="/en-US/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Web Notifications</a></dt> - <dd>Lets applications send notifications displayed at the system level.</dd> - <dt><a href="/en-US/docs/Web/API/Apps" title="Apps">Apps API</a> {{NonStandardBadge}}</dt> - <dd>The Open WebApps API provides support for installing and managing Web apps. In addition, support is provided to let apps determine payment information.</dd> - <dt><a href="/en-US/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities">Web Activities</a> {{NonStandardBadge}}</dt> - <dd>Lets an app delegate an activity to another app; for example, an app might ask another app to select (or create) and return a photo. Typically the user is able to configure what apps are used for which activities.</dd> - <dt><a href="/en-US/docs/Apps/Publishing/In-app_payments" title="Apps/Publishing/In-app_payments">WebPayment API</a> {{NonStandardBadge}}</dt> - <dd>Lets Web content initiate payments and refunds for virtual goods.</dd> - <dt><a href="/en-US/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API"><strong>Browser API</strong></a> {{NonStandardBadge}}</dt> - <dd>Provides support for building a Web browser completely using Web technologies (in essence, a browser within a browser).</dd> -</dl> - -<dl> - <dt><a href="/en-US/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">Idle API</a></dt> - <dd>Lets apps receive notifications when the user is not actively using the device.</dd> - <dt><a href="/en-US/docs/WebAPI/Permissions" title="WebAPI/Permissions">Permissions API</a> {{NonStandardBadge}}</dt> - <dd>Manages app permissions in a centralized location. Used by the Settings app.</dd> - <dt><a href="/en-US/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">Time/Clock API</a> {{NonStandardBadge}}</dt> - <dd>Provides support for setting the current time. The time zone is set using the <a href="/en-US/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a>.</dd> -</dl> - -<h2 class="Community" id="Community" name="Community">WebAPI community</h2> - -<p>If you need help with these APIs, there are several ways you can talk to other developers making use of them.</p> - -<ul> - <li>Consult the WebAPI forum: {{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}</li> - <li>Visit the WebAPI IRC channel: <a href="irc://irc.mozilla.org/webapi" title="irc://irc.mozilla.org/webapi">#webapi</a></li> -</ul> - -<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p> - -<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2> - -<ul> - <li>The <a href="/en-US/docs/DOM" title="Document Object Model (DOM)">Document Object Model (DOM)</a> is the representation of an HTML document as a tree.</li> - <li><a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a> - Scripting language for the Web.</li> - <li><a href="/en-US/docs/WebAPI/Doc_status" title="WebAPI/Doc_status">Doc status</a>: A list of WebAPI topics and their documentation status.</li> -</ul> -</div> -</div> - -<p> </p> - -<p> </p> diff --git a/files/ru/web/xpath/funkcje/floor/index.html b/files/ru/web/xpath/functions/floor/index.html index 9679445bcf..9679445bcf 100644 --- a/files/ru/web/xpath/funkcje/floor/index.html +++ b/files/ru/web/xpath/functions/floor/index.html diff --git a/files/ru/web/xpath/funkcje/index.html b/files/ru/web/xpath/functions/index.html index 9755985bd5..9755985bd5 100644 --- a/files/ru/web/xpath/funkcje/index.html +++ b/files/ru/web/xpath/functions/index.html |